HTML5基础（1）

赵彦枝

浏览: 50301 次
性别:
来自: 河北

最近访客更多访客>>

qaqabincs

dove19900520

xulong

了不起的盖茨比

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

HTML5基础（1）

1.HTML5简介

HTML5≈HTML+CSS+Javascript+API,HTML5是HTML的新版本，是HTML增量式学习。

2.HTML5使Web增强与垄断体现在那些方面？

WebApp
HTML5新增了离线存储，更丰富的表单、js线程、socket、标准扩展embed、css3.......
流媒体与多媒体引擎
Audio、Video、Canvas、webgI等等.......
搜索引擎和无障碍沟通
3.HTML5在移动互联体现哪些优势？
（1）跨平台
HTML5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言。
（2）快速迭代
互联网产品大多数免费、且有网络效应、后入者抢夺用户的难度非常大、
（3）减低成本
HTML5开发比原生App开发成本降低一倍。
（4）导流入口多
HTML5应用导流非常容易
（5）分发效率高
4.HTML5标签的变化
（1）<!DOCTYPE>标签
<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。它不是html标签，指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
例如：HTML 4.01 Strict(严格版)
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd>    注意：HTML5不基于SGML，所以不需要引用DTD文件 ！
```

DTD(文档类型定义)介绍：
DTD可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构，在HTML中规定了标记语言的规则，使用XML定义html标签的规范。
(2)新增标签
1>结构标签（块状元素）——有意义的div：

<article>          标记 定义一篇文章
<header>           标记定义一个页面或一个区域的头部
<nav>              标记定义导航链接
<section>          标记定义一个区域
<aside>            标记定义页面内容部分的侧边栏
<hgroup>           标记定义文件中的一个区块的相关信息
<figure>           标记定义一组媒体内容以及它们的标题
<figcaption>       标记定义figure元素的标题
<footer>           标记定义一个页面或一个区域的底部
<dialog>           标记定义一个对话框（会话框）类似微信

2>多媒体标签

<video>     标记定义一个视频
<audio>     标记定义一个音频
<source>    标记定义媒体资源
<canvas>    标记定义图片
<embed>     标记定义外部的可交互的内容或插件，比如flash

用法：
1.<audio src="../Source/passion.mp3" autoplay="autoplay"  loop="-1"     controls="controls">  </audio>
属性：   autoplay     自动播放
         loop="-1"    无限次重复
         controls     页面显示控制器

2.<audio autoplay="autoplay">
      <source src="../Source/passion.mp3"  type="audio/mpeg">
  </audio>
属性： type    表示转码器（mp3格式的转码器为mpeg）

3.<video src="../Source/pal4.mp4" autoplay="autoplay" controls="controls" ></video>
属性：   autoplay     自动播放
         loop="-1"    无限次重复
         controls     页面显示控制器
4.<video autoplay="autoplay">
       <source src="../Source/pal4.mp4"  type="video/mp4">
  </video>
属性： type    表示转码器（mp4格式的转码器为mp4）
5.<embed  src="../Source/HappBirthday.swf"></embed>

3>状态标签

<meter>      状态标签（实时状态显示：气压、气温）<浏览器兼容：Chrome 、Opera>
<progress> 状态标签（任务过程：安装、加载）<浏览器兼容：Chrome、Firefox、Opera>
用法：
1. <meter  value="220"  min="20" max="380" low="200" high="240" optimum="220"></meter>
属性：    value       当前值
          min         最小值
          max         最大值
          low         低值（当前值低于该值颜色变黄）
          high        高值（当前值高于该值颜色变红）
         optimum      最优值
当以上的属性都不定义时，会以小数，百分数的形式自动计算。
 例如： <meter  value="0.75">75%</meter> 
2.<progress value="30" max="100">
  <progress max="100"> 会以加载的样式显示

分享到：