目录
语义化标签
1.语义化标签的优点
语义化标签就是使用正确的标签做正确的事!
- 代码结构得到了优化,提高了代码的可读性,便于开发人员代码编写;
- 有利于搜索引擎优化;
2.常用的语义化标签
[1]a
- 实现超链接;
[2]img
- 回显图片
[3]p
- 添加段落;
[4]h1-h6
- h1等级最高,h6等级最低;
[5]strong
- 表示强调,字体会加粗;
[6]em
- 表示强调,字体会倾斜;
[7]ul
- 无序列表,里面仅能嵌套li标签;
[8]ol
- 有序列表,里面仅能嵌套li标签;
[9]table
- 表格
- tr :行
- th:表头单元格(文本会加粗)
- td:单元格
- caption:表标题
[10]input
- input输入框用来进行信息交互;
html5新增的语义化标签
[1]header
- 通常包含一组介绍或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称等;
[2]nav
-
主要用来放一些热门的链接导航栏(很多不热门的使用footer标签)
-
<nav> <ol> <li class="crumb"><a href="#">Bikes</a></li> <li class="crumb"><a href="#">BMX</a></li> <li class="crumb">Jump Bike 3000</li> </ol> </nav>
[3]aside
- 一般用于侧边栏
[4]main
- main标签主要用于文档得主体部分(一个页面中仅能使用一次);
[5]figure标签
-
figure(/fɪɡə®/)标签为html5新增的标签;
-
主要是用来定义独立的流内容(图文混合/图表混合/图代码段混合等);
-
figcaption(/ˈkæpʃ(ə)n/)标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题
-
举例说明
-
<figure> <img src='xxx'/> <figcaption> <h4>已配置:xxx</h4> <div> 产品管理<i class='xxx'></i> </div> </figcaption> </figure>
-
[6]mark
- [1]用来显示有特殊意义的文本->默认样式–会黄色高亮;
[7]section标签
- section标签为html5新增的语义化标签;
- 主要是用来定义文档得某个区域;
- 通常是存放存在 标题+段落 的内容;
[8]article标签
- article标签为html5新增的标签;
- article元素可用于表示页面上某块具有一定独立性的内容,这个内容可以是一篇文章、论坛上的一个帖子/评论、一篇博客、一个可交互的控件等
- [1]一个article元素通常有它自己的标题–通常放在header标签中;
- [2]article标签可以嵌套使用,内层的内容在原则上需要与外层的内容相关联;
- 一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式
- [3]section标签可以将文章划分article区域;
- [4]元素的作者信息可通过标签提供,但是不适用于嵌套的
<article>
元素 - [5]页脚可以使用footer标签;
[9]details标签
-
details标签为html5新增的语义化标签;
-
<details> <summary>概论</summay> 需要展示的内容。。。。。。 </details>
[10]time
- 存放时间
[11]footer
- 主要使用footer标签放一些不太热门的导航栏或是标注内容;
[12]address
- 用于存放地址信息
[13]small
- 呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权