<!DOCTYPE html>
<html>
<head>
<meta name = 'keywords' content="HTML5权威指南----读书笔记">
<meta name = 'description' content="HTML5权威指南----读书笔记">
<meta charset="utf-8">
<title>HTML5权威指南----读书笔记</title>
</head>
<body>
<!--
//第一部分 开篇
第一章 HTML5背景知识
第二章 准备工作
第三章 初探HTML
3.4 html实体
< <
> >
& &
3.5 accesskey
<input type="text" name="" accesskey = 's'>
//alt+s就可以焦点就会聚焦到改input
3.5.3 contenteditable
<p contenteditable = 'true'></p>
//设置内容可编辑
3.5.4 contextmen
//用来为元素设定快捷菜单
3.5.5 dir
<p dir = 'rtl'></p>//text-align:left;
<p dir = 'ltr'></p>//text-align:right;
3.5.6 draggable
//设置元素是否可以被拖拽
3.5.10 lang
<p lang = 'en'></p>
// 说明元素内容使用的语言
3.5.11 spellcheck
<textarea spellcheck = 'true'></textarea>
//表明浏览器是否应该对元素的内容进行拼写检查
3.5.13 tabindex
<label>
<input type="" name="" tabindex = '1'>
</label>
<label>
<input type="" name="" tabindex = '2'>
</label>
<label>
<input type="" name="" tabindex = '3'>
</label>
//填写完毕后tab键跳转顺序
第四章 初探CSS
4.1.4 设置字符编码&引入css文件
@charset ='UTF-8';
@import "style.css";
4.4.1 绝对长度
in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica（12磅）
4.4.2相对长度
em 与元素字号挂钩
cx 与元素字体的x高度挂钩
rem 与根元素的字号挂钩
px css像素
% 另一属性的值的百分比
缺乏浏览器支持的相对度量单位
gd 与网格grid挂钩
vw 与视口viewport宽度挂钩
vh 于视口高度挂钩
vm 1vm等于最短视口袖长的1%
ch 与用当前字体显示的字符的平均宽度挂钩
第五章 初探javascript
5.4.2 枚举对象属性
var myData = {
print :function(){ // 直接执行
}
}
function demo(){ //需要调用
}
5.7 错误处理
try{
}
catch{
}
5.8 比较undefined 和 null
undefined： 在读取未赋值的变量或者试图读取对象没有的属性时的到的就是undefined
null ： 用于表示已经赋了值但该值不是一个有效的object，string，number或者boolean值
第二部分 HTML元素
6.4.1 文档和数据元素
base
body
doctype
6.4.2 文本元素
a
abbr
b
6.4.3对内容分组
dd
div
dl
dt
6.4.4 划分内容
address
article
aside
6.4.5 划分内容
caption
col
colgroup
table
6.4.6 创建表单
button
datalist
fieldset
6.4.7 嵌套内容
area
audio
canvas
第七章 创建HTML文档
7.2.2 设置相对URL的解析基准
base元素可以用来设置一个基准URL，让HTML文档中的相对连接在此基础上进行解析
<!DOCTYPE html>
<html>
<head>
<base href="...">
<title></title>
</head>
<body>
</body>
</html>
7.2.3 用元数据说明文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = 'author' content = ''>
<meta name = 'description' content = ''>
<title></title>
</head>
<body>
</body>
</html>
7.2.5 预先加载资源
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript"></script>
<script type="text/javascript" defer></script>
<script type="text/javascript" async></script>
</head>
<body>
</body>
</html>
//defer 确保了在脚本涉及的元素解析出来之后才载入和执行脚本
//asnc 浏览器将在继续解析HTML文档中其他元素的同时异步加载和执行脚本
7.3.2 noscript 元素
// 可以用来向禁用的了javascript或浏览器不支持javascript的用户像是一些内容
<!DOCTYPE html>
<html>
<head>
<title></title>
<noscript>
<h1>javascript is required</h1>
<p>you cannot use this page without javascrpit</p>
</noscript>
</head>
<body>
</body>
</html>
第八章 标记文字
wbr //安全换行建议位置
dfn //定义术语
8.6
ruby，rt，rp元素
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
8.6.2
bdo 元素 撇开文字默认方向设置，明确指定内容中文字的方向
<bdo dir = 'ltr'>love</bdo> //love
<bdo dir = 'rtl'>love</bdo> // evol
bdi 元素
第九章 组织内容
9.3 使用div元素
div元素没有具体的含义，找不到其他切当的元素可用时可以使用这个元素为内容建立结构并赋予其含义
第十章 文档分节
10.1 基本标题：h1 h2 h3 h4 h5 h6
10.2 隐藏子标题 hgroup
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
10.3 setion
// 表示文档的一节
10.4 添加首部尾部
<header></header>
<footer></footer>
10.5 添加导航区域
<nav></nav>
10.6 使用article
//article 元素代表HTML文档中一段独立成篇的内容
10.7 生成附注释
<aside>
<h1></h1>
<section></section>
</aside>
10.8 提供联系信息
<address>
fsdfdsf <a href="#"></a>
</address>
第十一章 表格元素
第十二章 表单
12.2.4 autocomplete
//设置表单中的input元素默认行为的行为方式
label： 关联 input 元素
autofocus ： 自动聚焦
disabled ： 禁用input元素
fieldset ： 对表单元素编组
<fieldset>
<p><label><input type="" name=""></label></p>
</fieldset>
第十三章 定制input元素
datalist 数据列表
range ： 指定范围的数值
<input type="range" name="" min = '0' max = '100'>
date : 日期选择工具
<input type="date" name="">
color ： 设置颜色
<input type="date" name="">
search ： 获取搜索用词
<input type="search" name="">
hidden : 隐藏input元素
<input type="hidden" name="">
image： 图片按钮和分区响应图
<input type="image" name="">
file ： 上传文件
<input type="file" name="">
第十四章 其他表单元素及输入验证
select ： 选项列表 size:显示多个选项 mutiple 让用户一次选择多个选项
<select size = '4' multiple></select>
textarea ： 输入多行文本
output ： 计算结果
<form oninput="res.value = q.valueAsNumber*p.valueAsNumber">
<input type="number" name="q" id = 'q'>x
<input type="number" name="p" id = 'p'>=
<output for='q name' name = 'res'/>
</form>
keygen : 生成公开/私有密匙对
第十五章 嵌入内容
img ： 嵌入图像
<img src="">
15.2 嵌入一张html文档
iframe ： 允许在现有的html文档中嵌入另一个文档
15.3 通过插件嵌入内容
object和embed元素最初是作为扩展浏览器能力的一种方式，用于添加插件支持，而插件
能够处理浏览器不直接支持的的内容
object+param
object ：显示图片
<object data = 'portrait.png' type = 'image/png'></object>
progress : 进度条
<progress value="10" max="100">
meter ： 显示某个范围内所有可能值的一个
<meter></meter>
<meter min="10" max="100" low = '40' high = '80' optimum="60"></meter>
第三部分 CSS
16.2 盒模型
content,padding,border,margin
16.3 选择器
#
.
[attr]
::
16.4 属性
16.4.3布局属性
第十七章 使用CSS选择器
1、 * 通用选择器
2、 a,p,span,div 元素选择器
3、 <p class = 'name'></p> name 类选择器
4、 <p id="name"></p> name ID选择器
5、 <a href=""></a> [href]{} 属性选择器
6、 并集选择器 a,p{}
7、后代选择器 p a{}
8、p>a 子元素
p+a 相邻兄弟选择器
p~a 通用相抵选择器
9、 微元素选择器
::first-line
::first-letter
:after
:before
17.3.4 css计数器
p{
conuter-reset:paracount;
}
p:after{
content: counter(paracount);
couter-increment: paracount;
}
第十八章 使用CSS选择器
1、结构性伪类选择器
:root{
//匹配文档中的根元素
}
2、UI伪类选择器
3、已勾选的元素
:checked{
}
4、默认元素
:default{
}
5、选择无效的和有效的input元素
:valid{
}
:invalid{
}
6、选择限定范围的input元素
:in-range{
}
:out-of-range{
}
7、选择必须和可选的input元素
:required{
}
:optional{
}
8、动态伪类选择器
:active{
}
:visted{
}
:link{
}
:hover{
}
9:focus{
}
10、否定选择器
:not{
}
11、 空内容选择器
:empty{
}
12、语言选择器
:lang{
}
13、目标伪类选择器
:target{
}
第十九章 使用白框和背景
第二十章 使用盒模型
第二十一章 创建布局
21.2创建多列布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
column-count: 3;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>
21.3创建弹性布局
flex-align;
flex-direction;
flex-order;
flex-pack;
21.3.1创建简单的弹性盒子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
height: 300px;
}
#container {
display: -webkit-box;
}
#second {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="container">
<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
</div>
</body>
</html>
21.3.2伸缩多个元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
height: 300px;
}
#container {
display: -webkit-box;
}
#first{
-webkit-box-flex: 3;
}
#second {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="container">
<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
</div>
</body>
</html>
21.3.3 处理垂直空间
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div div{
150px;
border: medium double black;
background-color: lightgray;
margin: 2px;
height: 300px;
}
#container {
display: -webkit-box;
-webkit-box-align: end;/*垂直对齐方式*/
-webkit-box-direction: reverse;/*反转*/
}
#first{
-webkit-box-flex: 3;
height: 100px;
}
#second {
-webkit-box-flex: 1;
height: 120px;
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<h1>first</h1>
</div>
<div id="second">
<h1>second</h1>
</div>
<div id="third">
<h1>third</h1>
</div>
</div>
</body>
</html>
21.3.4 处理最大尺寸
max- 250px;
21.4 创建表格布局
第二十二章 设置文本杨思
22.1 应用基本文本样式
22.1.1 对齐文本
text-align: start/end/left/right/center/justify;
text-justify: text-align设定好justify的时候用来指定对齐规则
auto: 浏览器选择对齐放肆
none: 禁用文本对齐
inter-word: 空白分布在单词之间
inter-ideograph
inter-cluster
distribute
kashida
22.1.2 处理空白
whitespace
nomal: 默认值，空白符被压缩
nowrap: 空白符被保留，文本不换行
pre: 空白符被保留，文本遇到换行符时换行
pre-line: 空白符被压缩，一行排满或者遇到换行符时换行
pre-wrap: 空白符被保留，一行排满或者遇到换行符时换行
22.1.3 文本方向
p{
direction : rtl;
}
p{
direction : ltr;
}
22.1.4 指定单词，字母，行之间的间距
letter-space
word-space
line-space
22.1.5 控制断词
word-wrap: normal/break-word;
// normal 单词不断开，即时无法完全放入容器
//break-word 断开单词，使其能放入包含快内
第二十三章 过度，动画和变化
23.1 使用过度
：hover{
}
transition-delay
transition-duration
transition-property
transition-timing-function ease/linear/ease-in/ease-out/ease-in-out
transition
23.2 使用动画
animation-delay 开始前的延迟
animation-direction 是否反向播放
animation-duration 持续时间
animation-iteration-count 播放次数
animation-name 指定动画时间
animation-play-state 允许动画暂停和重复
animation-timing-function 指定如何计算中间动画帧
P:hover{
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'growshrik';
}
@-webkit-keyframes growshrik{
from{
}
50%{
}
to{
font-size:
border:
background-color:
color:
padding:
}
}
23.3 使用变换
translate
translateX
translateY
scale
scaleX
scaleY
rotate
skew
skewX
skewY
matrix
第二十四章 其他CSS属性
第四部分 使用DOM
//允许我们使用js来探查和操作html
第二十五章 理解DOM
第二十六章 使用Document对象
第二十七章 使用Window对象
第二十八章 使用DOM元素
第二十九章 为DOM元素设置样式
第三十章 使用事件
第三十一章 使用元素专属对象
第五部分 赶集功能
第三十二章 使用Ajax（第一部分）
第三十三章 使用Ajax（第二部分）
第三十四章 使用多媒体
第三十五章 使用canvas元素（第一部分）
第三十六章 使用canvas元素（第二部分）
第三十七章 使用拖拽
第三十八章 使用地理位置
第三十九章 使用web存储
第四十章 创建离线Web应用程序
-->
</body>
</html>