HTML5基础
HTML5概述
HTML5优势
新技术特征:
- 语义特性:页面更加丰富
- 本地存储特性:启动时间更短,加载速度更快,拥有了离线操作
- 设备访问特性:设备感知能力有所增强
- 通信特性:基于页面的聊天程序实时性更高,游戏体验更加流畅
- 多媒体特性:引入原生态的多媒体支持,可以直接播放音频,视频
- 三维及图形特征:3D功能渲染更加方便高效
- 性能与集成特性:Web Worker,使浏览器支持多线程和后台任务运行,XMLHTTPRequest,使跨域请求与表单操作更加简单
- CSS3特性:提供了圆角,半透明,阴影,渐变,多背景图,更强大的选择器,变形动画
- 移动特性:开发成本低,开发周期短,编写一次代码,能够运行在不同系统的设备上
HTML5语法特征
HTML5提供了最大程度的兼容
HTML5标记方式
-
DOCTYPE声明
HTML4.01文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5文档声明
<!DOCTYPE html>
-
指定字符编码
HTML4文档编码格式的指定
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
HTML5文档编码格式的指定
<meta charset="utf-8">
HTML5语法差异
最大程度的兼容不规范页面
-
标签不区分大小写
<div>前后标签大小写不一致</Div> <div>前后标签大小写不一致</DIV>
-
结束标签可省略
允许部分标签省略结束部分,甚至还允许同时省略开始标签和结束标签
- 空元素
允许使用单标签,且可以省略标签的结束符(/)
例如:<img …/>可以写成<img … >
- 结束标签省略
允许省略结束标签有:<p>,<option>,<optgroup>,<colgroup>,<li>,<dt>,<dd>,<tr>,<td>,<th>等
- 开始标签和结束标签一起省略
如:<html>,<head>,<body>
-
boolean属性的设置
readonly,disabled,checked,selected,multiple有boolean属性
设置boolean属性存在三种情况:
- 只写属性名,默认为true
- 属性值和属性名相同,true
- 缺省(属性值为空)boolean属性,false
<input type="button" value="按钮" disabled/> <!-- true --> <input type="button" value="按钮" disabled="disabled"/> <!-- true --> <input type="button" value="按钮" disabled=""/> <!-- false --> <input type="button" value="按钮"/> <!-- false -->
-
属性引号允许省略
当属性中不包含一些特殊字符(空格,<,>,=,单引号,双引号),引号可以省略
<img src=my_logo.jpg alt=my_logo> <img src="my_logo.jpg" alt="my_logo"> <!-- 错误写法 --> <img src=my_logo.jpg alt=my logo>
HTML5文档结构
HTML5新增了许多文档结构方面的标签
为了让文档结构更加清晰,HTML5新增了<header>,<nav>,<article>,<section>,<aside>,<footer>等标签作为区块元素
HTML5文档结构元素
新的 语义化 标签有利于简化页面设计,更有利于搜索引擎对页面的检索与抓取
-
<article>标签
用于文档,页面,应用程序中,可以独自被外部引用的内容
- 用<header>定义文章的标题
- 用<footer>定义文章的注脚
- 用多个<section>将文章分为多个子块
- 可以嵌套多个<article>,例如:一个影视海报后面有多个评论
-
<header>标签
用于定义文章的页眉信息
包含:
- 多个标题(<h1>~<h6>)
- 导航部分(<nav>)
- 普通内容(<p>和<span>)
-
<hgroup>标签
用于网页或区段(section)的标题进行组合
当<header>标签包含多个标题,可以考虑使用<hgroup>标签将标题组成一组
-
<nav>标签
用于定义页面中的各种导航
一个页面可以有多个<nav>元素,作为不同部分的内容导航
常见的导航有:顶部导航,侧边栏导航,页内导航,翻页导航
-
<section>标签
用于对文章的内容进行分块,例如:章节,页眉,页脚
- 在标签中,通常包含一个标题(<h1>~<h6)
- 在标签中,可以包含多个<article>标签,表示该分块中包含多篇文章
- 在标签中,也可以嵌套<section>标签,表示该分块中包含多个子分块
- 当对页面容器设置样式时,尽量采用<div>标签,而不是<section>标签
-
<aside>标签
用于定义当前页面或当前文章的附属信息
- 位于<body>内部时,作为整个页面的侧边栏
- 位于<article>内部时,作为整篇文章的侧边栏
-
<footer>标签
用于定义脚注部分,包括文章的版权信息,作者授权等信息
HTML5其他标签
标签 | 描述 | IE | FireFox | Chrome | Opera | Safari |
---|---|---|---|---|---|---|
<datalist> | 定义选项列表,与<input>配合使用 | × | √ | √ | √ | × |
<ditails> | 描述文档或文档某个部分细节 | × | × | √ | × | √ |
<summary> | 包含<details>的标题部分 | × | × | √ | × | √ |
<mark> | 定义带有标记的文本 | IE9+ | √ | √ | √ | √ |
<meter> | 度量给定范围(gauge)内的数据 | × | √ | √ | √ | √ |
<progress> | 用于标识任务的进度(进程) | IE10+ | √ | √ | √ | √ |
<ruby> | 用于定义ruby注释 | IE9+ | √ | √ | √ | √ |
<rt> | 定义字符的解释或发音,与<ruby>一起用 | IE9+ | √ | √ | √ | √ |
<rp> | 在<ruby>中使用,当浏览器不支持<ruby>时显示该标签的内容 | IE9+ |