HTML和CSS的学习(第一节)

最新推荐文章于 2021-06-10 17:08:14 发布

ygpGoogle

最新推荐文章于 2021-06-10 17:08:14 发布

阅读量225

点赞数

分类专栏：前端 css 文章标签： css html html5

本文链接：https://blog.csdn.net/ygp12345/article/details/106949356

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

HTML

HTML简介

HTML（Hypertext Markup Language）
超文本标记语言。
• 它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不
同组成部分。
• 所谓超文本指的是超链接，使用超链接可
以让我们从一个页面跳转到另一个页面。

一个最基本的HTML页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

标签
• HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构：
<标签名>标签内容</标签名>
<标签名 />

元素
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同
义词。

<h1>一级标题</h1>

上边的h1我们就称为元素

<p>我是一个<em>段落</em></p>

p也是一个元素，em是p的子元素，p是
em的父元素。

<body>
<p><em>内容</em></p>
</body>

• body也是一个元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。

属性
• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
• 比如：name=“value”
• 有些属性可以是任意值，有些则必须是指定值。

<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

常见属性
• id
– id属性作为标签的唯一标识，在同一个网页中不能
出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的
标签我们认为就是一组，可以出现相同的class属
性，可以为一个元素指定多个class。
• title
– title属性用来指定标签的标题，指定title以后，鼠
标移入到元素上方时，会出现提示文字。
注释
• HTML注释中的内容不会在网页中显示。
• 格式:

<!-- 注释内容 -->

• 合理的使用注释可以帮助开发人员理解网
页的代码。
• 注释不能嵌套！

HTML的发展

• 1993年6月：HTML第一个版本发布。
• 1995年11月：HTML2.0
• 1997年1月：HTML3.2（W3C推荐）
• 1999年12月：HTML4.01（W3C推荐）
• 2000年底：XHTML1.0（W3C推荐）
• 2014年10月：HTML5（W3C推荐）
doctype
• HTML总共有那么多的版本，而且这其中至
少有三个版本在广泛使用，那么浏览器怎
么知道我们在使用哪个版本呢？
• 为了让浏览器知道我们使用的HTML版本我
们还需要在网页的最上边添加一个doctype
声明，来告诉浏览器网页的版本。
html4
• 过渡版
• 严格版
• 框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

xhtml1.0
• 过渡版
• 严格版
• 框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

html5
• 我们会发现html4.01和xhtml的文档声明十
分的麻烦。不过不用担心，以上的内容都
不是我们使用的，我们使用的是html5的文
档声明，而且非常简单：

<!DOCTYPE html>

怪异模式
• 为了兼容一些旧的页面，浏览器中设置了
两种解析模式：
– 标准模式（Standards Mode）
– 怪异模式（Quirks Mode）
• 怪异模式解析网页时会产生一些不可预期
的行为，所以我们应该避免怪异模式的出
现。
• 避免的最好方式就是在页面中编写正确的
doctype。

编码问题

• 在计算机的内部，文件都是以二进制编码
保存的。
• 所谓的二进制编码就是指1和0，也就是我
们的所有内容都需要转换为1和0。
• 中国两个字在计算机的底层保存的可能要
转换为10100101这种二进制码，这一过程
称为编码。
• 计算机在读取文件时需要将10100101在转
换为中国给我们显示这一过程称为解码。
字符集
• 这就带来一个问题，中国到底是10100101
还是01011010到底由谁说了算。
• 所以我们还需要一个东西称为字符集，字
符集规定了如何将文本转换为二进制编码。
• 常见的字符集：ASKII、ISO8859-1、GBK、
GB2312、UTF-8。
乱码
• 如果我们保存文件时使用的是utf-8进行编
码，而浏览器读取页面时使用gb2312，这
样就会导致页面中的内容不能正常显示，
也就是我们所说的乱码。
• 所以我们只需要统一两者使用的字符集就
可以解决乱码问题。
• 这里为了页面有更好的使用性，我们一般
使用utf-8。
• 保存文件的编码我们直接通过编辑器即可
指定，接下来就是要告诉浏览器使用什么
字符集去解析文件。
• 在html5中只需要使用meta标签即可完成
这个任务：

