一、
首先得学会使用HTML5-API手册，因为HTML的属性有很多很多，如果将这些属性全部记下来的话得不偿失，需要花费大量的时间和经历，因此我们需要学会使用这个帮主文档才能全面而深入的了解HTML；
就像你去找对象一样，首先你需要了解她喜欢吃什么，性格怎样，身高体重颜值属性，喜好什么......知己知彼，百战不殆！！！
保存一下很好用的几个手册网址
HTML5-API手册、
W3C规定的官方查询网址
接下来就是一步一步找回你大一时候学习的HTML的感觉，先声明，教程的目的就是逐渐增强，是一种最佳的实践过程，相信会有收获的
网页的构造块
第一步要让内容对所有用户都是可访问的。
<!DOCTYPE html> 是一个声明，表示该文档是由 HTML5 进行编写的。
这句代码很关键，写在开头第一行（且必须写在第一行，位于标签之前），告诉浏览器当前使用哪个版本的HTML进行编写的指令。
为什么要提示一下呢？因为HTML问世的时候太多规则了，下面对比一下HTML5未问世的时候HTML4这些需要声明的，可以说，没有HTML5问世之前，这句代码的声明真的是又长又臭，现在只需要短短的一句代码代替，是不是极大方便我们程序员的工作量呢。
再者很多普通知识点其实老师都会教到的，像那些<head><title><body><h1>标签其实上文档查询一下就知道怎么使用了，这里不多说，只是能熟悉一下就可以使用。
网页文件命名规范：
使用小写字母的文件名，目录和文件夹的名称也应该全部小写。
用短横线 (-) 分割单词。
使用正确的扩展名 (.html) 。
二、
基本的框架搭建好后，当你需要给你网页的内容加上自己想要的样式的时候该用那个标签呢？
通过CSS的形式插入在<head></head>之间即可，这里是直接在HTML插入样式<style></style>，后面第4点会教大家如何通过外部引入CSS样式到HTML中，让HTML的纯内容看起来更加简洁，这里对CSS如何使用陌生的话可能要自己先看看书了，因为的确很简单。
举个栗子：
<html>
<head>
<style type="text/css">
h1 {color:red}<!--这里相当于可以给你的文档上色啊添加背景颜色啊等功能样式-->
p {color:blue}
</style>
</head><body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
补充一点：style样式也可以直接作用在文本内容中，例如让超链接没有下划线，这时候可以通过作用在标签内部的属性style实现
举个栗子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head><body><a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a></body>
</html>
三、
对了，不要忘记在之间加上<meta charect="UTF-8">设置识别时使用的字符集，否则很容易出现乱码的情况，说到这里，不得不提一下标签对于HTML的重要性
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容，<meta> 标签的属性定义了与文档相关联的名称/值对。
名称/值对是什么意思呢？例如你上百度的时候会写上你想要得到的信息的关键词，那么百度公司就会每天放出很多爬虫，这些爬虫的功能就是整合各种网页的<meta name="keywords" content="疫情,中国,美国">标签里面包含的关键词给到用户进行索引，没有这个的话网页创建出来的意义可能就不存在了，每人搜索每人看意味着你的服务器交的钱白白浪费掉是吧。
<meta>有几种重要的属性：
注意：content 属性始终要和 name 属性或 http-equiv 属性一起使用。
<meta>标签还可以设置网页的某些属性：
<head><meta name="author" content="作者名字"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
width=device-width ： 表示宽度是设备屏幕的宽度
initial-scale=1.0: 表示初始的缩放比例
minimum-scale=0.5： 表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes： 表示用户是否可以调整缩放比例
这段死记硬背的代码是因为iphone 3GS出现的时候，使得网页在手机浏览器里会缩搭配980px像素，用户想看哪个地方就放大哪个地方，如果你的网页不面向手机端，可以省略这段代码
四、
style样式表的外部CSS引入实现：
1.在文件夹中新建一个xxx.css文件
2.如果你在html中的<style></style>内已经编写好相关内容了，可以把里面的内容（注意.css文件里面并不用写<style></style>,只要把标签内容添加进去）全部复制进xxx.css文件中即可
里面到底编写些什么呢？如何在HTML里面引入外部的样式表？
样式的意思是给你枯燥的文本内容穿上一件美丽的衣服，可以设置背景颜色，字体颜色等等
步骤：
1.规定在内写入标签进行引入
2.引入的属性如何设置呢？
由于我们引入的是外部设置的样式表，所以用到属性和值如下：
<html><head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head><body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body></html>
rel和href的区别就是前者是跟超链接的文件类型，后者是跟超链接的地址
`<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >` 这个 `href="/html/csstest1.css` 的文件名字改成你新建的那个即可
通过查询帮助文档可以得知
有时候浏览网页的时候发现这个标签很有意思，有趣一点还可以链接到一个外部图标给网页
其实这个图标就是把一个文档内的图标给链接上去，只不过CSDN的图标人家是搭建在他的服务器内的，和我们本地搭建的图标地址有点不一样。
实现方法:
<head><link rel="icon" type="image/x-icon" href="../图标文件存放路径">
</head>
五、
当然，对于链接的使用，有一个更强大的标签，叫做标签，我们稍微了解一下吧
标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。
举个栗子：
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head><body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
上面这段代码中，标签的src属性是一个相对路径，因为中通过base标签设置了链接的默认地址，所以img的src实际的地址是“http://www.w3school.com.cn/i/eg_smile.gif”
同样，<a> 中只是指定了href，并未指定target属性，所以也会使用base中设置的target属性的值，target="_blank"是新标签页面打开的定义。
在 HTML 中，空元素结尾处的空格和斜杠是可选的。
在 HTML 中，属性值两边的引号是可选的，但习惯上还是会写上它们。
<img src="..." alt="..." />
相对 URL
-同一文件夹下的文件：直接文件名访问 index.html
-子文件夹下的文件：直接访问或者通过单句点引用当前文件夹 info/about.html 或 ./info/about.html
-父文件夹下的文件：双句点引用上级目录 ../img/pic.jpg
-根目录下的文件或文件夹：以斜杠开头 /root/...
