例如 <input type="text" placeholder="请输入" >
显示在input输入框 默认显示的文字
例如 鼠标滑动事件
实例
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000"></canvas>
<video src=""></video>
<audio src=""></audio>
用法一样 例如
// 设置本地存储
localStorage.setItem("lastname", "Smith")
// 获取本地存储
document.getElementById("result").innerHTML = localStorage.getItem("lastname")
draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值
在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽
<div draggable="true">123</div>
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
伪类元素选择器
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片
2D/3D 转换
2D 转换（transform）
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px)
rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg)
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4)
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg)
matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0)
3D 转换
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg)
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg)
perspective：规定 3D 元素的透视效果
transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
transition-duration：过渡动画的一个持续时间。
transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay：延迟多久后开始动画
先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面
animation-name: 定义动画名称
animation-duration: 指定元素播放动画所持续的时间长
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
animation-delay: 指定元素动画开始时间
animation-iteration-count: infinite | number：指定元素播放动画的循环次数
animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
animation-play-state: running | paused ：控制元素动画的播放状态
实例
div{
width: 200px
height: 100px
background: pink
animation: move 1s linear
}
@keyframes move {
0%{
width: 0
}
100%{
width: 500px
}
}
通过CSS3，能够创建多个列来对文本进行布局
column-count: 规定元素应该被分隔的列数
column-gap: 规定列之间的间隔
column-rule: 设置列之间的宽度、样式和颜色规则
resize
box-sizing
outline-offset
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
div {
resize: both/* none|both|horizontal|vertical*/ overflow: auto
}
box-sizing 属性可设置的值有 content-box、border-box 和 inherit
content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width
border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成
inherit：规定应从父元素继承 box-sizing 属性的值
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
div {
display: flex
flex-direction: row
/*弹性盒方向：主轴方向X轴 */
flex-direction: column
/* 弹性盒方向：主轴Y轴方向 */
flex-direction: row-reverse
/* 弹性盒方向：主轴方向X轴 倒叙 */
flex-direction: column-reverse
/* 弹性盒方向：主轴Y轴方向 倒叙*/
flex-wrap: nowrap
/* 弹性盒换行：不换行 默认的 */
flex-wrap: wrap
/* 弹性盒换行：换行 */
/*设置主轴方向子元素排列顺序*/
justify-content: flex-start
/* 从左到右排列 默认的 */
justify-content: flex-end
/* 从尾部开始排列 不影响子元素排列顺序 */
justify-content: center
/* 从主轴居中对齐 */
justify-content: space-around
/* 平分主轴剩余空间 */
justify-content: space-between
/* 两边对齐，中间评分剩余空间 */
justify-content: space-evenly
/* 间距相同 */
}
CSS 兼容内核
-moz-：代表FireFox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表opera浏览器私有属性
《HTML5与CSS3基础教程（第8版）》（[美] Elizabeth Castro）电子书网盘下载免费在线阅读
资源链接：https://pan.baidu.com/s/1wgc37UtKCHruM7xZWRrXng
密码：dew2书名：HTML5与CSS3基础教程（第8版）
作者：[美] Elizabeth Castro
译者：望以文
豆瓣评分：8.3
出版社：人民邮电出版社
出版年份：2014-5
页数：417
内容简介：
本书是风靡全球的HTML和CSS入门教程的最新版，至第6版累积销量已超过100万册，被翻译为十多种语言，长期雄踞亚马逊书店计算机图书排行榜榜首。
第8版秉承作者直观透彻、循序渐进、基础知识与案例实践紧密结合的讲授特色，采用独特的双栏图文并排方式，手把手指导读者从零开始轻松入门。相较第7版，全书2/3以上的内容进行了更新，全面反映了HTML5和CSS3的最新特色，细致阐述了响应式Web设计与移动开发等热点问题。书中主要内容包括：如何创建HTML5页面，如何使用HTML5元素，如何用CSS3为网页添加样式，如何向页面添加JavaScript代码，如何测试做好的页面并将其上传到万维网。另外，本书强调渐进增强这种网站设计方法的重要性，并将其贯穿在全书的具体实践中。
作者专为本书设计了内容丰富的配套网站htmlcssvqs.com，提供海量精彩示例、HTML与CSS元素及属性列表以及其他附加材料，方便读者随时参考与引用。
作者简介：
作者简介：
Elizabeth Castro
享誉世界的计算机畅销书作家，电子出版先行者，2010年就出版了epub电子书制作教程EPUB Straight to the Point。Castro 擅长使用详实的步骤和精美的实例教大家快速实现具体效果，她的HTML与CSS系列教程自出版以来广受读者欢迎，成为学习前端开发的首选参考图书。有关Castro的更多信息，可访问其个人主页ElizabethCastro.com。
Bruce Hyslop
自1997年就开始从事网页开发，重点关注使用HTML、CSS和JavaScript进行网页开发和网站易用性的维护，并倡导最佳实践。Hyslop在加州大学洛杉矶分校进修部教授CSS课程，还著有The HTML Pocket Guide、The Web Design Pocket Guide Boxed Set。
译者简介：
望以文
毕业于中国人民大学，曾任百度前端工程师，现为网信金融产品经理。《HTML5与CSS3基础教程（第7版）》译者。热爱产品设计，维护微信公众号projojo，定期向读者推荐新鲜有趣的互联网产品。微博@weakow。
