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

 

 posted on 2020-08-17 22:32  wen22  阅读(118)  评论(0编辑  收藏  举报