本文已参与「新人创作礼」活动，一起开启掘金创作之路。
[HTML]
理论
Hyper Text Markup Language 超文本标记语言
编写网页的语言 ，解释型语言，写出来的代码直接就能运行
编译？
C源代码 - 编译 -》 二进制文件 --》 计算机解释执行
源文件纯文本
放在WEB根目录下
.html/.htm
HTML语言的运行环境时浏览器
标记语言
尖括号包含关键字
标签
标签中有属性，属性有对应的属性值
单标签
双标签
HTML 文档结构
头部 文档控制信息，包括整个页面说明和编码等。
身体 真正显示在网页上的内容
<html>
<head>
</head>
<body>
</body>
</html>
常用标签
浏览器标签页标题
通知浏览器我的编码格式是utf-8
标题
段落
水平线
换行标签
完成文字的控制（单个）
块级元素（整行）
href 跳转地址
绝对路径 [ww.baidu.com]
相对路径 [./login.html]
target 默认情况下可以不写，在当前标签页打开；写了，“_blank”，在新的标签页打开。
利用a标签做一个网址导航
在页面中引入图片资源
src 给的图片的地址
绝对路径
相对路径
注释
<!--
注释内容
-->
特殊字符
空格
< <
> >
& &
表格
定义行
定义列
colspan=“2” 跨列属性
rawspan="2" 跨行属性
上手
理论是一方面，我们们主要通过自己动手去敲一敲源码实际去测试，才能感受得到。
firstHtml.html
<html>
<head>
<title>我的第一个HTML页面</title>
<meta charset="utf-8">
</head>
<body>
Helo World!
</body>
</html>
h.html
<html>
<head>
<title>标题标签测试</title>
<meta charset="utf-8">
</head>
<body>
Helo World!
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
p.html
<html>
<head>
<title>段落标签测试</title>
<meta charset="utf-8">
</head>
<body>
<h1>格言</h1>
<p>事实胜于雄辩</p>
<p>疗效胜于一起</p>
没有对比，
就没有伤害
</body>
</html>
hr_span_div.html
<html>
<head>
<title>段落标签测试</title>
<meta charset="utf-8">
</head>
<body >
<h1>格言</h1>
<hr />
<p>事实胜于雄辩</p>
<p>疗效胜于一起</p>
<hr />
没有<div style="background-color:pink">对比</div>，
<br />
就没有<span style="
color:red;
font-size:30px;
background-color:yellow
">伤害</span>!
</body>
</html>
a.html
<html>
<head>
<title>a 标签</title>
<meta charset="utf-8">
</head>
<body>
<a
href="http://www.baidu.com"
target="_blank"
>
百度首页
</a>
</body>
</html>
利用a标签做一个网址导航
网站的根目录下新建文件夹a
index.html
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
</head>
<body>
欢迎你，
<a href="./login.html" target="_blank">登录</a>
<a href="./logout.html" target="_blank">注销</a>
</body>
</html>
login.html
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
</head>
<body>
欢迎你，
<a href="./login.html" target="_blank">登录</a>
<a href="./logout.html" target="_blank">注销</a>
</body>
</html>
logout.html
<html>
<head>
<title>注销</title>
<meta charset="utf-8">
</head>
<body>
这是注销页面
</body>
</html>
img.html
网站的根目录下创建文件夹style/images/
导入图片1.jpg
<html>
<head>
<title>image 标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./style/images/1.jpg">
<!--
这是本地的一张图片
-->
<hr />
<img src="https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1587972504&t=aff4ae94c061bc06a3937da15e0431ad">
<!--
这是互联网的一张图片
-->
</body>
</html>
teshuzifu.html
<html>
<head>
<title>特殊字符</title>
<meta charset="utf-8">
</head>
<body>
<p style="background-color:red">让子弹飞！</p>
<p style="background-color:red">
让子弹 飞一会儿！
</p>
<p style="background-color:red"><html></p>
<p style="background-color:red">&</p>
<p style="background-color:red">"</p>
</body>
</html>
table.html
<html>
<head>
<title>基本表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
<tr>
<td>(3,1)</td>
<td>(3,2)</td>
<td>(3,3)</td>
</tr>
</table>
</body>
</html>
table_clospan.html
<html>
<head>
<title>跨列表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
</body>
</html>
table_rowspan.html
<html>
<head>
<title>跨行表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td rowspan="2">韩梅梅</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">马冬梅</td>
<td>语文</td>
<td>59</td>
</tr>
<tr>
<td>数学</td>
<td>66</td>
</tr>
</table>
</body>
</html>
table_cr.html
<html>
<head>
<title>混合表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td rowspan="2">阿里巴巴旗下网站</td>
<td>我要买</td>
<td>我要买</td>
<td>我淘宝</td>
</tr>
<tr>
<td colspan="3">你好，欢迎来淘宝</td>
</tr>
</table>
</body>
</html>
参考文献：
