三万字加源码，教你从零开始学网页设计（HTML5+CSS)

已于 2022-01-24 16:48:12 修改
阅读量9.5k 收藏 121
点赞数 24
分类专栏： 前端 文章标签： 前端 html css
于 2022-01-22 18:42:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40077565/article/details/122634044
版权

大二的时候选修过网页设计这门课，但是时间长了好多东西都还给老师了，于是乎趁着在家的这段时间重新复习一下网页设计，也就是所谓的前端，也希望这篇文章能对一些小伙伴有所帮助。

文章目录

第一章 HTML的基本标签

1.1 主框架

在本地新建一个txt文件，在文件中输入以下代码，然后另存为html文件用浏览器打开，就可以看到图1所示的界面。此外，在html5语言中，<!-- > 表示注释信息，前端网页看不到，但自己可以看到。相关的注释部分如下：

<!doctype html><!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head><!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">  <!--charset=”utf-8”是告知浏览器此页面属于什么字符编码格式,下一步浏览器做好“翻译”工作-->
			<title></title>
		<head>
		<body><!--网页的身体  主要内容-->
		 你好！
		</body>
	<html>

在这里插入图片描述

图1

1.2 标题标签

h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签，效果如图2所示。

<!doctype html><!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head><!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body><!--网页的身体  主要内容-->
		  <h1>这是我的第一篇博客！</h1><!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <h2>这是我的第一篇博客！</h2>
		  <h3>这是我的第一篇博客！</h3>
		  <h4>这是我的第一篇博客！</h4>
		  <h5>这是我的第一篇博客！</h5>
		  <h6>这是我的第一篇博客！</h6>
		</body>
	<html>

在这里插入图片描述

图2

1.3 斜体标签与分割线

i是斜体标签，hr是分割线标签，两者都是单标签。

<!doctype html>  <!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head>  <!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body>  <!--网页的身体  主要内容-->
		  <h1>这是我的第一篇博客！</h1>  <!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <i>2022.1.22</i> <!--i是斜体标签-->
		  <hr>  <!-- hr是分割线标签，是单标签-->
		</body>
	<html>

在这里插入图片描述

图3

1.4 分段标签

先来看下面这幅图，如果想要我们输入的文字分段，那么需要用到p标签，注意p标签也是双标签，需要一起用。
在这里插入图片描述

图4
<!doctype html>  <!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head>  <!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body>  <!--网页的身体  主要内容-->
		  <h1>这是我的第一篇博客！</h1>  <!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <i>2022.1.22</i> <!--i是斜体标签-->
		  <hr>  <!-- hr是分割线标签，是单标签-->
		  <p>我是第一段话</p>
		  <p>我是第二段话</p>
		  <p>我是第三段话，我们都用到了p标签</p>
		</body>
	<html>

在这里插入图片描述

图5

此外，如果想把一句话分成两段还有一种方法，那就是br标签，注意br标签只有开始没有结束。如下所示：

<!doctype html>  <!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head>  <!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body>  <!--网页的身体  主要内容-->
		  <h1>这是我的第一篇博客！</h1>  <!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <i>2022.1.22</i> <!--i是斜体标签-->
		  <hr>  <!-- hr是分割线标签，是单标签-->
		  <p>我是第一段话</p>
		  <p>我是第二段话</p>
		  <p>我是第三段话，我们<br>都用到了p标签</p>
		</body>
	<html>

在这里插入图片描述

图6

1.5 加粗标签

有时候我们要突出网页的重点信息，例如加粗，但是此时用标题标签显然不太合适，那么此时我们就要用到b标签，这是一个双标签。

<!doctype html>  <!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head>  <!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body>  <!--网页的身体  主要内容-->
		  <h1>这是我的第一篇博客！</h1>  <!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <i>2022.1.22</i> <!--i是斜体标签-->
		  <hr>  <!-- hr是分割线标签，是单标签-->
		  <p>我是第一段话</p>
		  <p>我是第二段话</p>
		  <p><b>我是第三段话，我们都用到了p标签，但是我还用到了b标签进行加粗<b></p>		</body>
	<html>

在这里插入图片描述

图7

1.6 间隙符