<meta charset="utf-8" />

<meta>

• 作用：
– <meta> 标签可提供有关页面的元信息，比如
针对搜索引擎和更新频度的描述和关键词。
– <meta> 标签位于文档的头部，不包含任何内
容。<meta> 标签的属性定义了与文档相关联
的名称/值对。
meta的用法

• 设置页面的字符集
– <meta charset="utf-8">
• 设置网页的描述
– <meta name="description" content="">
• 设置网页的关键字
– <meta name="keywords" content="">
• 请求的重定向
– <meta http-equiv="refresh" content="5;url=地址"/>

常用标签

<html>

• 作用：
– 标签用于告诉浏览器这个文档中包含
的信息是用HTML编写的。
• 用法：
– 所有的网页的内容都需要编写到html标签中，
一个页面中html标签只能有一个。
– html标签中有两个子标签head和body 。

<head>

• 作用：
– <head>标签用来表示网页的元数据，head中
包含了浏览器和搜索引擎使用的其他不可见信
息。
• 用法：
– head标签作为html标签的子元素的出现，一
个网页中只能有一个head。

<title>

• 作用：
– <title>标签表示网页的标题，一般会在网页的标
题栏上显示。
– title标签中的文字，是页面优化的最重要因素。在
搜索引擎的搜索时最先看到的、最醒目的内容。
• 用法：
– 建议将title标签紧贴着head标签编写，这样搜索
引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复，这样不利
于搜索隐藏检索。

<body>

• 作用：
– 标签用来设置网页的主体，所有在页
面中能看到的内容都应该编写到body标签中。
• 用法：
– body标签作为html的子标签使用。

<h1>~<h6>

• 作用：
– h1~h6都是网页中的标题标签，用来表示网页
中的一个标题，不同的是，从h1~h6重要性越
来越低。
– 标题标签相当于正文的标题，通常认为重要性
仅次于页面的title。
– 一般标题标签我们只会使用到h3，h3以后的标
题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。

<p>

• 作用：
–

标签表示网页中的一个段落。
– 一般浏览器会在段落的前和后各加上一个换行，
也就是段落会在页面中自成一行。

<br />

• 作用
– <br />标签表示一个换行标签，使用br标签可
以使br标签后的内容另起一行。

<hr />

• 作用：
– <hr />标签是水平线标签，使用hr标签可以在
页面中打印一条水平线，水平线可以将页面分
成上下两个部分。

<img />

• 作用：
– < img />标签是图片标签，可以用来向页面中
引入一张外部的图片。
• 属性：
– src
• 指向一个外部的图片的路径。
– alt
• 图片的描述

<a>

• 作用：
– <a>标签是超链接标签，通过a标签，可以快
速跳转到其他页面。
• 属性：
– href
• 指向一个链接地址
– target
• 设置打开目标页面的位置，可选值：_blank新窗口、
_self当前窗口。

实体（转义字符）

实体

• 在HTML中预留了一些字符。
• 这些预留字符是不能在网页中直接使用的。
• 比如<和>,我们不能直接在页面中使用<和
>号，因为浏览器会将它解析为html标签。
• 为了可以使用这些预留字符，我们必须在
html中使用字符实体。
• 语法: &实体名;

字符实体

• 小于号<
– &lt;
• 大于号>
– &gt;
• 空格
– &nbsp;
• 和符号&
– &amp;
• 版权©
– &copy;
• 引号”
– &quot;
• 注册商标®
– &reg;
• 商标™
– &trade;

开发工具

文本编辑器
• 在windows中我们只需要使用最简单的记
事本就可以完成所有的网页的开发。
• 但是一般我们会使用一些具有提示功能的
纯文本编辑器：
– Notepad++(免费)
– Sublime(收费)
• 当然还有很多其他的工具。
IDE
• IDE（集成开发工具）
• IDE拥有比纯文本编辑器更加强大的提示功
能，也是我们开发中用的比较多的工具。
– DreamWeaver（收费）
– WebStorm（收费）
– Hbuilder（免费）
• 当然也有其他的IDE。
我用的是Hbuilder,所有的前端都可以用这个IDE。
下面写一个简单的html页面

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片标签</title>
	</head>
	<body>
		<img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px"  />
	</body>
