HTML5学习笔记(二):用于构建页面的语义元素
1、语义元素
大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事。
2、使用语义元素的原因
- 容易修改和维护;
- 无障碍性(现代Web设计的一个重要主题);
- 对搜索引擎的友好性高;
- 适应未来的浏览器和Web设计工具的发展趋势
3、语义元素的来历
在发明HTML5之前,其发明者花很长时间研究已有的网页,还研读了谷歌对十几亿个网页的统计信息。谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名,将Web页面中一些共性的东西(比如页面都有页眉、页脚导航菜单等)从人们普通的做法中提取出相应的语义。发明者依据这个调查制定成了规范。
4、浏览器对语义元素的支持情况
HTML5的语义元素基本得到了所有现代浏览器的支持,最大的绊脚石还是IE9之前的Internet Exploer。
浏览器在遇到不认识的元素时,会把它们当成内联(inline)元素挤在一起,为了解决这个问题,可为HTML5的这些语义元素添加一个样式,可转化为块级元素:
article,aside,figure,figcaption,header,footer,nav,main,section,details,summary {
display:block;
}在支持HTML5元素的浏览器中并不会有影响。
5、用语义元素构建页面
- <article>元素
这个元素表示一个完整的、自成一体的内容块,比如博客文章或者新闻报道。<article>元素应该包含所有相关的内容,包括标题、作者署名以及正文,但不包含<footer>元素。例:
<article>
<header>
<h1>This is blog's title</h1>
</header>
<div class="content">
......
</div>
</article> <footer>
......
</footer>
- aside元素:用来添加附注
此元素表示与它周围的文本无密切的内容,可以用此元素介绍另一个相关的话题,或者对主文档提出的某个观点进行解释;另外,也可以用<aside>元素来盛放广告、相关内容或者链接,甚至可以添加醒目引文。
<aside>
<img src="quotes_start.png" alt="quote" /> <!--,开始引用符号的图片-->
<span>We don't know how the universe started, so we can't be sure it won't just end, maybe today.</span>
<img src="quotes_end.png" alt="quote" /><!--结束引用符号的图片-->
</aside>
- <figure>+<figcaption>元素
为页面添加插图(与普通图片区分),插图是与文本相关的,文本会提到它,且常常伴有图题(<figcaption>)。
<figure class="FloatFigure">
<img src="human_skull.jpg" alt="Human skull">
<figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption>
</figure>
- <header>元素
一个网页中可以包含多个<header>元素,有两种使用方式,差别并不是很大。
一种是用它标注内容的标题,此种情况除非必要,否则不必使用,只有在内容标题还附带了其他信息的情况下,才有必要,例:
<header>
<h1>......</h1>
<p>......</p>
<p>......</p>
</header>
另一种是它标注网页的页眉。
- <footer>元素
HTML5规定,只能在<footer>元素中放一些网站的版权信息、作品来源、法律限制以及链接之类的信息,不能放太多其他内容。
为了不违反HTML5的规定且在页面底部放入更多内容,可用如下:
<div class="fatfooter">
<aside>
<img src="..." />
<p>......</p>
</aside>
<footer>
<p>......</p>
</footer>
</div>
- <nav>元素:标注导航链接
<nav>
<ul>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
</ul>
</nav>
- <section>元素
可用于:和页面主体内容并列的小内容块、独立性内容(但并不是文章)、分组内容等。
- <details>和<summary>元素:折叠栏(但目前只有Chrome、Opera和Safari浏览器支持)
<details>
<summary>Section #1</summary>
<p>......</p>
</details>
- <main>元素
用于标识网页的主要内容,一个页面只能有一个此元素,对屏幕阅读器非常重要。
HTML5学习笔记(二):用于构建页面的语义元素的更多相关文章
- HTML5学习笔记 二:article和section
在HTML5中,article可以看做特殊种类的section,它比section更强调独立性. section元素强调分段或分块,而article强调独立性: 如果一块内容相对独立.完整,应该使用a ...
- HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
- HTML5学习笔记<二>:元素,属性,格式化
HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...
- python 学习笔记(二):为元组的每个元素命名,提高程序的可读性
在程序中有些数据为固定格式时,即字段数量确定.字段位置顺序确定不变,我们就可以用元组来储存.使用元组的优势是储存空间很小,访问速度也很快.如下代码对每个学生信息用元组来表示: # ('Jim', 16 ...
- HTML5学习笔记(一):HTML5基本概念
1.HTML的发展历程 HTML(1994年,W3C成立) HTML2(1995年) HTML3(1996年) HTML4.0(1997年) HTML4.01(1999年)——HTML5(2008年: ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
随机推荐
- [POJ 1316] 树上的询问
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1316 [算法] 点分治 由于边权较大,笔者在计算时使用了STL-set 注意当询问为 ...
- 不使用Store安装WSL
Windows Store经常会因为各种原因打不开, 这时候我们可以尝试直接下载安装WSL 1. PowerShell里运行下载: PS C:\WINDOWS\system32> Inv ...
- 17.QT键盘
mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> 5 #include <Q ...
- Java语言的优点
1)Java为纯面向对象的语言. <Thinking in Java>提到Java语言是一种“Everything is object”的语言,它能够直接反应现实生活中的对象, 例如火车, ...
- ROS-turtlesim
前言:turtlesim是ros自带的一个功能包,应该是用于基础教学的功能包,帮助新手入门的一个实例,包括:节点,主题,服务以及参数的应用.通过学习使用turtlesim功能包可以了解ros的一些基础 ...
- 转:Eclipse上安装GIT插件EGit及使用
一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
- avformat_find_stream_info函数卡住问题
问题:初始化RTSP流时,在android设备上卡住在avformat_find_stream_info函数,然后程序崩溃. 但其他URL没问题,且同样在代码在iOS上没问题,由于jni调试,也没看到 ...
- 基于Socket的Winform例子
一.直接上效果图 二.Socket握手 三.服务端 Thread threadWatch = null;// 负责监听客户端的线程 Socket socketWatch = null;// 负责监听客 ...
- P1634 禽兽的传染病
题目背景 mxj的启发. 题目描述 禽兽患传染病了.一个禽兽会传染x个禽兽.试问n轮传染后有多少禽兽被传染? 输入输出格式 输入格式: 两个数x和n. 输出格式: 一个数:被传染的禽兽数. 输入输出样 ...
- spring-session与redis实现session共享
一.准备 两个不同端口号的输出request.getLocalPort() + " ---> " + request.getSession(true).getId()的简单S ...