西安网站建设_西安网站改版_西安网站制作_西安网页设计_西安网站优化_西安微信公众平台搭建_网站运营_西安SEO_纳千网络

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

文章出处:西安网站建设 │ 网站编辑:纳千网络建站 │ 发表时间:2016-04-10 10:54 我要分享

目前html5在之前html的基础上增加了许多实用的标签,页面文档的声明方式也更加简洁了,下面西安网站建设(纳千网络)来具体看一下这些区别。

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

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

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

声明文档编码:

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

html5声明文档类型的方法:

1 <!doctype html>

声明文档编码:

1 <meta charset="utf8">

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

二、html5新增结构标签

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

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

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

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

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

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

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

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

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

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

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

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

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

01 <header>
02     <p>这是头部标签</p>
03     <nav>
04         <ul>
05             <li>1</li>
06             <li>2</li>
07             <li>3</li>
08             <li>4</li>
09             <li>5</li>
10         </ul>
11     </nav>
12 </header>
13 <div class="content clearfix">
14     <section>
15         <p>这里是section内容区域</p>
16         <article>
17             <h2>百度百科</h2>
18             <p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台,其测试版于2006年4月20日上线,正式版在2008年4月21日发布,截至2015年12月,百度百科已经收录了超过1300万的词条,参与编辑用户数达569万人,几乎涵盖了所有已知的知识领域。</p>
19         </article>
20         <hr/>
21         <article>
22             <h2>标题二</h2>
23             <p>内容</p>
24         </article>
25     </section>
26     <aside>
27         <p>这里是aside侧边栏</p>
28     </aside>
29 </div>
30 <footer>
31     <p>这里是footer页面底部</p>
32 </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有这样的标签,到时候在具体的项目中知道怎么用就行,最重要的是多练习!

更多

-