HTML5新增标记

HTML5简介

HTML5是新一代的HTML。 HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面。 HTML5是由W3C和WHATWG合作的结果。 W3C是万维网联盟,主要制作各种互联网标准的国际组织。如:XHTML、CSS、JavaScript、XML、AJAX等。 主要想发展XHTML2.0。 WHATWG应用程序工作组,是由Firefox、Chrome、苹果、safari、IE等浏览器公司成立了一个机构。主要面向应用程序的完善和开发、表单的扩展和完善。如:在HTML5中使用<video>标记,直接可以播放视频。 <input type = “email” name = “email” /> 邮箱验证 <input type = “color” name = “color” /> <input type = “date” name = “date” />

HTML5支持度测试

http://chrome.360.cn/test/html5/index.html

浏览器市场份额统计

http://tongji.baidu.com/data/browser

文档类型定义

XHTML1.0中的文档类型定义有三种:过渡型、严格型、框架型。 HTML5中的文档类型定义:<!DOCTYPE html> 就连IE6最不兼容的浏览器,也支持这个类型定义。

网页字符集设置

<meta charset= “utf-8”>

页面结构标记

  • <header></header>网页头部
  • <nav></nav>导航栏、菜单栏
  • <footer></footer>页脚
 

文章相关标记

  • <article>:代表一篇文章。
  • <aside>:侧边栏
  • <section>:区块。主要用于排版网页,功能与<div>一样。
  • <details>:一个标题的简介。
  • <summary>标题的内容,与<details>配合使用。
 

其它标记

  • <mark>:重点标注。
  • <progress>:进度条
    • max:最大值
    • value:当前值
  1. <progress id="pro" style="width:500px;" max="100" value="0"></progress>
  2. <script type="text/javascript">
  3. //获取id=pro对象
  4. var pro = document.getElementById("pro");
  5. var i = 0;
  6. window.setInterval("start2()",40);
  7. function start2()
  8. {
  9.        pro.value = i;
  10.        i++;
  11.        if(pro.value==pro.max)
  12.        {
  13.               i = 0;
  14.        }
  15. }
  16. </script>
 

音频标记<audio>属性

  • 语法格式:<audio>对不起,你浏览器不支持audio元素。</audio>
  • 常用属性
    • Controls:是否显示控制面板
    • Autoplay:是否自动开始
    • Src:播放文件路径。支持的文件格式有:mp3、ogg、wav
    • Loop:是否循环
<audio controls="controls" autoplay="autoplay" src="images/hudie.mp3">对不起,你的浏览器不支持audio元素!</audio>

视频标记<vedio>属性

  • 语法格式:<vedio>对不起,你的浏览器不支持vedio!</vedio>
  • 常用属性
    • Controls:是否显示控制面板
    • Autoplay:是否自动开始
    • Src:视频路径。支持的文件格式:ogg、mp4
    • Loop:是否循环
    • Width:宽度
    • Height:高度
    • Poster:第一帧的画面。默认是视频的第一帧。
<video src="images/mov_bbb.ogg" poster="images/baobao.jpg" controls="controls" width="400" height="300"></video>

表单中新增的属性

  • Autocomplete:自动完成,取值:on、off
  • Autofocus:自动获得焦点

表单input元素type属性的值

  • tel:电话验证
  • Email:邮箱验证
  • url:网址验证
  • color:颜色拾色器
  • date:日历
  • month:选择月份
  • time:时间
  • datetime:日期时间

发表评论

目前评论:1