第一章，网页的构造块
网页主要包括三个部分：
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) ...
随机推荐
- Android 依赖注入 ButterKnife 基本使用
ButterKnife 是一个快速 Android View 注入框架,开发者是Jake Wharton,简单的来说,ButterKnife 是用注解的方式替代findViewById和setXXXL ...
- HW6.18
public class Solution { public static void main(String[] args) { double[] array = {6.0, 4.4, 1.9, 2. ...
- bigData Ecosystem Unscramble
主题>>: cloudEra hadoop Ecosystem sim Unscramble; ruiy哥个人理解总结,其实我无非也还是站在那"砖家/叫兽"的肩上瞎扯扯 ...
- 类型检测汇总！typeof 和 instanceof 和isArray
, ]; alert(arr instanceof Array);//true 以上老方法判断是否是数组,存在一个问题,就是它只适用于单执行环境(窗口),如果该窗口有其他框架(比如 iframe)则会 ...
- Winform- 界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用
布局控件"WeifenLuo.WinFormsUI.Docking"是一个非常棒的开源控件,用过的人都深有体会,该控件之强大.美观.不亚于商业控件.而且控件使用也是比较简单的. 实 ...
- [置顶] [BZOJ]2127: happiness 最小割
happiness: Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己 ...
- android飞机游戏敌机移动路径
基础android的飞机类游戏,与前人一样,由surfaceView绘制游戏画面,另起线程控制绘制时间间隔达到动态效果.这里附上最近自己写的敌机自动飞行路径代码.请大家给点意见. 在敌机管理模块,加入 ...
- DES 算法的 C++ 与 JAVA 互相加解密
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- linux mail命令用法
在Linux系统下mail命令的测试 1. 最简单的一个例子: mail -s test admin@aispider.com 这条命令的结果是发一封标题为test的空信给后面的邮箱,如果你有mta并 ...
- 实战:ORACLE SQL Performance Analyzer
通过 SPA,您能够依据各种更改类型(如初始化參数更改.优化器统计刷新和数据库升级)播放特定的 SQL 或整个 SQL 负载,然后生成比較报告,帮助您评估它们的影响. 在 Oracle Databas ...
