前端面试题-HTML语义化标签
小编:艳芬 1072阅读 2020.09.14
一、HTML5语义化标签
二、语义化标签的使用2.1 标签的特点是简短、描述性、唯一，用于提升搜索引擎排名。
</p>
<p>
（2）搜索引擎会把 title 作为判断页面<strong>主要内容</strong>的指标，有效的 title 应该包含几个与页面<strong>内容密切相关</strong>的关键字，建议将 title 的核心内容写在前 <strong>60</strong> 个字符。
</p>
2.2 <header></header> 页眉
<p>
（1）HTML5 规范描述为“<strong>一组解释性或导航型性的条目</strong>”，通常有网站标志、主导航、全站链接以及搜索框。
</p>
2.3 <nav></nav> 导航
<p>
（1）页面的导航链接区域，用于定义页面的主要<strong>导航</strong>部分。
</p>
<p>
（2）导航通常使用 <strong><ul></strong> 无序列表。若是面包屑链接，则使用 <strong><ol></strong> 有序列表。
</p>
<p>
（3）HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。
</p>
2.4 <main></main> 主要内容
<p>
（1）网站页面的<strong>主要内容</strong>，并且一个页面只能使用<strong>一次</strong> <main> 标签。
</p>
<p>
（2）若是 web 应用，则包含其主要功能。
</p>
2.5 <article></article> 文章标记
<p>
（1）表示的是一个文档、页面、应用或是网站中的一个<strong>独立</strong>的容器。
</p>
<p>
（2）HTML5 规范声明 <article> 标签适用于自包含的窗口小部件:股票行情，计算器，钟表，天气窗口小部件等。
</p>
<p>
（3）<article>这个标签可以<strong>嵌套</strong>使用，但是他们必须是<strong>部分与整体的关系</strong>。
</p>
2.6 <section></section> 区块
<p>
（1）一组<strong>相似主题</strong>的内容，一般会有一个标题。
</p>
<p>
（2）实现比如文章的章节，标签式对话框中的各种标签页等功能。
</p>
2.7 <aside></aside> 侧边栏
<p>
（1）表示一部分内容与页面的主体并没有较大的关系，并且可以<strong>独立存在</strong>。
</p>
<p>
（2）实现比如升式引用、侧边栏、相关文章的链接、广告、友情链接等功能。
</p>
2.8 <footer></footer> 页脚
<p>
（1）和 <header> 标签对应，可以实现比如附录、索引、版权页、许可协议等功能。
</p>
2.9 <cite></cite> 引用
<p>
（1）表示它所包含的文本对某个参考文献的<strong>引用</strong>，比如书籍或者杂志的标题。
</p>
<p>
（2）按照惯例，引用的文本将以<strong>斜体</strong>显示。
</p>
<p>
（3）用 <cite> 标签把指向其他文档的引用<strong>分离</strong>出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。
</p>
2.10 <blockquote></blockquote> 块引用
<p>
（1）<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进<strong>（增加外边距）</strong>，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
</p>
2.11 <q></q> 短的引用
<p>
（1）浏览器经常在引用的内容周围添加引号。
</p>
<p>
（2）根据 HTML 4.01 规范，q 元素应当使用分界引号来呈现，就是说，q 元素包含的文本必须以<strong>引号</strong>来开始和结束。
</p>
2.12 <time></time> 日期或时间
<p>
（1）如果<strong>未定义</strong> datetime 属性，则必须在元素的内容中规定日期或时间。
</p>
2.13 <abbr></abbr> 简称或缩写
<p>
（1）通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
</p>
<p>
（2）可以在 <abbr> 标签中使用全局的 <strong>title</strong> 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的<strong>完整版本</strong>。
</p>
2.14 <dfn></dfn> 特殊术语或短语的定义
<p>
（1）现在流行的浏览器通常用<strong>斜体</strong>来显示 <dfn> 中的文本。
</p>
<p>
（2）与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量<strong>少用</strong>为妙。
</p>
2.15<del></del>删除的文本
<p>
（1）和 <ins> 标签配合使用，来描述文档中的<strong>更新</strong>和<strong>修正</strong>。
</p>
2.16 <ins></ins> 插入文本2.17<code></code>源代码
<p>
（1）用于表示计算机<strong>源代码</strong>或者其他机器可以阅读的文本内容。
</p>
2.18 <pre></pre> 预格式化的文本
<p>
（1）被包围在 pre 元素中的文本通常会<strong>保留空格和换行符</strong>。而文本也会呈现为等宽字体。
</p>
<p>
（2）若使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，则使用<strong>符号实体</strong>来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
</p>
<p>
（3）可以导致<strong>段落断开</strong>的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
</p>
<p>
（4）pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。
</p>
</div>
</div>
<!-- 功能 -->
<div class="zhishi-function">
<div class="details-function-box clearfix">
<div class="details-function-left">
<h6>关联标签：</h6>
<ul class="relation-list clearfix">
<li><a href="http://www.hunt007.com/wiki/zhuanyejineng/">专业技能</a></li>
<li><a href="http://www.hunt007.com/wiki/jineng/">技能</a></li>
</ul>
</div>
<div class="details-function-right">
<div class="details-function-share">
<div class="bdsharebuttonbox bdshare-button-style1-16" data-bd-bind="1510036568633">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_tsohu" data-cmd="tsohu" title="分享到搜狐微博"></a>
<a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
</div>
<script>
window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": '', "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "1", "bdSize": "16" }, "share": {}, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "weixin", "douban", "sqq", "tsohu", "tieba"], "viewText": "分享到：", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin", "douban", "sqq", "tsohu", "tieba"] } };
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
</div>
</div>
</div>
</div>
</div>
<!-- 相关推荐 -->
<div class="about-box">
<p>相关推荐</p>
<ul class="about-list-one">
<li class="clearfix noImgLi">
<a class="about-li-title" href="http://www.hunt007.com/wiki/35935.html">企业面试题: HTML5 相对之前版本新在什么 地方</a>
<a class="about-li-details" href="http://www.hunt007.com/wiki/35935.html">
考核内容:HTML5应用及理解题发散度: ★★试题难度: ★★解题思路:HTML5是HTML（超文本标记语言）的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。WHATWG（Web超文本应用技术工作组）另一次W3C个人聚会认为，W3C没有认真考虑当前…
</a>
</li>
<li class="clearfix noImgLi">
<a class="about-li-title" href="http://www.hunt007.com/wiki/35921.html">精选前端面试题之HTML5/CSS3</a>
<a class="about-li-details" href="http://www.hunt007.com/wiki/35921.html">
1、xhtml和html有什么区别？HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2、什么是盒子模型？在网页中，一个元素占有空…
</a>
</li>
<li class="clearfix noImgLi">
<a class="about-li-title" href="http://www.hunt007.com/wiki/229018.html">3DMAX提示和技巧</a>
<a class="about-li-details" href="http://www.hunt007.com/wiki/229018.html">
本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时，一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面，请在单个视口中工作并关闭 3ds Max 命令面…
</a>
</li>
</ul>
</div>
<!-- 推荐百科 -->
<div class="about-box">
<p>推荐百科</p>
<ul class="about-list-one">
<li class="clearfix">
<h2><a href="http://www.hunt007.com/baike/570.html"><img src="http://ep2016.hunt007.com/ask/2020/3/11/20200311053123.jpg" alt=""></a></h2>
<a class="about-li-title" href="http://www.hunt007.com/baike/570.html">美发学徒是干什么的</a>
<a class="about-li-details" href="http://www.hunt007.com/baike/570.html">
美发学徒的岗位职责和要求是什么？美发学徒的学历和专业要求又是如何？大家想不想知道呢？求职中，对于想要应聘的职位的了解是非常必要的。毕竟只有对这些内容有所了解，才能够知道自己是不是能够适应这个岗位工作，才能够知道面试的时候有多大的把握能够拿下这…
</a>
</li>
</ul>
</div>
</div>
<!-- 右侧栏目 -->
<div class="main-right-box">
<!-- 推荐百科 -->
<div class="zhishibaike-about-box slideTxtBox">
<div class="about-head">
<ul class="clearfix hd">
<li class="on">大家关注</li>
</ul>
</div>
<div class="about-body bd">
<ul>
<li><a href="http://www.hunt007.com/wiki/93523.html"> 拼多多2021笔试真题集 </a></li>
<li><a href="http://www.hunt007.com/wiki/13402.html"> excel怎么快速计算样本标准偏差，STDEV.S函数实用技巧 </a></li>
<li><a href="http://www.hunt007.com/wiki/16303.html"> excel数据筛选技巧，excel如何设置多条件筛选数据 </a></li>
<li><a href="http://www.hunt007.com/wiki/12749.html"> excel怎么快速合并单元格，excel合并单元格技巧 </a></li>
<li><a href="http://www.hunt007.com/wiki/13437.html"> excel怎么打印数据透视表 </a></li>
</ul>
</div>
</div>
<!-- 相关百科 -->
<div class="zhishibaike-about-box slideTxtBox">
<div class="about-head">
<ul class="clearfix hd">
<li class="on">热门知识</li>
</ul>
</div>
<div class="about-body bd">
<ul>
<li><a href="http://www.hunt007.com/wiki/229089.html"> 金蝶云网页端差旅报销单界面无法显示关联申请分录行 </a></li>
<li><a href="http://www.hunt007.com/wiki/229018.html"> 3DMAX提示和技巧 </a></li>
<li><a href="http://www.hunt007.com/wiki/229042.html"> 3DMAX固定关键点怎么不见了？ </a></li>
<li><a href="http://www.hunt007.com/wiki/229085.html"> 3DMAX2D 贴图 </a></li>
<li><a href="http://www.hunt007.com/wiki/229051.html"> 金蝶云设置了预算控制方式为累计控制，但是没有生效查看预算的时候仍然显示的是不控制 </a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".slideTxtBox").slide({ trigger: "click" });
</script>
<!-- 底部 -->
<div class="footer-box">
<div class="footer">
<div class="fl">
<dl>
<dt><i class="qq"></i></dt>
<dd>
<h2>QQ客服</h2>
<p class="footer-pp clearfix">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1145028743&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:1145028743:7" alt="找工易人才网客服专员，欢迎咨询" title="找工易人才网客服专员，欢迎咨询" width="71" height="24"></a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1078189145&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:1078189145:7" alt="找工易人才网客服专员，欢迎咨询" title="找工易人才网客服专员，欢迎咨询" width="71" height="24"></a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2359735528&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:2359735528:7" alt="找工易人才网客服专员，欢迎咨询" title="找工易人才网客服专员，欢迎咨询" width="71" height="24"></a>
</p>
</dd>
</dl>
<dl>
<dt><i class="yx"></i></dt>
<dd><h2 style="margin-top: 4px;">E-mail:market#hunt007.cn</h2></dd>
</dl>
</div>
<div class="fr">
<div class="footMenu">
<a href="http://wap.hunt007.com/help/aboutus.htm">关于本站</a> |
<a href="http://wap.hunt007.com/help/contact.htm">联系我们</a> | <a href="http://www.hunt007.com/help/link.htm">友情链接</a>
| <a href="http://www.hunt007.com/help/law.htm">法律声明</a> | <a href="http://www.hunt007.com/help/help.htm">求职帮助</a> | <a href="http://www.hunt007.com/cn-hot/">热门搜索</a>
</div>
<p><a href="http://beian.miit.gov.cn" target="_blank">粤ICP备10072383号-2</a> Copyright◎ 2024 hunt007.com, All Rights Reserved. </p><p class="ba"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010402000066" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://www.beian.gov.cn/file/ghs.png" style="float:left;">粤公网安备 44010402000066号</a></p>
</div>
</div>
</div>
</body>
</html>
<div style="display:none">
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d640e320c5cd6fbe5ee863df87a34999";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src='http://v13.cnzz.com/stat.php?id=553175&web_id=553175' language='JavaScript' charset='gb2312'></script>
</div>
|
标签 |
描述 |
|---|---|
|
|
页面独立的内容区域。 |
|
|
页面的侧边栏内容。 |
|
|
允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
|
|
命令按钮，比如单选按钮、复选框或按钮 |
|
|
用于描述文档或文档某个部分的细节 |
|
|
对话框，比如提示框 |
|
|
标签包含 details 元素的标题 |
|
|
规定独立的流内容（图像、图表、照片、代码等等）。 |
|
|
|
|
|
section 或 document 的页脚。 |
|
|
文档的头部区域 |
|
|
带有记号的文本。 |
|
|
度量衡。仅用于已知最大和最小值的度量。 |
|
|
导航链接的部分。 |
|
|
任何类型的任务的进度。 |
|
|
ruby 注释（中文注音或字符）。 |
|
|
字符（中文注音或字符）的解释或发音。 |
|
|
在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。 |
|
|
文档中的节（section、区段）。 |
|
|
日期或时间。 |
|
|
规定在文本中的何处适合添加换行符。 |
（1）