HTML5+CSS3整体回顾

转载请声明原文链接

这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！

HTML5概览

# 第一课 HTML5结构

HTML5 是新一代的 HTML
DTD声明改变 <!DOCTYPE html>
- 新的结构标签

一些总结--from-dunitian

# 常用的一些新的结构标签

结构标签

多媒体交互标签

特殊样式标签

兼容性不是很好的标签

补充说明
- small 这个元素表示边栏评论，如附属细则
- cite这个元素可用于显示作品标题（图书、电影、诗歌等）
- adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中
- time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值

# 删除的`HTML`标签

纯表现的元素：
- basefont
- big
- center
- font
- s
- strike
- tt
- u
对可用性产生负面影响的元素：
- frame
- frameset
- noframes
- 产生混淆的元素：
  - acronym
  - applet
  - isindex
  - dir
重新定义的HTML标签
-  代表内联文本，通常是粗体，没有传递表示重要的意思
-  代表内联文本，通常是斜体，没有传递表示重要的意思
- <dd> 可以同details与figure一同使用，定义包含文本，ialog也可用
- <dt> 可以同details与figure一同使用，汇总细节，dialog也可用
- <hr> 表示主题结束，而不是水平线，虽然显示相同
- <menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
-  表示小字体，例如打印注释或者法律条款
-  表示重要性而不是强调符号
崭新新的页面布局

传统的布局

HTML5标签布局

实例-from-dunitian

草图--from-dunitian

# 第二课 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,一种验证失败返回false
- oText.addEventListener("invalid",fn1,false)
- ev.preventDefault(): 阻止默认事件
- valueMissing: 当输入值为空的时候，返回true
- typeMismatch: 控件值与预期不吻合，返回true
- patternMismatch: 输入值不满足pattern正则，返回true
- cusomError
  - setCustomValidity()

# 第三课 css3选择器

css3属性快速一览

CSS3发展史简介
- HTML的诞生 20世纪90年代初
- 1996年底， CSS第一版诞生
- 1998年5月 CSS2正式发布
- 2004年 CSS2.1发布
- CSS3的发布 2002 2003 2004 2005 2007 2009 2010
模块化开发
- CSS1 中定义了网页的基本属性：
  - 字体、颜色、基本选择器等
- CSS2中在CSS1的基础上添加了高级功能
  - 浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
- CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段
CSS选择器复习
- 通用选择器：* 选择到所有的元素
- 选择子元素：> 选择到元素的直接后代
- 相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素
- 普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素
- 伪元素选择器：
  - ::first-line 匹配文本块的首行
  - ::first-letter 选择文本块的首字母
- 伪类选择器：
  - :before,:after在元素内容前面、后面添加内容(相当于行内元素)
CSS3结构选择器

CSS3结构选择器

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全局属性的元素
 - :target url片段标识符指向的元素
 - :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:文本的对齐方式
- css1
- left:默认值左对齐
- right:右对齐
- center:居中
- justify：内容两端对齐。
- css3
- start:开始边界对齐
- end:结束边界对齐
text-transform:文字的大小写
- css1
  - none：默认值无转换
  - capitalize：将每个单词的第一个字母转换成大写
  - uppercase：转换成大写
  - lowercase：转换成小写
- css3
  - full-width：将左右字符设为全角形式。不支持
  - full-size-kana：将所有小假名字符转换为普通假名。不支持
    - 例如：土耳其语
text-decoration:文本的装饰线，复合属性(只火狐支持)
- text-decoration-line ：
  - 指定文本装饰的种类。相当于CSS1时的text-decoration属性
- text-decoration-style ：
  - `指定文本装饰的样式。
- text-decoration-color：
  - `指定文本装饰的颜色。
- blink：指定文字的装饰是闪烁。 opera和firefox
- text-decoration : #F00 double overline CSS3实例
text-shadow:文本阴影
- 取值：x y blur color,…
  - 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盒模型复习

标准盒子模型

IE盒子模型

转载请声明原文链接

HTML5概览

# 第一课 HTML5结构

HTML5 是新一代的 HTML
DTD声明改变 <!DOCTYPE html>
- 新的结构标签

一些总结--from-dunitian

# 常用的一些新的结构标签

结构标签

多媒体交互标签

特殊样式标签

兼容性不是很好的标签

补充说明
- small 这个元素表示边栏评论，如附属细则
- cite这个元素可用于显示作品标题（图书、电影、诗歌等）
- adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中
- time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值

