码迷,mamicode.com
首页 > Web开发 > 详细

HTML5

时间:2020-08-20 18:21:43      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:for   多媒体   标准   nav   doc   html4   flash   rom   hold   

html5基础

Html基础

1、什么是HTML5

  HTML5是新一代HTML标准。

2HTML,HTML4.01的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。

3HTML5HTML最新的修订版本,201410月由万维网联盟(W3C)完成标准制定。

4HTML5的设计目的是为了在移动设备上支持多媒体。

5HTML5简单易学。

(2)HTML5的改进

1、新元素2、新属性3、完全支持CSS34VideoAudio52D/3D制图6、本地存储7Web应用

(3)HTML5的优点

1、提高可用性和改进用户的友好体验。

2、有几个新的标签,这将有助于开发人员定义重要的内容。

3、可以给站点带来更多的多媒体元素(视频和音频)

4、可以很好的替代FLASHSilverlight

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>定义sectiondocument的页脚。

<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>属性规定forminput

应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中

显示填写的选项:使用<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属性规定forminput域应该拥有自动完成功能。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

提示:autocomplete属性有可能在form元素中是开启的,而在input元素中是关闭的。

注意:autocomplete适用于<form>标签,以及以下类型的<input>标签:text,search,url,

telephone,email,password,datepickers,range以及color

(4)name指定表单项属于哪个form,处理复杂表单时会需要

(5)novalidate关闭验证,可用于<form>标签

novalidate属性是一个boolean(布尔)属性.

novalidate属性规定在提交表单时不应该验证forminput域。

(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 暂停

 

HTML5

标签:for   多媒体   标准   nav   doc   html4   flash   rom   hold   

原文地址:https://www.cnblogs.com/bigbang66/p/13520584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!