1.header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中,可以定义多个 <header> 元素。
注:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
2.nav
nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注:并不一定是视觉上的导航,只要是多链接区域,都可以使用
3.article
<article> 标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如:论坛帖子、博客文章、新闻故事、评论
4.aside
<aside> 标签定义 <article> 标签外的内容。应该与附近的内容相关。
5.section
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构
6.footer
<footer> 标签定义文档或者文档的一部分区域的页脚。如:文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,您可以定义多个 <footer> 元素。
7.figure
定义一段独立的流内容,一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合,带有可选标题。用来表示网页上一块独立内容。
figcaption表示figure的标题。从属于figure,并且,figure中只能放置一个figcaption
注:有默认的边距或填充值
8.hgroup
表示定义文件中一个区块的相关信息,一般用作放置标题标签的容器。
9.dialog
<dialog> 标签定义一个对话框、确认框或窗口
注:目前,只有 Chrome 和 Safari 6 支持 <dialog> 标签。
新增多媒体元素
(1)video元素
--在HTML5中专门用来播放网络上的视频或者电影。
(2)audio元素
--在HTML5中专门用来播放网络上的音频。
3)canvas
表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端js,以使脚本能够把想绘制的东西绘制到这块画布上
<canvas id=“myCanvas” width=“200” height=“200”> </canvas>
新增的表单元素
1.Datalist
datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成的功能,用户将会看见一个下拉列表供其选择。
2.output
表示不同类型的输出,比如脚本的输出
注:表单中有应用
新增的input类型
1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
例:<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>
HTML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
1、自动验证
1)、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
2)、
将属性值pattern设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:<input type=“text” pattern = “[0-9][A-Z]{3}”placeholder=‘输入内容:一个数与三个大写字母’>
3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。
4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得鼠标焦点,一个页面只能有一个。
5)autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。使用时表单元素必须有name属性;(历史记录功能)
注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
提示:在某些浏览器中,您可能需要手动启用自动完成功能。
6)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
max: 最大值
min: 最小值
step: 数字间隔
例:<input type="number“ min="0" max="10" step="3" />
7)取消验证
可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证
8)Multiple:可以输入一个或多个值,每个值之间用逗号分开;如果要获取其中的值在用split获取;
例:<input type=“email” multiple/>
还可以应用于file
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。