HTML知识

2021-11-06 00:46:14

简介

  • 结构用于对网页元素进行整理和分类，身体，HTML。
  • 表现用于设置网页元素的板式、颜色、大小等外观样式，装饰CSS。
  • 行为是指网页模型的定义及交互的编写，动作，JavaScript。

结构标签(骨架标签)

  • 每个网页都有一个基本的结构标签
  • HTML标签
    • 根标签，所有html语言都在其内部
    <html></html>
  • 网页头部
    • 在头部中一定要设置标题title 
    <head></head>
  • 网页标题
    • 当前网页的名字
    <title></title>
  • 网页主体
    • 页面中的内容都在主体中
    <body></body>
  • 范例
<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE>

  • 文档类型声明标签
  • 告诉浏览器使用哪个版本的HTML来显示网页
  • 使用HTML5版本来显示网页
    <!DOCTYPE html>

lang

  • 定义当前文档显示的语言
  • 若需要使用浏览器翻译当前网页，则需要用到
  • en为英语
  • zh-CN为中文
<html lang="en">

charset

  • 规定HTML文档使用的字符编码
  • UTF-8为万国码，基本包含了所有国家的字符
  • 若不设置编码格式，可能会出现乱码
  • 写在title标签中
<title>
  <meta charset="UTF-8">
</title>

标题标签

  • 共有6级，h1~h6
  • 一个标题单独占一行
<h1>1</h1>
<h2>2</h2>
···

段落标签

  • 将文字分段
  • 段落之间有间距
<p>一个段落<p>

换行标签

  • 换行
<br />

加粗标签

  • 将文字加粗
<strong>加粗</strong>
<b>加粗</b>

倾斜标签

  • 将文字倾斜
<em>倾斜</em>
<i>倾斜</i>

删除线标签

  • 文字中间有一条线
<del>删除线</del>
<s>删除线</s>

下划线标签

  • 文字下面有一条线
<ins>下划线</ins>
<u>下划线</u>

盒子标签

  • div
    • 独占一行，一行只能有一个div
    • 大盒子
    <div>大盒子</div>
  • span
    • 一行可以有多个span
    • 小盒子
    <span>小盒子</span>

图像标签

  • 用来设置HTML页面中的图像
  • 属性
    • src
      • 用于指定图像文件的路径和文件名
      • 是图像标签必须添加的属性
    • alt
      • 若图像不能显示时，显示的文字
    • title
      • 鼠标放到图片上时，显示的文字
    • width
      • 图像的宽度
    • height
      • 图像的高度
      • 高度和宽度只需要设置一个即可，另一个会根据比例进行缩放
    • border
      • 图像边框的粗细
      • 边框一般通过CSS进行修改
  • 范例
<img src="./image/1.jpg" alt="替换文本" title="提示文本" width="250" height="250" border="3" />

路径

  • 目录文件夹

    • 就是存放所有文件的最外面那个文件夹，即项目文件夹

  • 根目录

    • 打开目录文件夹的第一层就是根目录

  • 绝对路径

    • D:\image\a.jpg
    • https://www.phd99.com/images/a.jpg

  • 相对路径

    • 当前文件夹中的image文件夹下的a图片
      • image/a.jpg
      • 或者./image/a.jpg
    • 当前文件夹的上一级文件夹中的image文件夹
      • ../image

超链接标签

  • 从一个页面跳转到另一个页面
  • 属性
    • herf指定要跳转的页面的url地址
      • 当值为#时，为空链接
    • target指定如何打开跳转页面
      • _self在当前窗口打开，默认
      • _blank在新窗口中打开
    • 范例
    <a href="https://www.phd99.com" target="_parent">新页面</a>
  • 锚点链接
    • 点击时可以直接定位到页面中的某个位置
    <a href="#phd">跳转到id属性值为phd的标签处</a>

注释标签

  • 快捷键ctrl + / 
<!-- 这是一个注释 -->

特殊字符

  • 空格&nbsp; 
&nbsp;
  • 大于
&lt;
  • 小于
&gt;
  • 和
&amp;
  • 人民币
