《HTML5经典实例》读书笔记一

来源：互联网发布：蒙古语自学软件编辑：程序博客网时间：2024/05/22 10:48

前言

什么是HTML5：HTML5是由W3C开发的一个规范——–http://dev.w3.org/html5/spec/

第一章：基本语法和语义

问题：想要创建一个HTML5页面

在页面的最开始处指定HTML5 DOCTYPE：

<!DOCTYPE html>                 //DOCTYPE不区分大小写<html>...</html>

DOCTYPE文档类型声明，告诉浏览器和验证器，该页面是使用哪个HTML的版本编写的。从HTML5开始，DOCTYPE中删除了版本号。这允许HTML5在语法方面可以向后兼容，从而有望使得向HTML5转换更容易。

问题：需要确定Web页面的字符编码。

在文档头部，为字符集添加meta声明：

<meta charset="UTF-8">          //HTML5将浏览器所需的信息最小化，以前版本需要写成<meta http-equiv="Content-Type" content="text/html";charset=UTF-8"/>

如果没有在HTML中声明字符集，浏览器首先尝试从服务器的HTTP响应头部（特别是”Content-Type”）来确认字符集。在响应头部中声明的字符集，通常要优先于在文档中指定的字符集，并且因此而成为优先使用的方法。如果不能控制服务器所发送的头部，则在HTML文档中声明字符集是次优的选择。（由浏览器为你选择的字符集，可能会带来安全性风险）
关于字符实体的资源：http://www.digitalmediaminute.com/reference/entity/。

问题：想要指定web页面的主要语言

在开始的html元素中，添加lang属性和相应的值:

<html lang="en">       //不是必须的，但是从可用性和易访问性的角度来看，这是一个好做法。

问题：想要在引用外部CSS文件和javascript文件。

对于用户代理所需要的信息，HTML5要求其尽量最小化。因此在HTML5中type正式成为可选的：

<link rel="stylesheet" href=" styles.css"/><script src="script.js"></script>

结构性元素

使用这些结构性元素，可以帮助你使得标记更加富有语义，也助于在文档中定义主要位置。

使用HTML5来添加文档结构
- header
- footer
- nav（通常header会包含它）
- aside（包含了与其周围的内容相关、但又独立存在的信息，诸如一个边栏或醒目应用）
- section（包含了可以通过主题组织的内容或相关的内容）
- article。

article和section之间的选择
section是新的结构性元素中最为通用的，用来直接组织相关的内容。一条通用的规则是，section元素只适合于这样的情况：元素的内容在文档的纲要中明确地列出。
section和article之间的区别可能容易令人混淆：

不要简单地将section用作样式化钩子。将div和span用作该目的。
如果header、footer、aside或article更加适合你的内容，则不要使用section
不要使用section，除非它自身有个标题。

nav只适用于主要的站点导航，而不适合搜索结果链接或友情链接。

何时使用`<div>`元素

不想要使用某个新的结构性元素，而只是让它充当CSS的钩子。
关注内容并且避免不必要地使用<div> 当另一个元素更有语义时，就不要使用div

样式化结构性元素

有一些浏览器会将它们当作内联元素，所以：

header,footer,nav,article,aside,section{        display:block;

在IE9之前的版本中，必须在文档中添加一些Javascript，以使得IE识别这些元素并允许它们进行样式化：

<script>        document.createElement('header');        document.createElement('footer');        document.createElement('nav');        document.createElement('article');        document.createElement('aside');        document.createElement('section);<script>

任何时候，当你向文档添加新的HTML5元素时，如果想要IE9之前的版本配合，都需要添加document.createElement.

查看文档纲要

<section>    <h1>Most Recent Blog Posts</h1>    <article>        <h2>Isn't for all links</h2>    </article>    <article>        <h3>hahaha</h3>    </article>    <article>        <h2>You've Got the DOCTYPE</h2>    </article></section>

标题级别（隐式分块）[h1最高，h6最小]
1. Most Recent Blog Posts
1.1 Isn’t for all links
1.1.1 hahaha
1.2 You’ve Got the DOCTYPE

分块元素（显式分块）
1. Most Recent Blog Posts
1.1 Isn’t for all links
1.2 hahaha
1.3 You’ve Got the DOCTYPE

部分HTML5元素

强调文本—/ 
增强文本—`

i, b, em, strong元素在HTML5中的新语义

突出文本—
标记附属规则—（语义性的元素）
缩略语和缩写—<abbr></abbr>

<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

标记图和图题—<figure><figcaption></figcaption></figure>

<figure>             //没有限制为某种类型的内容，可以用来指定代码示例、照片、图标、音频和数据表等    <img src="chat.png"/>    <figcaption>The increasing amount of awesome that this blog</figcaption></figure>

HTML5的<a>元素:
HTML之前的版本将a限定为内嵌内容，但是HTML，a元素可以包含块级元素了。

<a href="xxx.com"><h1>HTML5,for Fun</h1><img src="xxx" alt="HTML5,for Fun"/></a>

为元素添加属性，实现功能

HTML中列表方面：

<ol start="3">    <li>Apple</li>    //序号为3    <li>Orange</li>   //序号为4</ol>

<ol>    <li value="1">Bananas</li>     //序号为1    <li value="1">Oranges</li>    //序号为1    <li value="2">Apples</li>      //序号为2</ol>

让页面的一部分可编辑：

只允许用户编辑内容，并没有保存这些编辑的功能。若要保存，需要结合js

<article contenteditable>    <h2>Stop<code>section</code>Abuse!</h2>    <p>As the most generic of the HTML5 structural elements,<code>section</code>is often incorrectly used as a styling container, when <code>div </code> is more appropriate.</p></article>