全栈笔记-前端-第一部分:HTML5+CSS3-03-HTML5的基本结构(下)-常用标签分类和介绍

一,前言

首先要说一下,距离上一篇全栈笔记的更新大概有半个月了
这段时间基于Vue-cli3和Ant-Design-Vue做了一个后台管理的Demo
我也想把这个思考学习的过程记录下来,所以在博客和Git上对整个过程做了记录
一步一步实现一个开箱即用的后台管理平台模板,功能完备之后再对各部分做优化

回过头来继续说<<全栈笔记>>,上一篇的HTML5的基本结构(上)
详细介绍了:HTML的基本组成,DOCTYPE文档声明,Title标题和meta元信息

本篇HTML5的基本结构(下),主要针对"HTML文件的内容区"即部分
介绍日常开发中高频,重要的标签及语义,也作为后续HTML部分的总览

---

二,常用标签分类

分类	功能
网站结构类标签	用于创建HTML文件
文件引入类标签	用于引入外部文件,为标签添加样式
布局类标签	用于实现网页整体布局
段落文本类标签	用于实现单行布局
表格类标签	用于制作表格
表单类标签	制作表单
链接&图片类标签	添加锚点和图片应用
低频标签	较少使用

---

三,网页结构类标签

标签	语义
html	网页文档,用于包含HTML文件
body	网页主体/内容区
head	网页头部
meta	网页元信息
title	网页标题

---

四,文件引入类标签

标签	语义
link	通过网页外部链接,将外部文件,如:CSS等,引入当前文件
style	网页样式
script	用于定义或引入外部的网页脚本

---

五,布局类标签

标签	语义	说明
div	Division(分割)	在文档中定义一块区域(包含框)
h1	Header 1(标题1)	定义一级标题
h2	Header 2(标题2)	定义二级标题
h3	Header 3(标题3)	定义三级标题
h4	Header 4(标题4)	定义四级标题
h5	Header 5(标题5)	定义五级标题
h6	Header 6(标题6)	定义六级标题
p	Paragraph(段落)	定义段落结构
ol	Ordered List(有序列表)	定义有序列表
ul	Unordered List(无序列表)	定义无需列表
li	List Item(列表项目)	定义具体的列表项
dl	Definition List(自定义列表)	自定义列表
dt	Definition Term(定义术语)	定义自定义列表的标题
dd	Definition Description(定义描述)	定义自定义列表的内容
hr	Horizontal Rul(水平线)	定义一条水平分割线

---

六,段落文本类标签

标签	语义	说明
span	Span(范围)	在文本行中定义一个区域(包含框)
em	Emphasized Text(加重文本)	定义文本为重要
strong	Strong Text(加重文本)	定义文本为很重要
br	Break(换行)	定义文本内部换行(不是创建新段落)
b	Bold Text(加粗文本)	定义文本加粗
i	Italic Text(斜体文本)	定义文本倾斜

---

七,表格类标签

标签	语义	说明
table	Table(表)	定义一个表格
caption	Table Caption(表格标题)	定义表格的标题
thead	Table Header(表格头部)	定义表格的头部区域
tbody	Table Body(表格主体)	定义表格的主体(内容)区域
tfoot	Table Footer(表格脚)	定义表格的脚部区域
col	Table Columns(表格列)	定义表格的列区域
colgroup	Group of Table Columns(数据列组)	定义表格的数据列组
tr	Table Row(行)	定义表格行
td	Table Data Cell(表格数据单元)	定义表格单元格
th	Table Header Cell(表头数据单元)	定义表格的表头单元格(列标题)

---

七,表单类标签

标签	语义	说明
form	Form(形状)	定义表单
fieldset	Field Set(域组)	定义表单的字段域
legend	Legend(图例)	定义表单字段域的标题
label	Label(标签)	定义表单的控制标签
input	Input Field(文本区域)	定义表单输入域
textarea	Text Area(文本区域)	定义表单属于区域
select	Selectable List(可选择的列表)	定义下拉菜单或列表框
option	Option(选项)	定义下拉选项或列表选项
optgroup	Option Group(选项组)	定义下拉选项组
button	Push Button(发送按钮)	定义表单的发送按钮

---

八,链接&图片类标签

标签	语义	说明
a	Anchor(定义锚)	超链接
img	Image(定义图像)	定义图像包含框

---

九,低频标签

标签	语义	说明
city	Citation(引用)	定义引文
address	Address(地址)	定义地址
big	Big Text(大文本)	定义文本增大
small	Small Text(小文本)	定义文本缩小
samp	Sample(示例)	定义样本示例
sub	Subscripted Text(下标文本)	定义文本下标
sup	supscripted Text(上标文本)	定义文本上标
u	Underlined Text(下画线文本)	定义文本下画线
q	Quotation(引用语)	定义一段文字中的引用短语
blockquote	Block Quotation(区块引用语)	定义大块内容的引用
abbr	Abbreviation(缩写词)	定义缩写词
acronym	Acronym(取首字母的缩写词)	定义取首字母的缩写词
kbd	Keyboard Text(键盘文本)	定义键盘键
code	Code Text(源代码)	定义计算机源代码
tt	Teletype Text(打印机文本)	定义打印机文本
dfn	Defines(定义条目)	定义条目
var	Variable(变量)	定义变量

---

十,注释

出于对代码可读性的考虑,可能会为Html,js,css添加注释,便于开发者维护
在HTML布局发生错乱时,也经常会暂时注释一部分代码来排查和定位布局问题

在Html中使用表示注释内容
表示注释结束
注释可以单行也可以注释多行内容

当浏览器读取到第一个时,表示注释结束
所以,如果在原有注释外部在进行注释会出现问题
建议将原有注释删除,重新注释,防止出现问题

---

十一,结尾

本篇简单介绍了开发中常用到的标签,包含分类,语义及功能说明
HTML后续部分将对以上标签逐个进行深入介绍,并列举他们之间的不足和使用场景

时间比较短,可能会遗漏掉一些重要标签,后续继续完善

---

维护记录:
20190929:修改错别字