HTML5与CSS3基础教程第八版学习笔记1~6章
第一章，网页的构造块
网页主要包括三个部分：
1、文本内容（纯文字）
2、对其他文件的引用：图像，音频，视频，样式表文件，js文件
3、标记：对文本内容进行描述并确保引用正确地工作
注：所有这些成分都仅由文本构成
基本HTML页面
HTML使用< ,> 包围HTML标签。开始标签（如<head>）标记元素开始，结束标签（</head>）用于标记元素结束
网页顶部和头部
<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。<!DOCTYPE html>部分告诉浏览器这是一个HTML5页面。
注：DOCTYPE应该始终位于页面第一行
接下来是<html>元素，包含着页面其余部分。再接下来是<head>文档头部，<meta>,<title>在文档头部。
标签：元素、属性、值和其他
标签组成：元素（element），属性（attribute），值（value）
注：习惯上标签采用小写字母
注：属性值两边的引号是可选的，建议写上，尽量使用小写字母编写属性名称
父元素，子元素
若一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。
注：一定要正确嵌套，例如：
<div> <p></p> </div>
不可如下嵌套，会出问题
<div><p></div></p>
浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，将回车符和换行符转换成单个空格，或者将它们一起忽略。
©：版权符号的特殊字符
HTML5提供了audio和video元素，无需插件也可以播放音频和视频。
注意：文件名全部使用小写字母，用短横线分隔单词，用.html作扩展名。文件夹的名称也应全部使用小写字母，关键是保持一致，减少大小写转换浪费的时间
URL
URL（Uniform Resource Locator，统一资源定位符）
包含：模式，常见模式：HTTP（Hypertext Transfer Protocol，超文本传输协议），HTTPS是从HTTP衍生的。
其他模式，ftp（File Transfer Protocol，文件传输协议）用于下载文件。mailto用于发送电子邮件
模式后面常跟一个冒号和两个斜杠，mailto除外，它只有一个冒号。
注：对于FTP站点以及所有不使用HTTP协议的URL，都应该使用绝对路径
根相对URL
如果文件位于web服务器上，应该使用根相对URL
例：/img/family/test.html
语义化HTML
第二章，处理网页文件
规划网站
创建新网页
保存网页
编辑网页
组织文件
在浏览器中查看网页
注：要注意网页格式编码，推荐使用UTF8
第三章，基本HTML结构
每个HTML文档都应该包含以下基本部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
即：
DOCTYPE
html元素，推荐加上lang属性
head元素
说明字符编码的meta元素
title元素
body元素
注：在页面底部</body>标签结束前加载js文件是更好的选择
注：使用HTML5 DOCTYPE可以确保浏览器以可靠的模式呈现页面
注意：要确保你的代码保存的格式与<meta>里面的编码相同
每个页面都要有一个<title>元素，应该是简短的，描述性的，而且是唯一的
最佳实践：title应该是能够简要概括文档内容的文字
建议：将title的核心内容放在前60个字符（含空格）中。
创建分级标题
对于搜索引擎而言，如果标题和搜索词匹配，这些标题就会被赋予很高的权重，尤其是，等级最高的h1（并不意味页面中h1越多越好）。
创建页眉
一组介绍性或导航性内容的区域，应该用header元素对其进行标记
通常页眉包括网站标志，主导航和其他全站链接
注：只在必要时使用header元素，不能在header里面嵌套footer，header元素，footer和address元素里面也不能嵌套header元素
标记导航
HTML早期并没有元素明确表示主导航链接，HTML5则有，即nav，应该仅对文档中重要的链接群使用nav
HTML5中不允许在nav中嵌套address
标记页面的主要区域
main元素
main元素是HTML5新添加的元素，记住，一个页面里仅使用一次main元素
若创建的是web应用，使用main包围其主要功能
不能将main放在article、aside、footer、header、nav元素中
创建文章
HTML5的新元素article
article可以嵌套article，只要里面的article和外面的article是部分与整体的关系。
一个article可以包含一个或多个section元素
定义区块
HTML5的新元素，section
如果只是出于添加样式的原因要对内容添加个容器，应使用div而不是section
可以将section嵌套在article中，从而显示地标出报告、故事、手册等文章的不同部分或不同章节
指定附注栏
页面中有一部分内容与主体相关性没有那么强，但可以独立存在，则可以使用HTML5新元素，aside。
应该将附注栏内容放在main的内容之后
与内容有关的图像，使用figure而非aside
aside不允许嵌套在address中
创建页脚
footer元素
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素的页脚，只有当它最近的祖先是body时，才是整个页面的页脚。
页脚通常包含关于它所在区域的信息，如指向相关文档的链接、版权信息、作者及其他类似条目
不能在footer里嵌套header或footer
只能对页面级的页脚使用role="contentinfo"，且一个页面只能使用一次
创建通用容器
div
div从新的一行开始显示，不可滥用
使用ARIA改善可访问性
WAI-ARIA（Web Accessibility Initiative‘s Accessible Rich Internet Application，无障碍网页倡议-无障碍的富互联网应用）
地标角色
ARIA的地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，只要设置role属性就可以
一些可用的地标角色
| role="banner"(横幅) 面向全站的内容，通常包含网站标志、网站赞助者标志、 全站搜索工具等。通常显示在页面顶端，跨越整个页面 宽度 |
将其添加到页面级header元素，每个页面只能使用一次 |
| role="navigation"(导航) 文档内不同部分或相关文档的导航性元素（通常为链接） 的集合 |
与nav元素是对应关系。应将其添加到每个nav元素， 或其他包含导航性链接的容器。这个角色可在每个页面 上使用多次，但同nav一样，不要过度使用该属性 |
| role="main"(主体) 文档的主要内容 |
与main元素是对应关系，最好是添加到main元素，也可 添加到其他表示主体的内容元素，每个页面仅使用一次 |
| role="complementary"(补充性内容) 文档中作为主体内容补充的支撑部分。 |
与aside元素是对应关系。应将其添加到aside或div中，可以 包含多个complementary角色，但不要过度使用 |
| role="contentinfo"(内容信息) 包含关于文档的信息的大块可感知区域这类信息的例子 包含版权声明和指向隐私权声明的链接等 |
将其添加到整个页面的页脚，每个页面仅使用一次 |
其他的角色：对于表单元素，form角色是多余的，search用于标记搜索表单，application则属于高级用法
为元素指定类别或ID名称
1、为元素添加唯一的ID
2、为元素指定类别
指定多个类别，只需要用空格隔开即可，例：class="name anothername"
推荐使用类别为元素添加样式。在class和id名称中，通常使用短横线分隔多个单词，例：class="footer-page"
为元素添加title属性
可以使用title属性为网站上任何部分加上提示标签
第四章，文本
em元素用来标识强调的文本，cite用来标识对艺术作品、电影、图书等内容的引用，这两个的文本内容都是用斜体，code元素专门用来格式化脚本或程序中的代码，该元素中的文本默认使用等宽字体
添加段落
使用p元素
添加细则
使用small元素，表示细则一类的旁注，包括免责声明、注意事项、法律限制、版权信息等。只适用于短语。
标记重要和强调的文本
strong元素表示内容的重要性，而em则表示内容的着重点。
可以在标记为strong的元素里面再嵌套strong元素，em也一样
在HTML5中，em是表示强调的唯一元素，stron则表示重要程度
HTML5将b重新定义：
b元素表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他语态和语气，用于如文档摘要里的关键词、评论中的作品、基于文本的交互式软件指示操作的文字、文章导语等。
HTML5重新定义i元素：
i元素表示一块不同于其他文字的文字，具有不同的语态和语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等
创建图
HTML5引入figure和figcaption。图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。
figcaption并不是必须的，如果使用了，那它必须是figure元素内容的第一个或最后一个元素
指明引用或参考
使用cite元素可以指明对某内容源的引用或参考
对于要从引用来源中引述内容的情况，使用blockquote或者q元素标记引述文本
引述文本
1、引述块级文本：使用blockquote元素，可以添加cite="url"的属性
2、引述行内文本：使用q元素，可以添加cite="url"的属性，应lang属性
由于q元素的跨浏览器问题，很多开发人员选择直接输入正确的引号或使用字符实体。
指定时间
使用time元素，可选属性：datetime，用于帮助机器可读
如果忽略了datetime属性，则文本内容必须是合法的日期或时间格式。
不能在time中嵌套另一个time，也不能在没有datetime属性的time元素中包含其他元素
有效时间格式
datetime属性或者没有datetime属性的time元素，必须提供特定的机器可读格式的日期和时间，简化形式：
YYYY-MM-DDThh:mm:ss
小时部分使用24小时制，秒是可选的，也可以使用hh:mm.sss 格式提供时间的毫秒数，注意，毫秒数之前是一个点。
解释缩写词
可以使用abbr元素标记缩写词并解释其含义。
定义术语
使用dfn元素对要定义的术语作语义上的区分。仅用dfn包围要定义的术语，而不包围定义。
创建上标和下标
常见上标：商标符号、指数、脚注编号
常见下标：化学符号
<sub>创建下标，<sup>创建上标。
修复sub和sup造成的行间距问题：
/* * 在所有浏览器中防止sub和sup影响line-height * gist.github.com/413930 */ sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup{ top: -0.5em; } sub{ bottom: -0.25em; }
添加作者联系信息
address元素是用以定义与HTML页面或页面一部分有关的作者、相关人士或组织的联系信息。
HTML5禁止在address里面包含以下元素：h1~h6、article、address、aside、footer、header、hgroup、nav、section
标注编辑和不再准确的文本
两种用于标注编辑的元素：代表添加内容的ins元素和标志已删除内容的del元素。s元素用以标志不再准确或不再相关的内容。
1、标记新插入的文本
2、标记已删除的文本
3、标记不再准确或不再相关的文本
标记代码
使用code元素。
如果需要使用到<,>，则应用<和>代替。
使用预格式化的文本
<pre>元素。可以以原样像是文本，包含空格、回车和换行符。
注：浏览器默认关闭pre的自动换行。
突出显示文本
使用mark元素标注希望引起注意的字词。
创建换行
要确保br是最后的选择。
对于诗歌、街道地址等应该紧挨着出现的短行都适合用br元素
创建span
span元素同div一样，是没有任何语义的。与div不同，span只适合包围字词或短语。
其他元素
1、u元素：用于非文本注解。
2、wbr元素：代表一个可换行处，并不会强制换行。
3、ruby、rp、rt元素
4、bdi、bdo元素
5、meter元素：可用以表示分数的值和已知范围的测量结果
6、progress元素：指示某项任务的完成进度。
第五章，图像
关于Web图像
1、格式和下载速度
Web上用的最广泛的三种格式：gif，png，jpeg
（1）jpeg
jpeg适合用于彩色照片，因为它包含大量的颜色并进行了合理压缩，采用这种格式保存的文件相对较小。
（2）png和gif
png和gif是无损格式。支持透明。
2、颜色
3、大小
4、透明度：png和gif均支持透明度，jpeg不支持。
gif一个像素要么透明要么不透明，称作：索引色透明。png除了支持索引色透明，还支持alpha透明，即一个像素可以部分透明
5、动画：可以保存为gif，但不能是png或jpeg
获取图像
选择图像编辑器
ps，Adobe Fireworks，Gimp，Acorn，Pixelmator，Paint.NET，PaintShop Pro
保存图像
在页面插入图像
提供替代文本
指定图像尺寸
在浏览器中改变图像的尺寸
在图像编辑器中改变图像的尺寸
为网站添加图标
第六章，链接
链接的两个主要部分：目标和标签，使用a元素
rel属性是可选的，但对于指向另一个网站的链接，推荐包含这个值。
HTML块级链接。HTML5几乎允许在链接内包含任何类型的元素或元素组。
创建锚并链接到锚
通常，激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域，可以创建一个锚，并在链接中引用锚。
例：
<h2 id="features"> <a href="#features">
点击链接，将会跳到h2所在区域。根据id进行跳转。
创建其他类型的链接
万维网上的任何文件（http://xxx.xxx.xx/xx.xx），电子邮件（mailto:name@example.com），电话号码（tel:+123456987）。
建议：不要使用指向电子邮件地址的链接。
对于能够识别tel:的只能手机，点击链接会询问用户是否拨打号码。不是电话设备的则将询问是否加到通讯录，有的浏览器会启动Google Voice或Skype，其他浏览器则不知道如何处理
世界 -- 因技术而精彩
