HTML标签基本学习

---

前言

学习HTML的最重要的就是其中的标签，标签构成了整个我们要编写网页的主体结构，所有对标签的学习是一定要深入。

---

一、标签是什么？

  HTML标签是由尖括号（<>）括起来的关键字，通常都是一对同时出现，但是也有只有一个的标签。
  列如：1.html /html 2.body /body等

二、标签的作用?

  标签的作用是构成HTML界面的整体结构的布局和实现某些功能。

三、标签分类（常用）

3.1、文件标签

  构成html最基本的标签

1. html
     html文档的根标签
2. head
     头标签。用于指定html文档的一些属性。引入外部的资源
3. title
     定义标题的标签。
4. body
     体标签。即内容显示页面
5. !DOCTYPE html
     html5中定义该文档为html文档

3.2、文本标签

  和文本有关的标签

1. 注释：
   !-- 注释内容 –
2. h1 to h6
   标题标签 h1到h6,字体大小随着数值变大而变小（h1 文本内容/h1）
3. p
   段落标签

   文本内容

4. br
   换行标签。自闭和标签，在需要换行的文本后
   
5. hr
   显示一条水平线，自闭和标签
     5.1. 属性
     color:颜色
     width:宽度
     size:高度
     align:对齐方式
     center：居中
     left:左对齐
     right：右对齐
6. b：字体加粗
7. i：字体斜体
8. font：字体标签
     属性定义
     color:
   英文单词：red,green,blue
   rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
   #值1值2值3：值的范围：00~FF之间。如：#FF00FF
     width:
   数值：width=‘20’，数值的单位，默认是px(像素)
   数值%:占比相对于父元素的比例
9. center：文本对齐

3.2、图片标签：

img：展示图片 img src=“相对路径”
  1. 相对路径：
以.开头的路径： ./：代表当前目录 ./image/1.jpg
…/:代表上一级目录
  2. 属性
src:指定图片的位置

3.3、列表标签

有序列表

1. ol
   定义有序列表 。 ol 文本内容 /ol
   属性：type=‘A’ 定义序列符号
2. li
   列表的每一个项 。li 文本内容 /li

无序列表

1. ul
   定义无序列表 ul 文本内容 ul
   属性：type=‘值’
2. li
   列表的每一个项 。li 文本内容 /li

3.4、（超）链接标签：

a:定义一个超链接
  例：a href=“资源位置” target="_blank//_self" 内容 /a
属性：
  href=“资源位置”（指定访问资源的URL，URL：统一资源定位符）
  target="_blank//_self"(_blank:在一个空白页面跳转，_self（默认值）：在当前页面跳转)

3.5、表格标签

1. table：定义表格
   属性：
   border=“1” 边框
   width：宽度
   cellpadding：定义内容和单元格的距离，一般也为0
   cellspacing：定义单元格之间的距离，如果指定为0，则单元格线合为一条
   bgcolor：背景色
   align：对齐方式
2. tr:定义行
   属性
   bgcolor：背景色
   align：对齐方式（文本内容）
3. td：定义单元格
   属性：
   colspan：合并列
   rowspan:合并行
4. th：定义表头单元格 ：表格标题
5. thead：表示表格的头部分
6. tbody：表示表格的体部分
7. tfoot：表示表格的脚部分

---

总结

HTML中的标签很多，所有我们对它的学习，不能只停留在阅读上还应该去动手打，去编写HTML页面。