第一章，网页的构造块
网页主要包括三个部分：
1、文本内容（纯文字）
2、对其他文件的引用：图像，音频，视频，样式表文件，js文件
3、标记：对文本内容进行描述并确保引用正确地工作
注：所有这些成分都仅由文本构成
基本HTML页面
HTML使用< ,> 包围HTML标签。开始标签（如<head>）标记元素开始，结束标签（</head>）用于标记元素结束
网页顶部和头部
<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。<!DOCTYPE html>部分告诉浏览器这是一个HTML5页面。
注：DOCTYPE应该始终位于页面第一行
接下来是<html>元素，包含着页面其余部分。再接下来是<head>文档头部，<meta>,<title>在文档头部。
标签：元素、属性、值和其他
标签组成：元素（element），属性（attribute），值（value）
注：习惯上标签采用小写字母
注：属性值两边的引号是可选的，建议写上，尽量使用小写字母编写属性名称
父元素，子元素
若一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。
注：一定要正确嵌套，例如：
浏览器呈现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:;
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，其他浏览器则不知道如何处理
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
- HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(3)
第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(4)
第16章 表单 表单有两个基本组成部分:访问者在页面上可以看见并填写的控件.标签和按钮的集合:以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本. 基本的表单字段类型包括文本框.单选按钮.复选 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(2)
第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...
随机推荐
- bzoj 3131 [Sdoi2013]淘金（数位DP+优先队列）
Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块. 一阵风吹 ...
- usb 驱动
usb 驱动学习总结: usb 采用分层的拓扑结构,金字塔型,最多是7层.usb 是主从结构,主和主或者从和从之间不能交换数据.理论上一个usb主控制器最多可接127个设备,协议规定每个usb设备具有 ...
- 相当管用了 mstha插件
http://www.i-magical.com/2010/04/feizhuliu-kill-virus-mshta-exe/ 非主流杀毒 – mshta.exe Vincent | Apr 23, ...
- Hello,Ubuntu（安装过程中遇到的问题及解决）
2013-02-23 不折腾不舒服(>_<).在虚拟机上运行Ubuntu程序一多就明显卡顿,感觉效率不高.为了流畅使用Ubuntu,也便于将来学习Vim/Emacs,我决定在笔记本的Win ...
- 万台规模下的SDN控制器集群部署实践
目前在网络世界里,云计算.虚拟化.SDN.NFV这些话题都非常热.今天借这个机会我跟大家一起来一场SDN的深度之旅,从概念一直到实践一直到一些具体的技术. 本次分享分为三个主要部分: SDN & ...
- EntityFramework更新多条数据【8万】
此文主要用做记录用: 原因:数据库迁移,需要转换大量用户资料,两数据某字段加密方式不一致需要批量转换 注:转换程序用了EntityFramework 过程: 1.读取所有需要转换数据至List 2.采 ...
- PC问题-使用BAT方法清理Delphi临时文件
@echo offdel /S *.~*del /S *.dcudel /S *.dskdel /S *.hppdel /S *.ddpdel /S *.mpsdel /S *.mptdel /S * ...
- 写的非常好的文章 C#中的委托，匿名方法和Lambda表达式
简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...
- hql查询技巧
要擅于利用对象之间映射的集合去查与其关联的对象,而不是直接在dao层重新写查询的方法,其实,hibernate正是对复杂查询的一种解放,既然有现成的东西,何必再去闭门造车,而且造出来的还是个旧车. 查 ...
- 剑指OFFER之从二叉搜索树的后序遍历序列（九度OJ1367）
题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 输入: 每个测试案例包括2行: 第一行为1个整数 ...
