转载请声明 原文链接
这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！
# 第一课 HTML5结构
HTML5是新一代的HTMLDTD声明改变<!DOCTYPE html>- 新的结构标签
# 常用的一些新的结构标签
- 补充说明
small这个元素表示边栏评论，如附属细则cite这个元素可用于显示作品标题（图书、电影、诗歌等）adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值
# 删除的HTML标签
-
纯表现的元素：
basefontbigcenterfontsstrikettu
-
对可用性产生负面影响的元素：
frameframesetnoframes- 产生混淆的元素：
acronymappletisindexdir
-
重新定义的
HTML标签<b>代表内联文本，通常是粗体，没有传递表示重要的意思<i>代表内联文本，通常是斜体，没有传递表示重要的意思<dd>可以同details与figure一同使用，定义包含文本，ialog也可用<dt>可以同details与figure一同使用，汇总细节，dialog也可用<hr>表示主题结束，而不是水平线，虽然显示相同<menu>重新定义用户界面的菜单，配合commond或者menuitem使用<small>表示小字体，例如打印注释或者法律条款<strong>表示重要性而不是强调符号
-
崭新新的页面布局
# 第二课 HTML5智能表单
# HTML4.01 form表单复习
input表单type属性值type="text"单行文本输入框type="password"密码（maxlength=""）type="radio"单项选择（checked="checked"）type="checkbox"多项选择type="button"按钮type="submit"提交type="file"上传文件type="reset"重置
# HTML5智能表单
input表单type属性值：type = "email"限制用户输入必须为Email类型type="url"限制用户输入必须为URL类型type="date"限制用户输入必须为日期类型type="datetime"显示完整日期 含时区type="datetime-local"显示完整日期 不含时区type="time"限制用户输入必须为时间类型type="month"限制用户输入必须为月类型type="week"限制用户输入必须为周类型type="number"限制用户输入必须为数字类型type="range"生成一个滑动条type="search"具有搜索意义的表单results="n"属性type="color"生成一个颜色选择表单type="tel"显示电话号码
# Input 类型 - Date Pickers（日期选择器）
-
**
HTML5拥有多个可供选取日期和时间的新输入类型： -
date选取日、月、年 -
month选取月、年 -
week选取周和年 -
time选取时间（小时和分钟） -
以下两个没有作用
datetime选取时间、日、月、年（UTC 时间）datetime-local选取时间、日、月、年（本地时间）
# HTML5新增表单属性
required:required内容不能为空placeholder:表单提示信息autofocus:自动聚焦pattern:正则表达式 输入的内容必须匹配到指定正则范围autocomplete:是否保存用户输入值- 默认为
on，关闭提示选择off
- 默认为
formaction:在submit里定义提交地址datalist:输入框选择列表配合list使用list值为datalist的id值output:计算或脚本输出
# 表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都返回true,一种验证失败返回falseoText.addEventListener("invalid",fn1,false)ev.preventDefault(): 阻止默认事件valueMissing: 当输入值为空的时候，返回truetypeMismatch: 控件值与预期不吻合，返回truepatternMismatch: 输入值不满足pattern正则，返回truecusomErrorsetCustomValidity()
# 第三课 css3选择器
-
CSS3发展史简介HTML的诞生 20世纪90年代初1996年底，CSS第一版诞生1998年5月CSS2正式发布2004年CSS2.1发布CSS3的发布2002200320042005200720092010
-
模块化开发
CSS1中定义了网页的基本属性：- 字体、颜色、基本选择器等
CSS2中在CSS1的基础上添加了高级功能- 浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段
-
CSS选择器复习- 通用选择器：
*选择到所有的元素 - 选择子元素：
>选择到元素的直接后代 - 相邻兄弟选择器：
+选择到紧随目标元素后的第一个元素 - 普通兄弟选择器：
~选择到紧随其后的所有兄弟元素 - 伪元素选择器：
::first-line匹配文本块的首行::first-letter选择文本块的首字母
- 伪类选择器：
:before,:after在元素内容前面、后面添加内容(相当于行内元素)
- 通用选择器：
-
CSS3结构选择器
Css3属性选择器
CSS3伪类选择器-
UI伪类选择器：
:enabled选择启用状态元素:disabled选择禁用状态元素:checked选择被选中的input元素（单选按钮或复选框）:default选择默认元素:valid、invalid根据输入验证选择有效或无效的input元素:in-range、out-of-range选择指定范围之内或者之外受限的元素:required、optional根据是否允许:required属性选择input元素
-
动态伪类选择器：
:link选择链接元素:visited选择用户以访问的元素:hover鼠标悬停其上的元素:active鼠标点击时触发的事件:focus当前获取焦点的元素
-
其他伪类选择器：
:not(<选择器>)对括号内选择器的选择取反:lang(<目标语言>)基于lang全局属性的元素:targeturl片段标识符指向的元素:empty选择内容为空的元素
:selection鼠标光标选择元素内容
-
# 第四课 CSS3新增文本属性
-
CSS文本属性复习
-
white-space：对象内空格的处理方式-
nowrap控制文本不换行 -
pre空白会被浏览器保留 -
pre-line合并空白 保留换行符 -
pre-wrap保留空白 正常换行
-
-
direction：文本流的方向ltr文本从左向右rtl文本从右往左
-
unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
-
-
CSS3新增文本属性
color:rgba();text-overflow:是否使用一个省略标记（…）标示对象内文本的溢出text-align:文本的对齐方式text-transform:文字的大小写text-decoration:文本的装饰线，复合属性text-shadow:文本阴影text-fill-color:文字填充颜色text-stroke:复合属性。设置文字的描边tab-size:制表符的长度word-wrap:当前行超过指定容器的边界时是否断开转行word-break:规定自动换行的处理方法
-
text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出clip： 默认值 无省略号ellipsis：当对象内文本溢出时显示省略标记（...）。- 注意：该属性需配合
over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用，否则无法看到效果
-
text-align:文本的对齐方式css1left:默认值 左对齐right:右对齐center:居中justify： 内容两端对齐。css3start:开始边界对齐end:结束边界对齐
-
text-transform:文字的大小写css1none： 默认值 无转换capitalize： 将每个单词的第一个字母转换成大写uppercase： 转换成大写lowercase： 转换成小写
css3full-width： 将左右字符设为全角形式。不支持full-size-kana：将所有小假名字符转换为普通假名。不支持- 例如：土耳其语
-
text-decoration:文本的装饰线，复合属性(只火狐支持)text-decoration-line：- 指定文本装饰的种类。相当于
CSS1时的text-decoration属性
- 指定文本装饰的种类。相当于
text-decoration-style：- `指定文本装饰的样式。
text-decoration-color：- `指定文本装饰的颜色。
blink： 指定文字的装饰是闪烁。opera和firefoxtext-decoration:#F00 double overlineCSS3实例
-
text-shadow:文本阴影- 取值：
xyblurcolor,…x横向偏移y纵向偏移blur模糊距离(灰度)color阴影颜色
- 取值：
-
text-fill-color:文字填充颜色 -
text-stroke:复合属性。设置文字的描边text-stroke-width:文字的描边厚度text-stroke-color:文字的描边颜色
-
tab-size:制表符的长度- 默认值为
8(一个tab键的空格字节长度)，在pre标签之内才会有显示
- 默认值为
-
word-wrap:当前行超过指定容器的边界时是否断开转行normal： 默认值- 允许内容顶开或溢出指定的容器边界。
-
break-word：- 内容将在边界内换行。如果需要，单词内部允许断行
# 第五课 CSS3盒模型
- CSS盒模型复习
# 第六课 css3新增背景属性
# 第七课 css3新增颜色属性
-
CSS颜色属性复习
color name颜色英文名称命名HEX方式 十六进制方式rgb方式 三原色配色方式
-
CSS3新增颜色属性
rgba()
| 名称 | 颜色 | 颜色 | 取值 |
|---|---|---|---|
| r | red | 红色 | 0-255 |
| g | green | 绿色 | 0-255 |
| b | blue | 蓝色 | 0-255 |
| a | alpha | 透明 | 0-1 |
-
HSL模式HSLA模式-
H：Hue(色调)。- 0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：
0 - 360
- 0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：
-
S：Saturation(饱和度)。取值为：0.0% - 100.0% -
L：Lightness(亮度)。取值为：0.0% - 100.0% -
A:alpha透明度 0~1之间 -
语法:
HSLA(H,S,L,A)
-
-
HSL色轮
-
透明颜色：
transparent- 实例：
border实现三角箭头、风车等
- 实例：
-
透明度：
opacity- 取值：
0-1之间 - 注：低版本的
IE浏览器不兼容,需用IE浏览器的滤镜实现相同效果，filter:alpha(opacity=50) - 对于低版本的火狐浏览器需添加内核前缀，
-moz-opacity
