开始前的准备工作
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>
若有错误不足之处,欢迎指正。