有时候，为了使网页中文字的间距更加合理，我们可能需要用到空格来调整文字的间隙，在html中，空格由另外一个符号 &nbsp 表示，注意这符号后面要接一个分号，具体效果如下：

<!doctype html>  <!--声明文档类型  告诉浏览器  请使用html5版本来解析这个网页-->
	<html>
		<head>  <!--网页的头部  所有信息都是对网页整体的说明-->
			<meta charset="UTF-8">
			<title></title>
		<head>
		<body>  <!--网页的身体  主要内容-->
		  <h1>这&nbsp;&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;我&nbsp;&nbsp;&nbsp;的&nbsp;&nbsp;&nbsp;第&nbsp;&nbsp;&nbsp;一&nbsp;&nbsp;&nbsp;篇&nbsp;&nbsp;&nbsp;博&nbsp;&nbsp;&nbsp;客&nbsp;&nbsp;&nbsp;！</h1>  <!--h1是标题标签，是一个双标签，h1-h6是不同级别所对应的标签-->
		  <i>2022.1.22</i> <!--i是斜体标签-->
		  <hr>  <!-- hr是分割线标签，是单标签-->
		  <p>我是第一段话</p>
		  <p>我是第二段话</p>
		  <p><b>我是第三段话，我们都用到了p标签，但是我还用到了b标签进行加粗<b></p>		</body>
	<html>

在这里插入图片描述

图8

1.7 网页标题标签

title是网页标题标签，是双标签，该标签出现的位置如图9左上角所示。

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		<h1>我的第一篇博客</h1>
		<body>
		  你好！
		</body>
	<html>

在这里插入图片描述

图9

1.8 列表标签

列表分为无序列表和有序列表，其中无序列表为ul标签，有序列表为ol标签，具体的说明如下：

ul标签自带三种标签属性，默认的为实心圆，需要配合li标签使用。如下图所示：
在这里插入图片描述

图10
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			<ul>
				<li>第一个无序标签</li>
				<li>第二个无序标签</li>
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
		</body>
	<html>

在这里插入图片描述

图11

可以看到，ul标签没有后接其它的，那么默认使用实心圆，如果想使用空心圆和实心方块，那么需要在ul标签使用type =" "属性，具体有disc（实心圆）circle（空心圆）和square（实心方块），具体演示如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			<ul>
				<li>第一个无序标签</li>
				<li>第二个无序标签</li>
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
			<ul type="circle">
				<li>第一个无序标签</li>
				<li>第二个无序标签</li>
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
			<ul type="square">
				<li>第一个无序标签</li>
				<li>第二个无序标签</li>
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
		</body>
	<html>

在这里插入图片描述

图12

和ul标签一样，ol标签用法差不多。值得说明的是，ol标签有序有三种情况：
在这里插入图片描述

图13
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			
			<ol>
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
		</body>
	<html>

在这里插入图片描述

图14

可以看到，默认使用的是阿拉伯数字进行排序。如果想用其他的，那么请看下面：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			<ol>
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
			<ol type="a">
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
			<ol type="A">
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
			<ol type="i">
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
			<ol type="I">
				<li>第一个有序标签</li>
				<li>第二个有序标签</li>
				<li>第三个有序标签</li>
				<li>第四个有序标签</li>
			</ol>
		</body>
	<html>

在这里插入图片描述

图15

1.9 跳转标签（超链接）

有时候我们想实现点击一句话就能跳转到另一个界面的功能，那么这时候就需要用到a标签，<a href=“网址” ，具体代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			<ul>
				<li>
				<a href="https://www.baidu.com/">点击跳转到百度首页</a>
				</li>
				
				<li>第二个无序标签</li>
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
		</body>
	<html>

在这里插入图片描述

图16

进阶操作！跳转超链接有两种方式，一种是在当前窗口打开，另外一种是打开一个新窗口，具体代码和演示效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>我的博客</title>
		<head>
		  <h1>我的第一篇博客</h1>
		<body>
			<ul>
				<li>
				<a href="https://www.baidu.com/">点击跳转到百度首页（在当前窗口打开）</a>
				</li>
				
				<li>
				<a href="https://www.baidu.com/" target="_blank">点击跳转到百度首页（在新窗口打开）</a>
				</li>
				
				<li>第三个无序标签</li>
				<li>第四个无序标签</li>
			</ul>
		</body>
	<html>

