html5新增标签/删除标签
闲聊:
最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方便以后查看,嘻嘻,懒人自有懒方法哈哈哈哈,脑子记不住,用别的方式来帮助自己嘻嘻 。下面和小颖一起来学习下html5新增标签/删除标签吧。
主要内容:
新增标签:结构标签、表单标签、媒体标签、其他功能标签。
删除标签:可以使用css代替的标签、html5不再使用frame、只有个别浏览器支持的标签、其他不常用的标签
新增标签
1.结构标签:新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签。这些新增的结构标签有助于将文档分成几个逻辑部分。如下:
section标签:表示页面中的一个独立内容区块,里面有自己的大纲结构,比如章节,页眉,页脚或页面的其他部分。就是说section可以包含h1、h2...h6标签,表示文档结构。
section标签用于标识页面上重要内容部分。该标签类似将一本书分成几个章节。
section用于对网站中的内容进行分块。一个 section 元素通常由内容以及标题组成,表示一个内容区块。section 元素中,需要包含一个<hn>标题元素,而一般不用包含头部(header元素)或者底部(footer元素)。
实例:
HTML5
<section>hello</section>
HTML
<div>hello</div>
article标签:表示页面中一块与上下文不相关的独立内容,主要是来自其他外部源的内容,可以是来自外部的新闻提供者的一篇新文章,来自Blog的文本,来自论坛的文本,总之是来自外部源的东东。
用一个article来标记博客文章摘要列表的话,article包含自己的标题(通常为h1,h2且放在header里面)。
article还有自己的aside来描述这篇文章摘要相关的信息(例如文章发布时间、文章作者、文章标签、分类目录等等)。
article和section相似,可以将article看做是特殊的section元素。article 元素更强调独立性、完整性,section 更强调相关性。
实例:
<article><header><h1>主标题</h1></header><asideid="entry-meta">作者:xxx 时间:<timedatetime="xxxx-xx-xx">xxxx-xx-xx</time></aside><divid="entry-content"><p>内容描述</P></div> </article>
aside标签:表示标签中包含的内容与页面主要内容相关,但不是该页面的一部分。这有点类似于使用括弧对正文进行注释(就像这样)。括弧中的内容提供关于该元素的一些附加信息。
表示article标签内容之外的,与article标签内容相关的辅助信息。
实例:
<p>Me and my family visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4>The Epcot Center is a theme park in Disney World, Florida.</aside>
header标签:表示一个内容区块或者整个页面的标题。
实例:
HTML5:
<header></header>
HTML:
<divid="header" ></div>
hgroup标签:(已废除) 表示对页面中的一个内容区块或整个页面的标题进行组合。即头部信息[header]的补充内容,或者标题的补充内容。
通常具有seo功能的网站标题区域(logo)部分写法:h1网站标题,h2网站副标题,描述。h1用图文替换技术,并给img添加alt属性为网站名称。
html5中可通过hgroup对标题进行分组。
实例:
<hgroup><h1>主标题</h1><h2>副标题</h2> </hgroup>
footer标签:表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期及创作者的联系信息或者公司的备注信息。
公司网站底部通常用来说明网站信息的版权,网站所有者,备案等。
实例:
HTML5
<footer>Copyright © 2015 xxx.com All Rights Reserved | 京ICP备 xxxxxxxx号-2</footer>
HTML
<divid="footer">Copyright © 2015 xxx.com All Rights Reserved | 京ICP备 xxxxxxxx号-2</div>
nav标签:表示页面中导航链接的部分。
虽然nav标签可应用于:网站导航条,侧边栏导航条,页内导航,前页后页翻页等,但普遍认为,一个页面最好只有一个nav标签,用来标记最重要的导航条(一般是网站的导航条)。这样可以让搜索引擎快速定位,避免误导。通常配合ul或ol列表标签一块使用。
实例:
HTML5
<nav><ul><li>首页</li><li>导航1</li><li>导航2</li></ul> </nav>
HTML
<divid="nav"><ul><li>首页</li><li>导航1</li><li>导航2</li></ul> </div>
figure标签:标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
实例:
HTML5
<figure><figure>PRC</figure><p>The People's Republic of China was born in 1949</p> </figure>
HTML
<dl><h2>PRC</h2><p>The People's Republic of China was born in 1949</p> </dl>
2.媒体标签:html5对媒体标签的支持非常好,把它们变成跟文字,图片同样重要的标签。
video标签:定义视频,像电影片段或其他视频流而不用再使用第三方插件。现在主要支持 Ogg 和 MPEG 两种视屏格式。
实例:
HTML5:
<videosrc="movie.ogg"controls="controls">您的浏览器不支持 video 标签。</video>
HTML
<objecttype="video/ogg"data="movie.ogv"><paramname="src"value="movie.ogv"> </object>
video总共有 30 多个常用的属性功能,以下常用:
- currentSrc:当前的视屏源
- initialTime:初始化的时间点
- readyState:当前视屏播放的状态
- currentTime:视频的当前时间
- duration:视频的时间总长
- playbackRate:播放的速率,通过该属性可以实现快进,慢放等等
- autoplay:是否自动播放
- muted:是否静音
vedio有很多实用的方法和事件
load()、play()、pause() 等等控制着视频的加载,播放和暂停。可监听的事件也是相当丰富:
- "onloadstart" // 客户端开始请求数据时触发
- "onprogress" // 客户端请求数据过程中
- "onabort" // 客户端主动终止下载时触发
- "onerror" // 请求数据时遇到错误时触发
- "onplay" //play() 和 autoplay 开始播放时触发
- "onpause" //pause() 时触发
- "onloadedmetadata" // 成功获取资源长度时触发
- "onloadeddata" // 成功获取视频资源时触发
- "oncanplay" // 视频可以播放时触发(但中途可能因为加载而暂停)
- "oncanplaythrough" // 可以播放,视频 / 音频全部加载完毕
- "ontimeupdate" // 播放时间改变时触发
- "onended" // 播放结束时触发
- "onratechange" // 播放速率改变时触发
- "ondurationchange" // 资源长度改变时触发
- "onvolumechange" // 音量改变时触发
audio标签:定义声音,比如音乐或其他音频流。
实例:
HTML5
<audiosrc="someaudio.wav">audio标签</audio>
HTML
<objecttype="application/ogg"data="someaudio.wov"> <paramname="src"value="someaudio.wov"> </object>
embed标签:定义嵌入的内容,比如插件。(包括各种媒体)格式可以是Midi,Wav,AIFF,AU,MP3,flash等。可以在不使用插件的情况下操作媒体文件,极大提升用户体验。
实例:
HTML5
<embedsrc="flash.swf" />
HTML
<objectdata="flash.swf"type="application/x-shockwave-flash"></object>
3.表单标签:
email:必须输入email
实例:
<form> <labelfor="user_mail">邮箱:</label> <inputtype="email"name="user_email"id="user_mail" /> <buttontype="submit">提交</button> </form>
浏览器验证的正则:
“/^[a-zA-Z0-9.!#$%& ’ *+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/”
url:必须输入url地址
实例:
<form> <labelfor="user_url">url:</label> <inputtype="url"name="user_url"id="user_url" /> <buttontype="submit">提交</button> </form>
number:必须输入数值
实例:
<label>number:<inputtype="number"name="points"min="1"max="10"step="1"/></label>
range:必须输入一定范围内的数值
实例:
<label>range:<inputtype="range"name="points"min="1"max="10" /></label>
Date Pickers(日期选择器):
拥有多个可供选取日期和时间的新输入类型。
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
实例:
<label>date日月年:<inputtype="date"name="user_date" /></label> <label>month月,年:<inputtype="month"name="user_month"></label> <label>time小时,分钟:<inputtype="time"name="user_time"></label> <label>datetime时间,日,月,年(UTC时间)<inputtype="datetime"name="user_datetime"></label>
search:用于搜索域,语义化更明确,域显示为常见的文本域。
实例:
<label>search:<inputtype="search"name="search" /></label>
color
实例:
<label>color:<inputtype="color"name="color" /></label>
4.其他功能标签:
mark标签:黄色高亮显示选择文本。主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。
实例:
<p>html5:一段文字<mark>高亮显示</mark></p> <p>html:一段文字<spanstyle="background-color:yellow;">高亮显示</span></p>
command标签:表示命令按钮,比如单选按钮、复选框或按钮。【没有测试出来是什么效果】
只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
实例:
<menu> <commandonclick="alert('Hello World')">Click Me!</command> </menu>
progress标签:(任务过程:安装、加载)。
表示运行中的进程,可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。
实例:
<progressvalue="40"max="100">40%</progress>
details标签:用于描述文档或文档某个部分的细节 。
可与 summary 标签配合使用,summary可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。summary应该是details的第一个子元素。
tip:可以通过<details open>添加一个open属性,默认显示展开状态
实例:
<details><summary>Name & Extension:</summary><p><inputtype=textname=fnvalue="Pillar Magazine.pdf"/></p><p><label><inputtype=checkboxname=extchecked/>Hide extension</label></p> </details>
time标签:time标签用来标记文章发布时间,可以让机器、搜索引擎等例句这篇文章是什么时间发表的。
html4:抓取时间为发布时间或者从文章中抓取类似“本文发不要xx”的文字进行分析。
实例:
<divid="meta">本文写于 xxxx-xx-xx</div>
HTML5
<aside>本文写于 <timedatetime="2012-9-27">xxxx-xx-xx</time></aside> <aside>本文写于 <timedatetime="2012-9-27"pubdate="pubdate">xxxx-xx-xx</time></aside>
pubdate属性是为了标记正确的发布时间,比如:
<h1>关于9月28日北校区宿舍楼停电公告</h1> <aside>发布日期:<timedatetime="2012-9-27"pubdate="pubdate">2012年9月27日</time></aside>
用 pubdate 规定正确的发布时间,但是需要注意,在 W3C 标准中,并没有 pubdate 这个属性,这个属性是由 mozilla 他们自己规定的。所以添加 pubdate 属性之后,无法通过 W3C 的 HTML5 验证。
datalist标签:为input标签定义一个下拉列表,配合option使用。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list属性来绑定 datalist。
实例:
<inputtype="url"list="url_list"name="link" /> <datalistid="url_list"> <optionlabel="W3School"value="http://www.W3School.com.cn" /> <optionlabel="Google"value="http://www.google.com" /> <optionlabel="Microsoft"value="http://www.microsoft.com" /> </datalist>
ruby标签:定义注释或音标(中文注音或字符)。
与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
rt标签:定义对ruby的注释内容文本。定义字符(中文注音或字符)的解释或发音。
rp标签:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
实例:
<ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>
keygen标签:定义表单里一个生产的键值,加密信息传送。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
标签规定用于表单的密钥对生成器字段。
实例:
<formaction="demo_keygen.asp"method="get">Username:<inputtype="text"name="usr_name" />Encryption:<keygenname="security" /> <inputtype="submit" /> </form>
这里我们加入了一个“name”为“security”的 Keygen 控件,在该表单提交时,浏览器会提示您输入密码以确保提交安全,如下图所示:(支持浏览器 Firefox,Chrome,Safari 和 Opera)。点击“submit”时,会弹出“password”对话框。【没测试成功】
output标签:定义不同类型的输出,比如脚本的输出。计算表单结果配合oninput事件。
实例:
<formonsubmit="return false"><inputid="num_a" />+<inputid="num_b" />=<outputid="result"onforminput="resCalc()"></output></form> <scripttype="text/javascript">functionresCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB);}</script>
通过“onforminput”监听表单输入事件,貌似只有Opera支持。
wbr标签:表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。
source标签:标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
canvas标签:定义图形,比如图表和其他图像。<canvas> 元素只是图形容器(画布),必须使用脚本来绘制图形。
实例:
<canvasid="myCanvas"></canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);</script>
menu标签:定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。
<menu>呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
注意:目前主流浏览器并不支持 menu 标签。
实例:
<menutype="toolbar"><li><menulabel="File"><buttontype="button"onclick="file_new()">New...</button><buttontype="button"onclick="file_open()">Open...</button><buttontype="button"onclick="file_save()">Save</button></menu></li><li><menulabel="Edit"><buttontype="button"onclick="edit_cut()">Cut</button><buttontype="button"onclick="edit_copy()">Copy</button><buttontype="button"onclick="edit_paste()">Paste</button></menu></li> </menu>
dialog标签:用来定义对话框或窗口。只有 Chrome 和 Safari 6 和支持 dialog 标签。
实例:dislog和dt,dd配合使用实现对话框。
<dialogopen><dt>老师</dt><dd>2+2 等于?</dd><dt>学生</dt><dd>4</dd><dt>老师</dt><dd>答对了!</dd> </dialog>
meter标签:用于表示一个范围内的值。
实例:
<p>your score is :<metervalue="88.7"min="0"max="100"low="65"high="96"optimum="100">B+</meter> </p>
如果浏览器不支持则显示B+。
删除标签
可以使用css代替的标签:删除basefont,big,center,font,s,strike,tt,u这些纯表现的元素,html5中提倡把画面展示性功能放在css中统一编辑。。
html5不再使用frame:不再用frame,noframes和frameset,这些标签对可用性产生负面影响。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。
只有个别浏览器支持的标签:bgsound背景音乐,blink文字闪烁,marquee文字滚动,applet
其他不常用的标签:
ul替代dir
pre替代listing
code替代xmp
ruby替代rb
abbr替代acronym
废除isindex使用form与input相结合的方式替代。
废除listing使用pre替代
废除nextid使用guids
废除plaintex使用“text/plian”(无格式正文)MIME类型替代。
参考文章:html5新增及删除标签
转载于:https://www.cnblogs.com/yingzi1028/p/9258616.html
html5新增标签/删除标签相关推荐
- HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: 降级的文字说明(当音频文件不能本浏 ...
- HTML5新增了哪些标签
HTML5新增了哪些标签(来源网络) 标签 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML ...
- 掌财社:对于html5新增与废弃标签的详细说明!
在技术的不断迭代和更替中会逐渐的淘汰比较不好的一下属性和标签,那么今天我们就来一同探讨有关于"对于html5新增与废弃标签的详细说明! "这方面的相关内容分享吧! 一.废弃的标签 ...
- HTML5新增语义化标签(HTML5)
HTML5新增语义化标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta chars ...
- 以下是html 5新增的标签是,HTML5新增了哪些标签?
HTML5新增了哪些标签? html5是html的最新版本,是14年由w3c完成标准制定.增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便. ht ...
- js中增加标签删除标签和input修改获取内容
1.增加标签 创建标签:document.createElement('标签id名') 在某一标签内的最后面插入标签:c.appendChild(b): //即给c加一个孩子b,记住这个孩子是后面进来 ...
- html语义化标签 例子,0820作业:HTML5新增语义化标签及实战总结
作业1:HTML5 新增语义化布局标签 实例 html> html5新增的语义化标签 initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, ...
- HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
- HTML5新增属性nofollow标签的应用场景
nofollow标签是HTML5新增的一个属性,用于告诉搜索引擎不要追踪特定的网页链接.减少垃圾对搜索引擎的排名影响.网站SEO优化nofollow标签的应用起到一定的作用. 网站Nofollow标签 ...
- html 5新增技术,HTML5新增元素,标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
最新文章
- Error: Most middleware (like bodyParser) ...
- 设计模式之状态模式(State)摘录
- Oracle数据导入导出imp/exp
- linux 系统让服务后台运行
- linux异常 - 弹出界面 eth0:设备eth0似乎不存在
- 【学习笔记】一:JavaScript简介
- ASP.NET使用UpdatePanel实现AJAX
- pthread_sigmask
- 深入RxJava2 源码解析(一)
- android界面设计开发总结
- Log4j的基本应用
- 工作后,又想读个名校的计算机硕士,该怎么做?
- buck电路上下管_分时供电全桥Buck型双输入直流变换器
- 权重衰减(L2正则化)的作用
- 计算机信息采集方式有哪些,数据监控都有哪些信息采集渠道
- bash: vagrant_重新引入Vagrant:从PHP开始的正确方法
- 语音助手——QU——query纠错与改写
- sdnu oj 1319 Russian Roulette
- c语言中len的作用,C语言 int len( ) 求大神解释
- 24口交换机SYNC模块学习
热门文章
- c++如何在两个.cpp文件中使用同一个全局变量
- cvCvtPixToPlane cvCvtPlanetoPix
- linux孟庆昌第六章课后题_周三多管理学第5版课后答案资料笔记和课后习题含考研真题详解...
- html播放器加选集,推荐:非常详细的网页播放器之代码篇(精选集一)
- linux c自写时钟,关于internal_add_timer函数(linux/kernel/timer.c中定义的)的一个问题
- Linux学习(1)阿里云服务器及配置、使用xshell远程连接
- JavaSE基础———对象数组和集合Collection
- 图(二):图的邻接矩阵表示
- eclipse返回值快捷键
- mysql56允许远程连接_mysql允许远程连接的方法