[HTML5权威指南] => 读书笔记(一)

学习内容

HTML5权威指南

学习笔记

第一章 HTML5背景知识

JavaScript => 浏览器竞争 => 插件 => 语义化HTML => HTML5

提到 HTML5 实际上包含了 HTML5,CSS3,JavaScript 三个部分，因为三者不可分割。

检查浏览器对H5支持情况：http://caniuse.com

HTML5 重要的新特性：引入多媒体支持； 支持Canvas。

第二章 准备工作

浏览器：Chrome

HTML编辑器：Sublime(我的选择)

Web服务器语言：Node.js

第三章 初探HTML

1. 将内容和呈现分开

用HTML控制文档内容的结构和含义，用CSS控制内容呈现给用户的形式。

2. Void element

无闭合标签，如<hr><br>。

3. 元素属性

只能用在开始标签或Void element，不能用在结束标签。

4. 自定义属性

必须以data-开头，自定义属性是对HTML4中浏览器应当忽略不认识的属性这种广泛应用的技巧的正式规定。

5. HTML文档

文档不仅被浏览器（这是最常用的）查阅，也可能会被一些别的软件处理（例如百度的爬虫）。

6. 父元素、子元素、后代元素和兄弟元素

包含另一个元素的元素是被包含元素的父元素，反过来被包含元素是包含元素的子元素，子元素是关系最近的后代元素，具有同一个父元素的几个元素互为兄弟元素。

7. 元素类型

元数据元素（metadata element） => 用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示；

流元素（flow element） => 流元素是短语元素的超集；

短语元素（phrasing element） => 确定一个元素合法的父元素和子元素范围。

有些元素无法归入上述三种类型。

8. HTML实体

每个特殊字符都有一个实体编号和实体名称。如： ①’<’ === ‘<’ === ‘<’ ②’>’ === ‘>’ === ‘>’

9. 全局属性(global attribute)

用来配置所有元素共同的行为。全局属性可以用在任何一个元素上。

9.1 accesskey属性：设定用来选择页面上元素的快捷键。注意：用来触发accesskey机制的按键组合因平台而异，在Windows系统上是同时按下Alt键和accesskey属性值对应的键。

<!-- Windows下，按下Alt+n选中name框，按下Alt+p选中password框 -->
name:<input type="text" name="name" accesskey="n">
password:<input type="text" name="password" accesskey="p">

9.2 class属性：将元素归类，一个元素可以被归入多个类别，在属性值中用空格分隔类名即可。class属性本身无作为，一般利用方式是通过CSS设计该类样式，JavaScript同样可以利用该属性。

9.3 contenteditable属性：让用户能够修改页面上的内容。该属性值为’true’时用户可以编辑元素内容，为’false’时禁止编辑。如果未设定，元素会从父元素处继承该属性值。

<!-- 父元素和子元素一均能修改，因为子元素一contenteditable未设置 -->
<!-- 子元素二不能修改，因为子元素二不含有contenteditable属性 -->
<p contenteditable="true">父元素
<p contenteditable>子元素一</p>
<p>子元素二</p>
</p>

9.4 contextmenu属性：用来为元素设定快捷菜单，在受到触发时弹出。目前尚无支持该属性浏览器(Firefox仅部分支持)。

9.5 dir属性：用来规定元素中文字的方向元素中文字的对齐方向。有效值有两个：ltr(left to right)和rtl(right to left)。

<!-- 不是文字的方向，应该是对齐方式，ltr是靠右对齐，rtl是靠左对齐 -->
<p dir="ltr">这是从坐到右，这是左对齐</p>
<p dir="rtl">这是从右到左，这是右对齐</p>

9.6 draggable属性、dropzone属性：HTML5支持拖放操作的方式，用来表示元素是否可被拖放。

9.7 hidden属性：布尔元素，浏览器对其处理方式是隐藏相关元素。

9.8 id属性：用来给元素分配一个唯一的标识符。标识符通常用来将样式应用到元素上或在JavaScript程序中用来选择元素。

注意：id属性还可以用来导航到文档中的特定位置。在网页url后面加上#id即可直接导航至该元素。例如：html5.html#example将直接导航至id为example元素的位置。

9.9 lang属性：用于说明元素内容使用的语言。目前一般在标签中即声明，方便浏览器翻译等等，如。

9.10 spellcheck属性：用来表明浏览器是否应该对元素的内容进行拼写检查，该属性只有用在用户可以编辑的元素上才有意义。个人感觉这个属性还不够完善，不要使用。

<!-- 对于设置了contenteditable属性的元素，似乎默认spellcheck属性为true -->
<p contenteditable="true">设置了contenteditable属性的元素</p>
<textarea spellcheck="true"></textarea>

9.11 style属性：用来直接在元素上定义CSS样式。

9.12 tabindex属性：HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换，设置该属性可以改变默认的转移顺序。

<!-- Tab键先从有属性值的开始，之后再按照文档流顺序选中 -->
<!-- 属性值从1开始选中，若属性值一样则按照先后顺序选中 -->
<!-- 若属性值不为整数则相当于未设置该属性 -->
<!-- 若属性值为负则永远不会被Tab选中 -->
first focus:<input type="text" tabindex="1"><br>
never focus:<input type="text" tabindex="-2"><br>
second focus:<input type="text" tabindex="2"><br>

