走进HTML5

发表于
本文字数： 2.4k | 阅读时长 ≈ 2 分钟

2014年，HTML5发布。

logo

HTML5的变化

WebAPP：HTML5新增了离线存储、更丰富的表单、js线程、socket、标准扩展embed、css3……

可以使用开发网页的方式开发webAPP

新增了流媒体与多媒体引擎 ：Audio、vedio、webgldengdeng

在移动互联网方面的优势：

1、跨平台：HTML5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言。

2、快速迭代

3、减低成本：HTML5开发比原生APP开发成本降低一倍。

4、导流入口多：HTML5应用导流非常容易。

5、分发效率高

<!DCOTYPE>标签

定义和用法

<!DCOTYPE>声明必须是HTML文档的第一行，位于< html >标签之前。

<!DCOTYPE>不是HTML标签，它用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

HTML中新增的标签

结构标签

结构标签（块状元素）——有意义的div

< artical > 标记定义一篇文章。

< header > 标记定义一个页面或一个区域的头部

< nav > 标记定义导航链接

< section> 标记定义一个区域；在网页中用途比较大

< aside > 标记定义页面内容部分的侧边栏

< hgroup> 标记定义文件中一个区块的相关信息

< figure > 标记定义一组媒体内容以及它们的标题

< figcaption> 标记定义fgroup元素的标题

< footer > 标记定义一个页面或一个区域的底部

< dialog > 标记定义一个对话框（会话框）类似微信

补充：1、header/secton/aside/article/footer里面不要嵌套使用

1
2
3
<header>
    <header>错案案例</header>
</header>

2、级别：header/secton/footer > aside/article/figure/hgroup/nav > div/figcaption

3、具体标签使用见《布局部分》

多媒体标签

< video >

标记定义一个视频

demo:

1
<vedio src="../123.mp4" controls="controls"></vedio>
< audio >

标记定义音频内容

demo：

1
2
3
<audio src="../123.mp3" autoplay="autoplay" loop="-1" controls="controls">
    autoplay:播放 loop="-1"：无限循环 controls:出现音频控制器
</audio>
< source >

标记定义媒体资源

demo1:

1
2
3
<audio autoplay="autoplay">
    <source src="../123.mp3" type="audio/mpeg">
</audio>

demo2:

1
2
3
<vedio autoplay="autoplay" width="1024" height="768">
    <source src="../123.mp4" type="vedio/mp4">
</vedio>
< canvas >

标记定义图片

< embed >

标记定义外部的可交互的内容或插件，比如flashdemo：

1
2
3
<embed src="../123.swf" width="1024" height="768">
	插入了一个flash文件
</embed>
意义

多媒体标签的出现意味着富媒体的发展以及不适用插件的情况先即可操作媒体文件，极大地提升了用户体验。

Web应用标签

状态标签

< meter > 状态标签（实时状态显示：气温气压）

< progress > 状态标签（任务过程：安装、卸载）

1
2
3
4
5
<meter value="180" min="20" max="380" low="200" high="240" optimum="220">
    demo1:电压
    optimum:最佳值
</meter>
<meter value="0.75">75%</meter>

demo1:电压
optimum:最佳值
 75% 
1
2
<progress value="37" max="100"></progress>
<progress max="100"></progress>

其他标签

注释标签

< ruby > 标记定义注释或音标

< rt > 标记定义对ruby的注释内容文本

< rp > 告诉那些不支持ruby元素的浏览器如何去显示

注：rp不要放在rt内

demo略

mark标签

标记定义有标记的文本

demo：

1
2
3
<p>
    黑ui锋锐<mark>户人</mark>俄铝比u你咧我恶女i柔儿v人我哦i热女iv繁华如鳄冰鱼
</p>


黑ui锋锐户人俄铝比u你咧我恶女i柔儿v人我哦i热女iv繁华如鳄冰鱼

output标签

标记定义一些输出类型，计算表单结果配合使用