HTML标签总览

标签

H系列标签

作用：用于文本添加语义。
格式：<h1>xxxxxx</h2>
tips:

• H系列标签不是用于修改文本样式的
• H标签一共有6个，h1-h6，超过六个默认无效
• 被H系列标签包裹的内容独在一行
• H系列标签中，H1字体最大，H6字体最小。

在企业开发中，慎用H系列标签，特别是H1，企业开发中一个界面只能出现一个H1标签（和SEO标签）。

P标签

作用：告诉浏览器哪些文字是一个段落。
格式:<p>xxxxxxxx</p>

Hr标签

作用：在浏览器中显示一条分割线
格式：<hr />
tips:

• 在浏览器中独占一行
• hr标签写“/”也可不写也可：HTML规范中不写“/”，XHTML规范中写“/”。前端开发时，按照高级开发工具自动生成即可。

img标签

作用：告诉浏览器需要显示一张图片
格式：<img src=“ ”>（src=图片需要显示的名称）
img标签不会独占一行

属性;
1.height和width：告诉需要显示图片的高度和宽度。

• 若无指定宽高，则系统会按照默认宽高显示。
• 若用img的属性制定了宽高，有可能会导致图片变形。
• 若只指定宽，高中的一个，则系统自动计算另一个的值，图片就不会变形，而是等比拉伸.

2.title:当鼠标悬停在图片上时，需弹出描述框描述图片大致内容

3.alt：需显示的图片找不到时，则显示alt中内容。

br标签

作用：换行
格式：当前行末尾<br>
tips:

• 可多个br标签连续使用
• br语义：不另起一个段落换行。
• 在企业开发中：一般换行都是为了另起一个段落，所以br很少使用。

路径问题

给src赋值方式：
1.相对路径赋值：每次都从.html所在文件夹开始查找
（1）同级：图片和.html在同一个文件夹

• 格式：src=“图片名”
• 含义：在.html文件所在文件夹下查找名为“ 图片名 ”的图片

（2）下级：存储图片所在文件夹和.html文件同在一个文件夹

• 格式：src=“”图片所在文件夹/图片名
• 含义：在.html所在文件夹找到图片所在文件夹，然后在该文件夹中找到图片。

（3）上级：存储图片的位置和存储.html文件夹为同一文件夹

• 格式：src=”../图片名“
• 含义：在.html所在文件夹找到该文件夹的上一级文件夹并在上一级文件夹中找到图片
• . . / 代表从当前位置找到上一级文件夹

2.绝对路径赋值：每次都从指定盘符开始查找（了解）

• 路径中不要出现中文，否则可能出现未知问题

• 如果通过相对路径来指定，则不能跨盘符

• 企业开发中如需编写路径，统一使用反斜杠 ：/
  原因：可能部署到其他操作系统的服务器上，而其他操作系统的路径都是 / ，如果我们自己写的不是 / ，可能引发问题。

• 企业开发中一般不会使用绝对路径，因为可移植性不好。

a标签

作用：用于控制页面和页面之间的跳转
格式：<a href="指定需要跳转的目标界面">需要展现给客户查看的内容</a>

• a标签不仅让文字可以点击，也可以让图片点击

href属性

• 一个a标签必须有一个href属性，否则a标签不知道跳转到哪里
• 如果通过a标签的href属性指定一个URL地址，那么必须在前面加上http://或https://
• href属性除了指定一个网络地址以外还可以指定一个本地地址。

a标签的target属性：

• 作用：专门用于控制如何跳转。
• _self:用于在当前选项卡中跳转，不新建页面跳转（默认是_self）
• _blank：在新的选项卡中跳转，即新建页面跳转

title属性：和img标签中的title一样，用于控制鼠标悬停时提示的文本信息

base标签

作用：用于来统一指定当前页面所有的超链接（a标签）的跳转方式
格式：<base target= />

• base标签必须写在head标签的开始标签和结束标签之间
• 如果既在base中制定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。

假链接

点击之后不会跳转的链接
存在意义：在企业开发前期，其他页面还未开发，使用假链接来代替跳转目的地址，当后期其他界面都已开发完成后再替换为真连接

格式：

• #
• .javascript

区别：
**#**会自动回到访问页顶部，另一种不会

锚点

1.要想通过a标签跳转到指定位置，那么必须给a标签一个独一无二的”身份证号码“，这样a标签才能在当前页面中找到需跳转到的目标位置
2.如何给html标签一个”身份证号码“
在html中，每个标签都有一个id属性。该属性用来给标签赋值，即”身份证号码“

格式：

<a href="#值">     </a>
<h2 id="值">      </h2>

• 通过a标签跳转到指定位置是没有过渡动画的
• a标签除了跳转至当前页面的指定位置还可以跳转到其他页面的指定位置
• 格式：
• <a href="目标页面名称#值" target=”_blank">跳转到目标界面</a>
• <h2 id="值">值</h2>

列表

列表标签：
作用：给一堆数据添加一个列表语义，告诉搜索引擎和浏览器这一对数据是一个整体

