本文详细介绍了HTML5的基本标签，包括标题、列表、超链接、图片和表格等，以及CSS的基础语法、选择器和样式设置。通过实例讲解，帮助读者掌握网页设计的关键技能。
大二的时候选修过网页设计这门课，但是时间长了好多东西都还给老师了，于是乎趁着在家的这段时间重新复习一下网页设计，也就是所谓的前端，也希望这篇文章能对一些小伙伴有所帮助。
文章目录
第一章 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中，空格由另外一个符号   表示，注意这符号后面要接一个分号，具体效果如下：
<!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>
图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>
最低0.47元/天 解锁文章
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
