1. 什么是HTML
W3C标准
2. HTML的基本结构
<!DOCTYPE>
<title>
<meta>
标题标签<h1>
段落标签<p>
换行标签<br/>
水平线标签<hr/>
字体加粗<strong>、斜体<em>
注释和特殊符号
范例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>徐州欢迎您!</h1>
<strong>
"简介"
</strong>
<em>
这是云龙湖 >旁边<
</em>
<p>
徐州欢迎你，有梦想谁都了不起！
</p>
<p>
有勇气就会有奇迹。
</p>
<p>
有勇气就会有奇迹。
有勇气就会有奇迹。
</p>
<hr/>
有勇气就会有奇迹。<br/>
有勇气就会有奇迹。<br/>
</body>
</html>
3. 图像标签
如在同文件夹的img中有1.webp格式的图片，举例：
html
<img src="img/1.webp" width="200" height="200">4. 链接标签
举例：
html
<a href="01.html" target="_self">按钮</a> //点击（按钮）跳转到01.html（不打开新页面）
html
<a href="01.html" target="_blank">
<img src="img/1.png" alt="派大星" title="图片"/>
</a>
//点击派大星图片（如果没有在img文件夹中找到1.png则会出现一个默认图片和派大星超链接）
跳转到新页面展示01.html
html
<a href="01.html" target="_self">
<img src="img/1.webp" alt="派大星" title="图片" width="200" height="200"/>
</a>
图片找不到，alt和title也没有的话就只显示一个烂图标，一般alt是必加的
5. 超链接
页面间链接
锚链接
功能性链接
6. 行内元素和块元素
如果将元素用红框框起来，则会发现：
7. 例题
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速购物</title>
<style>
p{position: fixed; right: 5%; top: 50%; font-size: 40px; }
</style>
</head>
<body>
<p>
<a href="#t1">服装鞋包</a><br />
<a href="#t2">个护美妆</a><br />
<a href="#t3">手机通讯</a><br />
<a href="#t3">家用电器</a><br />
</p>
<a href="01.html" target="_self">按钮</a>
<br/>
<a href="01.html" target="_self">
<img src="img/1.png" alt="派大星" title="图片"/>
</a>
<br/>
<a href="01.html" target="_self">
<img src="img/1.webp" alt="派大星" title="图片" width="200" height="200"/>
</a>
<h1>
<a name="t1">服装鞋包</a>
</h1>
<img src="img/img2.png"><br/>
<h1>
<a name="t2">个护美妆</a>
</h1>
<img src="img/img3.png"><br/>
<h1>
<a name="t3">手机通讯</a>
</h1>
<img src="img/img4.png"><br/>
<h1>
<a name="t4">家用电器</a>
</h1>
<img src="img/img5.png"><br/>
</body>
</html>8. 总结