</html>

<!-- 
		使用img标签来向网页中引入一个外部图片，
			img标签也是一个自结束标签
		属性：
			src：设置一个外部图片的路径
			alt：可以用来设置在图片不能显示时，对图片的描述
					搜索引擎可以通过alt属性来识别不同的图片
					如果不写alt属性，则搜索引擎不会对img中的图片进行收录
			width：可以用来修改图片的宽度,一般使用px作为单位
			height	：可以用来修改图片的高度，一般使用px作为单位
			
			宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小
				如果两个值同时指定则按照你指定的值来设置
			一般开发中除了自适应的页面，不建议设置width和height	
	-->	
	<!--
		图片的格式
			JPEG(JPG)
				- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
				- 一般使用JPEG来保存照片等颜色丰富的图片
				
			GIF
				- GIF支持的颜色少，只支持简单的透明，支持动态图
				- 图片颜色单一或者是动态图时可以使用gif
			
			PNG
				- PNG支持的颜色多，并且支持复杂的透明
				- 可以用来显示颜色复杂的透明的图片

		图片的使用原则：
			效果不一致，使用效果好的
			效果一致，使用小的
	-->

<!--
			src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。
			相对路径：
				相对路径指相对于当前资源所在目录的位置
				<img src="abc/bcd/2.gif" alt="这是一个大松鼠"/>
				
			可以使用../来返回一级目录,返回几级目录就写几个../	
			<img src="../../img/2.gif" alt="这是一个大松鼠"/>
		-->

CSS

HTML页面实在是太丑了，怎么破？用css!
CSS
• 层叠样式表 (Cascading Style Sheets)
• css可以用来为网页创建样式表，通过样式
表可以对网页进行装饰。
• 所谓层叠，可以将整个网页想象成是一层
一层的结构，层次高的将会覆盖层次低的。
• 而css就可以分别为网页的各个层次设置样
式。

基本语法

• CSS的样式表由一个一个的样式构成，一个
样式又由选择器和声明块构成。
• 语法：
– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}
行内样式
• 可以直接将样式写到标签内部的style属性
中，这种样式不用填写选择器，直接编写
声明即可。
• 这种方式编写简单，定位准确。但是由于
直接将css代码写到了html标签的内部，导
致结构与表现耦合，同时导致样式不能够
复用，所以这种方式我们不使用。

<p style="color: red;font-size: 30px"></p>

内部样式表
• 可以直接将样式写到

<style>
p{color:red; font-size: 30px;}
</style>

外部样式表
• 可以将所有的样式保存到一个外部的css文
件中，然后通过标签将样式表引入
到文件中。
• 这种方式将样式表放入到了页面的外部，
可以在多个页面中引入，同时浏览器加载
文件时可以使用缓存，这是我们开发中使
用的最多的方式。

<link rel="stylesheet" type="text/css"
href="style.css">

选择器

• 选择器（selector），会告诉浏览器：网页
上的哪些元素需要设置什么样的样式。
• 比如：p这个选择器就表示选择页面中的所
有的p元素，在选择器之后所设置的样式会
应用到所有的p元素上。

元素选择器

• 元素选择器（标签选择器），可以根据标
签的名字来从页面中选取指定的元素。
• 语法：
• 比如p则会选中页面中的所有p标签，h1会
选中页面中的所有h1标签。
标签名 { }

类选择器

• 类选择器，可以根据元素的class属性值选
取元素。
• 语法：
• 比如.hello会选中页面所有class属性为
hello的元素。
.className { }

ID选择器

• ID选择器，可以根据元素的id属性值选取
元素。
• 语法：
• 比如#box会选中页面中id属性值为box的
元素，和class属性不同，id属性是不能重
复的。

复合选择器

• 复合选择器，可以同时使用多个选择器，
这样可以选择同时满足多个选择器的元素。
• 语法：
– 选择器1选择器2{}
• 例如div.box1会选中页面中具有box1这个
class的div元素。

群组选择器

