HTML5新增特性

1、新增的语义化标记元素

header 标记头部区域的内容(用于整个页面或页面中的一块区域)。

footer 标记脚部区域的内容(用于整个页面或页面中的一块区域)。

section 是web页面中的一块区域。

article 独立的文章内容。

aside 相关内容或者引文。

nav 导航类辅助内容。

2、新增的功能元素

hgroup元素,用于整个页面或页面中的一个内容区块的标题进行组合。

figure元素,表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。figcation元素可为figure元素组添加标题。

video元素,定义视频,比如电影片段或其他视频流。

audio元素,定义音频,比如音乐或其他音频流。

embed元素,用于插入各种多媒体。格式可为:MIDI、MAV、AIFF 、AU、 MP3等。

mark元素,主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。

time元素,用于表示时间或者日期,也可两者都表示。

canvas元素,表示图形,如图表或其他图像。这个元素本身没有行为,仅提供一个画布,但它把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到画布上。

output元素:表示不同类型的输出。

source元素:为媒介元素定义媒介资源。

menu元素:表示菜单列表,当希望列出表单控件时使用该标签。

ruby元素:表示ruby注释(中文注音或字符)。

rt元素:表示字符(中文注音或字符)的解释或发音。

rp元素:在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

wbr元素:在浏览器窗口或者父级元素的宽度足够宽时(没必要换行时)不进行换行,只有当宽度不够时,主动在此进行换行。

command元素:表示命令按钮,如单选按钮、复选按钮或按钮。

details元素:表示用户要求得到并且可以得到的细节信息,可以与summary元素配合使用。summary元素应该是details元素的第一个子元素。

datalist元素:可选数据的列表,与input元素配合使用。

datagrid 元素:表示可选数据的列表,以树形结构显示

keygen元素:表示生成密钥。

progress元素:表示运行中的进程,可以使用它来显示JavaScript中耗费时间的函数的进程。

email元素:表示必须输入E-mail地址的文本输入框。

url元素:表示输入URL地址的文本输入框

number元素:表示输入数值的文本输入框。

range元素:表示必须输入一定范围内数字值的文本输入框。

时间: 2024-08-30 02:19:10

HTML5新增特性的相关文章

CSS3和HTML5新增特性及使用(保留方便查看)

CSS3 1.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框,两边框之间距离 2.三角形   span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;} 3.背景大小  background-size:50%/100px

Canvas绘图 (html5新增特性)

Canvas 使用<canvas>对象,需要设置属性:width,height.指定绘图的区域大小.在canvas标签前后出现的信息将在不支持<canvas>元素的浏览器中显示出来.如下: <canvas id="drawing" width="400" height="400">a drawing of something</canvas> 要在这块画布上绘图,需要取得绘图上下文.取得绘图上下文对

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5新特性之Web Storage

Web Storage是HTML5新增的特性,能够在本地浏览器存储数据,对数据的操作很方便,最大能够存储5M. Web Storage有两种类型: SessionStorage 和 LocalStorage.SessionStorage是在浏览器打开的时间内保存数据,当关闭网页的时候数据随之丢弃.LocalStorage保存的数据不会随着网页和浏览器的关闭而消失,它会保存在本地,当网页再次打开的时候,数据依然存在. Web Storage有四种常用的方法: getItem("Key")

HTML5新增的一些属性和功能

大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的input type HTML4已有的input type: text.password.radio.checkbox.hidden.file.submit.reset.button.image   HTML5新增的input type: email:在表单提交时提供了格式验证功能,要求@左右各有一个

HTML5 学习总结(二)——HTML5新增属性与表单元素

一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; backgrou

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML5新增表单验证

HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则表达式) 示例: <input type="text" id="uName" placeholder="英文.数字长度为6-10个字符" required pattern="[a-zA-Z0-9]{6,10}"/> v