HTML5有哪些新的元素和属性

html-css031

HTML5有哪些新的元素和属性,第1张

HTML5 引入了新的 HTML 元素和属性,有的是传统通用元素的语义化版本,如取代 div 元素的 nav, footer

等元素,也有一些全新的元素,如 audio, video。一些在 HTML4 中不被推荐使用的元素,如 font 和 center

将被弃用。HTML5 引入的新 HTML 元素包括:

article:文章

aside:内容旁边的侧边栏内容

audio:音频

canvas:2D 绘图

command:命令按钮

datalist:下拉选择框

details:对象的细节

dialog:对话框

embed:外部插件或对象

figure:一组媒体对象以及标签文字

footer:页脚

header:页首

hgroup:文档某一部分的信息

keygen:表单生成的 Key

mark:标注的文字

meter:预先定义的范围内的度量

nav:导航条

output:输出

progress:进度条

rp:标识 rubby 内容

rt:rubby 内容的解释

ruby:rubby 内容

section:定义一个部分

source:媒体的资源

time:日期时间

video:视频

我在学习表单元素的时候感觉很混乱,特别是 name value 这两个属性,没有真正理解它们是干什么的,所以需要梳理一下。

HTML表单元素主要有 <form><input><select><textarea><button><fieldset><legend>

HTML5新增的表单元素有三个 <datalist><keygen><output>

<form>元素定义HTML表单,收集用户输入。

属性主要有 action 和 method ;

action 定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮(type为 submit 的 <input>元素); 如果省略该属性,则action会被设置为当前页面

method 属性规定在提交表单时所用的HTTP方法(HTTP方法有GET和POST两种,这里只说一下两者的主要区别:GET方法会使表单数据在页面地址栏是可见的,而POST方法不可见,所以POST方法安全性更佳)。

<input>元素很常用(为行内元素,在“去哪儿”找实习面试的时候被问到过,当时都答错......),根据不同的 type 属性,可以变化为多种形态。

type 的取值有 text radio checkbox password submit button HTML5又新增了 type 类型 email url search number range color date pickers(date month week...) ,这些新类型提供了更好的输入控制和验证。

对于 <input>元素,除了 type 属性,常用的就是 name 和 value 属性:

name 属性----想要被正确地提交,每个输入字段必须设置一个 name 属性。

value 属性----为 <input>元素设定值,对于不同的 type , value 属性的含义也不同。

效果图如下

当选择“许嵩”,点击“提交”按钮后,看到页面地址栏里表单数据的内容如下图所示。

注意:单选钮的各个 name 属性值要完全一致,否则会不只选中一个选项

效果图如下

定义下拉列表,需要配合 <option>使用, <option>定义待选择的选项;通常会把首个选项显示为被选选项;可通过selected属性来定义预定义选项。

效果图如下:

当 value 的属性值是空的时候,会取 <option>的内容值作为表单数据提交。

定义多行输入字段(文本域)

效果如下图

地址栏数据如下图所示。当文本域为空时,提交的表单数据也为空;改变文本域的值,再次提交,则表单数据也会相应的改变。

<button>元素的 type 属性有三个可能的值 button submit 和 reset ;这里只介绍属性值 button

type 为 button 时,定义可点击的按钮

效果如下图

点击后出现

规定输入域的选项列表;需要配合 <option>元素一起使用,该元素定义列表项;如需把datalist绑定到输入域,需要把输入域的 list 属性值设置为datalist的 id 值; <option>元素必须要设置 value 属性。

效果图如下

当选择第三项,并点击"提交"按钮后,地址栏数据如下

提供一种验证用户的可靠方法。

<keygen>元素是密钥对生成器(key-pair generator)。当提交表单时会生成两个键,一个是公钥,一个是私钥。私钥存储于客户端,公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度 不足 以使其成为有用的安全标准。

效果图如下

点击第一项并提交后,地址栏的数据为

用于不同类型的输出,如计算或脚本输出。

效果如下图

通过总结对这些元素的认识更加深刻了,所以要经常整理!