在这里插入图片描述

图17

2.0 图片标签

我们在网页上看到的图片，本质是服务器从本地调用的，然后通过网络传给我们，那么服务器如何从本地调取图片呢？这里就要用到img标签了，img标签是单标签，后接src=，src后面表示的是图片的路径。
我在电脑上下载了三张图片，存放路径和html文件一样，这样加载出来的效果是这样的。在这里插入图片描述

图18

在这里插入图片描述

图19

具体代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			<img src="image/1.jpeg">
		</body>
	<html>

效果如下：
在这里插入图片描述

图20

补充1，为什么src后面的路径不是C:\Users\Lenovo\Desktop\前端\html\image，这是因为html文件和image文件夹在同一个目录下，所以不需要，这方面也称为相对路径和绝对路径的知识。绝对路径指的是，在任何情况下都能找到的地址，也就是完整的地址，如C:\Users\Lenovo\Desktop\前端\html\image
另外，如果想要同时显示多张图片，那么按照以下的代码：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			<img src="image/1.jpeg">
			<img src="image/2.jpeg">
			<img src="image/3.jpeg">
		</body>
	<html>

可以发现，下图所示的每张图片都换了行，这是因为图片太宽，一行放不下了，如果图片比较小，那么一行也能够放多张图片。
在这里插入图片描述

图21

补充2，如果想要将图片的大小设置为一致，就需要用到width和height属性，px叫像素，如100px，当然px也可以省略不写，代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			<img src="image/1.jpeg"width="200">
			<img src="image/2.jpeg"width="200">
			<img src="image/3.jpeg"width="200">
		</body>
	<html>

在这里插入图片描述

图22
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			<img src="image/1.jpeg"width="200" height="200">
			<img src="image/2.jpeg"width="200" height="200">
			<img src="image/3.jpeg"width="200" height="200">
		</body>
	<html>

在这里插入图片描述

图23

补充3，在img标签中，title属性表示鼠标移动到对应位置的提示文字，alt属性表示图片加载失败后的提示文字。此处为了实验，我将第一张图片的title属性设置为鼠标移动到图片位置会显示星空图片1这几个字，然后调用了一个image路径中不存在的图片，为了测试alt属性。具体代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			<img src="image/1.jpeg"width="200" height="200" title="星空图片1" alt="图片加载失败">
			<img src="image/2.jpeg"width="200" height="200">
			
			<img src="image/4.jpeg"width="200" height="200" alt="图片加载失败">
			
		</body>
	<html>

在这里插入图片描述

图24

2.1 表格标签

表格标签为table，其中tr标签用于控制行，td标签用于控制列。如下图所示：
在这里插入图片描述

图25

我们打算做一个三行五列的表格，具体代码和演示效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table>
			<tr>
				<td>姓名</td>
				<td>小明</td>
				<td>小红</td>
				<td>小王</td>
				<td>小张</td>
			</tr>
			<tr>
				<td>年龄</td>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>14</td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td>江西上饶</td>
				<td>福建厦门</td>
				<td>广西南宁</td>
				<td>浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图26

会发现，直接这样使用，表格的边框没有显示，如果要显示边框的话，则需要用到border属性，通常设置边框宽度为1px：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table border="1px">
			<tr>
				<td>姓名</td>
				<td>小明</td>
				<td>小红</td>
				<td>小王</td>
				<td>小张</td>
			</tr>
			<tr>
				<td>年龄</td>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>14</td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td>江西上饶</td>
				<td>福建厦门</td>
				<td>广西南宁</td>
				<td>浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图27

上面这样的边框会有间隙，因此为了美观，通常还会加入一个属性cellspacing=“0”，代码和演示效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table border="1px" cellspacing="0">
			<tr>
				<td>姓名</td>
				<td>小明</td>
				<td>小红</td>
				<td>小王</td>
				<td>小张</td>
			</tr>
			<tr>
				<td>年龄</td>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>14</td>
			</tr>
			<tr>
				<td>籍贯</td>
				<td>江西上饶</td>
				<td>福建厦门</td>
				<td>广西南宁</td>
				<td>浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图28

