[HTML5/css3] - 基础 - 2

1. native app -> webApp -> hybrid app

2. 标签变化
1). <!DOCTYPE HTML> - 说明html版本
html4 -> loose/transitional/strict dtd
html5 -> 不需要引入dtd 和原来doctype相同,why?
2) dtd -> doc type definition(xml) 定义一系列合法元素的结构(W3C) 但html5 不是基于此定义。

3. 新增标签
-结构 ——相当于div 但是增加了语义
1)article 定义了一篇文章
2)header 一个页面或一个区域的头部
3)nav 导航链接
4)section 定义一个区域(类似div)
5)aside 定义页面部分的侧栏
6)hgroup 标题组 h1,h2
7)figure 一组多媒体内容及其标题
8)figcaption figure元素标题
9)footer 一个页面或一个区域底部
10)dialog 定义一个对话框
补充:header/section/aside/article/footer 一般不要嵌套使用 header/section/footer > aside/article/figure/hgroup/nav > div

-多媒体标签:
1) video
2) audio
3) source
—example: <audio src=”sample.mp3” autoplay=”autoplay” loop=”-1” controls=”controls”>browser not support meida</audio>
<video src=”sample.mp4” autoplay=”autoplay” loop=”-1” controls=”controls”></video>
—-source -> 文件格式兼容性问题
<audio autoplay=”autoplay”>
     <source src=”sample.mp3” type=”audio/mpeg”>
</audio>      type->转码器
<video controls=”controls” width=”” height””>
    <source src=”sample.mp4” type=”video/mp4”>
</video>
4) canvas
5) embed -flash <embed src=”sample.swf”></embed>
 
-状态标签
1) meter 气压/温度/电压等 (chrome, opera)
<meter value=”” min=”” max=”” low=”” high=”” optimum=””></meter> 会根据各值的区间显示当前状态,若只有value将按百分比计算
2) progress (chrome ff opera)
<progress value=”” max=””> 根据value和max的值计算其加载进度
<progress max=””> 加载中动画
-列表标签
1) datalist
<input placeholder=”” list=””>
<datalist id=”plist”>
     <option value=””>
     </option>
     <option value=””>
     </option>
</datalist></input>
2) details
<details open=”open”><summary></summary><p></p></details>
-menu标签 主流浏览器支持不好

-其他标签
1) ruby,rt,rp -注释(音标)rp针对不兼容rt的浏览器的fallback
<ruby><rp></rp><rt>content</rt><rp></rp></ruby>
2) mark
3) output 对应表单input用于打印结果,配合form oninput事件

4.删除的标签
1) basefont, big, center, font, s, strike, tt, u (偏向styling的标签)
2)frame, frameset, noframes(对可用性造成负面影响)
3) acronym, applet isindex, dir(混淆元素)

5. 重定义标签
1) b, i -没有重要的意义
2) dd, dt -原本是dl下的标签,现在可以和details, figure一起使用
3) hr -水平线并表示主题结束
4) small 小字体并表示批注
5) strong 重要性