我的前端学习历程（会一直更新）

嗯嗯=

已于 2023-10-15 23:27:21 修改

阅读量57

点赞数

文章标签：前端学习

于 2023-10-03 21:05:40 首次发布

本文链接：https://blog.csdn.net/qq_64867440/article/details/133528901

版权

One

1.1使用的软件

Hbuider X
chome(谷歌浏览器)

1.2学习内容：

关于前端框架，html框架以及相应标签（部分），标签的使用方法，以及图片的路径问题；

以下是HTML常用标签：

1. `<html>`：定义HTML文档的根元素
2. `<head>`：定义文档的头部，包括文档的元数据
3. `<title>`：定义文档标题
4. `<body>`：定义文档的主体部分
5. `<h1>`-`<h6>`：定义标题（1-6级别）
6. `<p>`：定义段落
7. `<a>`：定义超链接
8. `<img>`：定义图像
9. `<ul>`：定义无序列表
10. `<ol>`：定义有序列表
11. `<li>`：定义列表项
12. `<table>`：定义表格
13. `<tr>`：定义表格行
14. `<td>`：定义表格单元格
15. `<form>`：定义表单
16. `<input>`：定义输入字段
17. `<select>`：定义下拉列表
18. `<option>`：定义选项
19. `<button>`：定义按钮
20. `<div>`：定义文档中的区块或容器
21. `<span>`：定义文档中的小区块或容器
22. `<br>`：定义换行
23. `<hr>`：定义水平线
24. `<style>`：定义CSS样式
25. `<script>`：定义JavaScript脚本

<!DOCTYPE html>
<!-- doctype的是声明文件类型，防止怪异类型的出现 -->
<!-- html标签限制了文档的开始和结束 -->
<html>
	<head>
<!--head标签用于定义文档的头部，包含的信息是给浏览器看的，不是给用户看的 -->
		<meta charset="utf-8">
<!-- meta用来描述一个html网页文档的属性，是一个单标签 -->
		<title></title>
<!-- title文件标签是head标签中必须包含的标签，显示在浏览器的标题栏 -->
<!-- title的增加有利于seo的优化 -->
<!-- seo是搜索引擎的优化的英文缩写，对网站内容进行调整 -->
	</head>
	<body>
<!-- body标签动议文档的主体，是直接给用户看的 -->
<!-- h$*6快捷键快速生成1到6级标签 -->
	<h1 align="center">一级标签</h1>
<!-- 在<>里面的是属性，引号里面的是属性值 -->
<!-- 用红色显示是不建议使用这种方法使用，建议使用css来实现 -->
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
<!-- 正确使用seo搜索引擎，默认标签是在左边摆放 -->
<!-- 标题是通过h1-h6来进行定义的，并且成对出现 -->
	<p>段落标签</p>
<!-- p标签是段落标签 -->
	<br />
<!-- 在不产生一个新段落的时候进行换行 -->
<!-- br标签不同于p标签，是单标签，可以写成<br>，也可以写成<br /> -->
	<hr />
<!-- 同理，hr也是单标签，用于加水平线 -->
<!-- hr标签里可以设置以下几个属性 -->
<!-- 颜色属性color，长度属性width，高度属性size，对其方式align：默认居中，可以设置left，right -->
<!-- px是像素的意思 -->
	<img src="../img/school.jpg" alt="未来信息学院" width="300px" height="300px" title="未来信息学院"/>
<!-- 同级关系 -->
<!-- img定义html中的图像 -->
<!-- img是单标签，不需要进行闭合操作 -->
<!-- img有以下五个属性 -->
<!-- src路径，alt规定图像的替代文本，width规定图像的宽度，height规定图像的高度，title鼠标悬浮在图片上给予提示 -->
<!-- 图片路径问题-->
<!--绝对路径是电脑的盘符存储与访问的具体地址；-->
<!--相对路径：两者相对关系，两者在统一路径下可以直接访问，两者相对关系：子级关系先./在/找子级，父级关系../，同级关系./或者什么都不写；-->
	<img src="../img/school.jpg" alt="未来信息学院" width="300px" height="300px" title="未来信息学院"/><!-- 父级关系 -->
	<img src="school.jpg" alt="未来信息学院" width="300px" height="300px" title="未来信息学院"/><!-- 同级关系 -->
<!--网络地址：具体的网络地址，网络路径要分也可以是绝对路径的一种-->
	</body>
</html>

1.3使用图片资源

1.4运行截图

Two

2.1学习内容

超链接，文本标签，列表标签，表格标签以及单元格合并；

