读书笔记：《HTML5开发手册》

（HTML5 Developer‘s CookBook）

虽然从事前端开发已有很长一段时间，对HTML5标签也有使用，但在语义化上面理解还不够清晰。之前在图书馆看到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>&copy; Copyright 2016-2017</small>
<footer>

HTML5规范中讲到，footer元素可以包含指向相关文档的链接，也可以包含其他链接，比如“上一篇文章”、“下一篇文章”链接等。

2.8 使用HTML5大纲工具验证结构

工具：https://gsnedders.html5.org/outliner/

读书笔记：《HTML5开发手册》--HTML5新的结构元素的更多相关文章

  1. 读书笔记：《HTML5开发手册》--现有元素的变化

    读书笔记:<HTML5开发手册>-- 现存元素的变化 继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例. 一.cite HTML ...

  2. 读书笔记：《HTML5开发手册》--figure、time、details、mark

    这是补充HTML5基础知识的系列内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四. ...

  3. 读书笔记：《HTML5开发手册》

    一.HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: <!DOCTYPE HTML PUBLIC "-//W3C//D ...

  4. 2017年最重要的HTML5开发手册，传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的HTML5进阶学习一点资讯群:250777811,里面 ...

  5. 2018年最重要的HTML5开发手册，传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的web前端/HTML5/javscript技术学习群: ...

  6. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  7. html5开发学习 html5自学需要怎么学

    记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...

  8. HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...

  9. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

随机推荐

  1. C# 之 DataReader 和 DataSet 的区别

    本文转载自:http://www.cnblogs.com/xinaixia/p/4920630.html 1. 获取数据的方式[1]DataReader 为在线操作数据, DataReader会一直占 ...

  2. 网页打包安卓APP流程

    搭建环境过程: 1. 安装JDK. 参见http://www.cnblogs.com/Li-Cheng/p/4334985.html. 注:实质上到该网址上下载好JDK安装包,安装后添加一个环境变量: ...

  3. php更新修改excel中的内容例子

    代码如下 复制代码 //模板存放目录$dir = $DOCUMENT_ROOT.'/backoffice/admin/oemcheck/';  $templateName = '1.xlsx';$ou ...

  4. js 之 Post发送请求

    // ajax 对象 function ajaxObject() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new X ...

  5. 统计学习方法——CART, Bagging, Random Forest, Boosting

    本文从统计学角度讲解了CART(Classification And Regression Tree), Bagging(bootstrap aggregation), Random Forest B ...

  6. 5分钟学会使用gitlab

    第一次接触到gitlab,操作不是很熟练,犯了一堆错,在多次尝试之后,大概了解了流程,这篇文章主要帮助大家快速上手gitlab,如果文章有什么不对的地方,欢迎在评论区留言~ 1.新建项目 首先你得有个 ...

  7. Aptana版本回滚的方法

    最近Aptana对Django1.7的编译支持有点问题,开发环境必须使用Django1.6版本,今天看了一眼它的官网,版本已经到3.6.1,我的版本还是3.4.2,就checkupdate升级到3.6 ...

  8. pyQt5不让进度条卡住

    这里我们用一个更新程序做示例, 下载文件的过程中让进度条实时显示下载进度. 如果下载和更新进度条的工作都放在一个线程中,会出现进度条卡顿的情况. Qt中正确的做法是把界面刷新和工作任务交给不同的线程去 ...

  9. form表单中button按钮返回上一页解决办法

    解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...

  10. Kafka connect in practice(3): distributed mode mysql binlog -&gt;kafka-&gt;hive

    In the previous post Kafka connect in practice(1): standalone, I have introduced about the basics of ...