html5新增的语义标签及作用,css3语义化标签
快速查询
文章旁白导航节页眉页脚
架构预览
nav 定义导航链接的部分
在页脚显示一个站点的导航链接，如主页、服务信息页、版权信息页等。
nav ul lia href=" # " Home/a/Li lia href=" # " CSS/a/Li lia href=" # " html 5/a/Li/ul/navarticle 定义文章
加载独立的文章内容，如论坛帖子、新闻、博客帖子、用户评论等。Article可以嵌套，内部Article与外部Article标签具有从属关系。
文章h1标题/h1 p内容/p文章用户评论/文章文章回复评论/文章/文章section 定义文档中的节
文档的章节、页眉、页脚或其他部分，
H1标题1/h1页内容1/页/第h1节标题2/h1页内容2/页/第aside 定义文章的侧栏节
广告、群组内容、友情链接、侧边栏等。
侧栏标题1/h1 p，这是侧栏内容1/p/侧栏标题2/h1 p，这是侧栏内容3/p/sideheader 定义文档的页眉
通常是一些引导和导航信息。
header plogo/p nav ul Li home/Li Li html 5/Li/ul/nav/headerfooter 定义文档或节的页脚
通常，该元素将包含作者姓名、文档的创建日期和/或联系信息。
页脚p 2019版权所有。/p/页脚引用
1 html 5 http://caibaojian.com/html5
2 w3 school https://www.w3school.com.cn/
3 MDN https://developer.mozilla.org/zh-CN/docs/Web/HTML/
下面是其它网友的补充
百度IFE的第一个任务需要建立一个页面结构，看似简单，但需要充分考虑语义。本文简单谈谈HTML5语义中页面结构语义的一些体会和理解。
1、为什么需要语义化
易于修改和维护。
无障碍阅读支持。
搜索引擎友好，有利于SEO。
面向未来的HTML，未来浏览器可能会提供更丰富的支持。
2、结构语义化
语义元素都有一个共同的特征：它们什么都不做。换句话说，语义元素只是页面结构的标准化，不会对内容产生任何本质的影响。
下图显示了典型的页面结构。
头部
header元素有两种用法。第一个是标注内容的标题，第二个是标注网页的页眉，如上图所示。除非必要(当内容标题附有其他信息：发布时间、作者等。)，内容中一般不使用页眉。因此，一个网页可以包含多个header元素。根据HTML5，头应该包含一定级别的标题，所以应该隐式或显式地包含标题。通常不希望显示的标题设置为显示：无；一方面符合规范，另一方面在不影响页面设计的情况下提供无障碍阅读。
导航栏
使用nav导航条似乎很自然。此外，它还用于链接一组文章。一个页面可以包含多个nav元素，但是它通常只用于页面的主导航部分。
055-79000指出了在侧边栏中使用导航标签的两种情况：
！-第一种情况-导航！-这是链接-闪开/闪开/闪开/导航/导航！-案例二-阿斯代纳夫！-这里是链接-/nav section/section div/div/side如果侧边栏包含了其他不同于链接的块，显然使用第二种方案更合适。
导航通常包含一组链接。一般认为链接是由列表组织的。
nav lia href= # title= link link/a/Li lia href= # title= link link/a/Li lia href= # title= link link/a/Li/ul/nav附注
side元素不仅仅是一个侧边栏，它表示的内容与其周围的文本没有密切关系。还可以利用文章中的aside元素来解释文章的附加内容，阐述某个观点，链接相关内容等等。
侧边栏中使用side时，表示整个网页的附加内容。通常，广告区、搜索和分享链接位于侧边栏。侧边栏中的section元素定义了一个区域，通常是带有标题的内容。
节标签适用于标记的内容块：
与页面主体并排显示的小内容块。
独立性、列表、形式等。
分组内容，如CMS系统中的文章分类块。
比较一个长文档的各个部分，也许只是为了正确定义页面的轮廓。
Div标签仍然可用，当你认为使用其他标签不合适的时候。我们总是在新的语义元素出现之前这样做！
页脚
与“包罗万象”的header元素不同，该标准规定footer标签只能包含文本或链接信息，如版权、来源信息、法律限制等。如果您想在页脚中包含其他内容，可以使用熟悉的div来帮助。
撇开div！-其他内容-/旁注页脚！-法律、版权、来源、联系信息等。-/页脚/div主要内容
在HTML5的早期版本中，没有指定页面主体的标签。相关书籍常说：除了头、尾、侧边栏等部分，其余自然是主体。
但是，HTML5.1中指定了一个主标签来标识主要内容。主标记不能包含在页面的其他块元素中，通常是body的子标记或global div的子标记。主标签可以帮助屏幕阅读工具识别页面的主要部分，以便访问者可以快速获得有用的信息。
文章
文章代表一个完整的自包含内容块。例如文章或新闻报道。文章应包含完整的标题、文章署名、发表时间和正文。当语义和性能发生冲突时，比如有时候文章需要在多个页面上显示，那么每个页面的文章区域都需要标注文章。
当文章包含插图时，使用新的语义元素figure标签。
文章h1标题/h1 p！-内容-/p图img src= # alt=插图 figcaption。这是一幅插图/图片说明/图片/文章。在上面的例子中，figcaption包含了关于插图的详细解释，所以可以省略img的alt属性。
总结
以上是边肖介绍的HTML5中常用的语义标签。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。