前言：从此开始就是前端的第一步，前端神秘的面纱即将揭开，大佬请自动略过。。
话不多说，上图
这呢，基本就是一个小网页最简单的结构，html，css，js，还包含一个存放图片的文件，当然，一个真正的工程远远不止这些，但那都是后话了。
一个页面的创建离不开 HTML 语言，每个页面都是从搭建结构开始的，尽管页面变得越来越复杂，但是其底层结构依然会比较简单，我信奉一句话，预期接到需求就开始写，不如先花一些时间去想一下自己的项目架构，一个合理的结构能大大增进你代码的可观性，合理性，利于维护。
根据实现功能的不同，可以将内层细分为两个区域：即头部区域和主体区域
1.头部区域由 <head> 和 </head> 标签对标识；
2.要在浏览器窗口显示的内容需要放在主体区域；
3.主体区域的标识标签是 <body> 和 </body>
4.因为浏览器的解析规则，css样式表一般放在头部，而js一般放在底部，具体后续会细说。
打开任意一款编辑器，哪怕是记事本，新建一个 HTML 页面，书写以上的 HTML 结构代码之后，以后缀名”.html”保存。然后用 Chorme 浏览器打开该页面，会发现页面上一片空白，没有任何内容。这是因为我们还没有在代码的<body></body> 标签中添加内容。
标签含义
<!DOCTYPE html>
用来告诉浏览器使用什么样的 HTML 或 XHTML 规范来解析网页。解析规范由 DOCTYPE 定义的 DTD（文档类型定义）来指定，DTD 规定了使用通用标签语言的网页语法。
<html></html>
<html> 标签是 HTML 页面中所有标签的顶层标签，页面中的所有标签必须放在 <html></html> 标签对之间
<head></head>
<head> 和 </head> 标签对用于标识 HTML 页面的头部区域，<head> 和</head> 之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。
<title></title>
网页文档的标题，用于搜索引擎索引，作为搜索关键字以及搜索结果的标题使用。
<meta>
<meta> 标签位于文档的头部，不包含任何文字内容。<meta> 用来定义文档的元数据，使用 “名称 = 值”的形式来表示。
一般使用它来描述当前页面的特性，比如：文档字符集、关键字、网页描述信息、作者等内容。
<meta> 是一个辅助性标签，对 HTML 页面可以进行很多方面的特性的设置。
<body></body>
body（身体，主体）代表了页面的主体部分，它是放置页面内容的地方，所有需要在浏览器窗口中显示的内容都需要放置在 <body></body> 标签对之间。用户可以通过浏览器看到写在 <body></body> 标签中的内容。
以上就是 HTML 基本结构中标签的含义及使用介绍，通过观察这些基本的标签，可以总结出标签的一些特点，如下所述。
① 标签是由尖括号包围的关键词，比如 <html>。
② 标签通常是成对出现的（称为双标签），有开始标签和结束标签。
开始标签使用 < 标签名 > 表示，结束标签使用 </ 标签名 > 表示，比如 <html></html>。
③ 也有单独呈现的标签（称为单标签），比如 <meta charset="utf-8"/>。
④ 在开始标签中可以包含若干个属性。每个属性使用：属性名 =“属性值”的格式进行设置，结束标签不包含
任何属性。HTML 属性表示标签所具有的一些特性。比如标签的形状、颜色、用途等特性。比如<meta> 标签
中的 charset="utf-8" “charset”就是标签的一个属性，而“utf-8 ”则是它的值。
⑤ 如果是双标签的话，内容出现在两个标签之间，比如 <body> 内容 </body>。
⑥ 如果是单标签的话，内容在标签属性中赋值，比如后面将学到的 img 图片标签，图片地址就出现在 src
属性中：<img src="tupian.png"/>。
⑦ 标签不区分大小写，但是为了建立一个良好的编码习惯，标签请使用小写。
在 HTML 结构中，标签与标签之间只存在两种关系：嵌套关系和并列关系。
<meta> 标签和 <title> 标签都有一个共同的“父级”—— <head> 标签。所以 <meta> 标签和 <title> 标签的并列关系也叫作“兄弟关系”
H5新增标签
1.语义化标签
语义化的标签，旨在让标签有自己的含义
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。
常见的语义化标签
<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
2.表单标签
提供一些常用简单的正则验证，如：
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器；
a.date：选取日、月、年
b.month：选取月、年
c.week：选取周和年
d.time：选取时间（小时和分钟）
e.datetime：选取时间、日、月、年（UTC时间）
f.datetime-local：选取时间、日、月、年（本地时间）
（6）search：搜索常规的文本域；
（7）color：颜色
3.多媒体标签
（1）video：视频
（2）audio：音频
彻底告别flash！！！
4.canves
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
理论上是没有canves画不出来的，动画，游戏，动效，，，只要你想就有无限可能。
h5Canves 里面有很多效果，大家可以自行前去领略。