9.13 title属性：提供了元素额外的信息，浏览器通常用此显示提示信息（如：鼠标放上去触发title属性值）。

<!-- 鼠标放上去即出现title信息 -->
<p title="猜谜">这一段话有什么秘密吗<span title="并没有">？</span></p>

第四章 初探CSS

1. 样式定义的几种方法

使用元素内嵌样式 => 直接为元素定义style属性；

使用文档内嵌样式 => 用style元素定义文档内嵌样式，注意是元素而不是属性；

使用外部样式表 => 创建独立的样式表文件，以.css为文件扩展名，在文档中用link元素将样式文件导入即可(推荐方式)。

<!-- 利用link元素导入样式表 -->
<link rel="stylesheet" type="text/css" href="style.css">

注1： 当有不同样式表使用了相同的选择器，样式表的导入顺序就尤为重要，注意：后导入的样式表将得到应用。

注2： 可以用@import语句，将样式从一个样式表导入到另一个样式表。@import语句必须位于样式表顶部。

注3： @import语句用的不广泛，一个原因是因为浏览器处理@import语句的效率往往不如处理多个link元素并靠样式层叠解决问题。

注4： 样式表中的字符编码，CSS样式表中可以出现在@import语句之前的只有@charset语句，该语句用于声明样式表使用的字符编码。

@charset "UTF-8";
@import "style.css";
span {
border: medium black dashed;
padding: 10px;
}

优先级：样式表中的字符编码 > 载入该样式表的HTML文档的字符编码 > 默认值UTF-8；

2. 样式的层叠和继承

样式的定义方式(元素内嵌，文档内嵌和外部样式表)，但是样式的来源不仅仅是这三种，还有另外两个来源，浏览器样式和用户样式。

2.1 浏览器样式：是元素尚未设置样式时浏览器应用在它身上的默认样式，这些样式因浏览器而存在差异。

2.2 用户样式：浏览器允许用户定义自己的样式表，这类样式表中包含的样式称为用户样式。

2.3 层叠：浏览器显示元素时所使用的CSS属性的次序。

元素内嵌样式 > 文档内嵌样式 > 外部样式 > 用户样式 > 浏览器样式

前三个样式来源合称为作者样式。

2.4 层叠次序更改：使用!important改变正常的层叠次序。在样式声明后面附上！important即可将对应属性值标记为重要，不管该样式属性定义在什么地方，浏览器都会优先考虑。

<style>
span {
color: red !important;
}
</style>
<!-- 按照层叠次序，span里面字体颜色应该为blue，实际上却为red -->
<!-- 因为在文档内嵌样式中定义了!important -->
<span style="color:blue">@important改变层叠次序</span>

注意：能够优先级高于作者样式的只有用户样式中定义为!important的属性，对于普通属性，作者样式高于用户样式。

2.5 具体程度和定义样式解决同级样式冲突：

样式的具体程度通过统计如下三类得出：

(a)样式中选择器中id值的数目；

(b)选择器中其他属性和伪类的数目；

(c)选择器中元素名和伪元素的数目。

评定具体程度的时候按照a-b-c的格式判定，亦即1-0-0比0-5-5具体程度高。

如果同一个样式属性出现在具体程度相当的几条样式中时，按照后来者居上的规则选用。

2.6 继承：如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的这个样式属性值。

注意：并非所有CSS属性均可继承。经验：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。在样式中使用inherit即可强制继承。

<style>
p {
color：white;
background: grey;
border: medium solid black;
}
span {
border: inherit;
}
</style>

3. CSS中的颜色表示方法

颜色名称(black)；十六进制表示法(#000000)；十进制表示法(0,0,0)。

CSS颜色函数：rgb(r, g, b);rgb(r, g, b, a);hsl(h, s, l);hsl(h, s, l, a)。其中a表示透明度，0代表全透明，1代表完全不透明。

4. CSS中的长度

两种类型的长度单位：绝对单位和相对单位。

绝对单位：这类单位是现实世界的度量单位，CSS支持五种，in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。

相对单位：相对单位依托于其他类型的单位，主流浏览器支持的CSS相对单位，em(与元素字号挂钩)、ex(与元素字体的”x高度”挂钩)、rem(与根元素的字号挂钩)、px(CSS像素)、%(另一属性值得百分比)。

注：像素这个术语一般指显示设备上可寻址的最小单位——图像的基本元素，然而CSS定义像素为：参考像素是距读者一臂之遥的像素密度为96dpi的设备上的一个像素的视角。主流浏览器并未按照CSS定义，而是将1像素视为1英寸的1/96。这样像素尽管是CSS定义的相对单位，却被浏览器当做绝对单位对待。

5. CSS中的其他单位：

角度：deg(度：0deg ~ 360deg)、grad(百分度：0grad ~ 400grad)、rad(弧度：0rad ~ 6.28rad)、turn(圆周：1turn等于360deg)。

时间：s(秒)、ms(毫秒)。

6. 使用LESS改进CSS。

第五章 初探JavaScript

书中第五章的知识点都属于基础知识点，不做过多记录。