开始前的准备工作
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 软件进行打开，便可进行代码的编写。编写完成后，打开方式选择以谷歌浏览器打开，可观察效果。
话不多说，以下附一简易代码，读者可自行复制粘贴查看
<!-- 告诉浏览器，请使用HTML5的标准来解析这个网页 -->
<!DOCTYPE html>
<html>
<!-- head 表示网页的头部，这里的信息都是对网页的整体说明 -->
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- body 表示网页的身体，网页的主要内容都写在这里 -->
<body>
<!-- 'center'--居中 -->
<center> 这是一段普通的文字，它会居中显示在页面上！</center>
<!-- 'h1' 为标题标签，一共提供了6个标题标签 -->
<!-- ' '表示一个空格 -->
<h1>论 数学 的 重要性</h1>
<!-- 'i' 为斜体 -->
<i>2021/06/20</i>
<!-- 'hr'为出现一条水平线，可对页面进行分割，且'hr'为单标签，不需要成对出现， -->
<hr>
<!-- 'p'为段落标签 -->
<p>今天我打电话叫了一个12寸的外卖披萨</p>
<p>服务员告诉我</p>
<p>12寸的没有了，给我换两个6寸的行不行</p>
<p>我想了想，说可以</p>
<!-- 'b'标签表示对该段文字的进行加粗 -->
<!-- 'br'标签进行换行，也是一个单标签 -->
<p>这个故事告诉我们一个道理，<br><b>学好数学是多么的重要！！！</b></p>
<hr>
<!-- 'button'--按钮 -->
<button>这是一个按钮</button>
</body>
</html>
现对以上代码进行解读：
1.HTML文件，可大致分为几个部分：head（头部）、body（身体）
在编写过程中 < head>< /head>与< body>< /body>需要成对出现
<!-- 告诉浏览器，请使用HTML5的标准来解析这个网页 -->
<!DOCTYPE html>
<html>
<!-- head 表示网页的头部，这里的信息都是对网页的整体说明 -->
<head>
</head>
<!-- body 表示网页的身体，网页的主要内容都写在这里 -->
<body>
</body>
</html>
2.标签
1）标题标签
<!-- 一共提供了6个标题标签 -->
<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+/ 可进行对选中文本的注释
新闻列表
<!-- 告诉浏览器，请使用HTML5的标准来解析这个网页 -->
<!DOCTYPE html>
<html>
<!-- head 表示网页的头部，这里的信息都是对网页的整体说明 -->
<head>
<meta charset="utf-8" />
<!-- 'title' 标签定义文档的标题 -->
<title>百度新闻列表</title>
</head>
<!-- body 表示网页的身体，网页的主要内容都写在这里 -->
<body>
<!-- img 图片标签，标签中出现了属性src:要显示的图片路径 -->
<h1>科技 <img src="img/icon-mark.png" ></h1>
<!-- 'hr'为出现一条水平线，可对页面进行分割，且'hr'为单标签，不需要成对出现， -->
<hr >
<!-- 'ul' 标签定义无序列表 -->
<ul>
<!-- 'li' 标签定义列表项目 -->
<li>
<!-- a:超链接标签，属性href：要跳转的页面地址 -->
<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' 标签定义有序列表 -->
<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'为出现一条水平线，可对页面进行分割，且'hr'为单标签，不需要成对出现， -->
<hr >
<!-- 下给图片加以width属性以调整图片大小，px是像素的意思 -->
<!-- 在给图片调整大小时，长和宽都是可调整的，长和宽单个调整会对图片进行等比例的大小缩放 -->
<!-- 长和宽同时调整，要注意宽高比例，否则图片可能会变形 -->
<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'为出现一条水平线，可对页面进行分割，且'hr'为单标签，不需要成对出现， -->
<hr >
<!-- 100%：表示撑满整个窗口，可用于图片宽度过大，导致网页出现横向滚动条 -->
<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.
<!-- width属性：图像的宽度，px是像素的意思 -->
<img src="images/1.png" width="100px" >
<!-- height属性：图像的高度，px是像素的意思 -->
<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，可在空白窗口打开新页面
<!-- target表示目标，blank表示空白 -->
<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 定义边框属性 , cellspacing 定义表格单元格间距-->
<table border="1px" cellspacing="0">
<!-- col 代表一列 -->
<!-- width 定义表格的宽度 -->
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<!-- 每个表格均有若干行（由 <tr> 标签定义）-->
<!-- align 表示对齐方式 center 文字居中 -->
<tr align="center">
<!-- 每行被分割为若干单元格（由 <td> 标签定义） -->
<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>用户A</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户B</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
解读：
1.表格标签
<table>......</table>
2.表格标签相关属性
<!-- border 定义边框属性 , cellspacing 定义表格单元格间距-->
<table border="...px" cellspacing="...">
<!-- col 代表一列 -->
<col width="...px">
<!-- 每个表格均有若干行（由 <tr> 标签定义）-->
<!-- align 表示对齐方式 center 文字居中 -->
<tr align="center">
<!-- 每行被分割为若干单元格（由 <td> 标签定义） -->
<td></td>
</tr>
若有错误不足之处，欢迎指正。
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
