一,前言
首先要说一下,距离上一篇全栈笔记的更新大概有半个月了
这段时间基于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后续部分将对以上标签逐个进行深入介绍,并列举他们之间的不足和使用场景
时间比较短,可能会遗漏掉一些重要标签,后续继续完善
维护记录:
20190929:修改错别字
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
