HTML的基本结构
每个HTML文档都应包含以下基本成分：
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "utf-8" />
<title></title>
</head>
<body>
</body>
</html>
这是每个HTML页面的基础。缩进并不重要，但结构很重要。具体如下：
DOCTYPE;html元素
head元素（包含lang属性，说明语言，非必需，但推荐加上）
说明字符编码的meta元素
title元素
body元素
这些元素具体怎么用，将在后面讲，这里先介绍元素的定义。
元素
元素由开始标签，内容和结束标签。如<h1>算法</h1>是一个内容为算法的标题。
还有一些空元素，由开始标签和结束标签结合。如图像标签：
<img src=”图片url” width=”宽度” height=”长度” alt=”图片说明” />( /可选)
元素有属性和值，如上面的src，width等都是用来描述img元素的属性，等号后面为值。
父元素和子元素：元素之间有嵌套时，外层为父元素，里层为子元素。只有第一代之间才为父元素和子元素，超过一代为祖先和后代关系。如：
<main role="main">
<article>
<h1>有一种尊严可以一文不值</h1>
<p>小时候有关“尊严”的印象最深的例子，就是韩信的“胯下之辱”了。。。
<p>....
</article>
</main>
在这个示例的html代码块中，main元素是article元素的父元素（也是祖先），是h1元素的祖先（但不是父元素）。
一些常用的HTML元素
标题元素：HTML提供了六级标题用于创建页面信息的层级关系。六级标题分别为：h1,h2,h3,h4,h5,h6，其中h1级别最高，h6级别最低，h2是h1的子标题。
创建分级标题要避免从h1直接跳到h3，但可以从h3直接跳到h1。
用法：
<h1>标题</h1>
<h2>子标题1</h2>
<h2>子标题3</h2>
<h3>3的子标题1</h3>
<h3>3的子标题2</h3>
<h1>标题2</h1>
<h2>子标题2</h2>
分级标题能够对页面信息进行分类和细分，传达页面的主题，另外分级标题在搜索引擎中占的权重比较高，因此一定要用好分级标题。
需要注意的是，虽然分级标题的字体在显示的时候，会被加粗变大，但这是浏览器附带的效果，不能为了改变字体效果而用分级标题，HTML是一种重语义的标记语言，必须弄清楚每个元素的语义。要想改变显示效果，应该用CSS。关于CSS如何用，将在后面的学习笔记中介绍。
header元素：用于创建页眉。通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。如：
<body>
<header role = "banner">
<nav role = "navigation">
<ul title="示例网站 ">
<li><a href="https://www.bilibili.com" rel="external" title="bilibili">哔哩哔哩 </a></li>
<li><a href="https://www.baidu.com" rel="external" title="baidu">百度</a></li>
</ul>
</nav>
</header>
<article>…</article>
<body>
其中用到了nav元素，仅对文档中的重要链接群应该用nav元素包起来
ul元素表示无序列表，如果要表示有序的列表，应用ol元素
main元素：标记页面的主要内容，一个页面只能有一个main元素。
article元素：用于创建文章，可以是电影或音乐评论，产品描述，作文等等。一个页面可以有多个artile元素，article元素还可以嵌套调用。
p元素：表示段落
section元素表示页面中的特定区域。如对新闻进行分类时，每个类别可以标记为一个section
aside元素：标记附注栏，内容包括重要引诉，侧栏，广告等。如果aside嵌套在主要内容里，其中内容应与main的内容密切相关，而不是仅与页面整体内容相关
footer元素：用于创建页脚。页脚是其父元素的页脚。
div元素：一个通用容器，没有任何语义。可用于为其包围的内容添加CSS效果
一些可用的地标角色
地标角色进一步丰富了html的语义，可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定role属性就可以了。
下面介绍一些可用的地标角色：
role=“banner” 面向全站的内容，将其添加到header元素，每个页面只用一次
role=“navigation”导航性元素（通常为链接）的集合，与nav是对应关系，应将其添加到每一个nav元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但不可过度使用
role=“main”文档的主要内容，与main元素对应，只可用一次
role=“complementary”文档中做为主体内容补充的支撑部分。与aside元素是对应关系，应将其添加到aside或仅包含补充性内容的div元素。可以用多个
role=“contentinfo”将其添加到整个页面的页脚（通常为footer元素），每个页面仅使用一次。
最后，放一个用到了上面介绍的结构，元素和地标角色的简单代码供参考学习。
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "utf-8" />
<title>测试网站</title>
</head>
<body>
<header role = "banner">
<nav role = "navigation">
<ul title="一个用于展示用法的示例">
<li><a href="https://www.bilibili.com" rel="external" title="bilibili">哔哩哔哩</a></li>
<li><a href="https://www.baidu.com" rel="external" title="baidu">百度</a></li>
</ul>
</nav>
</header>
<main role="main">
<article>
<h1>文章标题</h1>
<p>一个文章的一个段落</p>
<p>一个文章的一个段落</p>
<p>一个文章的一个段落</p>
</article>
</main>
<div>
<aside role = "complementary">
<h1>附注栏标题</h1>
<img src="图片链接" width ="250" height="175" alt="图名" />
<p>一个小段落</p>
</aside>
</div>
<footer role="contentinfo">
<p>相关问题请联系***</p>
<address><a href="mailto:***@qq.com">***@qq.com</a><address>
</footer>
</body>
</html>