HTML中列表标签分类：

• 无序列表：unordered list （应用最多）
• 有序列表：ordered list （应用最少）
• 定义列表：definition list （应用其次）

无序列表

作用：给数据添加列表语义，数据无先后之分
格式：

<ul>
    <li>需要显示的条目内容</li>
</ul>

• ul标签用来添加列表语义，而不是添加小圆点的
• ul标签和li标签是一个组合，即整体，一起出现，不会单独出现
• ul标签不推荐包含其他标签
• 虽然通过标签属性可以修改样式，但企业开发中不可用
• 企业开发中，li标签的内容可能会很复杂，可在li标签中添加其他标签来丰富页面

总结：ul标签中最好只放li标签，li标签可用其他标签来丰富内容，包括可在li标签中添加新的ul标签

在webstorm中快速编写一个ul格式：ul>li*3
含义：生成一堆ul标签，并在ul便签中生成一个li标签，*3即为三个li标签

有序列表（了解）
作用：添加列表语义，数据有先后之分

定义列表
格式：

<dl>
   <dt>  </dt>     定义列表
   <dd>  </dd>   定义标题对应的标题
 </dl>

作用：给数据添加列表语义，通过dt标签定义标题，通过dd对标题进行描述，添加描述信息。

应用：做网站尾部相关信息，做图文混排

• 和ul/ol与li 一样，dl和dt，dd也是一个整体，一般情况下不会单独出现
• dl标签中也建议只放dt，dd标签
• 一个dt标签可以没有对应的dd标签，也可以对应多个dd标签（不推荐）
• 为了丰富界面可在dt和dd中添加其他标签

表格（了解）

表格标签作用：
1.用来给一堆数据添加列表语义
2.表格是数据的一种展现形式，当数据量非常大的时候，表格被认定为是最清晰的展现形式

格式：

<table>
       <tr>
            <td>   </td>
       </tr>
 </table>

table:整个表格
tr：表格中的一行
td：一行中的一个单元格

表格有一个边框属性，该属性决定了边框的宽度，默认值为零

border=“  ”

宽度和高度属性：可在table和td中使用

• 表格的宽度和高度默认按照内容尺寸调整，也可通过设置width和height属性来手动指定
• 若给td设置width和height属性，只会修改当前单元格的宽度和高度，不会影响整个表格

水平对齐属性：table，tr，td中均可使用

• 给table设置align属性。可以控制水平方向对齐方式
• 给tr设置align属性，可控制当前行所有单元格的水平对齐方式
• 给td设置align属性，可控制当前单元格中内容的水平对齐方式
• 如果tr和td中都设置了align属性，单元格会按照td中的设置来对齐

垂直对齐属性：tr，td中可使用

• 给tr设置valign属性，可控制当前行所有单元格内容在垂直方向上的对齐方式
• 给td设置valign属性，可控制当前单元格的垂直对齐方式
• tr和td均设置了valign属性的情况下，单元格会按照td中的设置来对齐

外间距和内间距的属性：只有table可使用

• 外间距：cellspacing
  单元格与单元格之间的距离，默认外间距为2px

• 内间距：cellpadding
  单元格边框与文字边框的距离，默认边距为1

在表格标签中，不可通过外边距为0来实现细线表格

细线表格的制作方式：

1. 给table设置bgcolor
2. 给tr设置bgcolor
3. 给table设置cellspacing=“1px”

表格标题：<caption>
1.写在table中，否则无效
2.紧跟在table后面，只要将标题写在caption中标题会自动相对于表格居中

th标签
作用：专门用来存储每一页的标题，只要将当前列的标题储存在th标签中，就会自动居中加粗

td标签
作用：专门存储数据

表格的结构（浏览器会自动添加）
由于存储的数据比较复杂，为了方便管理和阅读，提升语义，可对存储的数据进行分类

分类：4类

• 表格标题，表头信息，主题信息，页尾信息

表格完整结构：

<table>
      <caption>表格标题</caption>
      <thead>
             <tr>
                   <th>每一列的标题</th>
             </tr>
      </thead>
      <tbody>
             <tr>
                   <td>数据</td>
             </tr>
      </tbody>
      <tfoot>
             <tr>
                   <td>数据</td>
             </tr>
      </tfoot>
</table>

如果没有编写tbody，系统会自动添加
如果指定了thead和tfoot，那么修改表格高度时，thead和tfoot有自己的默认高度，不会随着表格高度的改变而改变

1.水平方向上单元格合并

• 在td标签中添加一个colspan属性，来指定把某一个单元格当作多个单元格来看待
• 单元格只能向下向后合并，不能向前向上

2.垂直方向上单元格合并

• 在td标签中添加一个rowspan属性。

表单

表单标签作用：收集用户信息
表单元素：即HTML中的标签，只不过比较特殊，在浏览器中所有的表单标签有特殊的外观和默认功能

格式：

<form>
      <表单元素>
<form>

