新建HTML5文档
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新建HTML5文档相关的知识，希望对你有一定的参考价值。
新建html5文档
1-头部信息
在HTML文档的头部区域存储着各种网页的基本信息，这些信息主要被浏览器采用，不会显示在网页中，另外搜索引擎也会检索这些信息，因此重视并设置头部信息非常重要。
浏览器会把文档的标题放在窗口的标题栏或状态栏中显示，当把文档加入到用户的链接列表，收藏夹或者书签列表时，标题将作为该文档的默认名称。
使用meta标签可以定义网页的元信息。
2-构建网页的通用结构
HTML5包含一百多个标签，大部分继承自HTML4，这些标签基本都被放在主体区域body中，正确的选用HTML标签可以避免代码冗余，在设计网页时候不仅需要使用div构建通用网页结构，还要使用下面几类标签来完善网页结构。
h1,h2…h6:定义文档标题，1级标题到6级标题
p：定义段落文本
ul,ol,li：定义列表信息
table,tr,td:定义表格结构
form,input,textarea:定义表单结构
span：定义行内包含框
使用div和span
文档结构的基本构成元素是div，div是division，表示区块的意思，通常是将指定内容包围在div中，并分配id和class，就可以在文档中添加有意义的结构。
3-构建HTML新结构
article表示文章，用来标识页面中一块完整的，独立的，可以被转发的内容。artclie通常包含标题header，段落p,脚注footer，区块section
section表示区块，用于表示文档中的节，在页面上多对内容进行分区，例如，章节，页眉，页脚等。
div元素关注结构的独立性，而section元素关注内容的独立性。
下面的示例混用article和section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article和section的混用</title>
</head>
<body>
<article>
<header>
<h1>蝶恋花</h1>
<h2>晏殊</h2>
</header>
<p>槛菊愁烟兰泣露，罗幕轻寒，燕子双飞去。明日不谙离恨苦，斜光到晓穿朱户。</p>
<p>昨夜西风凋碧树，独上高楼，望尽天涯路。</p>
<section>
<h2>解析</h2>
<article>
<h3>注释</h3>
<p>槛：栏杆</p>
<p>罗幕：丝罗的帷幕，富贵人家所用</p>
<p>朱户：指大户人家</p>
</article>
<article>
<h3>评析</h3>
<p>这首诗真的不错，本人爱了，本菜鸡喜欢，勾起了我的暮秋怀人之情</p>
<p>如果有一天我们再相逢，睁开您的眼睛看看谁才是英雄！！</p>
</article>
</section>
</article>
</body>
</html>
对于session元素的使用应注意以下问题：
1-不要将session元素设置成样式的结构容器，对于此类操作应使用div来实现。
2-如果article，aisde或nav更符合语义使用条件，对此类操作应该使用div元素来实现。
3-不要为没有标题的内容区使用section元素。
下面设计一个HTML页面，整个页面包含两个部分，标题部分和主要部分，标题部分包括网站标题，提示性标题和副标题
主要内容包括4个部分，导航nav,文章块article,侧边栏aside,脚注footer，文章块内容荣包含三个部分，标题部分，正文部分，脚注部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的小树林</title>
</head>
<body>
<header>
<h1>我的小树林</h1>
<h2>做个有态度的程序</h2>
<h4>道友们，一起加油吧</h4>
</header>
<!--整个页面包含两个部分，标题部分和主要部分，标题部分包括网站标题，提示性标题和副标题
主要内容包括4个部分，导航nav,文章块article,侧边栏aside,脚注footer
文章块内容荣包含三个部分，标题部分，正文部分，脚注部分
-->
<main>
<nav>
<h3>导航栏</h3>
<a href = "index.jsp">博客园</a>
<a href = "index.jsp">首页</a>
<a href = "index.jsp">新随笔</a>
<a href = "index.jsp">联系</a>
<a href = "index.jsp">管理</a>
</nav>
<section>
<h2>文章</h2>
<article>
<header><h1>戏说HTML</h1></header>
<p>褪一份浮躁，守一份安静，握一份真诚，携一份善良，做个简简单单的程序员！！！</p>
<footer>
文章脚注
</footer>
</article>
</section>
<aside>
<h3>辅助信息</h3>
</aside>
<footer>
<h2>网页脚注</h2>
</footer>
</main>
</body>
</html>
以上是关于新建HTML5文档的主要内容，如果未能解决你的问题，请参考以下文章