HTML5简介
HTML5是新一代的HTML。目前,主要应用在手机端,在PC端最新浏览器已经开始支持了。但还不全面。
HTML5是由W3C和WHATWG合作的结果。
WHATWG应用程序工作组,是由Firefox、chrome、Safari、IE等浏览器公司成立的一个机构。主要面向应用程序的完善和开发、表单的扩展和完善。如:
- 在HTML5中使用<video>标记,直接播放视频。
- <input type=“email” name=“email” />,邮箱验证
改进
文档类型定义
HTML5中的文档类型定义:<!DOCTYPE html>。就连IE6都支持此文档类型。
网页字符集设置
<meta charset=
“utf-8
">
页面结构标记:
由于<div>和<span>没有实际意义,就推出了以下标记,效果和<div>一样,但貌似见名知意了
- <header></header>网页头部
- <nav></nav>导航栏,菜单栏
- <footer></footer>页脚
文章相关标记:和div效果一样
- <article>:代表一篇文章
- <section>:划块。用于排版
- <aside>:侧边栏
- <details>:一个标题的简介
- <summary>:标题的内容,配合details使用
其他标记:
- <mark>:重点标注
- <progress>:进度条
- max:最大值
- value:当前值
音频标记<audio>
- 语法格式:<audio>xxx</audio>
- 常用属性:
- controls:是否显示控制面板
- autoplay:是否自动开始
- src:文件路径。支持格式(MP3、Ogg、WAV)
- loop:是否循环
视频标记<video>
- 语法格式:<video>xxx</video>
- 常用属性:
- controls:是否显示控制面板
- autoplay:是否自动播放
- src:视频路径。支持格式(Ogg、MP4)
- loop:是否循环
- width:宽度
- height:高度
- poster:第一帧的画面。默认是视频的第一帧。可以设置图片路径作为第一帧。
表单新增属性
- autocomplete:自动完成,取值:on或off,类似历史记录
- autofocus:自动获取焦点
表单input元素type属性的值
- Tel:电话验证
- email:邮箱验证
- URL:网址验证,必须协议打头
- color:颜色选择器
- date:日历
- month:选择月份
- time:时间
- datetime:日期时间