返回 登录
0

HTML5网页新风格总结(与html4对比)

我们先来看原始的HTML4风格的页面:

<!DOCTYPE html
PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN""
""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">
<html>
<head>
<title>html4</title>
<meta name="author" content="LikeTech">
<meta name="description content="studyHTML>

<meta http-equiv="Content-Type" content="text/html";charset="utf-8">
</head>
<body>
        <div class=”header”></div>
        <div class=”nav”></div>
        <div class=”article”>
        <div class=”section”>
        </div>
        </div> <div class=”aside”>
        </div>
        <div class=”footer”></div>
</body>
</html>

我们可以看到这种风格的如下特点:

1.网页头:

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

好长啊。

2.声明网页编码:

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

其实这么一堆就是想说这个网页是UTF-8编码的

3.我们发现区分网页不同部分的不同元素时,大部分是通过对标签赋予class属性来判断这段代码是哪个部分的。

但是,万一有人喜欢用id确定呢?万一有人标记导航部分<nav><div class="guider>呢?
这种不统一的区域命名有一些缺点:
(1).可读性差(万一你用很奇怪的class名字或者id名字)
(2).不利于seo(搜索引擎优化),谁知道你的网页内容到底在哪个div里写着呢。。。
(3).不利于爬虫。。。咳咳。。。

4.当我们需要在网页上进行绘画时,html4难以做到,我们需要播放视频时,html4需要很多代码,而且需要浏览器安装flash插件(还记得讨厌的adobe flash吗?)

5.html4不能实现数据推送

6.html4面临跨浏览器的兼容性问题

so let’s go HTML 5

我们来欣赏让人耳目一新的HTML5:

<!DOCTYPE html>
<html>
<head>
<title>html5</title>

<meta charset="utf-8">

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="author" content="LikeTech">
<meta name="description content="studyHTML>



</head>
<body>
<header></header>
<nav></nav>
<article>
<section></section>
<section></section>
</article> <aside></aside>
<footer></footer>
</body>
</html>

特点如此鲜艳:

1.网页头:

<!DOCTYPE html>

简单,不解释。

2.网页编码声明:


<meta charset="utf-8">

同上,不解释

3.声明网页不同区域的风格:

<header></header>
<nav></nav>
<article>
<section></section>
<section></section>
</article> <aside></aside>
<footer></footer>

还在担心看不懂各种class和id?最重要的是seo可以进一步优化了!
不管是我们自己来对网页模块命名,还是有这样的标签。因为做网站最终的目的只有一个,那就是盈利。想盈利的话,就只有通过SEO优化的技术,把你网站排名做上来,这样你的网站才有价值,且正是这一点,html5符合了这一点。为什么这么说呢?因为他定义的这些标签,更加有利于优化,蜘蛛能识别你。
顺便解释一下:

<header>标签:网页头部内容。
<nav>标签:导航栏。
<article>标签:文章内容。
<section>标签:代表文档中的“节”或“段”,“段“可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。
<aside>标签:侧边栏。
<footer>标签:页脚。

比如<header> 标签,我们直接代替html4中的<div class="header">吧!

4.绘画,播放视频的强大功能来袭!

播放视频:

 <video src="视频地址"></video>
 标签内还可以有autoplay,controls,height,loop,preload,weidth属性,作用我们通过单词就看出来咯!

绘画:
我们可以通过SVG或者canvas标签配合js完成绘图的强大功能!

5. 数据推送,我还没了解过这个,以后体会一下

6.跨浏览器的兼容性问题:

HTML5是标准与实现同步在推,w3c声明,将来标准完成之时,就至少会有两种浏览器能够完全支持标准。

我们可以不用再考虑同样的代码在不同浏览器效果大变的问题了。

现在,我们把hmtl4变为html5:

改个头标签:
把那一堆html4的网页头改为:

<!DOCTYPE html>

mission success

附,一个hmtl5页面示例:

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
        <title>first html5 page</title>
        <!-- 
        <link rel="stylesheet" href="/css/style.css">
        <script src="/js/libs/modernizr-2.5.3.min.js">
        -->
     </head>
     <body>
         <!-- 头部 -->
         <header>
             <h1>头部</h1>
         </header>
         <!-- 导航 -->
         <nav>
             <ul>
                 <li id="home">Home</li>
                 <li id="about">About</li>
                 <li id="contact">Contact</li>
             </ul>
         </nav>
         <!-- 导航 -->
         <section>
             <h1>My Article</h1>
             <article>
                 <p>this is first article</p>
                 <div id="second_item">this is second article,I'm <a href="http://www.cnlbogs.com/hongten">Hongten</a></p>
                 <p>this is third article</p>
                 <p>this is 4's article</p>
             </article>
         </section>
         <!-- 尾部 -->
         <footer>
             <p><a href="mailto:hongtenzone@foxmail.com">hongtenzone@foxmail.com</a> || <a href="http://www.cnlbogs.com/hongten">Hongten</a></p>
         </footer>
     </body>
 </html>

下一步我们可以体验一下新标签带来的便捷

end

评论