HTML5教程（2021年7月14日14:01:33更新）
开始前的准备工作
1.作者使用编辑软件为HBuilderX 3.1.18，下载地址为：百度网盘，提取码：spde
2.桌面新建一个文本文档，将其文件后缀名改为html(作者是在E盘下新建html文件，读者可自行选择html文件建立的位置)
3.谷歌浏览器
4.源码：https://download.csdn.net/download/qq_44425184/20199408
5.可能会用到的软件：
Photoshop：下载地址为：百度网盘，提取码：zcra
第一篇博客
前期准备工作完成后，右键选择新建好的HTML文件，选择打开方式，选择HBuilderX 软件进行打开，便可进行代码的编写。编写完成后，打开方式选择以谷歌浏览器打开，可观察效果。
话不多说，以下附一简易代码，读者可自行复制粘贴查看
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<center> 这是一段普通的文字，它会居中显示在页面上！center>
<h1>论 数学 的 重要性h1>
<i>2021/06/20i>
<hr>
<p>今天我打电话叫了一个12寸的外卖披萨p>
<p>服务员告诉我p>
<p>12寸的没有了，给我换两个6寸的行不行p>
<p>我想了想，说可以p>
<p>这个故事告诉我们一个道理，<br><b>学好数学是多么的重要！！！b>p>
<hr>
<button>这是一个按钮button>
body>
html>
现对以上代码进行解读：
1.HTML文件，可大致分为几个部分：head（头部）、body（身体）
在编写过程中 < head>< /head>与< body>< /body>需要成对出现
DOCTYPE html>
<html>
<head>
head>
<body>
body>
html>
2.标签
1）标题标签
<h1> 1级标题 h1>
<h2> 2级标题 h2>
<h3> 3级标题 h3>
<h4> 4级标题 h4>
<h5> 5级标题 h5>
<h6> 6级标题 h6>
2）段落标签
<p>段落标签，文字会独占一行p>
3）
<i>文字会出现斜体效果i>
4）
<b>文字会出现加粗效果b>
5）
<br>
6）
<hr>
7）
8）
<center> 文本水平居中center>
9）
<button>定义一个按钮button>
3.注释
在HBuilderX 软件中，使用Ctrl+/ 可进行对选中文本的注释
新闻列表
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度新闻列表title>
head>
<body>
<h1>科技 <img src="img/icon-mark.png" >h1>
<hr >
<ul>
<li>
<a href="https://m.gmw.cn/baijia/2021-07/05/34967940.html">这条新赛道，中国是冠军！a>
li>
<li>
<a href="http://baijiahao.baidu.com/s?id=1704402845036117778">新青年商家定义未来新零售a>
li>
ul>
<ol>
<li>
<a href="https://m.gmw.cn/baijia/2021-07/05/1302388256.html">江苏12345热线小程序正式上线a>
li>
<li>
<a href="http://baijiahao.baidu.com/s?id=1704396227255174449">美媒：中国科技巨头横扫全球智能城市赛事a>
li>
ol>
body>
html>
解读：
1.本段代码的基本框架与上篇“第一篇博客”基本类似，在此基础上增加了几类标签。
2.标签
1）文档标题标签
<title>定义文档的标题title>
2）图片标签
<img src="要显示的图片路径" >
3）
<ul>
4）
<ol>
5）
<li>
6）超链接标签
<a href="要跳转的页面地址">*****a>
图片的使用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<img src="images/1.png" >
<img src="images/2.png" >
<img src="images/3.png" >
<img src="images/4.png" >
<img src="images/5.png" >
<img src="images/6.png" >
<hr >
<img src="images/1.png" width="100px" >
<img src="images/2.png" width="100px" >
<img src="images/3.png" width="100px" >
<img src="images/4.png" width="100px" >
<img src="images/5.png" width="100px" >
<img src="images/6.png" width="100px" >
<hr >
<img src="images/4.png" width="100%" >
<img src="images/5.png" width="100%" >
<img src="images/6.png" width="100%" >
body>
html>
解读
1.在该HTML文件目录下建立名为images文件夹，存放使用到的图片
2.
<img src="images/1.png" width="100px" >
<img src="images/1.png" height="100px" >
如何下载图片及切图
当我们在网站上遇到一张好看的图片想要下载来时，将鼠标移动到该图片位置，点击右键，点击图片另存为，选择好图片保存位置，即可下载成功。
但对于有些图片，我们点击右键，没有显示图片另存为的按钮，此时，我们通过按键盘上的F12键，打开浏览器的控制面板，切换到Elements这一栏，便可看到整个页面上的所有代码，然后点击左上角的选择按钮，选中所想要下载的图片，会发现，图片对应的代码标签也被选中，在该代码中，选择image标签下的链接进行打开，你可能会发现，根本没有image标签，此时观察右侧Styles，会发现有一个图片的下载地址，我们点右键，选择Open in new tab，这是便将图片在一个新的页面打开，此时便可单击右键图片另存为进行下载。
图片使用Photoshop打开，使用Alt+鼠标滚轮可对图片进行大小的缩放，选择切片工具，切片完成后，可Ctrl+Alt+shift+s进行保存，此时弹出一条对话框，选择PNG-24，勾选透明度，点击存储，用户自行选择存储位置，切片设定为：所有用户切片，然后点击保存。此时我们在自定义的存储位置便可看到我们已切好的图片。
知识点补充
1.对超链接添加属性target，可在空白窗口打开新页面
<a href="要跳转的页面地址" target="_blank">*****a>
2.关于无序列表
1）实心圆（默认）
<ul type="disc">
<li>我现在是个实心圆li>
ul>
2）空心圆
<ul type="disc">
<li>我现在是个空心圆li>
ul>
3）实心方块
<ul type="disc">
<li>我现在是个实心方块li>
ul>
3.关于有序列表
1）数字（默认）
<ol type="1">
<li>数字li>
ol>
2）小写字母
<ol type="a">
<li>我可以是小写英文字母li>
ol>
<ol type="A">
<li>我也可以是大写英文字母li>
ol>
3）大写罗马字母
<ol type="ⅰ">
<li>我可以是小写罗马字母li>
ol>
<ol type="Ⅰ">
<li>我可以是大写罗马字母li>
ol>
4.关于图片
<img src="images/1.png" title="鼠标划上去时的提示" alt="图片加载失败后的文字" >
5.其他标签
1）给文字增加删除线
<del>...del>
2）把文字变成上标
<sup>...sup>
3）给文字加下划线
<u>...u>
4）把文字居中
<center>...center>
练习：百度网盘制作
文件结构为：
百度网盘目录
img
已购资源
index.html
隐藏空间
保险柜
index.html
index.html
index.html
百度网盘\index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<img src="img/baidu.jpg" width="100%" >
<p>
<a href="已购资源/index.html">
<img src="img/file.png" width="60px" >已购资源
a>
<a href="隐藏空间/index.html">
<img src="img/file.png" width="60px" >隐藏空间
a>
p>
body>
html>
百度网盘\已购资源\index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已购资源title>
head>
<body>
<img src="../img/baidu.jpg" >
<p>
<a href="../index.html">
<img src="../img/return.jpg" width="25px" >
a>
p>
<p>
<img src="../img/ai.png" width="60px" >
<img src="../img/exr.png" width="60px" >
<img src="../img/movie.png" width="60px" >
<img src="../img/jsx.png" width="60px" >
p>
body>
html>
百度网盘\隐藏空间\index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏空间title>
head>
<body>
<img src="../img/baidu.jpg" >
<p>
<a href="../index.html">
<img src="../img/return.jpg" width="25px" >
a>
p>
<p>
<a href="保险柜/index.html">
<img src="../img/file.png" width="60px">保险柜
a>
<img src="../img/ai.png" width="60px" >
<img src="../img/exr.png" width="60px" >
<img src="../img/movie.png" width="60px" >
<img src="../img/jsx.png" width="60px" >
p>
body>
html>
百度网盘\隐藏空间\保险柜\index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>保险柜title>
head>
<body>
<img src="../img/baidu.jpg" >
<p>
<a href="../index.html">
<img src="../../img/return.jpg" width="25px" >
a>
p>
<p>
<img src="../../img/doc.png" width="60px" >
<img src="../../img/f4v.png" width="60px" >
p>
body>
html>
解读：
1.这里涉及到了绝对地址和相对地址的区别
绝对地址：在任何情况下，都可以找得到的地址。
<img src="https://www.baidu.com/" >
相对地址：必须知道当前所在，才能找到。
<a href="pages/articles/shuxue.html">*****a>
练习：简单表格制作
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h3>前端技术阶段划分标准h3>
<table border="1px" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr align="center">
<td>td>
<td>初级td>
<td>中级td>
<td>高级td>
<td>专家td>
tr>
<tr align="center">
<td>标准td>
<td>被产品怼的说不出话td>
<td>跟产品互怼不相上下td>
<td>怼的产品没话说td>
<td>直接将其怼辞职td>
tr>
<tr align="center">
<td>用户Atd>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr align="center">
<td>用户Btd>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
table>
body>
html>
解读：
1.表格标签
<table>......table>
2.表格标签相关属性
<table border="...px" cellspacing="...">
<col width="...px">
<tr align="center">
<td>td>
tr>
若有错误不足之处，欢迎指正。