Html5新增属性详解
- 格式:pptx
- 大小:143.95 KB
- 文档页数:27
HTML5(⼀)——新增元素和属性⾃ H5 诞⽣以来,在 html4.0 中有些元素已被 H5 废弃,但是在 H5 中添加了很多新元素以及功能,今天我们学习 H5 中新增的元素和属性都有哪些?新增语义结构标签标签描述<article>定义页⾯独⽴的内容区域。
<aside>定义页⾯的侧边栏内容。
<bdi>允许您设置⼀段⽂本,使其脱离其⽗元素的⽂本⽅向设置。
<command>定义命令按钮,⽐如单选按钮、复选框或按钮<details>⽤于描述⽂档或⽂档某个部分的细节<dialog>定义对话框,⽐如提⽰框<summary>标签包含 details 元素的标题<figure>规定独⽴的流内容(图像、图表、照⽚、代码等等)。
<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。
<header>定义了⽂档的头部区域<mark>定义带有记号的⽂本。
<meter>定义度量衡。
仅⽤于已知最⼤和最⼩值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中⽂注⾳或字符)。
<rt>定义字符(中⽂注⾳或字符)的解释或发⾳。
<rp>在 ruby 注释中使⽤,定义不⽀持 ruby 元素的浏览器所显⽰的内容。
<section>定义⽂档中的节(section、区段)。
<time>定义⽇期或时间。
<wbr>规定在⽂本中的何处适合添加换⾏符。
新增标签使⽤时根据描述内容,在适当的地⽅使⽤新标签,应⽤的时候和其他标签是⼀样的,H5 新增标签使得⽹页结构更清晰明了,建议⼤家使⽤新增元素。
HTML5新增元素,标签总结总是遇到h5新标签的笔试题⽬,就查阅了资料来总结⼀下:1.form相关:(1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向⽬标表单(form属性值设为⽬标表单id)即可。
(2)formaction属性:HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址。
<input formaction="new.html" type="submit" value="提交到new.html">(3)formmethod属性:⽤法同formaction。
(4)placeholder属性:⽤于⽂本框处于未输⼊状态时的⼀种⽂字提⽰。
(5)autofocus属性:⾃动获得焦点,⼀个页⾯只能有⼀个控件具有该属性。
该属性⽆值,直接写就好。
<input name="username" autofocus type="text" id="username">(6)list属性:⽤于单⾏⽂本框,该属性的值为某个datalist元素的id,增加该属性后的单⾏⽂本框类似选择框(),但允许⽤户⾃定义输⼊,为了避免没有⽀持该元素的浏览器出现错误,我们通常使⽤CSS设置不显⽰。
<datalist> 标签:定义可选数据的列表。
与 input 元素配合使⽤,就可以制作出输⼊值的下拉列表。
order:<input list="list" name="order" autofocus type="text" id="order"><datalist id="list" style="display:none"><option value="1">1</option><option value="2">2</option><option value="3">3</option></datalist>(7)autocomplete属性:⾃动完成允许浏览器预测对字段的输⼊,HTML5实现了⾃定义设置该属性,避免了任何⼈都可以看到所存在的安全隐患。
HTML5+CSS3 新增表单属性
在HTML5中,除了兼容以前<form> </form>标签中的属性以外,还新增了以下两个属性。
1.autocomplete 属性
该属性规定表单是否应该启用自动完成功能。
当用户在某些文本框输入过一些内容时,如果再次输入内容时,文本框会出现一个下拉框显示出以前输入过的内容。
这是浏览器默认的一个功能,利用autocomplete属性可以关闭该功能。
该属性默认值为on,即规定启用自动完成功能。
而当值为off时,则禁用自动完成功能。
示例:3-1 autocomplete.html
2.Novalidate属性
该属性规定在提交表单时不应该验证<form>标签中域对象。
示例:3-2 Novalidate.html
当在<form>标签中,添加novalidate属性时,则表单将不验证域对象中的内容。
例如,在页面中,输入错误的Email地址内容。
输入错误内容
然后,并单击【提交】按钮,则不做任何验证,将直接转至提交页面。
无验证,直接跳转页面。
HTML5details标签属性HTML5&details标签属性HTML5中新增的标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。
HTML5标签用法一般情况下,details用来对显示在页面的'内容做进一步骤解释。
其展现出来的效果和jQuery手风琴插件差不多。
其大致写法如下:Google Nexus 6商品详情:屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor首先是标签,里面接着是标题,这里面的内容一般简短,具有总结性,会展示在页面。
接着可以跟任意类型的HTML元素作为详情内容,这些内容需要在点击才会呈现。
上面代码呈现出来的效果会是下面这样的:最开始详情是隐藏的,当点击时都会展现。
open 属性当然,你也可以通过给标签设置open属性让它默认为展开状态。
Google Nexus 6商品详情:屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor此时默认会把详情展开,而点击标题后会折叠起来。
示例示例如上面那样,预览在线版本可点击此处。
浏览器兼容性由于是HTML5新标签,浏览器支持情况不是很理想。
从来自caniuse的数据来看,目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。
可喜的是,如果你在caniuse开启了「显示来自UC浏览器的结果」选项的话,会发现,国产的UC浏览器也支持了此标签。
HTML5学习笔记--------》HTML5概要与新增标签!⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要,特别是移动互联⽹。
为了增强浏览器功能Flash被⼴泛使⽤,但安全与稳定堪忧,不适合在移动端使⽤(耗电、触摸、不开放)。
HTML5增强了浏览器的原⽣功能,符合HTML5规范的浏览器功能将更加强⼤,减少了Web应⽤对插件的依赖,让⽤户体验更好,让开发更加⽅便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很⼩,这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。
它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务(Plug-in-Based Rich Internet Application,RIA),例如:AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强⽹络应⽤的标准集。
HTML5是HTML最新版本,2014年10⽉由万维⽹联盟(W3C)完成标准制定。
⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联⽹应⽤迅速发展的时候,使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5,但是各个浏览器⽀持的⽅式以及语法有所差异性。
⽀持Html5的浏览器包括Firefox(⽕狐浏览器),IE9 及其更⾼版本,Chrome(⾕歌浏览器),Safari,Opera等现代浏览器。
⽀持得分:如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端(总分555分):平板(总分555分):移动(总分555分):1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现(CSS3)1.4.1. 语义特性(Class:Semantic)HTML5赋予⽹页更好的意义和结构。
HTML5--新增表单元素属性事件(3)前⾔: HTML5在原本已有表单元素的基础上新增了新的表单元素和属性,增强了表单元素的功能。
第⼀类.新增input(type)类型 1.type为email 作⽤:email 类型⽤于包含 email 地址的输⼊域。
特性:提供了默认电⼦邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满⾜验证,则会阻⽌当前的表单提交 email⽰例:如果内容不满⾜邮箱格式,提交表单会有错误提⽰信息。
<body><form action="#">邮箱:<input type="email"><input type="submit" value="提交"></form></body> 2.type为url 作⽤:url类型⽤于包含⽹址的输⼊域。
特性:提供了⽹址完整验证,只能输⼊合法的⽹址:必须包含http://(例:) url⽰例:如果内容不满⾜⽹址格式,提交表单会有错误提⽰信息。
<body><form action="#">⽹址:<input type="url"><input type="submit" value="提交"></form></body> 3.type为number 作⽤:number 类型⽤于包含数值的输⼊域。
特性:只能输⼊数字(包含⼩数点),不能输⼊其它的字符 属性: max -- 限制输⼊框的最⼤值 min -- 限制输⼊框的最⼩值 value -- 输⼊框的默认值 step -- 规定数字增长间隔 number⽰例:输⼊框中只能输⼊number类型值,不能输⼊其他类型的值<form action="#">数量:<input type="number" value="60" max="100" min="0" step="3"><br><input type="submit" value="提交"></form> 4.type为search 作⽤:search 类型⽤于搜索域,⽐如站点搜索或 Google 搜索 特性:输⼊值后,输⼊框后带有关闭按钮可以清除输⼊框内容 search⽰例:<body><form action="#">请输⼊商品名称:<input type="search"> <br><input type="submit" value="提交"></form></body> 5.type为range 作⽤:range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键) 特性:显⽰为滑动条 属性: max -- 允许的最⼤值 min -- 允许的最⼩值 value -- 规定的默认值 step -- 规定数字增长间隔 range⽰例:<body><form action="#">范围:<input type="range" max="100" min="0" value="50"> <br><input type="submit" value="提交"></form></body> 6.type为color 作⽤:输⼊类型⽤于规定颜⾊ 特性:该类型允许你从拾⾊器中选取颜⾊ color⽰例:<body><form action="#">颜⾊:<input type="color"> <br><input type="submit" value="提交"></form></body> 7.type为tel 作⽤:tel 输⼊类型⽤于包含电话号码的输⼊字段 特性:tel它并不是来实现验证。
HTML5的标签⼤全以及相关属性按字母顺序排列的标签列表4: 指⽰在 HTML 4.01 中定义了该元素5: 指⽰在 HTML 5 中定义了该元素标签描述45定义注释。
45定义⽂档类型。
45定义超链接。
45定义缩写。
45HTML 5 中不⽀持。
定义⾸字母缩写。
4定义地址元素。
45HTML 5 中不⽀持。
定义 applet。
4定义图像映射中的区域。
45定义 article。
5定义页⾯内容之外的内容。
5定义声⾳内容。
5定义粗体⽂本。
45定义页⾯中所有链接的基准 URL。
45HTML 5 中不⽀持。
请使⽤ CSS 代替。
4定义⽂本显⽰的⽅向。
45HTML 5 中不⽀持。
定义⼤号⽂本。
4定义长的引⽤。
45定义 body 元素。
45插⼊换⾏符。
45定义按钮。
45定义图形。
5定义表格标题。
45HTML 5 中不⽀持。
定义居中的⽂本。
4定义引⽤。
45定义计算机代码⽂本。
45定义表格列的属性。
45定义表格列的分组。
45定义命令按钮。
5定义下拉列表。
5定义定义的描述。
45定义删除⽂本。
45定义元素的细节。
5定义定义项⽬。
45HTML 5 中不⽀持。
定义⽬录列表。
4定义⽂档中的⼀个部分。
45定义定义列表。
45定义定义的项⽬。
45定义强调⽂本。
45定义外部交互内容或插件。
5定义 fieldset。
45定义 figure 元素的标题。
5定义媒介内容的分组,以及它们的标题。
5HTML 5 中不⽀持。
4定义 section 或 page 的页脚。
5定义表单。
45HTML 5 中不⽀持。
定义⼦窗⼝(框架)。
4HTML 5 中不⽀持。
定义⼦窗⼝(框架)。
4 HTML 5 中不⽀持。
定义框架的集。
4定义标题 1 到标题 6。
45定义关于⽂档的信息。
45定义 section 或 page 的页眉。
5定义有关⽂档中的 section 的信息。
5定义⽔平线。
45定义 html ⽂档。
45定义斜体⽂本。
45定义⾏内的⼦窗⼝(框架)。
45定义图像。
HTML5⾃定义属性之data-HTML5 增加了⼀项新功能是,也就是data-*⾃定义属性。
在HTML5中我们可以使⽤以data-为前缀来设置我们需要的⾃定义属性,来进⾏⼀些数据的存放。
当然⾼级浏览器下可通过脚本进⾏定义和数据存取。
在项⽬实践中⾮常有⽤。
<input type="button" value="按钮" data-index="10" data-index-color="red" >在开始之前我们先来看下之前我是如何获取⾃定义属性的。
<script>var oBtn=document.querySelector('input');console.log(oBtn.value); //按钮console.log(oBtn.index); //undefinedconsole.log(oBtn.dataIndex); //undefined</script>为什么后⾯2个出现的 undefined 其实也不⾜为奇,因为点后⾯跟的只允许时符合 W3C 规范,不符合的属性全被浏览器⼲掉了。
但就是想获取⾃定义属性还是有办法的,代码如下:<script>var oBtn=document.querySelector('input');console.log(oBtn.getAttribute('value')); //按钮console.log(oBtn.getAttribute('index')); //10console.log(oBtn.getAttribute('data-index')); //10</script>当然更改与删除分别是 ele.setAttribute(name,value) 与 ele.removeAttribute(name) ,此⽅法能在所有的现代浏览器中正常⼯作,但它不是HTML 5 的⾃定义data-*属性被使⽤⽬的,不然和我们以前使⽤的⾃定义属性就没有什么区别了,我在此也就不多说了。
HTML5+CSS3 新增页面标签在HTML5中,新增了9种常用的页面标签,详细介绍如下:1.figure标签figure标签是HTML5中新增的标签之一,表示一段独立的流内容(文本、图像)。
在使用figure标签时,标签的内容应该与主内容相关;但如果被删除时,则不应对文档流产生影响。
示例:4-1 figure.html在上述代码中,向<figure>标签中添加一段文字描述和图片,形成一个独立流单元。
figure元素2.figcaption标签figcaption标签位于figure标签内,用于定义figure标签的标题(caption)。
在默认情况下,figcaption 标签应该被置于figure 标签的第一个或最后一个子标签的位置。
示例:4-2 figcaption.html从上述代码中可以看出,在figure标签中,使用figcaption 标签为figure 标签添加了一个“少林寺”标题。
3.details 标签在HTML5中,details 标签主要用于描述文档或某个部分的细节。
它常与“summary ”标签配合使用,可以为details 标签定义标题。
在浏览器中运行时,该标题是可见的,当用户单击标题时,会显示出details 标签中的内容。
在目前,只有在浏览器Chrome 中才识别details 标签。
下面通过一个在Chrome 浏览器中运行的实例,来说明details 标签的应用。
示例:4-3 details.htmlfigure 元素显示summary标签中的标题。
Summary标题单击details标签中的标题“红旗渠”,details标签中的内容会自动显示。
单击标题4.mark标签mark标签在HTML 5中,主要用于定义带有记号的文本。
如果用户在编辑文本时,需要突出显示某文本,可以使用mark标签。
示例:4-4 mark.html为黄色。
突出文本5.progress标签在HTML5中,progress标签的作用是定义运行中的进度(进程)。
HTML5有效提升iFrame安全性新增Sandbox属性通过HTML 5中iframe的新增元素sandbox,可以防止访问父页面的DOM、执行脚本、对cookie 和本地存储的读写等。
AD:HTML 5将针对iframe元素增加sandbox属性,可以防止不信任的Web页面执行某些操作。
HTML 5规范的编辑Ian Hickson谈到了sandbox的好处,它可以防止如下操作:◆访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了)◆执行脚本◆通过脚本嵌入自己的表单或是操纵表单◆对cookie、本地存储或本地SQL数据库的读写HTML 5的修订历史页面还提到了sandbox的其他特性:◆禁用插件◆禁止其他浏览上下文的导航◆禁止弹出窗口和模式对话框◆iFrames因安全问题而臭名昭著,这主要是因为iFrames常常被用于嵌入第三方内容,而后者则可能会执行某些恶意操作。
◆sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。
这种方式将沙箱内容与父页面进行了分离,因此限制了被嵌入内容的权限。
与sandbox一起出来的还有其MIME类型:texthtml-sandboxed。
Hickson说到:使用HTML5构建下一代的Web FormHTML5标准最新技术预览HTML5特性增强Adobe发布AIR2.0测试版本HTML5网页3D技术标准发布无需插件即可将HTML5 File API初探支持文件拖放上传功texthtml-sandboxed MIME类型确保用户不会访问到不可信的内容。
它包含两部分内容:首先,如果用户直接访问页面时,浏览器不可以渲染那些具有texthtml-sandboxed MIME类型的页面。
目前所有浏览器都支持这一点,这些浏览器会下载页面的标记但不会渲染页面;其次,支持sandbox属性的浏览器需要渲染具有texthtml-sandboxed MIME类型的iframes(但会受到sandbox 属性中所设定的权限限制)目前为止,还没有浏览器实现这一点,Google Chrome也是如此(它会渲染父页面,但却下载iframe内容而非在iframe中对其进行渲染)。