HTML超链接用于在页面中创建链接，让用户可以通过点击链接跳转到其他页面或资源。超链接使用<a>标签来定义，其基本语法如下：

<a href="链接地址">链接文本</a>

其中，href属性用于指定链接的目标地址，链接文本是用户可见的文字或图标。

文本标签用于对不同文本元素进行格式化。常见的文本标签包括：

- <p>：定义一个段落；
- <h1>~<h6>：定义标题，h1为最大的标题；
- <strong>：定义强调文本，通常会加粗显示；
- <em>：定义斜体强调文本；
- <u>：定义带下划线的文本；
- <s>：定义删除线文本。

列表标签用于创建有序列表和无序列表。有序列表使用<ol>标签，无序列表使用<ul>标签，其中每个列表项使用<li>标签进行定义。基本语法如下：

<!-- 有序列表 -->
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

表格标签用于创建数据表格。表格由<table>标签定义，其中行使用<tr>标签定义，单元格使用<td>标签定义。可以使用colspan和rowspan属性合并多个单元格。基本语法如下：```html

其中，colspan属性定义当前单元格横向合并的个数，rowspan属性定义纵向合并的个数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 超链接可以是一个字，一个词，或者一组词语，也可以是一幅图像
可以通过点击这些内容来跳转到新的文档或者当前文档的某个部分 -->
		<a href="https://www.baidu.com/">百度一下，你就知道  </a><br />
		<a href="https://www.baidu.com/"><img src="school.jpg" width="100px" title="超链接到百度"/></a><br>
<!-- 在标签<a>中使用了href属性来描述链接的地址 -->
<!-- 默认情况下，链接将以以下三种形式出现在浏览器中
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线 -->
<!-- 文本标签 -->
<!-- 常用文本标签与段落标签是不同的，段落代表一段文字，而文本表示文本词汇 -->
<!-- p标签里面可以嵌套文本标签 -->
<!-- 常用的文本标签 -->
<!--
<em></em>着重文字
<b></b>楷体文字
<i></i>斜体文字
<strong></strong>加重语气
<del></del>删除字
<span></span>元素没有特定的含义 -->
	<em>em你好</em>
	<b>b你好</b>
	<i>i你好</i>
	<strong>strong你好</strong>
	<del>del你好</del>
	<span>span你好</span>
<!-- 列表标签 -->
<!-- 列表是可以嵌套的 -->
<!-- 有序列表 -->
<!-- type属性
1表示列表项目用数字标号
a表示用小写字母标号
A表示用大写字母标号
i用小写罗马数字标号
I用大写罗马数字标号 -->
<!-- 默认是1 -->
	<ol type="1">
		<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>
	<ol >
		<li>动物
		<ol>
			<li>花花</li>
			<li>蔓越莓</li>
			<li>乐乐</li>
			<li>七仔</li>
		</ol>
		</li>
	</ol>
<!-- 无序列表 -->
<!-- 无序列表的使用是非常广泛的 -->
<!-- 无序列表是一个项目的列表，此列表项目使用粗体远点表示 -->
<!-- type属性
disc：默认实心圆
circle：空心圆
square：小方块
none：不显示 -->
	<ul type="disc">
		<li>花花</li>
		<li>蔓越莓</li>
		<li>乐乐</li>
		<li>七仔</li>
	</ul>
	<ul type="none">
		<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>
	<ul >
		<li>动物
		<ul>
			<li>花花</li>
			<li>蔓越莓</li>
			<li>乐乐</li>
			<li>七仔</li>
		</ul>
		</li>
	</ul>
<!-- 快速生成ul，li的标签，ul>li*标签数量 -->
<!-- 标签之表格：行，列，单元格 -->
<!-- 表格标签
单元格:table
行：tr
列：td -->
<!-- table>tr*数量>td*数量 快捷键 -->
<!-- 表格属性
border：表格的边框
width：表格的宽度
height：表格的高度 -->
		<table border="1" width="400px" height="400px">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
<!-- 合并单元格 -->
<p>合并单元格4和5</p>
<p>合并单元格10和13</p>
	<table border="1" width="100px" height="100px">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td colspan="2">4与5</td>
				<!-- <td>5</td> -->
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr>
				<td rowspan="2">10与13</td>
				<td>11</td>
				<td>12</td>
			</tr>
			<tr>
				<!-- <td>13</td> -->
				<td>14</td>
				<td>15</td>
			</tr>
			<tr>
				<td>16</td>
				<td>17</td>
				<td>18</td>
			</tr>
			<tr>
				<td>19</td>
				<td>20</td>
				<td>21</td>
			</tr>
		</table>
<!-- 水平合并(保留左边，删除右边)：colspan
垂直合并（保留上边，删除下边）：rowspan -->
</html>

2.2运行截图

Three

3.1学习内容

表单，表单构成，块级元素，行内元素，行内块级元素，div容器。div容器的使用

HTML表单是一个用于用户输入和提交数据的区域，它通常包含输入字段、提交按钮、标签等元素。表单的构成由以下几个部分组成：表单元素、表单控件、标签和提示信息。

- 表单元素：表单元素指的是表单的整体元素，使用 `<form>` 标签来定义表单。
- 表单控件：表单控件是表单中的输入元素，如文本输入框、单选框、复选框、下拉框等。
- 标签：标签是指标签元素，通常与表单控件一起使用，用来描述表单控件的用途。
- 提示信息：提示信息一般为表单控件的说明或错误提示信息。

块级元素与行内元素是HTML中的两种类型的元素，块级元素会在页面中独占一行，而行内元素则可以和其他行内元素在同一行上显示，但不会独占一行。

行内块级元素则是介于块级元素和行内元素之间的元素，它们可以和其他行内块级元素在同一行上显示，但是它们可以包含块级元素，使其具有块级元素的特点。

div容器是HTML中的一个容器元素，它没有具体的语义含义，主要用来对页面进行布局或分组。使用div容器可以将页面划分为不同的区块，方便进行样式设计和布局。div元素本身不具有样式，需要使用CSS样式表来进行设计。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- form表单
表单再web网页中用来给用户写信息，采集用户信息，使页面具有交互的功能
所有用户输入的内容的地方都用表单来写，如用户注册，搜索框 -->
<!-- 表单是由容器和控件组成的，一个表单应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮等叫做控件，表单就是容器，能够容纳各种各样的控件 -->
<!-- 属性：method:服务器地址，name：表单名称 -->
<!-- method中get和post的区别
两者都是数据提交方式
get提交的数据url可以看到，post看不到
get用于提交少量数据，post用来提交大量数据 -->
		<form action="url" method="get" name="myform">
			<input type="text">
			<input type="submit"/>
			<button>取消</button>
		</form>
<!-- 表单元素（表单控件）
一个完整的表单包含三个基本组成部分：
表单标签，表单域，表单按钮 -->
		<form action="url">
			用户名：<input type="text" value="提交">
<!-- 文本域通过这个标签<input type="text">来确定，当用户要在表单中输入字母，数字等内容时，会用到文本域 -->
			密码：<input type="password" value="提交">
<!-- 密码字段通过<input type="password">来定义，密码字段字符不会明码显示，而是会以星号或原点代替 -->
<!-- 提交按钮，用户点击确定后，数据会从一个文件传到另一个文件 -->
<!-- 块元素与内联元素 -->
<!-- 常见的块元素（自上而下排列）:div,form,h1-h6,hr,p,table,ul;
块元素会在页面单独占一行，可以设置wedth，height属性，可以包含行内元素和其他块级元素。 -->
<!-- 常见的内连元素（行内元素）（左右摆放）：a,b,em,i,span,strong;
行内元素不会单独占页面的一行，行内元素不可以设置wedth，height属性，设置了也无效。可以包含内连元素，不包含块级元素 -->
		</form>
<!-- 行内块级元素（特点：不换行，能够识别宽高）：button，img，input等 -->
<!-- div容器元素，也是页面见到的最多的元素 -->
		<div id="header">主导航
		<ul>
			<li>导航1</li>
			<li>导航2</li>
		</ul>
		</div>
		<div id="nav">banner
			<img src="school.jpg" alt="">
		</div>
		<div id="aticle">广告
			<img src="school.jpg" alt="">
		</div>
		
		<div id="header"></div>
		<div id="nav"></div>
		<div id="aticle">
			<div id="section"></div>
		</div>
		<div id="aside"></div>
		<div id="footer"></div>
		
		<header></header>
<!-- 头部 -->
		<nav></nav>
<!-- 导航 -->
		<article>
<!-- 代表一个独立的，完整的相关内容块，例如一篇完整的内容稿子，一篇博客文章，一个用户评论	 -->		
		<section></section>
<!-- 定义文章中的节，例如章节，页眉，页脚 -->
		</article>
		<aside></aside>
<!-- 侧边栏 -->
		<footer></footer>
<!-- 脚部 -->
	</body>
</html>

3.2运行截图

Four

4.1学习内容

css基本概念， css选择器，css选择器优先级

CSS（Cascading Style Sheets）是一种用于网页样式设计的标记语言。CSS通过为网页添加样式和布局，使网页具有更加美观、清晰、简洁的视觉效果。以下是CSS的基本概念、CSS选择器以及CSS选择器优先级。

CSS基本概念：

选择器：用于选择需要应用样式的元素。
属性：用于描述元素的样式特征，如颜色、字体等。
值：属性对应的属性值。
样式规则：选择器和属性的组合。
样式表：样式规则的集合。

CSS选择器：

元素选择器：通过元素类型来选择元素，如p、div、h1等。
类选择器：通过类名来选择元素，如.class。
ID选择器：通过ID来选择元素，如#id。
属性选择器：通过属性来选择元素，如[type="text"]。
伪类选择器：通过状态来选择元素，如:hover、:active、:focus等。
伪元素选择器：通过元素的特定部分来选择元素，如::before、::after等。
组合选择器：使用多个选择器组合在一起来选择元素，如p.class、div#id、a:hover等。CSS选择器优先级：

CSS选择器优先级用于决定当多个选择器作用于同一元素时，哪个样式规则会起作用。选择器优先级的规则如下：

选择器中每出现一个ID选择器，优先级加100。
选择器中每出现一个类选择器、属性选择器或伪类选择器，优先级加10。
选择器中每出现一个元素选择器或伪元素选择器，优先级加1。
如果有!important声明，优先级最高。
如果选择器的优先级相同，则后面的样式会覆盖前面的样式。

css文件

/* 选择器
全局选择器:可以与任何元素匹配，优先级最低，一般用于做样式初始化 */
	*{
		margin: 0;
		padding: 0;
	}
/* 元素选择器 
html中的元素:p,b,div,a,img,body等
用于描述标签的共性,无法描述标签的个性
所有的标签,都可以是选择器,无论这个标签藏起来有多深,都可以被执行
*/
	p{
		color: aquamarine;
		font-size: 12px;
	}
	h3{
		color: blue;
	}	
	span{
		color: gold;
	}
/* 类选择器
规定用原点表示,针对想要用的所有标签使用
 类选择器可以被多种标签使用,类名不能以数字开头,同一个标签可以使用多个类选择器,中间用空格隔开
 类选择器自上而下执行，如果同时用两个类，下面的会覆盖上面的*/
	.one{
		color:red;
		width: 10px;
	}
	.two{
		color: khaki;
	}
/* id选择器
针对某一个特定的标签使用,只能使用一次,css中的id选择器用#定义
 id是唯一的,不能用数字开头*/
#three{
	border: 3px dashed green;
}
/* 合并选择器
语法:选择器1,选择器2{} 
作用:提取相同的格式,减少重复代码 */
.a,.b{
	color: plum;
}
/* 选择器的优先级:
css中,权重用数字衡量,元素选择器的权重是1,class是10,id是100，内联样式是1000 
行内选择器 > id选择器 > 类选择器 > 元素选择器 */

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css学习</title>
<!-- css层叠样式表,又叫级联样式表,简称样式表 
唯一目的：可以使网页具有美观一致的页面 
css规定由两个部分组成,选择器以及一条或者多条声明 
选择器通常是需要改变样式的html元素,每个属性由一个属性或者一个值组成
属性（property）是希望设置的样式属性（style attribute）,每个属性都有一个属性值,属性与属性值之间用冒号隔开 -->
		<link rel="stylesheet" type="text/css" href="#"/>
		<style>
			h5{
				color: hotpink;
				font-size: 18px;
			}
			h2{
				color: red;
				font-size: 22px;
			}
/* 全局选择器,用通配符*表示 */
		 *{
				text-align: center;
			} 
		</style>
		</head>
	<body>
<!-- css引入方式：
1.内联样式：要使用这个方式，需要在相关的标签内使用style属性，缺点是缺乏整体性和规范性，不利于维护，维护成本高 -->
		<h1 style="background: orange;font-size: 24px;">你好呀</h1>
<!-- 2.内部样式：当单个文档需要特殊的样式时，可以使用<style>标签在文档头部定义内部样式表 -->
<!-- 内部样式的缺点，在多个页面之间容易出现混乱 -->
		<h5>Hello</h5>
		<h5>我的好朋友</h5>
		<h2>css</h2>
<!-- 3.外联样式（推荐） -->
<!-- 每个页面用<link>标签链接到样式表，<link>标签在文件的头部 -->
		<h3>study6</h3>
		<a href="study6.html"><p>超级链接study6</p></a>
<!-- 全局选择器 -->
		<p>我<span>爱</span>你</p>
<!-- 类选择器 -->
		<h1 class="one">i love you</h1>
		<h3 class="one two">i love animal</h3>
<!-- id选择器 -->
		<h1 id="three">oh my god!</h1>
<!-- 合并选择器 -->
		<p class="a">你好</p>
		<h2 class="b">哈哈</h2>
	</body>
</html>

4.2运行截图

Five

5.1学习内容

字体样式设置，背景图片设置

css

/* css字体属性定义颜色，大小，加粗，文字样式 */
/* color
red
 #ff0000
 rab（255，0，0）
 rgba（255，0，0.5）
 */
/* font-size 设置文本的大小
chome能够接受的最小字体是12px
 */
/* font-weight 设置文本的粗细
 bold定义粗体字符
 bolder更粗
 lighter更细
 100-900 由细到粗，400等同默认，700等同bold*/
/* font-style 设置字体样式
 nomal 默认值
 italic定义斜体字*/
/* font-family 指定一个元素的字体
每个值用逗号隔开
如果字体名称包含空格，它必须加上引号*/
/* css背景属性
 background-color 颜色
            image图片
			position显示位置
			repeat图片如何填充 repeat-x水平 reapt-y垂直
			size图片大小 length percentage cover contain*/
			.box{
				width: 300px;
				height: 300px;
				background-color: palegoldenrod;
			}
			.box1{
				width: 300px;
				height: 300px;
				background-image: url(../img/school.jpg);
			}
			.box2{
				width: 1200px;
				height: 1200px;
				background-image: url(../img/school.jpg);
				background-repeat: repeat-x;
			}
			.box3{
				width: 1000px;
				height: 1000px;
				background-image: url(../img/school.jpg);
				background-repeat: repeat-x;
				background-size: cover;
			}
			.box4{
				width: 100px;
				height: 100px;
				background-image: url(../img/school.jpg);
				background-position: left center;
			}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css/study7.css" type="text/css"/>
		<title></title>
	</head>
	<body>
			<div class="box"></div>
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
	</body>
</html>

5.2运行截图

Six

6.1学习内容

文字属性，表格属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h3{
				text-align: center;
				text-decoration: underline;
				text-transform: capitalize;
			}
			p{
				text-indent: 2em;
			}
			table,td{
/* 用border属性指定表格边框 */
				border: 1px solid  black;
			}
/* 用border-collapse折叠边框 */
			table{
				border-collapse: collapse;
				width: 500px;
				height: 100px;

			}
/* 表格文字对齐：包括水平对齐和垂直对齐text-align，vertial-align */
			td{
				text-align: center;
				vertical-align: center;
				padding: 20px;
			}
/* 表格填充padding */
/* 表格颜色color，background-color */
		</style>
	</head>
	<body>
<!-- 文本属性 -->
<!-- text-align指定元素文本的水平对其方式,默认是靠左对齐，left：左  right：右  center：中 -->
<!-- text-deraction文本的下划线。。 underline:下划线 overline上划线 line-through删除线-->
<!-- text-transform属性控制文本的大小写captialize定义每个单词的大小写；uppercase定义全部大写字母；lowercases定义全部小写字母-->
<!-- text-indent规定文本块中首行文本的缩进，负数是允许的，如果是负数，第一行左缩进 -->
	<h3>我爱你</h3>
	<h3>I Love you</h3>
	<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>
<!-- 表格属性
 -->
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
	</table>
	</body>
</html>

6.2运行截图

Seven

7.1学习内容

后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li{
			color:red;
			}
			div>p{
				color: aqua;
			}
			h1+p{
				color:red;
			}
			h2~h4{
				color: blue;
			}
		</style>
		
	</head>
	<body>
<!-- 后代选择器：选择所有被E包含的F元素，中间用空格隔开 E F{} -->		
	<ul>
		<li>列表1</li>
		<li>列表1</li>
		<li>列表1</li>
		<div>
			<ol>
				<li>列表</li>
			</ol>
		</div>
	</ul>
<!-- 子代选择器：选择所有作为E元素的直接元素F，对更深一层的元素不起作用，用>符号表示E>F{} -->
	<div>
	<p>我喜欢你</p>
	<ul>
		<li>
			<p>我也是</p>
		</li>
	</ul>
	</div>

<!-- 相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素E+F{} -->	
	<h1> i love you</h1>
	<p>me too</p>
	<p>hahaha</p>
<!-- 通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开 -->
	<h2>我的</h2>
	<h4>是我的</h4>
	<h4>真的吗</h4>
	</body>
</html>