补充1，表格也可以设置列宽，这就要在td标签中用到了width属性，代码和演示效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table border="1px" cellspacing="0">
			<tr>
				<td width="200px">姓名</td>
				<td width="200px">小明</td>
				<td width="200px">小红</td>
				<td width="200px">小王</td>
				<td width="200px">小张</td>
			</tr>
			<tr>
				<td width="200px">年龄</td>
				<td width="200px">16</td>
				<td width="200px">17</td>
				<td width="200px">18</td>
				<td width="200px">14</td>
			</tr>
			<tr>
				<td width="200px">籍贯</td>
				<td width="200px">江西上饶</td>
				<td width="200px">福建厦门</td>
				<td width="200px">广西南宁</td>
				<td width="200px">浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图29

补充2， 如果想要表格中的文字居中（默认左对齐），那么需要在td标签中将align属性设置为center。

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table border="1px" cellspacing="0">
			<tr>
				<td width="200px" align="center">姓名</td>
				<td width="200px" align="center">小明</td>
				<td width="200px" align="center">小红</td>
				<td width="200px" align="center">小王</td>
				<td width="200px" align="center">小张</td>
			</tr>
			<tr>
				<td width="200px" align="center">年龄</td>
				<td width="200px" align="center">16</td>
				<td width="200px" align="center">17</td>
				<td width="200px" align="center">18</td>
				<td width="200px" align="center">14</td>
			</tr>
			<tr>
				<td width="200px" align="center">籍贯</td>
				<td width="200px" align="center">江西上饶</td>
				<td width="200px" align="center">福建厦门</td>
				<td width="200px" align="center">广西南宁</td>
				<td width="200px" align="center">浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图30

补充3，在每一个td中设置width属性的方法太麻烦，在此有一种简化的方法，可以将每一行中所有列的宽度设置为固定值，就是在table标签的下面一行，设置col标签，有几列就设置几个col标签。同样，文字居中也是一样，只需在每一行的tr标签中设置align属性即可，具体代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <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>16</td>
				<td>17</td>
				<td>18</td>
				<td>14</td>
			</tr>
			<tr align="center">
				<td>籍贯</td>
				<td>江西上饶</td>
				<td>福建厦门</td>
				<td>广西南宁</td>
				<td>浙江杭州</td>
			</tr>
		  </table>
		</body>
	<html>

补充4，如何做出下面的表格呢？
在这里插入图片描述

图31

首先，可以看到第一行的个人简历只有一列，但是1占据了7列，因此我们需要将第一行多余的列删掉，然后在仅剩的一列中将属性colspan设置为7；同样的，毕业院校一行的中间一列占据了5列，我们只需设置colspan="7"即可，求职意向设置为6；
最后，我们发现照片需要占据3行的位置，即第七列的3、4、5行，那么和列思想一样，我们只需合并第七列的345行即可。做法是将第4、5行的第7列删除，在第三列设置行宽为3，即rowspan=3。
综上，代码和演示效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <table border="1px" cellspacing="0">
		  <col width="200px">
		  <col width="200px">
		  <col width="200px">
		  <col width="200px">
		  <col width="200px">
		  <col width="200px">
		  <col width="200px">
			<tr align="center">
				<td colspan="7">个人简历</td>
			</tr>
			<tr align="center">
				<td>姓名</td>
				<td></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>
				<td></td>
				<td rowspan="3">照片</td>
			</tr>
			<tr align="center">
				<td>电话</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				
			</tr>
			<tr align="center">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr align="center">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		  </table>
		</body>
	<html>

在这里插入图片描述

图32

补充4
在这里插入图片描述

图33

在这里插入图片描述

图34

2.2 不常用标签

  1. 文字删除线标签 del /del
  2. 文字上标标签 sup /sup
  3. 文字下划线标签 u /u
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>图片标签</title>
		<head>
		<body>
			你好吗?
			<hr>
			我<del>很好，</del>非常好!
			<hr>
			10的平方=10<sup>2</sup>
			<hr>
			<u>我是下划线</u>
		</body>
	<html>

