frontend-interview
frontend-interview copied to clipboard
su37josephxia
Day22 - 呈现一个wiki页面你会用到哪些语义化标签
wiki页面是像百度百科，维基百科这样的资料文档页面的话，主要是给人搜索的，所以结合语义化标签实现搜索引擎的 seo。首先肯定少不了meta标签，然后头部网页的标题logo可以用header标签。导航栏可以用nav标签，用 mian 标签表示正文内容，用ui li 表示列表，里面可以嵌套 p标签，h3 等作为段落。aside 标签展示和正文内容不想关的例如其他外链，侧边导航栏。a标签做跳转或者锚点。描述某些字用em，strong， s，small等形容文字的标签。footer标签作为底部版权声明和其他导航。
呈现一个wiki页面你会用到哪些语义化标签，语义化标签主要是用于爬虫搜索，首先从meta标签网页的标题logo用title标签，跳转等用a标签herf跳转。name锚的名称，及h1h2h3等
- aside-导航性质内容
- article-文章主体部分
- hgroup, h1, h2-标题组
- abbr-表示缩写
- hr-横向分隔
- p-普通的段落
- strong-加粗强调
- blockquote, q, cite-文字引用
- time-时间描述
- figure, figcaption-表示与主文章相关的图像、照片等流内容
- dfn-包裹被定义的名词
- nav, ol, ul-无序列表、有序列表
- pre, samp, code-换行标签
什么是wiki页面
- wiki是任何人都可以编辑的网页，比如维基百科
语义化标签好处：
- 使代码更清晰，更具有可读性，方便开发维护
- 方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备
- 有利于SEO
常用语义化标签
- abbr 缩写使用的标签
- aside 与主体不相关的内容，如导航、广告
- article 文章主体部分
- hgroud,h1,h2 标题相关
- p 表段落
- em，strong，small 描述文字的
- blockquote, q, cite 引述标签 blockquote表示段落级引述 q表示行内的引述 cite表示引述的作品名
- time 日期
- figure, figcaption 图像、照片相关
- nav, ol, ul 导航使用
1.使用aside标签 和正文不那么相关的内容,比如导航,广告等
2.使用article标签 描述文章的主体
3.hgroud,h1,h2
4.abbr 缩写使用的标签
5.hr 横线
6.p 描述段落
7.strong 强调,作为自然语言表达的补充
8.blockquote, q, cite
引述标签
blockquote表示段落级引述
q表示行内的引述
cite表示引述的作品名
9.time
10.figure, figcaption 用于表示与主文章相关的图像、照片等流内容
11.nav, ol, ul 在导航中使用
12.pre 表示这部分内容是预先排版过的,不需要浏览器进行排版 samp 表示示例输出 code 包裹的是计算机代码
其他
- 使用aside标签 和正文不那么相关的内容,比如导航,广告等
- 使用article标签 描述文章的主体
- 一些地方会出现大标题和副标题, 使用hgroud,h1,h2形成一个组
- p 描述段落
- strong 强调
- nav, ol, ul 在导航中使用
应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好
WIKI中使用到的语义化标签：
- aside 侧边栏
- article 文章主体部分
- hgroup, h1, h2, h3, h4, h5, h6 标题组 及 各级标题
- abbr 缩写
- hr 横向分隔线 故事走向的转变或者话题的转变
- p 段落
- strong 表示这个词很重要
- blockquote , q, cite 段落级引述内容 行内的引述内容 引述的作品名
- time 日期
- figure 插入文章中的内容——具有一定自包含性（类似独立句子）的内容 figcaption 内容的标题
- dfn 包裹被定义的名词
- nav, ol, ul 文章的目录
- pre 表示这部分内容是预先排版过的，不需要浏览器进行排版
- samp 计算机程序的示例输出
- code 代码
其他语义化标签：
- small 补充评论
- s 错误的内容
- i 读的时候变调
- b 关键字
- u 避免歧义的注记
- data 与time类似，给机器阅读的内容，意义广泛，可自由定义
- var 变量
- kbd 用户输入
- sub 下标
- sup 上标
- bdi, bdo 多语言混合时指定语言或书写方向
- mark 从读者角度希望的高亮
- wbr 可以换行的位置（长单词中）
- menu 功能菜单
- dl, dd, dt 对术语进行定义
- main 页面的主要内容，整个页面只有一个
从上到下从左到右： header 头部 ， 头部内 nav导航 h标题 aside 侧边栏 ，侧边栏内部menu菜单 ul 列表，main 主体 底部footer
标签语义化作用
- HTML结构更加清晰
- 代码的可读性更强
- 方便后期维护
- 有利于SEO
wiki页面标签
- title 页面标题
- header 顶部容器
- aside 侧边栏
- nav 导航栏
- table 表格标签
- main 主体
- ul列表
- hr 横向分割线
- p 段落
- strong 强调文本
- section 章节、页眉、页脚或文档中的其他部分
- small 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
- div
- h1,h2,h3,h4,h5,h6
- blockquoto 定义块引用，块引用拥有它们自己的空间。
像是Wiki这种页面属于信息展示类资料文档页面，主要会需要结合语意化标签实现搜索引擎的SEO。
首先一定会有的是 meta标签
头部可以使用 header标签，用来放标题 logo。
导航部分使用nav标签。
侧边导航栏使用aside标签。
主体内容使用main。
文章主体使用artical。
章节，页眉，页脚可以使用section。
标题根据从大到小 h5 - h1。
列表使用ul li ol
内容样式可以使用strong、br、pre、code、em、small、hr等。
底部版权声明以及其他可以使用footer。
打开wiki百度百科，右键显示网页源代码可以看到
- head 表示文档头部
- meta 提供有关页面的元信息
- link 引用外部文件标签
- style 定义样式标签
- script 引用JavaScript
- a标签，用作超链接
- img图片
- nav用作导航
- artical 文章
- section 章节
- h1-h5 文章标题
- strong 重点文本
- em 斜体文本
- p 段落
- aside 侧边栏
- main 主体
- table 表格
-
导航
-
aside标签：导航等
-
nav, ol, ul 在导航中使用
-
-
正文
- article标签：主体文章
- h1-h5：标题
- abbr ：缩写使用的标签
- hr：分割线
- p：段落
- time：出现日期时,为了让机器阅读更加方便,可以加上time标签
- strong ：强调
- blockquote, q, cite ：引述标签
- blockquote表示段落级引述
- q表示行内的引述
- cite表示引述的作品名
- title 网页的标题
- header 页面的顶部，通常包含导航栏、搜索框等
- main 页面的主题部分
- aside 页面的侧边栏
- footer 页面的底部，通常包含公司信息、版权声明
- hgroup、h1-h6 页面中的各级标题
- nav 顶部导航栏
- article 文章主体部分
- section 文章中的节
- small 文章中注解、署名等小字部分
- strong 加粗突出体现部分
- mark 同样用于突出显示
- cite 表示文章内容对于外部文章的引用
- blockquoto 代码块
- code 代码
- time 时间
- address 作者、相关人士的联系方式（邮箱等）
- del 移除的内容
- abbr 缩写
- dfn 包裹被定义的名词
呈现一个wiki这样的页面首先分为5个部分内容：
- 第一块是header用来展示wiki页的外链接功能，用户信息等内容；
- 外部链接用a标签
- 第二块是wiki页面内容的导航模块nav
- 页面主题部分用main做容器
- 文章主体用article、每个大段落用section
- 文章标题用h1~h5,句子用p标签
- 作者等联系方式用address
- 底部反馈建议渠道、版权等信息用footer包裹
- 右边的分享渠道可以用aside侧边栏定位一下
这个问题，有两个点要先明白
- 什么是WIKI页面？
- 简而言之就是，多人协作、信息共享的文档编辑网站
- 什么是语义化标签？
- 就是带有含义的标签。其实一个网页想要正常展示，全部用div标签可以做到，但是文档结构会不明确、不清晰，也不利于搜索引擎去抓取更多的有效信息。
那么有哪些语义化标签可以用于WIKI页面展示呢
header 标签： 头部模块 nav 标签：导航栏 main标签：页面主要内容，一个页面只能使用一次 article标签：用来定义独立于文档且有意义的来自外部的内容 section标签：定义文档中的章节 aside标签：定义article标签外的内容，可用作文章的侧边栏 footer标签：底部模块 title标签：标题 h1~h6标签：每一级的标题 ul标签：无序列表 ol标签：有序列表 strong标签：强调文本，表现为加粗 em标签：强调文本，表现为斜体 p标签：段落
-
aside：导航性质的工具内容
-
article：文章主体部分
-
hgroup, h1, h2：标题组，标题
-
abbr：缩写
-
hr：分隔线
-
p：段落，出了普通段落用p标签以外。注记，它在文章中用作额外注释，没有专门的标签，也能用p标签加class=‘note’来实现。
-
strong：强调文本，加粗方式
-
blockquote, q, cite：引述，在 HTML 中，有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
-
time：日期
-
figure, figcaption：插入文章中的内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内容，都可以用 figure。这里面，我们用 figcaption 表示内容的标题，当然，也可以没有标题。
-
dfn：包裹被定义的名词
-
nav, ol, ul：列表，可用来做文章目录，目录连接到章节可以用nav
1、aside 标记的这块区域属于aside内容主要就是起到导航作用。 2、article 标记的这块区域文章的主体部分可使用article，具有明确的独立性。 3、hgroup,h1,h2 标记的部分可以像下面这样解析： hgroup是标题组 h1是一级标题：World Wide Web h2是二级标题：From Wikipedia, the free encyclopedia 4、abbr 标签指示简称或缩写，比如 "WWW" 或 "NATO"。 通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。 5、p 标记的部分有三个注记（note），它在文章中的作用就是额外的注释，但是html中并没有note相关的语义，这时可以使用p标签进行相关实现。 6、strong 如果上下文中某些词很重要我们可以用strong标签 7、time 图片标记划线部分为日期，为了让机器阅读更加方便，我们可以添加time标签 8、figure,figcaption 图文的结合组成了一个figure的语法现象，figure标签用于表示与主文章相关的图像...等内容 9、nav,ol,ul 如图这个可以导航并且有顺序，代码如下： 10、pre,samp,code 这三个标签的定义和用法: pre：元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。常见应用就是用来表示计算机的源代码。 samp：表示一段用户应该对其没有什么其他解释的文本字符 code：标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
Wiki页面主要会需要结合语意化标签实现搜索引擎的SEO。 一般可以使用aside标签 和正文不那么相关的内容,比如导航,广告等 使用article标签 描述文章的主体 使用h1,h2等标签 描述标题 使用p标签 描述段落 使用time标签 可以让机器阅读更加方便 使用artical 表示文章 使用section 表示章节 使用aside 表示侧边栏等等
使用良好的语义化标签，可以有利于搜索引擎的SEO
常见的有
- title 网页的标题
- header 页面的顶部，通常包含导航栏、搜索框等
- main 页面的主题部分
- aside 页面的侧边栏
- footer 页面的底部，通常包含公司信息、版权声明
- hgroup、h1-h6 页面中的各级标题
- nav 顶部导航栏
- article 文章主体部分
- section 文章中的节
- small 文章中注解、署名等小字部分
- strong 加粗突出体现部分
- mark 同样用于突出显示
- cite 表示文章内容对于外部文章的引用
- blockquoto 代码块
- code 代码
- time 时间
- address 作者、相关人士的联系方式（邮箱等）
- del 移除的内容
- abbr 缩写
- dfn 包裹被定义的名词
1.使用aside实现侧边栏
2.使用article实现文章的主体
3.hgroud,h1,h2...实现标题
4.abbr 实现缩写内容
5.hr 横线分割线实现故事走向或者话题转变的分隔
6.p 实现段落
7.strong 强调,作为自然语言表达的补充
8.blockquote 实现段落级引述内容，q 实现行内的引述内容，cite 实现引述的作品名
9.time标签包裹日期
10.figure实现文章中自包含性质的内容，figcaption 表示内容的标题
11.dfn 标签是用来包裹被定义的名词
12.nav实现导航
- ol, ul 实现列表
14.pre 表示这部分内容是预先排版过的,不需要浏览器进行排版
15.samp 表示示例输出
16.code 包裹的是计算机代码
语义化标签，对于开发人员，对于搜索引擎，对于视障者，对阅读模式都是更加友好的一种方式。
像 wiki 这种文档型的页面用它特别合适。比如说比较大块的语义化标签，有 header，footer，main，aside这种。我们就可以用他们把页面的大体结构分出来。
然后具体去看细节的话，我们是可以再用 nav 做导航，然后在main里面我们可以用 article 做文章的主体，用 section 做文章的段落。
如果文章中出现了一些强调，我们可以用 strong 。 如果文章中出现了一些修改，我们可以用 ins 表示增，用 del 表示减 。 如果文章中出现了一些引用，包括图片的引用，代码的引用，表格的引用，都可以用 figure 表示
