第三节:21个新的语义化标签,你撸过几个?
这一章节介绍的新标签主要是用于语义化的新结构标签, 其他的标签会在后面的章节陆续介绍。
很多同学都了解和使用过HTML5,也许你也知道了<p>的用法。但是很多人并不清楚<p>的适用范围,它与<div>的使用区别又是什么?。学完这一节,你对这些标签的用法和适用场景,都会一清二楚。
什么是语义化
那么有童鞋可能要问了:什么是语义化?它什么作用,很重要吗?
每个HTML标签都有自己特定含义(语义),语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
举个例子,当你盖一栋房子的时候,有的地方该用砖头,有的部分该用瓷片,还有的地方得用水泥糊上,这样盖出来房子才会结实,整洁和美观。
如果硬是要瓷片替代砖头,房子勉强也能盖起来,但是这样的房子不牢固,容易倒塌,外观也不好看。
网页的语义化也是这个理儿,表示段落的时候你就得用<p>标签,表示标题就得用<h1>~<h6>标签,这样的网页称之为结构良好,让人和搜索引擎容易理解。你硬是要用<div>标签,浏览器也能成功展示你想要的效果,但是这样的网页结构并不友好,不利于搜索引擎识别网页的关键信息,网页标签一旦多了,维护起来,也是很蛋疼的。
HTML5带来的这些语义化的新标签,就是让开发者能创建出更好的页面结构。不用,你就是辜负了HTML5的一番好意了。
学习21个新标签
讲完了语义化,接下来,我们就来演示一下这些标签的用法和使用场景。
1
<header>标签:标签定义文档或者文档的一部分区域的页眉。
例子:可以用它来定义一个页面文章的页眉。
<header> <h1>22省份遭遇高温持久战</h1> <span>2016-08-01 00:28</span> </header>
用法很简单,用<header>标签来替代了我们常用的<div class="header">形式。一个页面,可以拥有多个<header>标签。
2
<nav>标签:定义导航链接的部分。
例子:用它来定义一个页面的导航。
<nav> <a href="#">公司首页</a> <a href="#">产品简介</a> <a href="#">加入我们</a> <a href="#">联系我们</a> </nav>
用<nav>标签代替了以前的<div class="nav">的形式。并不是每个HTML文档都用得上<nav>标签,要根据结构布局需求来使用。
3
<footer> 标签:定义文档或者文档的一部分区域的页脚。
例子:包含文档创作者的姓名、文档的版权信息等等。
<footer> 作者:前端君 <br /> © web前端教程公众号版权所有 </footer>
用<footer>标签可以代替以前的<div class="footer">的写法,一个页面,可以拥有多个<footer>标签。
4
<p> 标签:定义文档的某个区域。
乍一看,这不是跟div差不多吗?这个问题前端君也疑惑了很久,在写这个章节的时候,决定要找出它们的区别。
官方是这些解释的:
The p element represents a generic p of a document or application. A p, in this context, is a thematic grouping of content, typically with a heading.
大概的意思是:<p>元素表示文档或应用的一个部分。所谓“部分”,这里是指按照主题分组的内容区域,通常会带有标题。
注意到吗?这里的<p>标签,通常里面会包含标题和内容。也就是说<p>不是通用容器元素。如果仅仅是当做普通的容器,那应该用<div>元素。
<p>标签所包含的区域里面,应该包含标题<h1>~<h6>标签和内容段落<p>标签,而div标签使用的时候,并没有这样的要求。
例子:定义一个含有标题和段落的<p>区域。
<p> <h1>台风“妮妲”登陆广东深圳</h1> <p>今年第4号台风“妮妲”于2日3时35分以强台风级在广东省深圳市大鹏半岛登陆,中心最大风力14级。</p> </p>
所以大家要谨记了,不能拿p标签当做div来使用。
5
<article> 标签:定义文章、页面或者是应用程序当中的独立完整可以被外部引用的内容。
什么意思呢?它可以以一篇文章、一篇帖子、一段评论形式出现。除了内容主题以外,通常还会有自己的标题及脚注。
例子:包含标题+内容+脚注的案例。
<article> <header> <h1>数说台风...</h1> </header> <p>今年第4号台风“妮妲”....</p> <footer>注:版权归天气网所有</footer> </article>
像以上的案例中,包含了头部标题、内容和脚注的模块,就适合使用<article>标签,<article>标签可以适当地嵌套使用。
6
<aside> 标签:定义 <article> 标签外的内容。
它定义的内容应该与附近的内容相关。具体用两种使用方法:
1、嵌套在<article>标签内,此时它的主要表示的是内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名词解释,等等。
示例:<aside> 标签被包含在<article>标签内。
<article> <p>今年第4号台风“妮妲”....</p> <aside> <span>文章排名:2</span> <span>热门关键字:台风、妮妲</span> <span>事件热度:5</span> </aside> </article>
这个案例中的<aside>定义的内容就是作为整个<article>文章的相关信息介绍。
ps:<article>标签本应该包含标题和脚注部分,但是这里用于讲解而省略。
2、在<article>标签之外使用,作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。
示例:一个关于前几天台风报道文章的相关文章推荐列表部分。
<aside> <h1>相关推荐</h1> <a href="#">原来广东是被“祸害”的地方...</a> <a href="#">菜市场是台风“妮妲”最早...</a> <a href="#">台风肆虐的朋友圈是这样的...</a> </aside>
7
<details> 标签:用于描述文档或文档某个部分的细节。
<summary> 标签:包含<details> 标签的标题。
这两个标签一般都会一起使用,所有我们在这里一并学习。
<details> 标签定义文档的细节,用户可进行查看,或通过点击进行隐藏。而<summary> 标签作为<details> 标签的标题,一般会作为第一个子元素。
示例:<details> 标签和<summary> 标签一起使用的案例。
<details> <summary>细节的标题</summary> <p>细节内容,点击可查看或者隐藏</p> </details>
<details> 标签和<summary>结合使用,最终的页面效果是这样的:
(这是一个gif的动画图)
是不是很好玩,自带手风情的切换效果。用户可以通过鼠标点击查看或者隐藏,默认效果是隐藏的,点击再展开。如果你想它默认就展开的话,可以通过设置<details>的一个属性:open。
<details open></details>
目前,只有 Chrome 和 Safari 6 支持 <details> 标签。
9
<figure> 标签:规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 标签:元素定义<figure>的标题。
一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
示例:<figure> 标签和<figcaption> 标签一起使用。
<figure> <figcaption>横跨珠江的猎德大桥</figcaption> <img src="ld.jpg" alt="猎德大桥"> </figure>
效果如下图:
注:<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
11
<mark> 标签:定义带有记号的文本。
示例:带有<mark>标签的段落。
<p>广东的<mark>强风雨</mark>将持续至3日8时</p>
效果图:
哈哈,这货自带背景变黄色的效果。
12
<meter> 标签:定义度量衡。
仅用于已知最大和最小值的度量。它有个必选的属性value,用于规定度量的当前值。
示例:80%的度量例子。
<meter value="0.8"></meter>
效果图:
你所看到的也是<meter>自带的样式,绿色部分长度代表值当前值。样子长得是不是很像一个进度条?但它并不是专业的进度条标签,要表示进度条,你得用下面这个新标签。
13
<progress>标签:定义运行中的任务进度(进程)。
<progress> 标签有两个重要的属性,max属性规定需要完成的值,value规定进程的当前值。在实际使用过程中,它经常与 JavaScript 一起使用来显示任务的进度。
示例:总任务为100,当前只完成了15%。
<progress value="15" max="100"></progress>
效果图:
样式也是自带的。大家在使用的时候,切莫与定义度量衡的<meter>标签混淆了,毕竟它们的外观和用法比较相似。
14
<time> 标签:定义时间或日期。
用法很简单,但这里的定义时间和定义日期是两种不同的用法。我们先来看看怎么定义时间。
示例:定义一个时间。
<p>明天早上<time>9:00</time>准时到公司</p>
示例:结合datetime属性,定一个日期,比如:2016年的中秋节。
<p>还有一个多月就<time datetime="2016-09-15">中秋节</time>了</p>
案例中<time>标签内容是“中秋节”的日期,而属性datetime标示的是中秋节所对应的时间。<time>标签不会附带任何样式,跟<span>标签一样。但是不同的是<time>标签更具有语义。
15
<wbr>标签: 规定在文本中的何处适合添加换行符。
这个怎么理解呢,举个例子你就懂了。很多时候我们的文档内容中,存在着单词,特别是比较长的单词,当它们遇到换行的时候,很容易出现错位的现象,比如:
当XMLHttpRequest单词遇到了换行的时候,它并没有很好地适配容器的宽度,而出现了错位。
那么有童鞋说了:我们可以用word-break来控制它换行不就行了吗?确实,我们可以用word-break来实现换行,让它不错位。但是,阅读效果并不是最优。
看到了,此时XMLHttpRequest单词被拆分得乱七八糟,根本不利于阅读。这个时候,如果我们使用了<wbr>合理地进行换行控制,效果就理想多了。
你要学好XML <wbr> Http <wbr> Request 对象
我们将XMLHttpRequest单词拆分成三部分 :XML+Http+Request,因为我们认为这样的拆分更符合人的阅读习惯。我们看看效果:
这个时候,如果XMLHttpRequest单词遇到换行的时候,浏览器跟根据<wbr>标示位置,合理地对单词进行换行拆分。
注意:<wbr>并不是一个闭合的标签。它是一个空标签,跟<br>、<hr>类似。
往下的这几个新标签的浏览器支持度并不乐观,但是出于学习的目的,前端君还是来介绍一下。
16
<dialog>标签:定义对话框或窗口。
<dialog>标签有一个open属性,它控制对话框的显示和隐藏。对话框会以绝对定位,水平居中的形式显示。不过,目前只有Chrome浏览器支持。
<dialog open>这是对话窗口</dialog>
用法很简单,只需要在标签内编写对话框的内容即可。效果如下图:
open属性表示dialog窗口展开,省略open属性,dialog窗口会被隐藏。虽然很实用的一个标签,但是浏览器对它的支持不完善,很遗憾。
17
<ruby>标签:定义 注释(中文注音或字符)。
<rt> 标签:定义字符(中文注音或字符)的解释或发音。
<rp> 标签:在 ruby 注释中使用,以定义不支持 <ruby>标签的浏览器所显示的内容。
这3个标签得结合着一起使用,但是浏览器都它的支持各不一样。
<ruby> 世界贸易 <rt> <rp> ( </rp> shi jie mao yi <rp> ) </rp> </rt> </ruby>
看着貌似挺复杂的,其实并不难,我们一起来看看效果。
当浏览器支持<ruby>标签的时候,<rp>标签就会被隐藏,显示结果为:
<rt>标签的内容会以标注拼音的形式显示在 “世界贸易” 的上方。倘若浏览器不支持<ruby>标签,又会怎样显示呢?我们来看看:
这个时候,<ruby>标签的内容就会显示在同一行,很人性化。但是,浏览器对这个标签的支持度不高,除非特殊情况,否则没必要使用这个标签
20
<bdi>标签:允许您设置一段文本,使其脱离其父元素的文本方向设置。
这个标签你一定很陌生,在日常开发中压根都没用过,何况浏览器对它的支持也不友好。W3C上说只有Chrome和Firefox支持。但我测试了一下,他俩并没有支持,反倒IE支持了这个标签。但整体来说,浏览器对这个标签的支持还是有所欠缺。
这个标签要结合属性dir来一起使用,它的属性值有:rtl(右到左),ltr(左到右)。
示例:属性dir值为ltr,表示从左到右。
<bdi dir="ltr">你好</bdi>2016
显示出来的结果:“你好2016”。
示例:属性dir值为ltr,表示从右到左。
<bdi dir="rtl">你好</bdi>2016
此时,显示的结果就变成了:“2016你好”,因为<bdi>标签的文本被移到了右侧。
21
<command>标签:定义命令按钮。
目前没有浏览器支持此标签,只有IE9支持并仅仅支持部分功能。
<command onclick="alert(1)">点击我</command>
因为其很多的属性没有被浏览器支持,所以前端君暂时无法展示给大家看。这个标签大家还是要慎用。
可能有童鞋会问:“为什么还有很多受用的标签没有讲解呢?比如<vedio>和<audoi>标签等等”。
前端君:“我根据新标签的职能进行了划分,本节讲解的是语义化的结构标签,后面的章节会陆续介绍其他新标签。”
本节收获
学完本节,你应该学会了:
1、语义化的含义和作用。
2、21个新标签的用法和使用场景。
3、慎用浏览器支持度不完善的标签。
注:要购买《ES6系列章节测试》两套习题的同学,加前端君微信后可以直接留言,详情点击:《重磅:为ES6系列设计的2套习题+答案解析》。
第三节:21个新的语义化标签,你撸过几个?相关推荐
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- section、article、aside区别及HTML5语义化标签
在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不同,浏览器在解释渲染这些标签的时候仅仅把它们作为普通的div块 ...
- H5新标签--语义化标签
H5新标签----语义化标签 区别:1.默认样式不一样 2.有SEO优化作用 1.header,一般作为网页的头部使用 2.aside,侧边栏 3.nav,导航栏 4.address,地址,字体样式默 ...
- h5新语义化标签(重要)
1.HTML5新语义化标签 html4.01:div span h1 img- css2.1:width height background- css3:transform border-radius ...
- html标签语义化的好处,(2019)[前端]面试题[9]:HTML5语义化标签和新特性
问题 知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化? 说说你了解的HTML5语义化标签,HTML5新增了那些新特性? Hello,欢迎来到我的博客,每天一道面试题,我们共同进步 ...
- H5新特性(四)——语义化标签
语义化标签 什么是语义元素? 语义是指对一个词或者句子含义的正确解释.很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息.例如,当浏览器解析到 标签时,它将该标签 ...
- html5新语义化标签
HTML5的浏览器兼容 支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon ...
- html5语义化标签 加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...
最新文章
- c++读取声音文件之后回音_一段程序运行之后,输出的内容就是这段程序本身。...
- JSON数据解析及gson.jar包
- 洛谷——P2256 一中校运会之百米跑
- gnome硬盘分析_解决八种Linux硬盘问题的技巧
- mysql 删除hash分区_MySQL-如何删除hash表分区
- 计算机主板型号进bios,什么是BIOS?
- 【剑指offer】面试题17、合并两个排序的链表
- 关于Quartz 2D绘图的简单使用
- rmnet蠕虫病毒样本分析
- 帆软报表日期控件默认值为空
- 【统计学知识案例实践】—数据分析实战案例
- php es6写法,深入浅出es6模板字符串
- 我的新书《C++服务器开发精髓》终于出版啦
- 读书笔记-富爸爸穷爸爸-财富自由之路
- 人民的名义关系可视化展示
- 弘辽科技:拼多多新店推广的5个方法是什么?怎么推广?
- C#实现微信公众号群发消息(解决一天只能发一次的限制)
- BUG记录: Exception evaluating SpringEL expression
- 多线程与同步代码块详解
- Docker 生产环境之使用可信镜像 - 在内容信任(content trust)沙盒中演示
热门文章
- 2020年Q3美妆行业抖音小红书营销报告
- linux ping 8.8.8.8 不通,ping www.baidu.com和ping 8.8.8.8出现ping不通
- 哪些服务器支持win8系统,Win8服务器版更名Windows Server 2012
- 【面向对象】聚合的四种语义
- 【数据库系统】数据库系统的模式分层与数据独立性
- 基于信息流的安全格模型
- A quick presentation of the Visual Studio 2010 editions per role
- Spark MLlib
- Cgroup 好文集合
- 百度产品经理vs 腾讯产品经理:技术大牛与小白