在这里插入图片描述

图34

第二章 表单

有些时候我们浏览网页时，需要填写账号密码上传至服务器进行验证。这一操作就涉及到表单的知识。这一章要学习文本框、密码框、单选框、复选框、按钮等表单控件，这么多控件其实都是在input标签中的type属性中设置的。在这里插入图片描述

图35

假设现在我们要绘制图36所示的一个表单，基于先前的知识，应该输入以下代码（代码中给出了相关的注释）：

在这里插入图片描述图36
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <form action="https://www.baidu.com/index.php?tn=68018901_7_oem_dg"><!--action为用户表单要提交到的指定地址-->
			<table border="1px" cellspacing="0" width="600px">
			<tbody>
				<tr height="40px" align="center">
					<td rowspan="4">总体信息</td>
					<td colspan="2"></td>
				</tr>
				<tr height="40px">
					<td align="right">用户名：</td>
					<td>
						<input type="text" name="loginname"> <!--对于要提交的值必须有name属性-->
					</td>
				</tr>
				<tr height="40px">
					<td align="right">密码：</td>
					<td>
						<input type="password" name="pwd">
					</td>
				</tr>
				<tr height="40px" align="center">
					<td colspan="2">
						<input type="submit" value="提交">  <!--submit既有按钮的意思又可以提交数据，提交到form表单中指定的action位置，value是按钮上面显示的文字-->
						<input type="reset" value="重置">  <!--reset的作用是清空文本框和密码框-->
					</td>
				</tr>
			</tbody>
		  </table>
		  </form>
		</body>
	<html>

当用户输入账号密码时，点击提交会跳转到指定的链接，这里我设置的链接是百度首页，会发现提交之后会跳转到百度首页，并且新链接中增加了刚刚的用户名和密码，效果图如37-38所示在这里插入图片描述

图37

在这里插入图片描述

图38

补充1
在这里插入图片描述

图39

在这里插入图片描述

图40

在这里插入图片描述

图41

补充2，在form标签中，如果是提交数据给服务器，还需要用到提交数据的方法，这里有get和post两种方式，两种方式的区别和功能如下，此外调用两种方法的代码为form action=“https://www.baidu.com/index.php?tn=68018901_7_oem_dg” method="get/post"
在这里插入图片描述

图42

第三章 CSS

学会了HTML语言，你做出来的网页效果可能是图43所示的样式，但是如果你再进一步学习CSS，那么你就完全可以将网页做成图44所示的这种样式：
在这里插入图片描述

图43

在这里插入图片描述

图44

这是因为在CSS中可以设置文字大小、文字颜色、排列方式、对齐方式、背景颜色、边框、阴影等等这一系列的样式，这种用来修饰网页样式的语法叫做层叠样式表—CSS 。

假设现在我们要将前一节表单中图37的表格做的好看一点，比方说希望做出以下改进：

  • 将总体信息字样标红
  • 更改按钮的大小、背景颜色

具体做法为，在总体信息的td标签中，设置style属性：style="color:red;在按钮的td标签中设置style="width:80px;height:30px;background-color:pink;，具体代码和效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>表格标签</title>
		<head>
		<body>
		  <form action="https://www.baidu.com/index.php?tn=68018901_7_oem_dg"><!--用户表单要提交到的指定地址-->
			<table border="1px" cellspacing="0" width="600px">
			<tbody>
				<tr height="40px" align="center">
					<td rowspan="4" style="color:red;">总体信息</td>
					<td colspan="2"></td>
				</tr>
				<tr height="40px">
					<td align="right">用户名：</td>
					<td>
						<input type="text" name="loginname">
					</td>
				</tr>
				<tr height="40px">
					<td align="right">密码：</td>
					<td>
						<input type="password" name="pwd">
					</td>
				</tr>
				<tr height="40px" align="center">
					<td colspan="2">
						<input type="submit" value="提交" style="width:80px;height:30px;background-color:#386aed;"> <!--#386aed为接近蓝色的一种颜色，以16进制表示-->
						<input type="reset" value="重置" style="width:80px;height:30px;background-color:pink;"> <!--也可以直接用英文字母表示颜色-->
					</td>
				</tr>
			</tbody>
		  </table>
		  </form>
		</body>
	<html>

