HTML5
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成HTML5,它是HTML4.0升级版,并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。与传统的技术相比,HTML5 的语法特征更加明显,它定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问(页面要求访问相册)等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。
就目前市场而言,一名合格的「WEB 开发工程师」不仅需要会做「PC 端网页」、「移动端网页」,还需要会做各类强交互、多动效的「 HTML5 营销活动页面」,甚至还要做动效及脚本逻辑复杂的「HTML5 小游戏」。
HTML 新增标签
-
常见的布局标签
section
: 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、h2……等元素结合起来使用,表示文档结构。article
: 表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside
: 表示一个页面的一部分,它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在。aside元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义,比如目录、索引、术语表等;也可以用来显示相关的广告宣传,作者的介绍,相关链接,当前页内容简介等。header
: 表示页面中一个内容区块或真个页面的标题。hgroup
: 表示对整个页面或页面中的一个内容区块的标题进行组合。footer
: 表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。nav
: 表示页面中导航链接的部分。figure
: 表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
-
媒体标签
video
视频
audio
音频
更多语义化标签和介绍详见 HTML5元素周期表
面试题: 什么是web标签语义化
标签语义化的目的在于能够直观的认识标签和属性的用途和作用,好处:
1、使页面的内容结构化:结构更清晰,便于不同的屏幕设备解析;
2、有利于SEO:和搜索引擎建立良好的关系,有助于爬虫更多的有效信息;
3、便于团队开发和维护;
多媒体
在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。
HTML5 新增 audio 标签 和 video 标签来解决音视频的问题;语法:
<audio src="素材/小手拍拍.mp3" controls>不支持</audio>
<!--
附加属性可以更友好控制音频的播放,如:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时此属性失效
-->
<video src="素材/movie.ogg" width="400" height="300" controls></video>
<!--
同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载,同时设置了autoplay,此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
-->
<!-- 自动播放需要开启静音属性 -->
多浏览器支持方案:
<audio>
<source src="素材/小手拍拍.mp3">
<source src="素材/小手拍拍.wav">
<source src="素材/小手拍拍.ogg">
</audio>
<video controls>
<source src="素材/movie.ogg">
<source src="素材/movie.mp4">
<source src="素材/movie.webm">
您的浏览器不支持
</video>
Form 表单
之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。
表单在网页中主要负责数据采集功能,它用<form>
标签定义。用户输入的信息都要包含在form
标签中,点击提交后,<form>
和</form>
里面包含的数据将被提交到服务器。
所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。
表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的 ASP 或 PHP 等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。
这里我们只讲怎样使用Html 标签来设计表单。
表单组成
在 HTML 中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域 3 个部分构成
表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的 url 地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
<form>
标签
表单标签的格式:
<form action="url" method=get|post name="myform" ></form>
- name:表单提交时的名称
- action:提交到的地址
- method:提交方式,默认为get
表单控件
每个表单元素都可以定义一个name
属性,指定控件的名称。当提交信息时,会作为区分用户所填数据的标识发送给后台。
单行文本输入框
<input type="text" name="user" value="请输入用户名" />
// value属性: 输入框的值
密码输入框
<input type="password" name="pwd" value="" />
// value属性: 输入的密码
单选按钮
<input type="radio" name="sex" value="0" checked/>
<input type="radio" name="sex" value="1"/>
// 约定: 0代表男,1代表女
// 性别选择 name属性必须相同
// value属性 选中单选框的值
// checked 单选框是否被选中
复选框
<input type="checkbox" name="like" checked value="0"/>
<input type="checkbox" name="like" value="1"/>
<input type="checkbox" name="like" value="2"/>
// 约定: 0代表篮球,1代表足球,2代表排球
// value属性: 选中的复选框的值
// checked 是否被选中
文件上传
<input type="file" name="file"/>
使用file类型的input时要注意以下几点
- form表单的method属性值要为post
- form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。
默认地,表单数据会编码为 “application/x-www-form-urlencoded”,不能用于文件上传
下拉框
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>广州</option>
</select>
// value属性用来给<option>指定的那一个选项赋值
// selected 是否被选中
多行文本输入框
<textarea name="text" id="" cols="30" rows="10"></textarea>
// rows:文字区块的宽度
// cols:文字区块的高
提交按钮
<input type="submit" value="提交"/>
普通按钮
<input type="button"/>
重置按钮
<input type="reset" value="重置"/>
对于以上按钮, value:指定按钮上显示的文字
图片按钮
<input type="image" src="URL"/>
<label>
标签
<label>
标签为 input 元素定义标注。
label是input的描述,它本身不会有特殊效果,但它和input标签同时使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”
<label for="pwd">记住密码</label>
<input type="checkbox" name="pwd" id="pwd" />
通过label的for指向按钮的id来绑定,for和id属性的值要相同
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
// <label>标签一般和radio、checkbox类型一起使用。
<fieldset>
元素集
fieldset
元素可将表单内的相关元素分组,通常和legend
标签一起用,legend
标签定义了fieldset
的提示信息,fieldset
是块级元素。
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
表单补充属性
get
提交
参数被放到地址提交,比如: /D:/abc?username=张三&pwd=123&sex=0&experience=0
不安全
地址栏拼接的参数长度有限,一般是<4k
一般用于获取数据
post
提交
地址栏不显示提交内容,再请求体显示
相对安全
提交的数据量没有上限
一般用于提交保存数据
disabled
禁用
readonly
只读
placeholder
占位符提供可描述输入字段预期值的提示信息
autofocus
元素应该自动获得焦点
表单示例
H5新增input类型
-
在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
-
以上的不足都已经在HTML5中被克服,HTML5在以上的基础上增加了许多标签和属性,为开发人员带来了极大的方便
电子邮件类型
功能描述:输入E-mail地址的文本框
语法:<input type="email"/>
注意:输入的内容中必须包含"@","@"后面必须具有内容
搜索类型
功能描述:输入搜索关键字的文本框
语法:<input type="search"/>
URL类型
功能描述:输入WEB站点的文本框
语法:<input type="url"/>
注意:输入的内容中必须包含"http://"
,后面必须有内容
颜色类型
功能描述:预定义的颜色拾取控件
语法:<input type="color"/>
数字类型
功能描述:只能接受数字
语法:<input type="number"/>
属性:min:当前域能接受的最小值; max:当前域能接受的最大值; step:决定了域所接受值递增或递减的步长,默认为1
范围类型
功能描述:允许用户选择一个范围内的值
语法:<input type="range" min="0" max="100" value="80"/>
属性:min:范围的下限值; max:范围的上限值; step:声明该值递增或递减的步长; value:设置初始值
日期类型
功能描述:创建一个日期输入域
语法:<input type="date" />
周类型
功能描述:与date类型相似,但只能选择周
语法:<input type="week" />
月份类型
功能描述:与date类型相似,但只能选择月份
语法:<input type="month" />
电话类型
语法: <input type="tel" />
部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
新增 form 表单元素
<datalist>
<datalist>
包含了一组<option>
元素,这些元素表示其它表单控件可选值,常与input
标签配合使用
实际开发中:需要自动补全的内容列表项可能很多,不可能挨个展示在页面中,一般是通过ajax局部页面刷新技术实现的。
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<meter>
用来表示规定范围内的数量值,如磁盘使用量比例、关键词匹配程度等。
需要注意的是:meter不可以用来标记那些没有已知范围的任意值,如重量、高度,除非已经设定了它们值的范围。
<meter value="81" min="0" max="100" low="60" high="80"></meter>
<progress>
进度条<progress value="22" max="100"></progress>
新增表单属性
multiple
作用:支持在一个域中输入多个值,逗号隔开,一般配合邮箱和URL使用
语法:<input type="email" multiple/>
required
作用:必填
语法:<input type="text" required/>
minlength和 maxlength
作用:定制元素允许的最小字符数和最大字符数
语法:<input type="text" minlength="6" maxlength="18"/>
autocomplete
作用: 是否保存用户输入 on/off
novalidate
作用: 关闭验证,可用于form标签
formaction
作用: 主要应用于表单内某元素提交地址与整个表单提交地址不同,进行单个地址覆盖
语法: <input type="submit" formaction="xxx.action">
**tabindex **
作用: 控制 input 标签按 tab 键获取到焦点的顺序
姓名: <input type="text" tabIndex="1"> <br>
年龄: <input type="number" tabIndex="3"> <br>
电话: <input type="tel" tabIndex="2"> <br>
地址: <input type="text" tabIndex="4">