• 群组选择器，可以同时使用多个选择器，
多个选择器将被同时应用指定的样式。
• 语法：
• 比如p,.hello,#box会同时选中页面中p元素，
class为hello的元素，id为box的元素。
选择器1,选择器2,选择器3 { }

通用选择器

• 通用选择器，可以同时选中页面中的所有
元素。
• 语法：
*{ }
随便写个选择器的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用选择器</title>
		<style type="text/css">
			
			/*为页面中的所有的p元素，设置一个字体颜色为红色*/
			/*
			 * 元素选择器
			 * 	作用：通过元素选择器可以选则页面中的所有指定元素
			 *  语法：标签名 {}
			 */
			
			/*p{
				color: red;
			}
			
			h1{
				color: red;
			}*/
			
			/*
			 * id选择器
			 * 	- 通过元素的id属性值选中唯一的一个元素
			 *  - 语法：
			 * 		#id属性值 {}
			 */
			/*#p1{
				font-size: 20px;
			}*/
			
			/*
			 * 类选择器
			 * 	- 通过元素的class属性值选中一组元素
			 *  - 语法：
			 * 		.class属性值{}
			 */
			/*.p2{
				color: red;
			}
			
			.hello{
				font-size: 50px;
			}*/
			
			/*
			 * 为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色
			 */
			
			/*
			 * 选择器分组(并集选择器)
			 * 	- 通过选择器分组可以同时选中多个选择器对应的元素
			 * 	- 语法：选择器1,选择器2,选择器N{}
			 */
			/*#p1 , .p2 , h1{
				background-color: yellow;
			}*/
			
			/*
			 * 通配选择器
			 * 	- 他可以用来选中页面中的所有的元素
			 * 	语法：*{}
			 */
			
			/**{
				color: red;
			}*/
			
			/*
			 * 为拥有class p3 span元素设置一个背景颜色为黄色
			 * 
			 * 复合选择器（交集选择器）
			 * 	- 作用：
			 * 		- 可以选中同时满足多个选择器的元素
			 *  - 语法：
			 * 		- 选择器1选择器2选择器N{}
			 */
			span.p3{
				background-color: yellow;
			}
			
			/*
			 * 对于id选择器来说，不建议使用复合选择器
			 * p#p1{
				background-color: red;
			}*/
			
			
		
			
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p id="p1">锄禾日当午</p>
		
		<!-- 
			我们可以为元素设置class属性，
				class属性和id属性类似，只不过class属性可以重复
				拥有相同class属性值的元素，我们说他们是一组元素
				可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
		-->
		<p class="p2 hello">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		
		<p class="p3">锄禾日当午</p>
		<span class="p3">汗滴禾下土</span>
		
	</body>
</html>

标签之间的关系

• 祖先元素
– 直接或间接包含后代元素的元素。
• 后代元素
– 直接或间接被祖先元素包含的元素。
• 父元素
– 直接包含子元素的元素。
• 子元素
– 直接被父元素包含的元素。
• 兄弟元素
– 拥有相同父元素的元素。

后代选择器

• 后代选择器可以根据标签的关系，为处在
元素内部的代元素设置样式。
• 语法：
• 比如p strong 会选中页面中所有的p元素
内的strong元素。
祖先元素后代元素后代元素 { }

伪类和伪元素

• 有时候，你需要选择本身没有标签，但是
仍然易于识别的网页部位，比如段落首行
或鼠标滑过的连接。CSS为他们提供一些选
择器：伪类和伪元素。
给链接定义样式
• 有四个伪类可以让你根据访问者与该链接的交
互方式，将链接设置成4种不同的状态。
• 正常链接
– a:link
• 访问过的链接
– a:visited（只能定义字体颜色）
• 鼠标滑过的链接
– a:hover
• 正在点击的链接
– a:active
其他
• 获取焦点
– :focus
• 指定元素前
– :before
• 指定元素后
– :after
• 选中的元素
– ::selection

块和内联