&yen;
  • 版权
&copy;
  • 注册商标
&reg;
  • 摄氏度
&deg;
  • 正负号
&plusmn;
  • 乘号
&times;
  • 除号
&divide;
  • 平方
&sup2;
  • 立方
&sup3;

表格标签

  • table用于定义表格
  • tr用于定义一行
  • td用于定义一行中的一列
  • th表头单元格，里面的单元格会加粗居中显示，一般用于表格的第一行
  • 属性
    • align，对齐方式
    • border，设置表格是否有边框
    • cellpadding，文字和单元格边框之间的距离
    • cellspacing，单元格之间的距离
    • width，表格的宽度
<table align="center" border="1" width="200" cellpadding="1" cellspacing="1">
    <tr>
        <th>第1行第1列</th>
        <th>第1行第2列</th>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
    </tr>
</table>

表格头部标签

  • <thead>
  • 表头区域，表头部分

表格主题标签

  • <tbody>
  • 主体区域，表格的内容部分
<table align="center" border="1" width="200" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th>第1行第1列</th>
            <th>第1行第2列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列</td>
        </tr>
    </tbody>
</table>

列表标签

无序列表

  • 无顺序
  • 用<ul>表示无序列表，<ul>标签中只能有<li>标签
  • 用<li>表示列表中的一项，<li>标签中放其他标签
<ul>
     <li>啊啊</li>
     <li>嗯嗯</li>
     <li>嘿嘿</li>
</ul>

有序列表

  • 有顺序
  • 用<ol>表示有序列表，<ol>标签中只能有<li>标签
  • 用<li>表示列表中的一项
<ol>
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>

自定义列表

  • 对列表中的信息有一个整体的描述
  • 用<dl>表示自定义列表，<dl>标签中只能有<dt>和<dd>标签
  • 用<dt>表示最上面的描述标题
  • 用<dd>表示描述标题下面的每一个小标题
<dl>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>

表单标签

表单域

  • <form>
  • 属性
    • action用于指定接收并处理表单数据的服务器程序的url地址
    • method用于设置表单数据的提交方式，其取值为get或post
    • name用于指定表单的名称，以区分同一个页面中的不同表单域

表单元素

input

  • 输入表单元素
  • type属性值
    • button按钮
    • checkbox复选框，要有相同的name属性值
    • file定义输入字段和“浏览”按钮，供文件上传
    • hidden定义隐藏的输入字段
    • image定义图像形式的提交按钮
    • password定义密码字段
    • radio定义单选按钮,要有相同的name属性值
    • reset定义重置按钮，会清除表单中的所有数据
    • submit定义提交按钮，提交按钮会把表单数据发送到服务器
    • text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
  • checked属性值
    • 单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮
    • checked="checked"
  • maxlength属性值
    • 规定输入字段中的字符的最大长度
<form action="test.php" method="post" name="1">
    <input type="text" maxlength="10"><br>
    男<input type="radio" name="sex" value="男" checked="checked">
    女<input type="radio" name="sex" value="女">
</form>

select

  • 下拉表单元素
  • <option>标签用来表示下拉列表中的选项
  • selected属性设置默认选择
<form>
    <select>
        <option>学生</option>
        <option>警察</option>
        <option>医生</option>
        <option selected="selected">教师</option>
    </select>
</form>

textarea

  • 文本域元素
  • 可以输入多行文字
  • 常见于留言板、评论
  • 属性
    • cols一行显示的字符数
    • rows显示的行数
<form>
    <textarea cols="10" rows="2">
        内容
    </textarea>
</form>

标注标签

  • <label>
  • 当点击label标签对应的位置时，其完成的功能就是与for属性值相同的id属性值对应的其他标签所完成的功能。
  • 鼠标点击“男”的位置，也能实现单选功能
<form action="test.php" method="post" name="1">
    <label for="nan">男</label>
    <input id="nan" type="radio" name="sex" value="男" checked="checked">
    <label for="nu">女</label>
    <input id="nu" type="radio" name="sex" value="女">
</form>

HTML知识

上一篇：css定位


下一篇：js 内置对象