在这里插入图片描述

图45

注意，在这一章中，我们是直接在HTML代码中设置的CSS语法，这种称为行内样式，实际应用中，我们一般会将.HTML和.CSS文件分开，在HTML文件中使用link标签去引用外部的.CSS文件，这个知识我们会在第五章中详细提到。

第四章 容器

容器标签主要有两个span标签和标签，作用是框选部分或者全部文字给其设置相应的属性。
让我们从一个作业中学会这两个标签，如下图所示，我们要实现这个效果。
在这里插入图片描述

图46

首先，原始代码和初始效果如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>文章</title>
		<head>
		<body>
			<p>  
				蜀道难
			</p>
			<p>
				噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
			</p>
			<p>
				问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
			</p>
			<p>
				剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
			</p>
		</body>
	<html>

在这里插入图片描述

图47

span标签的功能如下：在这里插入图片描述

图48

通过利用span标签以及加粗的b标签，可以达到下图所示的效果，代码也给出：
在这里插入图片描述

图49
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>文章</title>
		<head>
		<body>
			<p style="text-align:center;">  <!--文字居中显示；如果在p标签中设置背景颜色，那么这一整行都是有颜色的，下面用到span标签-->
				<span style="background-color:gray;color:white;font-size:24px;">蜀道难</span> <!--span标签的作用相当于选中文字，可以设置相关的属性-->
			</p>
			<p>
				<b>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</b><span style="color:green;">蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</span>
			</p>
			<p>
				<b>问君西游何时还？畏途巉岩不可攀。</b>但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
			</p>
			<p>
				<span style="color:#f40">剑阁峥嵘而崔嵬，一夫当关，万夫莫开。</span>所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
			</p>
		</body>
	<html>

和目标图46相比较，我们可以发现，还需要将图49中所有文字的颜色设置成灰色。这时候如果在每个p标签中一项一项进行设置，会显得非常麻烦，因此在这里我们引入了一个新的标签，将其命名为div标签。
div标签的功能如下：
在这里插入图片描述

图50

通过在p标签外面再套一层div标签，并且在div标签中给所有字体设置属性，我们可以得到下图所示的效果：
在这里插入图片描述

图51
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>文章</title>
		<head>
		<body>
			<div style="color:#555">
				<p style="text-align:center;">  <!--文字居中显示；如果在p标签中设置背景颜色，那么这一整行都是有颜色的，下面用到span标签-->
					<span style="background-color:gray;color:white;font-size:24px;">蜀道难</span> <!--span标签的作用相当于选中文字，可以设置相关的属性-->
				</p>
				<p>
					<b>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</b><span style="color:green;">蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</span>
				</p>
				<p>
					<b>问君西游何时还？畏途巉岩不可攀。</b>但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
				</p>
				<p>
					<span style="color:#f40">剑阁峥嵘而崔嵬，一夫当关，万夫莫开。</span>所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
				</p>
			</div>
		</body>
	<html>

最后，我们只需将文章居中即可，这里涉及到居中的知识点，我们用到的是再div标签中新增style为margin:auto在这里插入图片描述

图52

在这里插入图片描述

图53

当我们再在代码中设置为 div style=“color:#555;margin:auto;” ，会发现实际页面中还是没变，打开F12开发者工具会发现原因出现在div一开始就是居中的，宽度太大。
在这里插入图片描述

图54

将div标签新增width=500px就好了，最终效果图和代码如下：
在这里插入图片描述

图55
<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>文章</title>
		<head>
		<body>
			<div style="color:#555;margin:auto;width:500px" >
				<p style="text-align:center;">  <!--文字居中显示；如果在p标签中设置背景颜色，那么这一整行都是有颜色的，下面用到span标签-->
					<span style="background-color:gray;color:white;font-size:24px;">蜀道难</span> <!--span标签的作用相当于选中文字，可以设置相关的属性-->
				</p>
				<p>
					<b>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</b><span style="color:green;">蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</span>
				</p>
				<p>
					<b>问君西游何时还？畏途巉岩不可攀。</b>但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
				</p>
				<p>
					<span style="color:#f40">剑阁峥嵘而崔嵬，一夫当关，万夫莫开。</span>所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
				</p>
			</div>
		</body>
	<html>

