读书笔记:《HTML5开发手册》
一、HTML5中新的结构元素
1、 HTML5初始文件
1.1、doctype
在之前,doctype的声明是这样的:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//en"
"http://www.w3. org/TR/html4/strict.dtd">
doctype
称作文档类型声明(Document Type Definition),它总是作为HTML文件的第一行。doctype是WEB标准要求的一部分,用来告诉浏览器如何处理文档,这也是将其放在HTML文件第一行的原因所在。
如果不写doctype,浏览器就进入怪异模式(quirks mode),那么你编写的代码在某些浏览器下无法正常运行。
现在,HTML5提供了一个更简洁的标准文档声明:
<!DOCTYPE html>
1.2、字符编码
在head标记中的第一行需要包含的是charset(字符集)声明,它告诉浏览器应该如何解析这个文件。
在HTML4中,声明字符集需要这样做:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
现在,在HTML中,只需声明charset即可:
<meta charset="utf-8">
和doctype声明一样简洁!
1.3、JavaScript 与 css 链接
HTML5有助于降低页面中的大量标记(markup),还可以简化JavaScript与css的调用。
在HTML4中,script与link元素需要使用type属性:
<script type="text/javascript" src="xx.js"></script>
<link rel="stylesheet" type="text/css" href="xx.css" />
在HTML5中,简化如下:
<script src="xx.js"></script>
<link rel="stylesheet" href="xx.css" />
在HTML5中,浏览器已经假设script是JavaScript文件,link是css文件了,所以,不写type属性也没问题。
1.4、语法编写风格
在HTML5中,可以使用多种编码风格:
可以全部大写:
<SCRIPT SRC="XX.JS"></SCRIPT>
可以全部小写:
<script src="xx.js"></script>
可以不用引号
<script src=xx.js></script>
也可以混合使用
<SCRIPT src=xx.js></script>
虽然这些都可以使用,但是强烈建议使用前后一致的编码规范。这样不仅对你有帮助,而且对打算使用你代码的人来说,也大有益处。我们都曾用过XHTML,应该做到闭合所有标记、使用小写字母、对于属性要用引号括起来。
一个完成的HTML5初始页面结构为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--新HTML元素区域-->
</body>
</html>
将页面保存为.html(或.htm)文件。
1.5、HTML5验证
验证是一个很有用的工具,它可以检查事情可能出错的原因,在开发过程中是很重要的一个步骤。可以参考如下网站来验证你的页面与HTML5的一致性:
2、HTML5新元素
header、hgroup、nav、footer、article、section、aside,这些新的结构元素是为了告诉浏览器,页面具有什么样的结构,以及内容具有什么样的语义,这些名字从何而来呢?
2005年,Google分析了10亿多个Web页面,并找到了开发人员和web作者常用的类名。这也使Ian Hickson ——HTML5主规范的编辑——开始考虑这些新的元素。
以下是当时最流行的20个类名:
footer menu title small text content header nav copyright button main search msonormal date smalltext body style1 top white link
有些类名供显示使用(比如white、style1、msonormal),而其他类名则构成了HTML5规范中的元素(footer、nav、header)。
为什么要使用这些新的元素呢?HTML5让你可以为自己的内容提供语义。
2.1 header
header元素经常出现在Web页面的最上端。经常包含logo、网站名称、网站导航等信息,它可以在一个页面中多次使用。
<header>
<img alt="my site logo" src="logo.png" />
<h1><a href="#">Index</a></h1>
</header>
HTML5规范提到,header元素可以包含导航。每个网页没有限制只能使用一个header元素,也没有要求header必须在页面最顶部。
<article>
<header>
<h1>Chapter 1</h1>
<p>11.1</p>
</header>
<p>some words</p>
</article>
<article>
<header>
<h1>Chapter 1</h1>
<p>11.1</p>
</header>
<p>some words</p>
</article>
如果header中只有一个标题(h1-6),就没有必要使用header了,直接使用h1-6就足够了。
2.2 hgroup
该标签在HTML5.1中已经废弃。
2.3 nav
顾名思义,nav元素的作用就是提供导航。它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分。
很多情况下,开发者都使用无序列表编写导航:
<ul id="nav">
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
在HTML5中,创建nav元素时,没有太大改变:
<nav>
<ul id="nav">
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
也可以把nav元素放到header中,原因是header元素允许出现介绍性内容和导航内容。
<header>
<h1>Title</h1>
<nav>
<li>Index</li>
</nav>
</header>
使用nav元素可以有效提升可访问性。屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组,而不需要等待页面全部加载完毕。
2.4 article
article元素是一个独立的内容块,它可以独立存在,也可以被重用。RSS订阅的内容就非常具有代表性。
HTML5规范给出了一些如何使用article元素的示例:论坛的帖子,杂志或新闻的文章、一篇博文或用户提交的评论。
<article>
<header>
<h1>新年大事记</h1>
<p>12.01.01</p>
</header>
<p>一个段落</p>
<p>一个段落</p>
</article>
HTML5规范讲到,article代表“内容独立的某个部分”,甚至博客评论内容也可以用它来表示。
2.5 section 对内容分组
section元素是一个总是需要标题的内容区域或页面区域。可以用它将多个部分的内容组合在一起,也可以根据需要,将内容的某一个部分进一步划分。
它不可用作通用封装器来实现样式上的需求
section元素可以包含article,并且article元素也可以继续将内容分割成几个section。
<h1>News</h1>
<section>
<h1>运动新闻</h1>
<p>小标题</p>
<section>
<section>
<h1>财经新闻</h1>
<p>小标题</p>
<section>
<section>
<h1>娱乐新闻</h1>
<p>小标题</p>
<section>
</h1>
article与section的选择
目前来看,section与div的使用方式很像,但是与div不一样的是,section具有语义,它是一组相关内容的组合。
section中可以包含article,就像新闻页面,有一个新闻版块,在该版块中又有不同类别的新闻。
如果你认为这部分内容具有独立的意义,那么就应当使用article标记。
HTML5规范中讲到:强烈建议开发人员将div元素视为最后求助的元素,也就是说在没有其他元素合适的情况下才求助于它。
div元素并不承载任何特殊的语义。如果使用了section,它会添加到文档大纲中,表明是重要的,相反,div不能添加到大纲中,如果section只用来设置样式,则最好使用div。
2.6 aside
aside标记表示跟周围内容紧密关联的一组内容,比如热门文章列表、博文分类、最近评论。这种内容与主页内容相关,但由于它相独立存在。
要想正确使用aside,取决于它的位置。
- 放到article中,aside的内容必须与article内容紧密关联,比如词汇表
放到article或section外,则它的内容应该与整个页面相关的,比如相关链接、广告等
<aside>
<h2>相关链接</h2>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</aside>
2.7 footer
顾名思义,footer元素常位于页面的底部。但也并非如此,footer元素旨在包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于section或article中,则包含文章发布的日期、标记、分类和其他元数据。
<footer>
<small>© Copyright 2016-2017</small>
<footer>
HTML5规范中讲到,footer元素可以包含指向相关文档的链接,也可以包含其他链接,比如“上一篇文章”、“下一篇文章”链接等。
2.8 使用HTML5大纲工具验证结构
工具:https://gsnedders.html5.org/outliner/
转载自:http://www.cnblogs.com/yangyoucun/p/6255486.html。
读书笔记:《HTML5开发手册》的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记(18)多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新:《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
- 读懂UI设计的心理学
好文转载,版权归原作者 作为UI设计师,对待用户就像对待婴儿,知道如何通过界面设计诱导用户非常重要,这就需要了解心理学方面的知识了.今天分享一篇日本设计师的好文,结合心理学与设计,教你读懂心理学,提高 ...
- Error of "Please Check for Sufficient Write File Permissions"
The error message “Please check for sufficient write file permissions” is generated by the Web-based ...
- ios10 safari 的坑!
| 导语 ios10 的safari,又给前端开发者挖坑了..测试验证此问题只出现在ios10 safari中.想早点知道结论的,可以直接看最后一个结论~因为,解决过程不重要! 个人原创,未经允许,禁 ...
- java中使用 redis (转载)
jedis是一个著名的key-value存储系统,而作为其官方推荐的java版客户端jedis也非常强大和稳定,支持事务.管道及有jedis自身实现的分布式. 在这里对jedis关于事务.管道和分布式 ...
- sys.stdout.write与sys.sterr.write(三)
目标: 1.使用sys.stdout.write模拟"|"的顺时针变化- \ | / 2.使用sys.stderr.write模拟"|"的顺时针变化- \ | ...
- EasyUI分页
$("#tanModelBox1").css("display","none"); $('#dg').datagrid({ fitColum ...
- 关于UIView的方法animateWithDuration:animations:completion:的说明
今天遇到一个问题,具体问题就不细说了,总之是UIView的动画导致的. 研究结果表明,UIViewController被挡住或没显示出来时,用UIView的静态方法animateWithDuratio ...
- mac系统terminal连接linux
ssh user@hostname user是管理员账号 hostname是服务器ip
- 在线免费生成 <IDEA>全系列 注册码
body { background: #fff; color: #333; font-family: Consolas, sans-serif; margin: 2em auto; width: 70 ...