前端面试题-HTML语义化标签

20

一、HTML5语义化标签

标签 描述
<article> 页面独立的内容区域。
<aside> 页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> <figure> 元素的标题
<footer> section 或 document 的页脚。
<header> 文档的头部区域
<mark> 带有记号的文本。
<meter> 度量衡。仅用于已知最大和最小值的度量。
<nav> 导航链接的部分。
<progress> 任何类型的任务的进度。
<ruby> ruby 注释(中文注音或字符)。
<rt> 字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,不支持 ruby 元素的浏览器所显示的内容。
<section> 文档中的节(section、区段)。
<time> 日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

二、语义化标签的使用

2.1 <title></title> 页面主要内容

(1)<title> 标签的特点是简短、描述性、唯一,用于提升搜索引擎排名。

(2)搜索引擎会把 title 作为判断页面主要内容的指标,有效的 title 应该包含几个与页面内容密切相关的关键字,建议将 title 的核心内容写在前 60 个字符。

2.2 <header></header> 页眉

(1)HTML5 规范描述为“一组解释性或导航型性的条目”,通常有网站标志、主导航、全站链接以及搜索框。

2.3 <nav></nav> 导航

(1)页面的导航链接区域,用于定义页面的主要导航部分。

(2)导航通常使用 <ul> 无序列表。若是面包屑链接,则使用 <ol> 有序列表。

(3)HTML5 规范不推荐对辅助页脚链接使用 nav,除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。

2.4 <main></main> 主要内容

(1)网站页面的主要内容,并且一个页面只能使用一次 <main> 标签。

(2)若是 web 应用,则包含其主要功能。

2.5 <article></article> 文章标记

(1)表示的是一个文档、页面、应用或是网站中的一个独立的容器。

(2)HTML5 规范声明 <article> 标签适用于自包含的窗口小部件:股票行情,计算器,钟表,天气窗口小部件等。

(3)<article>这个标签可以嵌套使用,但是他们必须是部分与整体的关系

2.6 <section></section> 区块

(1)一组相似主题的内容,一般会有一个标题。

(2)实现比如文章的章节,标签式对话框中的各种标签页等功能。

2.7 <aside></aside> 侧边栏

(1)表示一部分内容与页面的主体并没有较大的关系,并且可以独立存在

(2)实现比如升式引用、侧边栏、相关文章的链接、广告、友情链接等功能。

2.8 <footer></footer> 页脚

(1)和 <header> 标签对应,可以实现比如附录、索引、版权页、许可协议等功能。

2.9 <cite></cite> 引用

(1)表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

(2)按照惯例,引用的文本将以斜体显示。

(3)用 <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。

2.10 <blockquote></blockquote> 块引用

(1)<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

2.11 <q></q> 短的引用

(1)浏览器经常在引用的内容周围添加引号。

(2)根据 HTML 4.01 规范,q 元素应当使用分界引号来呈现,就是说,q 元素包含的文本必须以引号来开始和结束。

2.12 <time></time> 日期或时间

(1)如果未定义 datetime 属性,则必须在元素的内容中规定日期或时间。

2.13 <abbr></abbr> 简称或缩写

(1)通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

(2)可以在 <abbr> 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本

2.14 <dfn></dfn> 特殊术语或短语的定义

(1)现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。

(2)与其他许多基于内容的样式和物理样式标签一样,<dfn> 标签尽量少用为妙。

2.15 <del></del> 删除的文本

(1)和 <ins> 标签配合使用,来描述文档中的更新修正

2.16 <ins></ins> 插入文本

2.17 <code></code> 源代码

(1)用于表示计算机源代码或者其他机器可以阅读的文本内容。

2.18 <pre></pre> 预格式化的文本

(1)被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

(2)若使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,则使用符号实体来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。

(3)可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

(4)pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。

阅读更多


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

Swordsman · 2018年03月23日

header nav section aside footer其他都是浮云

回复

0

存在即合理,不只是浮云(´▽`)ノ

WEBING 作者 · 2018年03月23日
0

div就够了 /偷笑

nicholascat · 2018年03月30日
0

可以 /haha

Swordsman · 2018年03月30日
吃饱聊聊人生 · 2018年03月30日

百分之九十九没有用到

回复

0

总有用到的时候(^し^)

WEBING 作者 · 2018年03月31日
载入中...