前言
学习HTML是必须的，关乎WEB那么就少不了HTML，具体的就往下看吧
第1章 HTML介绍
1.1 HTML是什么
HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。
注：解压开发环境中sublime软件，绿化后打开使用，新建文件，写入内容，保存的文件后缀名需要是.html结尾，再使用浏览器打开即可。
1.2 HTML标签解释
HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。
第2章 HTML标签
2.1 什么是HTML标签
HTML使用不同的标签来实现不同的功能。
2.2 HTML标签书写格式
1.成对出现<>，例如
<b>和</b>。
2.第一个表示开始，第二个表示结束。
3.开始标签和结束标签之间的文本是内容。
4.标签大小写无所谓，<b>和<B>表示的意思一样。
2.3 HTML标签的属性
正常的主体标签是：
<body>
但是我现在想让页面的背景变成红色，那么可以这么样写：
<body bgcolor="red">
再举个例子，我想创建一个表格，但是这个表格不希望他有边框，可以这样写:
<table border="0">
第3章 HTML基本标签
3.1 HTML基本标签组成
HTML中最重要的标签是定义标题元素，段落和换行的标签。
下面的例子一个简单的HTML组成:
<html>
<body>
我的第一个HTML网页
</body>
</html>
3.2 标题元素
解释：
1.标题元素由标签
<h1>到<h6>定义。
2.<h1>定义了最大的标题元素
3.<h6>定义了最小的标题元素
举例：显示6个标签
<html>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
3.3 段落
解释：
1.段落是用
<p>标签定义的。
2.HTML自动在一个段落前后各添加一个空行。
举例：
<html>
<body>
<p>这是第1段话</p>
<p>这是第2段话</p>
<p>这是第3段话</p>
<p>这是第4段话</p>
</body>
</html>
3.4 换行
解释：
当需要结束一行，并且不想开始新段落时，使用
<br>标签。<br>标签不管放在什么位置，都能够强制换行。
举例：
<html>
<body>
主体内容
<br>
换行啦啦啦
<br>
</body>
</html>
3.5 居中的标题
<html>
<body>
<h1 align="center">这是居中的标题</h1>
<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
</body>
</html>
3.6 插入水平线
解释：
使用
<hr>表示插入一条水平线
举例：
<html>
<body>
<p>插入水平线</p>
<hr>
<p>这是一条线</p>
<hr>
<p>还是一条线</p>
<hr>
</body>
</html>
3.7 背景颜色
解释：
通过给
<body>标签添加属性来控制背景颜色
举例：
<html>
<body bgcolor="yellow">
<h2>看，黄色的背景！</h2>
</body>
</html>
第4章 HTML格式
4.1 什么是HTML格式
HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。
4.2 格式化文字
<html>
<body>
<strong>文本加粗</strong>
<br>
<big>文本放大</big>
<br>
<small>文本缩小</small>
<br>
<i>文本倾斜</i>
<br>
文本<sup>上标</sup>
<br>
文本
<sub>下标</sub>
<br>
</body>
</html>
4.3 格式化代码
<html>
<body>
<b>预处理格式用来显示代码非常好</b>
<pre>
for i in {1..10}
do
echo $i
done
</pre>
</body>
</html>
4.4 文本倒着输出
<html>
<body>
<bdo dir="rtl">
这段文字是倒着的
</bdo>
</body>
</html>
第5章 HTML实体
5.1 什么是HTML实体
1.有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
2.想要在HTML中显示一个小于号“<”，需要用到字符实体。
5.2 举例
<html>
<body>
<p>
小于号 < < <br>
大于号 > > <br>
and符号 & & <br>
引号 " " <br>
单引号 ' <br>
</p>
</body>
</html>
第6章 HTML链接
6.1 什么是HTML链接
就是通过点击链接跳转到其他页面或其他的网站
6.2 跳转到网站的其他页面
<html>
<body>
<a href="lastpage.htm">点击跳转</a>到网站的其他页面<br>
</body>
</html>
6.3 跳转到其他网站
<html>
<body>
<a href="http://www.baidu.com/">点击跳转</a> 到其他网站<br>
</body>
</html>
6.4 图片跳转
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin">点击图片跳转到百度百科<img border="0" src=".Linus.jpg"></a><br>
</body>
</html>
6.5 跳转时新打开一个页面
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin" target="_blank">点击图片新开一个窗口跳转到百度百科<img border="0" src=".Linus.jpg"></a>
</body>
</html>
6.6 跳转到本页面的某个位置
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
第7章 HTML框架
7.1 什么是HTML框架
使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面，它们是相互独立的。
在这里插入代码片
7.2 标签解释
frameset标签
1.
<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小
frame标签
<frame>标签定义了每个框架中放入什么文件。
7.3 垂直分栏
举例：
<html>
<frameset cols="25%,75%>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
解释：
1.第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。
2.页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。
7.4 水平分栏
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
7.5 不可改动的分栏
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
7.6 使用导航框架跳转到指定章节
<html>
<frameset cols="200,*">
<frame src="frame_linksection.htm">
<frame src="frame_section.htm" name="showframe">
</frameset>
</html>
第8章 HTML表格
8.1 什么是HTML表格
HTML 中的表格和 Excel 中的表格是类似的,都包括行、列、单元格、表头等元素
8.2 有边框的表格
<html>
<body>
<b>表格</b>
<br>
<table border="1">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>
第9章 HTML列表
9.1 什么是列表
HTML支持有序、无序和自定义列表。
9.2 无序列表
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
9.3 有序列表
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
第10章 HTML表单
10.1 什么是HTML表单
HTML表单用来选择不同种类的用户输入。
10.2 文本框
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
10.3 密码框
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
10.4 单选按钮
<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
10.5 复选框
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
10.6 下拉框
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
10.7 文本框
<html>
<body>
<p>
This example demonstrates a text-area.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
10.8 按钮
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
第11章 HTML背景
11.1 图片背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body background="xxx/img/bg.jpg">
<!-- 这里的图片请指定电脑上图片的正确路径 -->
<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>
</body>
</html>
11.2 背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>
</body>
</html>
总结
以上便是有关HTML的基础内容，需要掌握，建议不会的朋友多多练习，有关HTML更多的内容可以查看HTML手册，可以前往：菜鸟教程，w3School等等。
这里HTML稍微掌握能看懂HTML代码就好，毕竟如果不是专业前端不用太过深入。如果你想看网页代码：鼠标右键点击查看网页源代码或者F12打开开发者模式都可以。
附上公众号;
