H5与以往的区别

H5与以往的对比

1.更简单
2.标签的语义化
3.语法更宽松
4.多设备跨平台
5.自适应网页设计

• H5文档类型的声明
  • < !DOCTYPE html >
• H5语义化标签
  • < header >头标签
  • < nav >导航标签
  • < section >表示文档的结构、栏目
  • < footer >页脚
  • < article >文章标题
  • < aside >侧边栏导航
  • < mark >凸显文字
• H5新增的标签
  • figure用来表示网页上一块独立的内容
  • figcaption用来表示figure的标题，作为第一个或最后一个元素
  • output显示表单元素的结果
  • datalist提供表单选项列表
  • hgroup标签对页面或区段的标题进行组合
    • < hgroup>
      • < h3 >< /h3 >
      • < h4 >< /h4 >
    • < /hgroup >
  • dialog 会话框，默认隐藏绝对定位居中，open属性，非隐藏
  • embed嵌入插件标签
  • video 定义视频，如电影片段或其它视频流（.mp4,.ogg,*.webM）
    • < source src = “xx.ogg” type=“audio/ogg” >
  • aduio定义音频，比如音乐或其它音频流
    • < audio src = “xx.mp3” controls=“controls” >
  • canvas画布
• 改良的ol
  • 1.可以自定义编号 start
  • 2.可以按编号反向排序
  • 3.可以使用type=“A”
• 删除的HTML标签
  • 部分浏览器支持
    • < font >、< center >、< s >、< u >、< marquee >、< applet >、< bgsound >、< blink >
  • 完全抛弃
    • < rb >、< acronym >、< dir >、< isindex >、< listing >、< xmg >、< nextid >
• 重新定义的标签
  • < rb >ruby、< acronym >abbr、< dir >ul、< isindex >from与input相结合的方式、< listing >pre、< xmp >code、< next >guids
• 智能表单（url、number、email、range、color、serach、tel、date、month、week、time、datetime-local、datetime）
  • 关闭智能表单验证：novalidate=“false”
  • 火狐关闭缓存：autocomplete=“off”
  • 提示信息：placeholder

H5的css3选择器

1.属性选择器

[title]	选中所有title属性的元素
[title=a]	选中所有title=a的元素
[title="1"]	值为数字或特殊字符必须加双引号
[class="a b"]	值为多个必须加双引号
[class~="a"]	选择用所有单词为a的元素
[class|=a]	选择要么a要么a-开头的完整单词元素
[class^=a]	选择所有a开头的元素
[class$=a]	选择所有a结尾的元素
[class*=a]	选择所有带a的元素

2.结构性伪类选择器（层级选择器）

• :root选择根目录，可以理解成htm（eg:body{background:#00f;} :root{background:#f00}）
• body :not(h1)除子元素h1的所有子元素
• p:empty选择内容为空的元素（回车换行都不算空）
• :target选择被锚点选中的元素
• ul li选择器
  • ul li:first-child 选择第一个（子）元素
  • ul li:last-child 选择最后一个（子）元素
  • ul li:nth-child(2) 选择第二个（子）元素
  • ul li:nth-last-child(2) 选择倒数第二个（子）元素
  • ul li:nth-child(odd) 所有正数下第奇数个（子）元素
  • ul li:nth-child(even) 所有正数下第偶数个（子）元素
  • div p:nth-of-type(2) 有关这个元素的第二个（子）元素
  • div p:nth-last-of-type(2) 有关这个元素的倒数第二个（子）元素
  • div p:only-child 只有p元素是唯一一个个（子）元素才有效
  • n算元素（n是从0开始计算无限大的数字）
    • ul li:nth-child(n+2) 匹配从第二个元素开始
    • ul li:nth-child(2n) 匹配偶数
    • ul li:nth-child(2n+1) 匹配奇数
• ul状态性伪类选择器
  • input:focus 元素获取焦点时的状态
  • input:enabled 元素可以用时候的状态
  • input:disabled 元素禁用时候的状态
  • input:read-only 元素只读时候的状态
  • input:read-write 元素非只读时候的状态
  • input:checked 元素被选中时候的状态
  • input:default 元素默认有checked的状态
  • input:indeterminate 元素都没选中过的状态只支持google
  • input::selection 元素被选取时的状态（只能写字体颜色）
• li+li 选择下一个元素（相邻兄弟元素）
• span~p 选择span之后所有的同级p元素
• ul>li 子选择器。只能选择亲儿子

3.兼容前缀

 -o-	Presto（Opera欧朋）
 -ms-	Tredent（ie微软）
 -moz-	Gecko（firefox火狐）
 -webkit-		Webkit（chrom谷歌）
 渐进增强：一开始就针对低版本浏览器进行构建页面到高版本的变化
优雅降级：一开始就构建网址针对高版本向低版本进行兼容

H5新增的属性

文本与字体相关属性

• 文本阴影属性：text-shadow:x坐标 y坐标 阴影大小 颜色文本阴影属性（text-shadow:5px 5px 5px #f0f;）
• 盒子阴影：box-shadow:x轴 y轴 模糊的大小 颜色（box-shadow:5px 5px 5px #ff0,inset 2px 2px 2px #333）；可设置内阴影inset，阴影不占文档流
• 圆角属性：border-radius:(可以设置1-4个值，从左边第一个点顺时针计算)
  • 半圆：border-radius:50px 50px 0 0;
  • 圆：border-radius:50%;
  • 水平缩进100px，垂直缩进25px：border-radius:100px/25px;
  • 上下左右各缩进25px：border-radius:25px;
• 字体换行：word-break:
  • normal 默认
  • keep-all 只能在半角空格或连接字符处换行
  • break-all 允许在单词内换行（会整个单词都换行）不建议使用
• 字体换行：word-wrap:
  • normal 默认
  • break-word 允许在单词内换行（单纯的换行）
• 单词大小写
  • uppercase 单词都大写
  • lowercase 单词都小写
  • capitalize 每个单词首字母大写
• 显示服务端字体
  • @font-face{font-family:WebFont;src:url(“fonts/Fontin_Sans_B_45b.otf”);format(“opentype”)}
• 声明文件类型format：(*.eot格式文件不需要声明format)
  • opentype *.otf
  • truetype *.ttf
• 颜色值rgba：（颜色，颜色 ，颜色 ，透明度），hsla（60色调,50%饱和度,50%亮度,.5透明度）
• 与背景和边框相关
  • background-clip 设置背景显示区域
    • border-box
    • padding-box
    • content-box
  • background-origin 指定绘制背景图像时的起点
    • border-box
    • padding-box
    • content-box
  • background-size 指定背景中图像的尺寸（大小或百分比）
    • cover 按比例撑满背景
    • contain 刚好填满一边大小的尺寸
• 图片边框：border-image：图片路径 上 右 下 左 宽度 平铺方式（border-image:url(t1.png 13 14 11 14/12px round)）
  * streth 拉伸
  * round 平铺