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