h5和css3新特性汇总

HTML5

新的特殊内容元素

• 增加的标签及描述
  <article>-----------定义页面独立的内容区域。
  <aside>------------定义页面的侧边栏内容。
  <bdi>---------------允许您设置一段文本，使其脱离其父元素的文本方向设置。
  <command>------定义命令按钮，比如单选按钮、复选框或按钮
  <details> ----------用于描述文档或文档某个部分的细节
  <dialog> -----------定义对话框，比如提示框
  <summary>--------标签包含 details 元素的标题
  <figure>-------------规定独立的流内容（图像、图表、照片、代码等等）。
  <figcaption>--------定义 <figure> 元素的标题
  <footer>-------------定义 section 或 document 的页脚。
  <header> ----------定义了文档的头部区域
  <mark> -------------定义带有记号的文本。
  <meter> ------------定义度量衡。仅用于已知最大和最小值的度量。
  <nav> ---------------定义导航链接的部分。
  <progress>---------定义任何类型的任务的进度。
  <ruby>---------------定义 ruby 注释（中文注音或字符）。
  <rt> ------------------定义字符（中文注音或字符）的解释或发音。
  <rp> -----------------在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
  <section>-----------定义文档中的节（section、区段）。
  <time>---------------定义日期或时间。
  <wbr>----------------规定在文本中的何处适合添加换行符。
• 修改或删除的：hr（直线，语义化变为分割线）、small（表示文字小，语义化变为附属细则）、strong（加粗，语义化变为重点强调）、font被删除、big被删除、

新的表单控件

• 传统的表单元素：form 、label 、input（text、radio、chickbox、button、submit、reset、password、hidden、file...）

• 给input的type新属性：calendar（日历）、date（日期）、time（时间）、email（邮箱地址）、url、search、color（调色板）、tel（电话号码）、range（范围）、number（数字）。。。

• 表单的新属性

  1. autocomplete（自动补全）
     <input type="email" name="email" autocomplete="off" />

  2. autofocus（自动获取焦点）
     <input type="text" name="user_name" autofocus="autofocus" />

  3. list （规定输入域的 datalist。datalist 是输入域的选项列表）

  <input type="url" list="url_list" name="link" />
  <datalist id="url_list">
  <option label="W3Schools" value="http://www.w3school.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
  </datalist> 
  

  4. min、max 和 step 属性（input 类型规定限定）
     <input type="number" name="points" min="0" max="10" step="3" />
  5. multiple（email 和 file可选择多个值）
     <input type="file" name="img" multiple="multiple" />
  6. pattern（规定用于验证 input 的正则）
     <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
  7. placeholder（描述输入域所期待的值）
     <input type="search" name="user_search" placeholder="Search W3School" />

用于媒介|播放的 video 和 audio 元素

video 视频（安卓手机兼容性有问题：表现在全屏、自动播放等）

• 方法和属性地址

• 视频项目：

  1. 女记者眼中的新时代
  2. 梅德韦杰夫

    <video  webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%"  poster="" preload="auto">
        <source src=".xxx.mp4" type="video/mp4">
    </video>
  

  3. 内部会议弹幕控制（用的flash）

audio 音频（微信自动播放需要使用自己的API启动）

• 方法和属性地址

• 音频项目地址

对本地离线存储的更好的支持

• localStorage（持久计划储存在本地）

  1. localStorage存在大小限制，一般情况下5MB
  2. localStorage没有过期时间，除非人为删除
  3. 方法

     （1）localStorage.setItem('id',id);
     （2）localStorage.getItem('id');
     （3）localStorage.removeItem('id');
     （4）localStorage.clear()//删除所有信息
     

  4.一般用于存储不重要的信息，做页面之间的通信（A页面传给B页面值）

• sessionStorage（回话存储：当前页面关闭，存储的sessionStorage就清除）

  1. sessionStorage和localStorage除了存储的时间不同，其他不存在区别
  2. 关闭页面就清空，但是移动端跳转页面，又返回存储信息还存在。

• 本地存储存在同源策略。

• 加密一般使用MD5、sdk.js

用于绘画的 canvas 元素

• 例1：用户上传图片
  回乡看中国
• 例2：生成海报
  党章电子书

---

CSS3

选择器

• E[attr]：只使用属性名，但没有确定任何属性值；
• E[attr="value"]：指定属性名，并指定了该属性的属性值；
• E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
• E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
• E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
• E[attr * ="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
• E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值；
• :hover用于当用户把鼠标移动到元素上面时的效果；
• :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
• :focus用于元素成为焦点，这个经常用在表单元素上。

• :first-child选择某个元素的第一个子元素；
• :last-child选择某个元素的最后一个子元素；
• :nth-child()选择某个元素的一个或多个特定的子元素；
• :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
• :nth-of-type()选择指定的元素；
• :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
• :first-of-type选择一个上级元素下的第一个同类子元素；
• :last-of-type选择一个上级元素的最后一个同类子元素；
• :only-child选择的元素是它的父元素的唯一一个了元素；
• :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
• :empty选择的元素里面没有任何内容。

变形

transform:translate(X|Y|Z)//位移
transform:rotate(X|Y|Z)//旋转
transform:scale(X|Y|Z)//缩放
transform:skew(X|Y|Z)//倾斜  单位deg

变形基准点   //默认的基准点是元素中间位置
transform-origin:top center;  //中上方也可以用百分比

动画 : 详转至

其他样式特性

• 阴影

box-shadow: 10px 10px 5px #888888;

//参数说明：
//box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow     必需。水平阴影的位置。允许负值
v-shadow     必需。垂直阴影的位置。允许负值
blur         可选。模糊距离
spread       可选。阴影的尺寸。
color        可选。阴影的颜色。请参阅 CSS 颜色值。 
inset        可选。将外部阴影 (outset) 改为内部阴影。

• background

background-attachment:fixed//背景图固定定位
background-origin:padding-box//从填充区开始设置背景
                  border-box//从边框区开始设置背景
                  content-box//从内容区开始设置背景
background-size:cover//背景铺满整个容器，不会变形
                  contain//背景完全显示，不会变形

• 圆角

border-radius:10px;//

• 灰度（整个页面都可以变为灰色，用于不好的事情发生）

-webkit-filter:gragscale(1)
filter:gragscale(1)

• 超出省略
  单行超出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行超出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

• box-sizing

box-sizing: content-box|border-box|inherit;
//content-box
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
//border-box
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

• display:flex