<!--
			块元素和内联元素
			
			div就是一个块元素，
				所谓的块元素就是会独占一行的的元素,无论他的内容有多少
					他都会独占一整行。
				p h1 h2 h3 ... 
				div这个标签没有任何语义，就是一个纯粹的块元素，
					并且不会为它里边的元素设置任何的默认样式，
				div元素主要用来对页面进行布局的	
				
			span是一个内联元素（行内元素）	
				所谓的行内元素，指的是只占自身大小的元素，不会占用一行
				常见的内联元素：
					a img iframe span
				span没有任何的语义，span标签专门用来选中文字，
				然后为文字来设置样式	
				
			块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
				一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
				a元素可以包含任意元素，除了他本身
				p元素不可以包含任何块元素
				
		-->

下面就是一系列示意代码：
伪类代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 伪类专门用来表示元素的一种的特殊的状态，
			 * 	比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
			 * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
			 */
			
			/*
			 * 为没访问过的链接设置一个颜色为绿色
			 * 	:link
			 * 		- 表示普通的链接（没访问过的链接）
			 */
			a:link{
				color: yellowgreen;
			}
			
			/*
			 * 为访问过的链接设置一个颜色为红色
			 * 	:visited
			 * 		- 表示访问过的链接
			 * 
			 * 浏览器是通过历史记录来判断一个链接是否访问过,
			 * 	由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
			 * 
			 */
			a:visited{
				color: red;
			}
			
			/*
			 * :hover伪类表示鼠标移入的状态
			 */
			a:hover{
				color: skyblue;
			}
			
			/*
			 * :active表示的是超链接被点击的状态
			 */
			a:active{
				color: black;
			}
			
			/*
			 * :hover和:active也可以为其他元素设置
			 * IE6中，不支持对超链接以外的元素设置:hover和:active
			 */
			/*p:hover{
				background-color: yellow;
			}
			
			p:active{
				background-color: orange;
			}*/
			
			/*
			 * 文本框获取焦点以后，修改背景颜色为黄色
			 */
			input:focus{
				background-color: yellow;
			}
			
			/**
			 * 为p标签中选中的内容使用样式
			 * 	可以使用::selection为类
			 * 	注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
			 */
			
			/**
			 * 兼容火狐的
			 */
			p::-moz-selection{
				background-color: orange;
			}
			
			/**
			 * 兼容大部分浏览器的
			 */
			p::selection{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		
		
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">没访问过的链接</a>
		
		<p>我是一个段落</p>
		
		<!-- 使用input可以创建一个文本输入框 -->
		<input type="text" />
		
	</body>
</html>

伪元素：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 使用伪元素来表示元素中的一些特殊的位置
			 */
			/*
			 * 为p中第一个字符来设置一个特殊的样式
			 */
			
			/*p:first-letter {
				color: red;
				font-size: 20px;
			}*/
			/*
			 * 为p中的第一行设置一个背景颜色为黄色
			 */
			
			/*p:first-line {
				background-color: yellow;
			}*/
			
			/*
			 * :before表示元素最前边的部分
			 * 	一般before都需要结合content这个样式一起使用，
			 * 	通过content可以向before或after的位置添加一些内容
			 * 
			 * :after表示元素的最后边的部分
			 */
			p:before{
				content: "我会出现在整个段落的最前边";
				color: red;
			}
			
			p:after{
				content: "我会出现在整个段落的最后边";
				color: orange;
			}
		</style>
	</head>

	<body>
		<p>
			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>
	</body>

</html>

a的伪类：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			/*
			 * 涉及到a的伪类一共有四个：
			 * 	:link
			 *  :visited
			 * 	:hover
			 * 	:active
			 * 而这四个选择器的优先级是一样的。
			 */
			
			a:link{
				color: yellowgreen;
			}
			
			a:visited{
				color: red;
			}
			
			/*
			 * 鼠标移入
			 */
			a:hover{
				color: orange;
			}
			
			/*
			 * 正在点击
			 */
			a:active{
				color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">未访问过的链接</a>
		
	</body>
</html>

ygpGoogle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS的学习(第一节)

HTMLHTML简介HTML（Hypertext Markup Language）超文本标记语言。• 它负责网页的三个要素之中的结构。• HTML使用标签的的形式来标识网页中的不同组成部分。• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。一个最基本的HTML页面：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</t
复制链接

扫一扫

专栏目录