HTML5 01 标签的改变

来源：互联网发布：知乎的楠爷李楠编辑：程序博客网时间：2024/06/05 19:11

Html5标签的改变
1.新的文档类型声明
2.新增的标签
3.删除的标签
4.重新定义的标签
5.新的界面布局

1.HTML5的DTD声明方式
<!doctype html>
在编写HTML5文档时，要求制定文档类型，一确保浏览器能在HTML5的标准模式下进行渲染

2.新增的标签
结构标签
<article>标记定义一篇文章
<header>标记定义一个页面或者一个区域的头部
<nav>标记定义导航连接
<section>标记定义一个区域
<aside>页面内容部分的侧边栏
<hgroup>页面中一个区块的信息
<figure>一组媒体内容以及他们的标题
<figcaption>定义figure元素的标题
<footer>页面底部
<dialog>对话框
新的结构标签带来的是网页布局的改变以及提升对搜索引擎的友好

多媒体标签，支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验
<video>
<audio>
<source>
<canvas>
<embed>

应用标签
<meter>状态标签（气压温度等）
<progress>状态标签（安装加载）
<datalist>为input提供一个下拉列表
<details>标记定义一个元素的详细内容

3.删除的标签
纯表现的标签
basefont,big,center,font,s,strike,tt,u
对可用性产生负面影响的内容
frame,frameset,noframes,
产生混淆的元素
acronym,applet,isidex,dir

4.重新定义的标签
<b>内联文本，粗体，没有传递表示重要的意思
<i>内联文本，斜体，没有传递表示重要的意思
<dd>
<dt>
<hr>表主题结束，而不是水平线，
<menu>
<small>

<strong>表示重要性而不是强调符号

<!doctype html><html><head><style>/*header标签*/header{height:150px;background:#ABCDEF; }nav{height:30px;background:#ff9900;margin-top:5px;}nav ul li{width:100px;height:30px;float:left;line-height:30px;}/*页面中间区域*/div{    height:700px;margin-top:10px;}section{height:700px;background:#ABCDEF;width:70%; float:left;}article{background:#ff9900;width:300px;margin: 0 auto;text-align:center;}aside{height:700px;background:#ABCDEF;width:25%; float:right;}            /*页面底部*/footer{    margin-top:10px;height:100px;background:#ABCDEF;clear:both;}</style></head><body><!--所有的html5标签本质上都是一个div标签 ，只不过是有意义-->    <header><nav><ul><li>one</li><li>two</li><li>three</li><li>four</li><li>five</li></ul></nav></header><div><section><p></p><article><h2>title</h2><p>this is arricle content this is article content</p></article><hr/><figure><figcatption>UFO</figcatption><p>Unknow flying object</p></figure><hr/><figure><dt>DDS</dt><dd>da diao si</dd></figure><hr/><dialog><dt>Are you kidding me?</dt><dd>YES</dd><dd>NO</dd><dt>Fuck...</dt><dd>So what</dd> </dialog><hr/><menu><li>one</li><li>two</li></menu><hr/><div style="height:30px" contextmenu="candan">click me</div><menu type="context" id="candan"><menuitem label="" onclick="alert('one')" icon=''></menuitem> </menu> <hr/><meter min="0" max="10" value="5" low="3" high="6"></meter><progress max="100" value="10" id="pro"></progress>    <script>var pro = document.getElementById("pro");setInterval(function(){pro.value += 5;},1000);</script><hr/><details>    <dt>this is a question</dt><dd>to be or not to be</dd></details><hr/><!--rt加注释，如果不支持加一个括号，如果支持通过rp来注释括号--><ruby>Edd<rt><rp>(</rp>MyName<rp>)</rp></rt></ruby><hr/>this is <mark>my favariote </mark> movie</section><aside><p>this is aside </p><hgroup><h3>Jingli</h3><h3>Jingli</h3></hgroup> </aside></div><footer>    <p>this is footer</p><small>legal , contact us, cooperation</small></footer></body></html>

0 0