一,前言
首先要说一下,距离上一篇全栈笔记的更新大概有半个月了
这段时间基于Vue-cli3和Ant-Design-Vue做了一个后台管理的Demo
我也想把这个思考学习的过程记录下来,所以在博客和Git上对整个过程做了记录
一步一步实现一个开箱即用的后台管理平台模板,功能完备之后再对各部分做优化
回过头来继续说<<全栈笔记>>,上一篇的HTML5的基本结构(上)
详细介绍了:HTML的基本组成,DOCTYPE文档声明,Title标题和meta元信息
本篇HTML5的基本结构(下),主要针对"HTML文件的内容区"即<body></body>部分
介绍日常开发中高频,重要的标签及语义,也作为后续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后续部分将对以上标签逐个进行深入介绍,并列举他们之间的不足和使用场景
时间比较短,可能会遗漏掉一些重要标签,后续继续完善
