HTML常用标签

HTML概念

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容。

基础标签

标题标签

标题（Heading）是通过 < h1 > - < h6 > 标签进行定义的。< h1 > 定义最大的标题。 < h6 > 定义最小的标题。标题标签默认具有加粗效果，最小字体是16像素，最大是42像素,在网页中默认字体大小最小为16px/1em，1em=16px。

<h1>一级标题标签，有加粗效果，字体比较大</h1>
<h2>二级标题标签，有加粗效果，字体比一级的小</h2>
<h3>三级标题标签，有加粗效果，字体比二级的再小点</h3>
<h4>四级标题标签，有加粗效果，字体比三级的再小点</h4>
<h5>五级标题标签，有加粗效果，字体比四级的再小点</h5>
<h6>六级标题标签，有加粗效果，字体比五级的再小点</h6>
<h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果</h7>

段落标签

段落标签包裹的内容代表是一个段落，但是呢，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已。

<p>
  我是一个段落，但是没有任何的特点，只具备段落的含义而已
</p>

列表标签

1无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写。

<ul type="disc">
  <li>华硕</li>
  <li>联想</li>
  <li>惠普</li>
</ul>

2有序列表，带有顺序，type指定排序类型，start指定开始的位置。

<ol type="A" start="3">
  <li>河南</li>
  <li>广州</li>
  <li>山东</li>
</ol>

3自定义列表 dt相当于标题 dd相当于是描述，自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

<dl>
  <dt>水果</dt>
  <dd>苹果</dd>
  <dd>香蕉</dd>
  <dt>蔬菜</dt>
  <dd>卷心菜</dd>
  <dd>鸡毛菜</dd>
</dl>

其他标签

< !DOCTYPE html > 声明为 HTML5 文档
< html > 元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< br >标签相当于回车
< hr >标签在 HTML 页面中创建水平线。
< !-- – >可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

图片标签

用于引入图片在网页中进行显示，开发常用，重点注意其相对路径的使用方式，在 HTML 中，图像由< img > 标签定义。< img > 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
src：用于指定图片所在的路径
相对路径：图片相对于HTML文件所在的位置
./表示在当前目录下
…/表示返回上一级目录
绝对路径：指的是图片在电脑上的存储路径（包含到了盘符路径）
alt：用于作为图片加载失败时的文字提示
title：当鼠标在图片上悬浮时显示的提示（title属性是所有的标签都具备的一个属性）
width：设置图片的宽度
height：设置图片的高度（一般只需要设置宽度，图片根据本身大小适应）

<img src=".img/image.jpg" alt="图片未找到" title="小林家的龙女仆" width="100px" height="100px">

超链接标签

超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，HTML使用标签 < a >来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签< a > 中使用了href属性来描述链接的地址。
href：指定要跳转的网页链接
target：指定新窗口的打开方式
_blank：代表打开一个新窗口
_top：在当前窗口中打开

<a href="http://www.baidu.com" target="_top" title="http://www.baidu.com">点击访问百度</a>
<hr>
<!-- 以图片作为跳转的方式 -->
<a href="http://www.baidu.com"><img src="img/image.jpg" alt=""></a>
<hr>
<!-- 当在设置超链接时，此时还不确定要跳转的链接地址，使用#作为占位符，代表当前页面 -->
<a href="#">跳转到指定服务器地址</a>

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转.

<!-- 头 -->
<a id="top" href="#buttom">跳到尾部</a>
<p>我是头</p>

<p>中间省略一千行</p>

<p>我是尾</p>
<!-- 尾 -->
<a id="buttom" href="#top">跳到首页</a>

<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="position"></a>
<!--页面B中进行跳转-->
<a href="A.html#position">回到超链接跳转的页面</a>

table表格

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
< table > 标签定义 HTML 表格
一个 HTML 表格包括 < table > 元素，一个或多个 < tr >、< th > 以及 < td > 元素。
< tr > 元素定义表格行，< th > 元素定义表头，< td > 元素定义表格单元。
更复杂的 HTML 表格也可能包括 < caption >、< col >、< colgroup >、< thead >、< tfoot > 以及 < tbody > 元素。
border：规定表格单元是否拥有边框。
cellpadding：规定单元边沿与其内容之间的空白。
cellspacing：规定单元格之间的空白。
width：规定表格的宽度。
表格优点

​ 1.布局简单（因为就是纯表格的区域划分）
​ 2.样式统一（只要确认好第一行的样式，后面的都会跟着变）

表格缺点

​ 维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
  <thead>
    <tr>
      <th rowspan="2">编号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>福欧文</td>
    <td>男</td>
  </tr>
  <tr>
    <td>1</td>
    <td>福欧文</td>
    <td>男</td>
  </tr>
</table>