前端面试题-HTML语义化标签
一、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 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。
前端面试题-HTML语义化标签的更多相关文章
- 前端面试题-HTML结构语义化
一.HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签.用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML ...
- 前端面试题2016--HTML
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...
- 2016最全的web前端面试题及答案整理
面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...
- 史上最全前端面试题(含答案)-A篇
HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...
- 【重点--web前端面试题总结】
前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...
- 2010年腾讯前端面试题学习(jquery,html,css部分)
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...
- web前端面试题库
web前端面试题及答案 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 第136天:Web前端面试题总结(理论)
Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...
随机推荐
- ACM-ICPC Nanjing Onsite 2018 I. Magic Potion
题意:类似二分图匹配给的题目,不过这次在这里给出了k,表示没人可以再多一次匹配机会,这次匹配不能用上一次被匹配的对象 分析:不能用匈牙利做俩次匹配,因为俩次的最大匹配并不等价于总和的匹配,事实证明,你 ...
- rest framework-restful介绍-长期维护
############### django框架-rest framework ############### # django rest framework 框架 # 为什么学习这个res ...
- AJAX数据传输
AJAX = Asynchronous JavaScript and XML(异步的Javascript和XML) AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页 ...
- vs编译完提示不支持尝试的执行操作
最近公司在用MFC做项目,编译完就弹窗提示,不支持尝试的执行操作,开始没注意,但是点击弹窗提示无反应: 问题原因:dialog里的控件有的已经删除了,但是DoDataExchange函数还存在控件的关 ...
- seckill
京东自动登录 注:本文所做操作皆以京东web为例 包含:xpath,splinter,ocr 遇到的坑: 登录页面通过查看网页元素,能看到账户,密码唯一id,但是执行 12 browser.fill( ...
- import org.apache.commons.codec.binary.Base64;
import org.apache.commons.codec.binary.Base64;
- 使用zxing生成和解析二维码
二维码: 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的: 在代码编制上巧妙的利用构成计算机内部逻辑基础的0和1比特流的概念,使用若干个与二进制相对应的几何 ...
- jmeter后置处理器之Json提取器详解
此提取器用于提取请求返回结果中的某个值或者某一组值,用法比正则表达式要简单,标准写法为$.key,其中key为返回结果map中的一个键,如果是多层则继续用.key进行即可,如果遇到key的value值 ...
- 推荐使用concurrent包中的Atomic类
这是一个真实案例,曾经惹出硕大风波,故事的起因却很简单,就是需要实现一个简单的计数器,每次取值然后加1,于是就有了下面这段代码: private int counter = ...
- 2016年3月13日 FXStreet首席分析师:欧元/美元下周走势展望
FX168讯 欧元/美元在经历周初沉闷的走势之后,最终在欧洲央行出台一系列措施促进通货膨胀和经济增长之后怒涨至近一个月最高位.欧洲央行决议公布之前,投资者预期存款利率将下调10至15个基点,并可能进一 ...