一、HTML价绍
1.HTML表示超文本标记语言（Hyper Text Markup Language）
HTML是一个包含标记的文本文件，它必须有htm或html扩展名，可以用一个简单的文本编辑器创建
2.标签解释
<html>这个标签是告诉浏览器这是html 的开始，</html>这个是文档的终止
<head></head>这个标签是头信息，在浏览器窗口中，头的信息是不被显示的
<title></title>是文档的标题，被显示在浏览器窗口的标题栏
<body></body>这个标签之间是正文，会被显示在浏览器中
<b></b>这个标签之间的文本会以加粗字体显示
二、HTML标签
1.html使用不同的标签来实现不同的功能
2.标签书写格式
2.1 成对出现<> 例如：<b></b>
2.2 第一个表示开始，第二个表示结束
2.3 开始标签和结束标签之间是文本内容
2.4 标签大小写无所谓<b></B>表示的意思一样
3.标签属性
标签可以拥有属性，属性能够为页面上的HTML元素提供附加属性
例如<body></body>是正常的主体标签，但是如果想让他颜色发生变化的话，则
<boay bgcolor="red"></body>
创建个表格，不希望表格有边框<table border="0"></table>
三、HTML基本标签组成
1.最重要的标签是定义标题元素，段落和换行的标签
例：
<html>
<body>
这就是一个简单的网页
</body>
</html>
2.标题元素
2.1标题元素由标签<h1>到<h6>定义
2.2<h1>定义了最大的标题元素
2.3<h3>定义可最小的标题元素
例
<html>
<body>
<h1>这就是一个简单的网页<h1>
<h2>这就是一个简单的网页<h2>
<h3>这就是一个简单的网页<h3>
<h4>这就是一个简单的网页<h4>
<h5>这就是一个简单的网页<h5>
<h6>这就是一个简单的网页<h6>
</body>
</html>
3.段落
<p>就是用来定义段落的
HTML自动在一个段落前后各添加一个空行
<html>
<body>
<p>这就是一个简单的网页<p>
<p>这就是一个简单的网页<p>
</body>
</html>
4.换行
<br>就是换行，就是结束一行，但是不想开始新段落的时候用，这个标签不管放在什么位置都能够强制换行
<html>
<body>
这是主体
<br>
开始换行啦
<br>
</body>
</html>
5.居中的标题
<html>
<body>
<h1 algin="center">居中标题</h1>
<p>其实就是想展示一下这是在换行</p>
</body>
</html>
6.插入水平线
<hr>
<html>
<body>
<h1 algin="center">居中标题</h1>
<hr>
<p>插入水平线</p>
<hr>
<p>插入水平线</p>
</body>
</html>
7.背景颜色
给<body>标签添加属性来控制背景颜色
<html>
<body bgcolor="yellow">
<h1 algin="center">黄色背景</h1>
<hr>
<p>插入水平线</p>
<hr>
<p>插入水平线</p>
</body>
</html>
四、HTML格式
4.1 HTML定义了很多元素来格式化输出，比如加粗或者倾斜
<html>
<body>
<strong>文本加粗</strong>
<br>
<big>文本放大</big>
<br>
<small>文本缩小</small>
<br>
<i>文本倾斜</i>
<br>
文本<sup>上标</sup>
<br>
文本
<sub>下标</sub>
<br>
</body>
</html>
4.2格式化代码
<html>
<body>
<b>预处理格式用来显示代码非常好</b>
<pre>
for i in {1..10}
do
echo $i
done
</pre> //<pre>是用来保持原有格式的，如果去掉的话代码就成为一行显示
</body>
</html>
4.3 文本倒着输出
<html>
<body>
<bdo dir="rt1">
人在读文字的时候会自动将文字顺序排列
</bdo>
</body>
</html>
五、HTML实体
想要在HTML中引用特殊字符，比如"<",就需要用到字符实体
<html>
<body>
<p>
小于号 < < <br>
大于号 > > <br>
and符号 & & <br>
引号 " " <br>
单引号 ' <br>
</p>
</body>
</html>
六、HTML链接
6.1通过点击跳转到其他页面或网站
<html>
<body>
<a href="lastpage.htm">点击跳转</a>到网站的其他页面<br> // href后面的就是链接的地址
</body>
</html>
6.2 跳转到其他网站
<html>
<body>
<a href="http://www.baidu.com/">点击跳转</a> 到其他网站<br>
</body>
</html>
6.3图片跳转
<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.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" target="_blank">点击图片新开一个窗口跳转到百度百科<img border="0" src=".Linus.jpg"></a>
</body>
</html>
6.5跳转到本页面的某个位置
<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>
七、HTML框架
7.1框架页面之间是相互独立的
1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小
7.2垂直分栏
<html>
<frameset cols="25%,75%> // rows是水平分栏
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
7.3不可改动
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm"> //noresize="noresize" 不可改动
<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表格
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>