HTML5学习之语义化标签
一、为什么HTML5要引入新语义标签
在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点,HTML5新增了很多新的语义化标签。
二、引入语义化标签的优点
引入语义化标签的好处主要有下列三点:
- 比
<div>
标签有更加丰富的含义,方便开发与维护 - 搜索引擎能更方便的识别页面的每个部分
- 方便其他设备解析(如移动设备、盲人阅读器等)
三、标签详解
所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍<article> <section> <nav> <aside>、<header> <footer>
等HTML5新增的语义化区块标签。
(一) header
通常被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题、简介等信息,起到引导与导航的作用。
我们不但可以放置页面或者页面中某个区块的标题,还可以放置搜索表单、logo图片等元素,按照最新的W3C标准,我们还可以放置<nav>
导航栏。
下面是一个使用该标签的网站头部实例:
<header><img src="data:images/logo.png" alt="**科技" /><h1>**信息科技有限公司</h1>
</header>
需要注意的是,一个文档中可以包含一对或者一对以上的<header>
标签。标签的位置是次要的,不一定非要显示在页面的上方,我们可以为任何需要的区块标签添加<header>
元素,例如下面将要讲解的<article> <section>
等标签。
(二)nav
表示页面的导航,可以通过导航连接到网站的其他页面,或者当前页面的其它部分。
<nav>
不但可以作为页面独立的导航区域存在,我们还可以在<header>
标签中使用。此外,<nav>
标签还可以显示在侧边栏中。由此可见,一个页面之中可以有多个<nav>
标签。
根据HTML5标准,<nav>
标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>
标签来确定网站的主体内容,所以并不是任意一组超链接都适合放置在<nav>
标签中,我们只要将主要的,基本的链接组放进<nav>
即可,对于有辅助性的页脚链接则不推荐使用<nav>
标签。
示例如下:
<header><img src="data:images/logo.png" alt="**科技" /><h1>**信息科技有限公司</h1><nav><li><a href="#">首页</a></li><li><a href="example.html">客户案例</a></li><li><a href="service_one.html">技术服务</a></li> <li><a href="aboutus_one.html">关于我们</a></li><li><a href="connection.html">联系我们</a></li></nav>
</header>
值得我们注意的是,HTML5规范不允许将<nav>
标签嵌套在<address>
标签中使用。
(三)aside
所包含的内容不是页面的主要内容、具有独立性,是对页面的补充。
<aside>
标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。
示例如下:
<article><h1>HTML5学习之语义化标签</h1><p>....正文.....</p><aside><h2>什么是语义化标签</h2><p>语义化标签就是......</p></aside>
</article>
(四)footer
一般被放置在页面或者页面中某个区块的底部,包含版权信息、联系方式等信息。
跟<header>
标签一样,<footer>
标签的使用个数没有限制,可以在任意需要的区块底部使用。
示例如下:
<footer><small>版权所有 © 2016-2017 **信息科技有限公司</small>
</footer>
(五)article
表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,可以被独立的发布或者重新使用文章标记标签。
<article>
标签应该使用在相对比较独立、完整的的内容区块,所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下,一个<article>
元素包括标题、正文和脚注。和<nav>
标签一样,该标签同样不能用在<address>
标签中;
示例如下:
<article><h1>HTML5学习之语义化标签</h1><p>....正文.....</p><footer>版权所有*伪版必究</footer>
</article>
<article>
标签还可以嵌套使用,但是它们必须是部分与整体的关系。例如在一篇发表的博客中,我们可以对读者评论使用该标签。
示例如下:
<article><h1>HTML5学习之语义化标签</h1><p>....正文.....</p><article><header><h2>读者评论</h2></header> <article><header><h3>评论人:张三</h3><p>评论时间:<time datetime="2017-02-15">2017-02-15 11:45:23</time></p></header><p>张三到此一游</p></article> <article><header><h3>评论人:李四</h3><p>评论时间:<time datetime="2017-02-09">2017-02-09 14:20:15</time></p></header><p>李四到此一游</p></article> </article>
</article>
(六)section
是一个主题性的内容分组,通常用于对页面进行分块或者对文章等进行分段
<section>
标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。
<section>
通常包含一个头部<header>
、可能还会包含一个尾部<footer>
。
示例如下:
<article><h1>JavaScript框架</h1><p>Javascript框架是指以Javascript语言为基础搭建的编程框架。</p><section><h2>angular.Js<h2><p>angular.Js是一款优秀的前端JS框架</p></section><section><h2>Vue.js<h2><p>Vue.js是用于构建交互式的Web界面的库</p></section><section><h2>jQuery<h2><p>jQuery是一个快速、简洁的JavaScript框架。</p></section>
</article>
在这篇关于JS框架的文章中,所列举的三个框架都是文章主题构成的一部分,所以我们使用<section>
标签对其进行分段。
我们不但可以在<article>
标签中使用<section>
标签,还可以在<section>
标签中使用<article>
标签。
示例如下:
<section><h1>HTML5技术栈</h1><p>广义而言的HTML5包含HTML、CSS和JavaScript三个部分</p><article><h2>HTML<h2><p>内容</p></article><article><h2>CSS<h2><p>样式</p></article><article><h2>JavaScript<h2><p>行为</p></article>
</section>
在这个例子中,<section>
标签代表一段内容,在这段内容中,HTML、CSS、Javascript是三个完全独立的部分,因而我们为这三个不同的部分分别使用<article>
标签。
<div> <section> <article>
三者的比较:
<div>
:应用广泛,只要我们想为一个区域定义一个样式或者为其添加JS行为,就可以使用div标签<section>
:包含的内容是一个明确的主题,通常有标题区域<article>
:如果我们的页面中需要一个单独的模块来实现一个单独的功能,就用<article>
,其他的时候都用<section>
。
四、文档级别语义
HTML5试图为每个元素加入一个特定的文档级别语义。
(一)ruby、rt、rp
ruby是一种排版注释系统,是位于横排基础文本上方的简短文字,主要针对东亚语言作出简单的读音注释。例如可以为中文或日文显示读音。
ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一个具体的表达式,然后使用rt提供说明。rt部分将显示在表达式上方。
下面这个例子中,拼音将显示在文字的上方。
<ruby>北<rt>bei</rt>京<rt>jing</rt>
</ruby>
但是在不支持ruby的浏览器中需要使用rp对这两个区块进行视觉上的隔离。
<ruby>北<rp><rt>bei</rt></rp>京<rp><rt>jing</rt></rp>
</ruby>
(二)time
为了将现在的常用的日期和时间语句用规范的、利于机器识别的格式进行表述,time元素提供了一个可选的时间和时区组件。
为了确保机器能够正确识别,我们可以使用datetime属性,其属性值可以被定义为时间、日期或者这两者的复合体。
<time datetime="2017-07-03">
还可以使用pubdate为一个网页指定发布时间。
<time datetime="2017-07-03" pubdate>
<!--以下两种形式也可以行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">
注意:在 HTML5中,true或false并非有效的属性值,当解释器发现存在布尔属性时,它将直接解释为true。如果需要将属性设为false,将这个属性去掉即可。
(三)mark
mark元素用于高亮标记一段文字。
可以使用mark元素来标记出网页里被搜索的关键词或是用于高亮显示一段解释性的代码。
(四)wbr
wbr元素用于让浏览器为长单词增加可选择的破折号,以便自动拆行。
在相当长的单词中插入一对wbr元素,可以让浏览器根据排版的需要决定是否将单词换行。破折号是否出现,以及出现的位置完全由排版决定。wbr只是允许自动拆行,但非强制拆行。
(五)略微改变的元素
在HTML4版本中的标签元素在HTML5中有了新的定义。
使用b表示文档渲染为粗体,而i表示文档渲染为斜体。使用strong和em来强调一段重要的文本。cite用来为对参考文献的引用进行定义,比如书籍或杂志的标题。small不仅仅指的是小字体,它还同样为法律声明增添不具有重要性的旁注或小字。hr现在表达的是主体性的间断,不再仅仅是分割版面的一条水平线。
转载于:https://www.cnblogs.com/hedawei/p/6376087.html
HTML5学习之语义化标签相关推荐
- html5语义化编程,HTML5常用的语义化标签
本文将为您描述HTML5常用的语义化标签,具体实现方法:快速查询 article | aside | nav | section | header | footer 架构预览 nav定义导航链接的部分 ...
- html 树形结构_HTML学习之语义化标签
语义类标签是什么,使用它有什么好处? 语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的section.nav. ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- HTML5的革新——语义化标签
一.语义化标签的实战意义 我先收集到一些观点,大家姑且先听上一听, 有人说: "没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些" " ...
- HTML5新增的语义化标签
文章目录 一.HTML5 新增语义化标签 二.新增的多媒体标签 1.音频标签: 2.视频标签: 3.总结 一.HTML5 新增语义化标签 新增的语义化标签有下列几种: <header>:头 ...
- HTML5新增的标签语义标签,HTML5新增的语义化标签解析
HTML5 新增了许多语义化标签 语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 作用 : 1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为 ...
- Html5 什么是语义化标签? 常见的语义化标签有哪些?
h5 语义化标签的推出很好的解决了满屏的 div 布局,语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义,使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让和搜索引擎都容易理解. ...
- html5语义化标签大全
常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...
- html语义化标签 例子,0820作业:HTML5新增语义化标签及实战总结
作业1:HTML5 新增语义化布局标签 实例 html> html5新增的语义化标签 initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, ...
最新文章
- 非侵入脑机接口新突破!用意念控制光标,连续追踪效果提升5倍
- erlang精要(17)-匿名函数多子句-多个激活函数实现
- 所谓的二维背包Triangular Pastures POJ 1948
- 设置一个DIV固定在底部,并且左右固定,垂直居中
- 前端学习(650):标识符 关键字 保留字
- 新云网、5G、Wi-Fi 6 Plus,探秘2021通信展上的锐捷网络黑科技
- 2018年10月22日-Python day1
- 关于C#的GetHashCode
- java day47【redis概念 、下载安装 、 命令操作 、持久化操作 、使用Java客户端操作redis】...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- JAVA命令符找不到符号_java: 找不到符号 符号: 方法 setLatestEventInfoentInfo
- amd一键超频怎么用_AMD Ryzen小白说明书——CPU超频篇
- 第一代云原生企业米哈游如何让想象发生?
- gitBash快速清屏,git命令行操作,快速清屏,清屏
- Windows 纤程/协程
- 中央处理器(CPU)—— 控制器的功能和基本原理(硬布线控制器(CU))
- 【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )
- 7-2 平面向量加法
- Fiddler 插件 hook 参考代码
- 神经网络与深度学习(四)线性分类
热门文章
- 小学生学python到底能干什么-小学生都学Python了,你还没用万矿?
- python常用指令-Pytes及Allure常用命令
- python菜鸟excel教程-Python操作Excel的Xlwings教程(一)
- python知乎-知乎大佬李启方道出肺腑之言:为什么我不建议你学Python?
- python朋友圈为什么这么火-用Python发一个高逼格的朋友圈「附代码」
- python画横条形图-用matplotlib画条形图(bar)
- python web-Java web 和 Python web??
- python turtle画椭圆-python turtle 绘制太极图的实例
- python测试开发自学教程-自动化平台测试开发:Python测试开发实战_PDF电子书
- 自学python还是报班-没有基础想学python为什么一定要报班?