第五章 CSS语法和选择器

5.1 基础语法

selector{
property:value;
}
例：h1{color:red;font-size:14px;} #颜色为红色，字体大小为14px

测试，创建两个文件，一个CSS文件，一个HTML文件。
CSS文件中的代码为： h1{color:blue;font-size:50px;}
HTML文件中的代码为：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<link href="test.css" type="text/css" rel="stylesheet"> 
		<head>
		<body>
			<h1>应用样式表</h1>
		</body>
	<html>

href 属性规定被链接文档的位置 (URL)。此外，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。
在这里插入图片描述

图56

5.2 高级语法

  1. 选择器分组：
    h1,h2,h3,h4,h5,h6{color:red;} (给多个标签加同一样式)
  2. 继承
    body{
    color:green;
    }

测试1：h1和a为相同样式的标签，h2为原始样式的标签，其中CSS的代码如下： h1,a{color:blue;font-size:50px;}
html的代码如下：

<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<link href="test.css" type="text/css" rel="stylesheet"> <!--rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用-->
		<head>
		<body>
			<h1>应用样式表<a href="#">这是一个超链接</a></h1>
			<h2>这是一个h2标签</h2>
		</body>
	<html>

效果如下：
在这里插入图片描述

图57

测试2： 在CSS中设置body标签为 body{color:green;}，作用是其内部其它没设置属性的标签都会继承body标签中的属性，效果如下：在这里插入图片描述

图58

5.3 派生选择器

定义： 根据元素在其位置的上下文关系来定义样式

已经被我们定义的效果是不会被覆盖的，而没有指定样式则会采用。
如下图所示，代码中有两个strong标签，一开始在css中定义li无序标签中的strong标签，那么外面的标签不会变；如果再定义strong标签，那么也不会影响之前定义了的标签。在这里插入图片描述

图59

5.4 id选择器

在这里插入图片描述

图60

在这里插入图片描述

图61

5.5 类选择器

和id选择器功能类似，不同的有两点：

  • 后者用id="",前者用class=""
  • 后者在CSS中用#，前者用.

5.6 属性选择器(不常用)

CSS 2 引入了属性选择器。

属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例子 1
如果希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

如果这篇博客对你都有所帮助的话，希望可以点赞收藏关注走一波，以后还会分享优质博客，谢谢！

