html5登陆页⾯代码_学习制作简单的HTML5页⾯
如何查看html代码HTML 5有种类丰富的语义结构新标记，除了与块元素有很多相似性外，还拥有⾃⾝的语义⾏为。在制作⼀个HTML 5页⾯时，⾸先要告知浏览器使⽤何种HTML或XHTML规范，在HTML 5出现之前，经常看到冗长的规范语法，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona1//EN" "/TR/xhtml1/DTD/xhtml1-transitiona1.dtd">
HTML 5简化了这⼀约定，⽽且不区分⼤⼩写，DOCTYPE如下：
<!DOCTYPE html>
通过⼀张页⾯结构⽰意图查看页⾯基础构造，如图所⽰
页⾯被分为6个区域，分别为：标题、导航、介绍、主内容、侧边栏、页脚。
（1）页⾯基础结构代码如下：
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>简单的HTML 5页⾯</title>
05 <link rel="stylesheet" href"../css/blog.css" type="text/css" />
<!-- 页⾯依赖样式表 -->
06 </head>
07 <body>
08 <header> <!-- 标题 -->
09 <h1>HTML 5</h1>
10 </header>
11 <nav></nav> <!-- 导航-->
12 <section class="intro"></section> <!-- 介绍-->
13 <section class="maincontent"><section> <!-- 主内容-->
14 <aside></aside> <!-- 侧边栏-->
15 <footer></footer> <!-- 页脚-->
16 </body>
17 </html>
(2) 导航区域可以使⽤HTML 5或者XHTML结构，⼀个⽆序的UL列表，关键是该列表必须放在nav标签内部，导航列表代码如下：
01 <ul>
02 <li class="selected"><a href="#">博客</a></li>
03 <li><a href="#">关于</a></li>
04 <li>< a href="#>练习</a></li>
05 </ul>
(3) 介绍区域使⽤了section标签，并添加了名为intro的样式类，同时还在内部添加header标签，⽤于表⽰介绍区域的个体标题，这⾥可以看出header的⽤法，除了在整个⽂档中使⽤之外，还能在局部的section区域中使⽤，介绍区代码如下：
01 <section class="intro"></section>
02 <header>
03 <h2>什么是HTML 5</h2>
04 </header>
05 <p>HTML 5是⽤于取代1999年所制定的HTML 4.01和HTML 1.0标准的HTML标准版
06 本，现在任处于发展阶段，但⼤部分浏览器已经⽀持某些HTML 5技术。</p>
07 </section>
(4) 主内容区同样使⽤了section标签，由于内容显⽰的是博客的⽂本，所以在内部添加⼀层article标签的嵌套，代码如下：
01 <section class="mainContent">
02 <article class="blogPost">
03 <header>
04 <h2>HTML 5新标签</h2>
05 <p>
06 时间<time datetime="2013-7-1">2013-7-1</time>
07 作者 <a href="#">⼩周</a>
08 </p>
09 </header>
10 <p>通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则，
11 HTML 5改进了互操作性，并减少了开发成本。HTML 5还包含了新的元素，
12 ⽐如:<nav>, <header>, <foot>, 以及<figure> 等等。</p>
13 </article>
14 </section>
（5）aside标签通常定义主体之外的内容，但是⼜与附近内容相关，⼀般会⽤于填充⼀些不同分类的内容，本例使⽤aside标签制作侧边栏，放置⽂章分类的标签，代码如下：
01 <aside>
02 <section>
03 <header> <!-- 标题-->
04 <h3>标签</h3>
05 </header>
06 <ul>
07 <li><a href="#">HTML 5</a></li> <!-- 分类内容-->
08 </ul>
09 </section>
10 </aside>
(6)最后⼀块内容是footer标签所表⽰的页脚，通常出现在section或者document的尾部，可包含⼀些与站点或者内容相关的信息，如作者信息、站点导航、友情链接等，本例所⽤的footer代码如下：
01 <footer> <!--页⾯页脚-->
02 <div>
03 <section id="about"> <!-- 关于-->
04 <header>
05 <h3>关于</h3>
06 </header>
07 <p>关于内容</p>
08 </section>
09 <section id="blogroll"> <!-- 友情链接-->
10 <header>
11 <h3>友情链接</h3>
12 </header>
13 <ul>
14 <li><a href="#">⼤众点评⽹</a></li>
15 </ul>
16 </section>
17 <section id="popular"> <!-- 相关流⾏内容-->
18 <header>
19 <h3>流⾏</h3>
20 </header>
21 <ul>
22 <li><a href="#">流⾏内容</a></li>
23 </ul>
24 </section>
25 </div>
26 </footer>
HTML 5的到来使得浏览器更容易实现复杂布局，开发⼈员可以使⽤更少的时间是实现以前的功能，同时可以将节约下来的时间去学习⼀直被前端开发者忽略的事情，如前端性能优化、前端架构等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。