# 删除的`HTML`标签

纯表现的元素：
- basefont
- big
- center
- font
- s
- strike
- tt
- u
对可用性产生负面影响的元素：
- frame
- frameset
- noframes
- 产生混淆的元素：
  - acronym
  - applet
  - isindex
  - dir
重新定义的HTML标签
-  代表内联文本，通常是粗体，没有传递表示重要的意思
-  代表内联文本，通常是斜体，没有传递表示重要的意思
- <dd> 可以同details与figure一同使用，定义包含文本，ialog也可用
- <dt> 可以同details与figure一同使用，汇总细节，dialog也可用
- <hr> 表示主题结束，而不是水平线，虽然显示相同
- <menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
-  表示小字体，例如打印注释或者法律条款
-  表示重要性而不是强调符号
崭新新的页面布局

传统的布局

HTML5标签布局

实例-from-dunitian

草图--from-dunitian

# 第二课 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,一种验证失败返回false
- oText.addEventListener("invalid",fn1,false)
- ev.preventDefault(): 阻止默认事件
- valueMissing: 当输入值为空的时候，返回true
- typeMismatch: 控件值与预期不吻合，返回true
- patternMismatch: 输入值不满足pattern正则，返回true
- cusomError
  - setCustomValidity()

# 第三课 css3选择器

css3属性快速一览

CSS3发展史简介
- HTML的诞生 20世纪90年代初
- 1996年底， CSS第一版诞生
- 1998年5月 CSS2正式发布
- 2004年 CSS2.1发布
- CSS3的发布 2002 2003 2004 2005 2007 2009 2010
模块化开发
- CSS1 中定义了网页的基本属性：
  - 字体、颜色、基本选择器等
- CSS2中在CSS1的基础上添加了高级功能
  - 浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
- CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段
CSS选择器复习
- 通用选择器：* 选择到所有的元素
- 选择子元素：> 选择到元素的直接后代
- 相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素
- 普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素
- 伪元素选择器：
  - ::first-line 匹配文本块的首行
  - ::first-letter 选择文本块的首字母
- 伪类选择器：
  - :before,:after在元素内容前面、后面添加内容(相当于行内元素)
CSS3结构选择器

CSS3结构选择器

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全局属性的元素
 - :target url片段标识符指向的元素
 - :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:文本的对齐方式
- css1
- left:默认值左对齐
- right:右对齐
- center:居中
- justify：内容两端对齐。
- css3
- start:开始边界对齐
- end:结束边界对齐
text-transform:文字的大小写
- css1
  - none：默认值无转换
  - capitalize：将每个单词的第一个字母转换成大写
  - uppercase：转换成大写
  - lowercase：转换成小写
- css3
  - full-width：将左右字符设为全角形式。不支持
  - full-size-kana：将所有小假名字符转换为普通假名。不支持
    - 例如：土耳其语
text-decoration:文本的装饰线，复合属性(只火狐支持)
- text-decoration-line ：
  - 指定文本装饰的种类。相当于CSS1时的text-decoration属性
- text-decoration-style ：
  - `指定文本装饰的样式。
- text-decoration-color：
  - `指定文本装饰的颜色。
- blink：指定文字的装饰是闪烁。 opera和firefox
- text-decoration : #F00 double overline CSS3实例
text-shadow:文本阴影
- 取值：x y blur color,…
  - 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盒模型复习

标准盒子模型

IE盒子模型

HTML5+CSS3整体回顾

# 第一课 HTML5结构

# 常用的一些新的结构标签

# 删除的HTML标签

# 第二课 HTML5智能表单

# HTML4.01 form表单复习

# HTML5智能表单

# Input 类型 - Date Pickers（日期选择器）

# HTML5新增表单属性

# 表单验证

# 第三课 css3选择器

# 第四课 CSS3新增文本属性

# 第五课 CSS3盒模型

HTML5+CSS3整体回顾

# 第一课 HTML5结构

# 常用的一些新的结构标签

# 删除的HTML标签

# 第二课 HTML5智能表单

# HTML4.01 form表单复习

# HTML5智能表单

# Input 类型 - Date Pickers（日期选择器）

# HTML5新增表单属性

# 表单验证

# 第三课 css3选择器

# 第四课 CSS3新增文本属性

# 第五课 CSS3盒模型

# 删除的`HTML`标签

# 删除的`HTML`标签