枫恋蝶
关注
专栏目录
利用Html与css从零开始制作基础静态网页(web课设）
mikonnnnnnnnnnn的博客
04-02 1738
首先打好单个网页的基础结构 本次我们制作网页主要使用的是外部样式表 本次静态网页的主题是合金装备（由个人喜好而定，你可以根据其自己修改） 先定义外部样式表 <link rel="stylesheet" href="metal gear.css"> 然后开始规划网页布局 首先是网页头图我选用小岛工作室的logo 开始定义头图 .header{ position: relative; width:100%; height: 120px; ...
从零开始设计一个漂亮的网页（译）
weixin_33690963的博客
07-09 1055
译者：Joe 译文来源：http://xiebiji.com/2009/09/design_a_beautiful_website/ 原文来自：Design a Beautiful Website From Scratch 引言 你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。...
网页制作基础知识
最新发布
2303_81737387的博客
09-11 1475
网页的基本组成，以及相关基础知识
“HTML5 入门教程：从零开始构建现代化网页“
m0_73442777的博客
06-15 1730
想学习构建现代化网页却不知道从何开始？别担心！我们为你准备了一份详尽的 HTML5 入门教程。无论你是完全零基础还是已经有一些前端开发经验，这个教程都将帮助你掌握 HTML5 的基础知识和技巧。从标签的使用到页面布局、多媒体元素和表单设计，我们将一步步引导你，让你从零开始构建令人赞叹的现代化网页。不仅如此，我们还会介绍一些最新的 HTML5 特性和技术，如语义化标签、响应式设计和浏览器兼容性。准备好了吗？让我们一起踏上这个令人兴奋的 HTML5 学习之旅吧！
零基础学网页设计_想学习网页设计基础吗？ 从这里开始
Web design 教程小屋
07-09 549
如果您想入门网页设计，那么您需要掌握一些关键技能。 首先，您需要掌握如何用HTML编写页面代码的实用知识。 然后，您将需要能够使用CSS创建所需的视觉效果，无论是特定的布局，版式还是颜色和背景。 幸运的是，Envato Tuts +讲师Kezz Bracey整理了一系列初学者课程，涵盖了所有这些主题，为您提供了扎实的基础，可用来建立更高级的Web设计技能。 以下是这些课程的内容以及您可...
html5+css3从入门到精通
09-07
本文将深入探讨这两个技术的核心概念、主要特性以及如何从零基础开始掌握它们。 HTML5（HyperText Markup Language 5）是HTML语言的最新版本，它在原有的基础上进行了大量的改进和扩展，使得网页内容的结构化更加...
HTML+CSS美食静态网站设计【海鲜网站】web结课作业的源码 web网页设计业.md
08-10
### 知识点总结 ...通过从零开始构建一个完整的网站，学生们不仅能学会如何运用所学的技术知识，还能提升问题解决能力和团队协作能力。此外，这样的项目经验也为学生未来的职业发展打下了良好的基础。
html+css网站模板、网页设计源码.zip
07-16
对于专业开发者，它们可以作为快速启动新项目的基础，减少从零开始设计的时间。此外，对于设计师，这些模板提供了灵感，可以在此基础上进行创新设计。 总的来说，这个压缩包提供了一套全面的工具，帮助你快速建立一...
18种html5时间轴插件源码.zip_html5+css_html时间控件_html时间轴原理_timeline_时间轴插件
09-15
在本压缩包中，你将找到18种不同的HTML5时间轴插件源码，这些源码可以帮助开发者快速构建具有时间轴功能的网页应用，无需从零开始编写代码。 1. **HTML5时间轴原理**： HTML5时间轴的核心是通过`<time>`元素来标记...
《HTML5+CSS3网站设计基础教程》 PPT
01-01
《HTML5+CSS3网站设计基础教程》 PPT
HTML5+CSS3网站设计基础教程 源代码.rar
05-15
HTML5+CSS网页设计基础教程，传智播客书本中的源代码和练习教程，掌握web开发和设计过程，提高掌握综合能力。
HTML5+CSS3网站设计基础教程_动手实践源代码
08-01
HTML5+CSS3网站设计基础教程_动手实践源代码
简单网页设计
05-07
采用互联网技术开发的简单的网页设计，
HTML5与CSS3基础教程(第8版) PDF扫描版​
weixin_30591551的博客
04-19 586
《HTML5与CSS3基础教程(第8版)》自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了文本、图像、链接、列表、表格、表单等网页元素，还介绍了如何为网页设计布局、添加动态效果等，另外还涉及调试和发布。《HTML5与CSS3基础教程(第8版)》提供了一个强大...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html网页设计语言基础教程,HTML 网页设计新手入门教程（共32课时）_IT教程网
weixin_39722917的博客
06-02 401
教程名称：HTML 网页设计新手入门教程(共32课时)教程目录：【IT教程网】10.为CXF服务器端添加自定义拦截器进行权限检查【IT教程网】HTML网页设计教程第一章(概论)1【IT教程网】HTML网页设计教程第一章(概论)2【IT教程网】HTML网页设计教程第一章(概论)3【IT教程网】HTML网页设计教程第一章(概论)4【IT教程网】HTML网页设计教程第一章(概论)5【IT教程网】HTML...
web网页设计
qq_73710216的博客
04-27 2500
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。青春是一本太仓促的书<br></p>
HTML+CSS+JS网页设计源码及课程参考指南
通过使用本项目资源，设计者可以学习到如何从零开始构建一个静态网页，以及如何使用HTML、CSS和JavaScript来实现网页的各个功能。同时，该资源也有助于加深对前端开发流程和各种技术的理解，为将来进行更复杂的网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫恋蝶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值