一个网页主要包含三个部分：文本内容、对其他文件的引用、标记。
一、基本的HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>You page title</title>
</head>
<body>
</body>
</html>
每个网页都包含DOCTYPE、html、head和body元素，它们是网页的基础，在这个页面中可以定制的内容包括两项，一是赋予lang属性的语言代码，二是 <title> 之间的文字。使用'<'和'>'包围的称为 HTML 标签，例如开始标签<hrad>用于标记元素的开始，结束标签</head>用于标记元素的结束。有的元素没有结束标签，如<meta>。 网页的顶部和头部：<body>开始标签以上的内容都是为浏览器和搜索引擎作准备的。<!DOCTYPE html> 告诉浏览器这是一个 HTML5 页面。接下来是 html 元素，它包含着页面的其余部分，即<html lang="en">和</html>结束标签之间的内容。再接下来才是<head>和</head>之间的区域。<title>和</title>之间的文字,这些文本会出现在浏览器'标签'页中或者出现在浏览器窗口顶部作为网页标题，此外这些文本还会作为浏览器书签的默认名称。
1. 标签：元素、属性、值及其他
标签的组成：元素(element)、属性(attribute)、和值(value)
1.1元素：就像描述网页不同部分的小标签一样，这是一个标题，那是一个段落，而那一组链接是一个导航。大多元素既包含文本，也包含其他元素。这些元素由开 始标签、内容和结束标签组成。开始标签是放在一对尖括号中的的元素的名称及可能包含的属性，结束标签是在一对尖括号中的斜杠加元素的名称。 还有一些是空元素及不包含文本也不包含其他元素，他们看起来是开始标签和结束标签的结合，由左尖括号开头，然后是元素的名称和可能的属性， 然后是一个可选的空格和一个可选的斜杠。最后是必须有右尖括号。例如下面的img元素：
<img src="xxx.jpg" width="300",heigth="300" alt="Blue Flax" />
1.2属性和值：属性包含了元素额外的信息：
<lable for="email">Emali Address</lable>
这里的for是一个lable属性，email是for属性的值。属性总是位于开始标签内，属性的值通常放在一队引号中。元素可以有多个属性，每个属性都有各自的值。属性的顺序并不重要，它们之间用空格隔开。
有的属性只就是特定的值，例如link里的media属性只能设为all、screen、print等值中的一个，不能像href和title属性那样可以输入任意值。有的属性
(如href和src）用于引用其他文件，它们只能包含URL形式的值。
1.3 URL
URL(Uniform Resource Locator,统一资源定位器)是地址的别名，它包含关于文件存储的位置和浏览器应如何处理它的信息。URL的第一部分称为模式告诉浏览器如何处理需要打开的文件。第二部分是文件所在主机的名称。
模式 主机名 路径
"http://www.site.com/tofu/index.html"
目录 文件名
绝对URL: 包含了指向目录或文件的完整信息，包括模式、主机名和路径。
相对URL: 相对URL以包含URL本身的文件位置为参照点，描述目标文件的位置。
二、基本HTML结构：
① 输入 <!DOCTYPE html> 声明页面为HTML5文档-> ② 输入 <html lang="en"> 设置语言代码-> ③ 输入 <head> 开始网页头部-> ④ 输入 <meta charset="UTF-8"> 将文档字符编码声明为UTF-8-> ⑤ 输入 <title> </title> 包含要设置的标题-> ⑥ 输入 </head> 结束页面文档头部-> ⑦ 输入 <body> 开始页面主体-> ⑧ 输入 </body> 结束主体-> ⑨ 输入 </html> 结束页面。
body元素包含页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容。
-1.创建分级标题：HTML提供了六级标题用于创建页面信息层级关系。h1~h6标题。
<h1> Enter your title1 </h1>
<h2> Enter your title2 </h2>
<h3> Enter your title3 </h3>
-2.创建页眉：header元素，页眉包括网站标志，主导航和其他全站链接。
<header role = "banner" > Text </header>
可选的 role="banner" 显示指出该页眉为页面级的页眉。只在必要时使用 header，大多数情况下使用 h1~h6 能满足需求就没有必要使用 header 将它包围起来。
-3.标记导航：nav元素，nav 中的链接可以指向页面中内容，也可以指向其他页面或资源。
<nav role = " navigation ">
<li> <a href="#gaudi"> Bareclona's </a> </li>
</nav>
-4.标记页面的主要区域：main元素 一个页面只有一个部分代表其主要内容，可以将这个内容包在 main 元素中，该元素在一个页面仅使用一次。
<main role = "main" >
[主要内容]
</main>
-5.创建文章：article元素 表示文档、页面、应用或网站中一个独立的容器。
<article>
[输入文章的内容（任意元素的数量， 元素类型包括段落、列表、音频视频、图像图形）]
</article>
-6.定义区块：section元素 代表文档或应用的一个一般的区块。
<section>
[通常包含标题]
</section>
-7.指定附注栏：aside元素，通常页面中有些部分内容与主体内容相关性并不强，但可以独立存在，一般将 aside 元素看作侧栏。
<aside role = "complementary" >
[输入附注栏内容（任意元素的数量，元素类型包括段落、列表、音频视频、图像图形）]
</aside>
-8.创建页脚：footer元素，一般来说只有当它最近的祖先是 body 时它才是整个页面的页脚。
<footer>
<p> <small> © Copyright All about Gaudi </small> </p>
</footer>
©Copyright All about Gaudi
-9.创建通用容器：有时需要在一段内容外围包一个容器，从而可以为其应用 CSS 样式或 JavaScript 效果，需要一个通用没有任何语义的容器，他就是 div元素。
<div></div>
-10.地标角色：role="banner"（横幅），role="navigation"（导航），role="main"（主体）， role="complementary"（补充性内容），role="contentinfo"（内容信息）。
-11.为元素指定类名或ID名称：可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符合类别。就可以给具有id或class名称的元素添加样式或者创建指向具有特定id元素的链接，还可以从 JavaScript 获取 id 和 class 属性，从而对元素添加特定的行为。
<div id="myDiv" class="Cls"></div>
推荐使用类为元素添加样式，每个 id 必须是唯一的，一个页面不能出现两个具有相同 id 的元素。
-12.为元素添加title属性：title 属性（不要与 title元素 混淆）可以为网站上任何部分加上提示标签。
<a href = "#gaudi" title = "Learn about Antoni Gaudi"> Barcelona's </a>
```<body>
<!-- 开始页面容器 -->
<div class="container">
<header role="banner">
...
<nav role="navigation">
...[包含链接的链表]...
</nav>
</header>
<!-- 应用CSS后的第一栏 -->
<main role="main">
<article>
...
</article>
<article>
...
</article>
...[其他区块]...
</main>
<!-- 结束第一栏 -->
<!-- 应用CSS后的第二栏 -->
<div class="sidebar">
<aside role="complementary">
...
</aside>
<aside role="complementary">
...
</aside>
</div>
</div>
<!-- 结束第二栏 -->
<footer role="contentinfo">
...
</footer>
<!-- 结束页面容器 -->
</body>
