大二的时候选修过网页设计这门课,但是时间长了好多东西都还给老师了,于是乎趁着在家的这段时间重新复习一下网页设计,也就是所谓的前端,也希望这篇文章能对一些小伙伴有所帮助。
文章目录
第一章 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>
图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 不常用标签
- 文字删除线标签 del /del
- 文字上标标签 sup /sup
- 文字下划线标签 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 高级语法
- 选择器分组:
h1,h2,h3,h4,h5,h6{color:red;} (给多个标签加同一样式) - 继承
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;}
如果这篇博客对你都有所帮助的话,希望可以点赞收藏关注走一波,以后还会分享优质博客,谢谢!