html5新增标签与传统html的区别

阅读() @2018-07-15 14:13:29

目前html5在之前html的基础上增加了许多实用的标签,页面文档的声明方式也更加简洁了,下面来具体看一下这些区别。

一、文档声明以及编码声明发生了改变

以前的html声明文档类型的方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

声明文档编码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html5声明文档类型的方法:

<!doctype html>

声明文档编码:

<meta charset="utf-8">

看,是不是简洁很多,就算是用记事本手写,都不用敲那么多复杂的代码。

二、html5新增结构标签

结构标签是“块状元素” 有语意的div。

<article>标记定义一篇文章;

<header>标记定义一个页面或一个区域的头部;

<nav>标记定义导航链接;

<section>标记定义一个区域;

<aside> 标记定义页面内容部分的侧边栏;

<hgroup> 标记定义文件中一个区块的相关信息;

<figure> 标记定义一组媒体内容以及它们的标题;

<figcaption> 标签定义 figure 元素的标题;

<footer>  标记定义一个页面或一个区域的底部;

<dialog> 标记定义一个对话框(会话框)类似微信。

需要注意的是:如果只是一个简单的布局,通过html5新增的这些标签,就大概可以做出一个外边的框架,如果是很复杂的大型网站,还是用传统的<div>和<p>等标签比较方便。

下面这个简单的布局就是用html5新增标签做的,仅供参考,同样可以给这些标签添加id或class样式。

<header>
	<p>这是头部标签</p>
	<nav>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</nav>
</header>
<div class="content clearfix">
	<section>
		<p>这里是section内容区域</p>
		<article>
			<h2>百度百科</h2>
			<p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台,其测试版于2006年4月20日上线,正式版在2008年4月21日发布,截至2015年12月,百度百科已经收录了超过1300万的词条,参与编辑用户数达569万人,几乎涵盖了所有已知的知识领域。</p>
		</article>
		<hr/>
		<article>
			<h2>标题二</h2>
			<p>内容</p>
		</article>
	</section>
	<aside>
		<p>这里是aside侧边栏</p>
	</aside>
</div>
<footer>
	<p>这里是footer页面底部</p>
</footer>

三、html5新增的其他标签。

(1)多媒体标签:

<video> 页面中插入视频内容;

<audio> 页面中插入音频内容;

<source> 可定义多个媒体资源。

(2)绘图标签:

<canvas> 绘制图片;

<svg> 矢量图。

(3)WEB运用标签:

<meter>状态标签,温度等;

<progress>进度条;

datalist  为input定义下拉列表;

details 定义元素的详细内容。

(4)注释标签:

<ruby> 标记定义 注释或音标;

<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示;

<rt> 标记定义对ruby的注释内容文本。

(5)其他标签:

<keygen> 标记定义表单里公钥;

<mark> 标记定义有标记的文本 (默认为黄色背景);

<output> 标记定义一些输出类型,计算表单结果配合oninput事件;

<time> 标记定义一个日期/时间 。

四、html5重新定义的标签

dd:可以同details与figure一同使用,定义包含文本,dialog也可用;

dt:可以同details与figure一同使用,汇总细节,dialog也可用;

hr:表示主题结束,而不是水平线,虽然显示相同;

menu:重新定义用户界面的菜单,配合commond或者menuitem使用;

small:表示小字体,例如打印注释或者法律条款;

strong:表示重要性而不是强调符号。

总结:html5新增的标签,有些并不是像div那样经常用到,大家只要先记住h5有这样的标签,到时候在具体的项目中知道怎么用就行,最重要的是多练习!

微信二维码