html5基础
Html基础
1、什么是HTML5
HTML5是新一代HTML标准。
2、HTML,HTML4.01的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。
3、HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
4、HTML5的设计目的是为了在移动设备上支持多媒体。
5、HTML5简单易学。
(2)、HTML5的改进
1、新元素2、新属性3、完全支持CSS34、Video和Audio5、2D/3D制图6、本地存储7、Web应用
(3)、HTML5的优点
1、提高可用性和改进用户的友好体验。
2、有几个新的标签,这将有助于开发人员定义重要的内容。
3、可以给站点带来更多的多媒体元素(视频和音频)。
4、可以很好的替代FLASH和Silverlight。
5、将被大量应用于移动应用程序和游戏。
6、可移植性好。
HTML5中新增的元素
(1)、<canvas>新元素
<canvas>标签定义图形,比如图表和其他图像。该标签基于JavaScript的绘图API
(2)、新多媒体元素
<audio>定义音频内容
<video>定义视频(video或者movie)
<source>定义多媒体资源<video>和<audio>
(3)、新表单元素
<datalist>定义选项列表。请与input元素配合使用该元素,来定义input可能的值。
<output>定义不同类型的输出,比如脚本的输出。
(4)、新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含details元素的标题
<footer>定义section或document的页脚。
<header>定义了文档的头部区域
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<section>定义文档中的节(section、区段)。
.HTML5中移出的标签
美元符号定义jQuery
以下的HTML4.01元素在HTML5中已经被删除:
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
<datalist>元素
<datalist>元素规定输入域的选项列表,<datalist>属性规定form或input域
应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中
显示填写的选项:使用<input>元素的列表属性与<datalist>元素绑定。
<input list="browsers">
<datalist id="browsers">
<option value="InternetExplorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Output 输出结果 name 你要操作的表单元素的变量,for:定义一个或多个元素的输出域的元素。
新的表单属性
(1)、placeholder占位符
(2)、autofocus获取焦点
autofocus属性是一个boolean属性.
autofocus属性规定在页面加载时,域自动地获得焦点。
(3)、autocomplete自动完成,用于表单元素,也可用于表单自身
autocomplete属性规定form或input域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
提示:autocomplete属性有可能在form元素中是开启的,而在input元素中是关闭的。
注意:autocomplete适用于<form>标签,以及以下类型的<input>标签:text,search,url,
telephone,email,password,datepickers,range以及color。
(4)、name指定表单项属于哪个form,处理复杂表单时会需要
(5)、novalidate关闭验证,可用于<form>标签
novalidate属性是一个boolean(布尔)属性.
novalidate属性规定在提交表单时不应该验证form或input域。
(6)、required验证条件,(必填项)
required属性是一个boolean属性.
required属性规定必须在提交之前填写输入域(不能为空)。
注意:required属性适用于以下类型的<input>标签:text,search,url,telephone,email,password,
datepickers,number,checkbox,radio以及file。
(7)、pattern正则表达式验证表单
pattern属性描述了一个正则表达式用于验证<input>元素的值。
注意:pattern属性适用于以下类型的<input>标签:text,search,url,tel,email,和password.
提示:是用来全局title属性描述了模式.
提示:您可以在我们的JavaScript教程中学习到有关正则表达式的内容
(8)、maxlength最大长度minlength最小长度 一般用于text文本属性
Onkeydown 与 onkeypress区别
Keydown按键的范围大
.表单新增的事件
oninput用户输入内容时触发,可用于移动端输入字数统计
document.getElementById("name").oninput=function(){
console.log(this.value);
}
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
Paused 暂停 video mp4
多媒体
(1)、Audio(音频)
controls如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop如果出现该属性,则每当音频结束时重新开始播放。
muted如果出现该属性,则音频输出为静音。
Paused 暂停
(2)、Video(视频)
controls如果出现该属性,则向用户显示控件,比如播放按钮。
height设置视频播放器的高度。
loop如果出现该属性,则当媒介文件完成播放后再次开始播
放。
muted如果出现该属性,视频的音频输出为静音。
width设置视频播放器的宽度。
Paused 暂停