html5登陆页面代码_学习制作简单的HTML5页面

最新推荐文章于 2025-08-25 16:11:17 发布

原创最新推荐文章于 2025-08-25 16:11:17 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5登陆页面代码

本文介绍了HTML5的基础结构，包括DOCTYPE声明、标题、导航、介绍、主内容、侧边栏和页脚的创建。讲解了nav、section、aside、footer等新标签的用法，以及如何利用它们构建一个简单的HTML5登录页面。

HTML 5有种类丰富的语义结构新标记，除了与块元素有很多相似性外，还拥有自身的语义行为。在制作一个HTML 5页面时，首先要告知浏览器使用何种HTML或XHTML规范，在HTML 5出现之前，经常看到冗长的规范语法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona1//EN" "http://www.w3.org/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的到来使得浏览器更容易实现复杂布局，开发人员可以使用更少的时间是实现以前的功能，同时可以将节约下来的时间去学习一直被前端开发者忽略的事情，如前端性能优化、前端架构等。