input标签

具有type属性，type属性有很多类型的取值，取值不同就决定了input的功能和外观不同

1.明文输入框：

_______:<input type="text">

2.暗文输入框：

_______:<input type="password">

3.给输入框设置默认值，添加value属性
4.单元框：

<input type="radio">______ 

• 默认情况下，单选框不互斥，要相互吃，必须给每一个单选框设置一个name属性，同时设置相同值
• 要想单选框默认选中一个选项，则给input添加一个checked属性
• 若属性和名称内容一样可以只写一个，在XHTML中必须写上取值，企业开发中推荐不要省略

5.多选框：

<input type="checkbox">_________

6.普通按钮：button
通过value属性给按钮在指定标题
作用：配合js完成一些操作

7.图片按钮：

<input type="image" src="  ">

8.重置按钮：

<input type="reset">

• 作用：用于清空已经填好的数据
• 可通过value来修改外观

9.提交按钮：submit
作用：将表单中已经填好的数据提交到远程服务器

想要将数据提交到远程服务器必须满足两个条件：

• 给form表单添加一个action属性，指定需要提交到的服务器地址
• 给表单元素添加一个name属性

10.隐藏域：hidden
作用：配合提交Annie悄悄提交到服务器

Label标签

默认情况下，文字和输入框没有关联，即点击文字，对应的输入框不会锁定，若想文字和输入框绑定，则用Label标签

格式：

• 将文字利用Label标签包裹起来
• 给输入框添加一个id属性
• 在label标签中通过for属性和输入框中的id进行绑定即可

<label for="account">账号</label>
<input type="text" id="account">

以下这种格式也可，但有局限性不能交叉绑定

<label>
   账号<input type="text">
</label>

datalist标签

作用：给输入框绑定选项
格式：

<datalist>
        <option>待选项内容</option>
</datalist>

如何让给输入框绑定待选列表：

1. 搞一个输入框
2. 搞一个datalist列表
3. 给datalist添加一个id
4. 给输入框添加一个list属性，将id的值赋值给list

select标签

作用：用于定义下拉列表
格式：

<select>
      <optgroup label="分组名称">
      <option>列表数据</option>
</select>

• 下拉列表不能输入内容，只能在列表中选择
• 可通过给option添加一个selected属性来设置默认选项
• 包裹一层optgroup标签来给下拉标签分类

textarea标签

作用：定义一个多行输入行

• 默认下可以无限换行
• 默认下输入框有自己的高度和宽度，可以通过cols和rows来指定输入框的宽度和高度
• 默认情况下可以手动拉伸

除了按钮类型的input标签意外，其他类型的标签都可以通过value指定提交到服务器的值

fieldset标签

作用：给表单添加边框
位置：form标签下
legend可以给边框添加一个标题

video标签

作用：播放视频
格式：

<video src="">
</video>

属性：

1. src属性：告诉video标签播放地址
2. autoplay：是否自动播放视频
3. controls：是否显示控制条
4. poster：用于视频播放前显示一张占位图片
5. loop：一般用于做视频广告，是否循环播放
6. preload：预加载视频，和autoplay属性相冲突，设置了auto play，preload即失效
7. muted：静音
8. width/height：同img标签

第二种格式：

<video>
<source src="" type=""></source>
</video>

原因：由于视频数据十分重要，五大浏览器厂商都不愿意支持其他视频格式，为了解决适配问题，W3C推出了第二种video格式。

• 通过第二章格式可适配所有浏览器，前提条件是，浏览器支嗤html5标签

audio标签

用于播放音频
与video的使用基本一直，属性除了width，poster，height其他均可使用

detail标签

格式：

<details>
       <summary>概要信息</summary>
       详情信息
</details>

作用

• 描述概要信息
• 描述详情信息，默认情况下折叠显示，查看详情点击即可

marquee标签

非W3C推荐标签，但五大浏览器支持
作用：跑马灯
格式

<marquee>内容</marquee>

属性：

• direction：控制方向
• scrollamount：设置滚动属性，值越大，滚动越快
• loop：设置滚动次数，默认为-1，即无限滚动
• behaviour：设置滚动类型：
  slide，滚动到边界即停止
  alternate：滚动到边界弹回

HTML中被废弃的标签

早期HTML中的一部分标签没有语义，用于修改样式

<b>加粗
<u>下划线
<i>倾斜
<s>加删除线

strong标签 代替 b标签
语义：定义重要性强调的文字

ins代替u
语义：定义插入的文字

em代替i
语义：定义强调的文字

del代替 s
语义：定义被删除的文字

在企业开发中，不到万不得已不要使用，如果一定要使用，一般情况下作为css的钩子来使用

在HTML中，对空格，回车，table键不敏感，会把多个空格，回车，table当作一个来处理
&nbsp：空格
&copy：版权符号

字符实体：
在HTML中的字符是被保留的，有的字符是有特殊含义的，是不能通过浏览器直接显示出来的，那么若想显示必须通过字符实体
一定要加分号