【九月打卡】第10天大纲标签及语义化标签相关知识点总结

一、课程概述

1、学习课程名称：前端工程师2022版

2、章节名称：HTML5多媒体与语义化标签第三章（3-1 大纲标签-慕课网体系课 (imooc.com)）

3、讲师名称：一阶段老师

4、课程概述：

大纲与语义化标签：1）大纲标签；2）语义化标签

二、内容分享

1、大纲标签header、footer、main、nav、aside、article、section

（1）section：文档区域，语义比div大，因此多个div可以放入里面

（2）article：核心内容，会被搜索引擎抓取

（3）aside：非必要内容，如广告

（4）nav：导航条

（5）header：页头

（6）main：网页核心部分

（7）footer：页脚

2、语义化标签span、b、u、i、strong、em、mark、figure、figcaption

（1）<span>标签：文本中的”区块“标签，可以把内容区隔开来，本身没有任何特殊显示效果，可以结合CSS来丰富样式，是行内标签，不会换行，认为文字将来有特殊的样式就用span包一下

（2）<b><u><i>标签：虽然已经被CSS取代，但仍可以在网页中表示需要强调的文本

<b>：文字加粗

<u>：文字下划线

<i>：文字倾斜

（3）<strong><em><mark>标签：均表示强调语义

<strong>：代表特别重要的文字，文字默认加粗

<em>：代表强调文字，文字默认倾斜

<mark>：代表一段需要被高亮的文字，文字默认黄底背景

（4）<figure><figcaption>标签：<figure>元素代表一段独立的内容，与说明<figcaption>配合使用，是一个独立的引用单元比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响主体，它可有可无，是附属标签，可拓展单元。

三、学习心得

大纲标签和语义化标签都要根据语义来使用，一定要根据情况来使用。