总结html

1、初识html

W3C : 万维网联盟！（World Wide Web Consortium ）
	创建于1994年，是web技术领域最权威最具有影响力的标准机构！


	W3C规定了web技术领域相关技术的标准！

	官网地址：
	www.w3c.org
	www.chinaw3c.org

	XML ：负责数据的存储
	Html ：结构化标准,负责数据的显示
	CSS ：表现标准
	JavaScript：行为标准


	Html概念：

	01.超文本标记语言（Hyper Text Markup Language）
	超文本:包含除了文本之外的视频，音频，图片等。
	标记：html也是有多个节点组成的!
	int a =5; 通过a找到5
	<student id="1"><student>
	<student id="2"><student>
	id就是我们的标记

	02.文件名以html或者htm结尾的文件我们称之为html！

	发展史：
	93年诞生HTML！
	00年改名XHTML!
	13年改名HTML5!


	HTML5的优势：
	01.世界知名浏览器厂商的支持！
	02.市场的需求
	03.跨平台

	HTML网页的基本结构

	<!DOCTYPE html> 只是告诉浏览器使用了html的规范
	<html> 根节点
	<head></head> 头部信息
	<body></body> 主体部分
	</html>

	我们怎么使用html呢？
	01.记事本(文本编辑器)
	02.DreamWeaver
	03.WebStorm

第一个网页html

<!DOCTYPE html><!-- 声明当前的文件是H5的页面-->
	<html> <!--根节点-->
	<head lang="en"> <!--头部信息 lang="en"使用的语言是英语-->
	<title>这是我的第一个H5页面</title><!--网页的标题-->
	<meta charset="utf-8"> <!--设置页面的编码格式-->
	<meta http-equiv="keywords" content="第一次，h5">
	<!--
	meta:设置网页相关的元信息（meta-information）!
	比如：设置编码格式，搜索关键字，描述信息，页面跳转等。。。。
	meta常用的属性和属性值：
	01.charset：编码格式
	02.http-equiv：把content属性关联到我们的http头部！
	常用的属性值：
	001.keywords ：搜索关键字
	002.description：描述当前页面的信息
	003.refresh ：跳转页面
	<meta http-equiv="refresh" content="3;url=http://www.github.com/xiaodoufu/">
	03.content:定义和http-equiv或者name属性的对应值
	-->
	<style type="text/css"></style><!--设置当前页面的样式-->
	<script type="text/javascript"></script> <!--设置当前页面的行为-->

	</head>

	<body> <!--网页中所有的数据必须书写的位置-->
	这是我的第一个页面！
	</body>
	</html>

标题标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>标题标签</title>
	<!--
	标题标签： h1-h6 其他的都没有效果！
	会自动换行！块元素（自己独占一行的元素）！
	-->
	</head>
	<body>
	<h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3>
	<h4>4级标题</h4>
	<h5>5级标题</h5>
	<h6>6级标题</h6>
	<h7>7级标题</h7>
	8级标题


	</body>
	</html>

段落标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>段落标签</title>
	<!--
	段落之前有空行！p标签也是块元素！
	自闭合标签
	<br/> 换行
	<hr/> 水平线
	<h1> <p> </h1> </p> 错误的！标签的不正确嵌套！
	<p> <h1> </h1></p> 正确！
	-->
	</head>
	<body>

	<p>
	北京欢迎你，有梦想谁都了不起！<br/>
	有勇气就会有奇迹。
	</p>
	<hr/>
	<p>
	北京欢迎你，为你开天辟地<br/>
	……
	</p>

	</body>
	</html>

特殊字符

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>特殊字符的使用</title>
	<!--
	虽然有些特殊字符我们可以在页面上显示！但是不允许直接书写！
	需要特殊的符号来代替我们的特殊字符！
	特殊符号对照表：http://www.jb51.net/onlineread/htmlchar.htm
	-->
	</head>
	<body>
	大于号（>）：> <br/>
	小于号（<）：<<br/>
	引号（""）："<br/>
	单引号（'）：'<br/>
	版权符号（©）：©<br/>
	<!--


	想让一行中的某些字体凸显出来，我们通常使用
	em 斜体不建议使用i
	strong 加粗不建议使用b
	尽量使用的标签语义化（让计算机便于解析，让码农易于阅读）！
	-->
	大家辛苦了<strong><em>吗？</em></strong>
	</body>
	</html>

图片标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>图片标签</title>
	<!--
	常见的图片格式：
	bmp,gif,png,jpg! 压缩（率）比！

	img标签也是一个行内元素（内联元素）！

	src :指的是图片的位置！绝对不能写成绝对路径！
	项目中需要的所有文件，都在项目中的images文件夹中保存！
	src就写成项目的相对路径！
	title:鼠标放在图片上的悬停文字,如果没有alt属性，图片不显示时，显示title
	alt:不显示图片的时候替换文字
	height:高度
	width: 宽度
	-->
	</head>
	<body>
	<img src="../images/a.jpg" height="200px" width="200px"
	title="这是一幅画" alt="多么美丽的画面">
	</body>
	</html>

超链接

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>超链接</title>
	<!--
	01.普通的超链接
	02.锚链接
	03.功能性链接

	src:我们一般指的是文件的地址！路径！从哪里来
	href：是指向，引用！到哪里去

	target：目标页面的设置！指的是我们点击超链接之后的页面显示窗口的位置！默认是当前窗口！ _self
	_blank：在新创建的窗口中显示！
	-->
	</head>
	<body>

	<a href="http://www.baidu.com" target="_blank">百度</a> <br/>
	<a href="http://www.taobao.com" target="_self">淘宝</a> <br/>
	<a href="http://www.jd.com">京东</a> <br/>

	<!--
	把图片嵌套在超链接中！
	-->
	<a href="http://www.github.com/xiaodoufu" target="_blank">
	<img src="../images/a.jpg" width="200px" height="200px" alt="这是一个美丽的画面">
	</a>
	</body>
	</html>

锚链接本页面跳转

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>锚链接本页面跳转</title>
	<!--
	锚链接：
	01.从本页面的A位置跳转本页面的B位置使用 #+标记名称
	02.从本页面的A位置跳转其他页面的B位置使用页面名+#+标记名称
	name:标记的名称
	-->
	</head>
	<body>
	<div><a href="#flag" >跳转至第8个画面</a></div>
	<div><a href="08锚链接需要的页面.html#flag" >跳转至需要页面的第8个画面</a></div>
	<img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面">
	<!-- name="flag" flag标记名称 -->
	<a name="flag" href="#">这是第8个画面的标记</a> <!-- #返回本页面的最初位置-->
	</body>
	</html>

锚链接需要的页面

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>锚链接需要的页面</title>
	</head>
	<body>
	<img src="../images/a.jpg" title="这是第1个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第2个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第3个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第4个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第5个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第6个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第7个画面" alt="以前有个画面">
	<img src="../images/a.jpg" title="这是第8个画面" alt="以前有个画面">
	<a name="flag">这是需要界面的第8个画面标记</a>
	</body>
	</html>

块元素和内联元素

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>块元素和内联元素</title>
	<!--
	块元素：自身独占一行！
	可以设置盒子大小！
	h1 - h6 p div
	内联元素：元素在一行显示！
	不可以设置盒大小！
	a img span子
	块元素和内联元素可以互相转换！通过display属性设置！
	-->
	</head>
	<body>

	<div style="width: 50px;height: 50px;border: 1px solid red;display: inline">
	我是一个小盒子
	</div>

	<a href="#" style="width: 50px;height: 50px;border: 1px solid red;display: block">这是内联元素</a>


	</body>
	</html>

2、列表表格和媒体元素

无序列表

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>无序列表</title>
	<!--
	什么是列表
	列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，
	以便浏览者能更快捷地获得相应的信息！

	01.前面有默认的实心圆
	02.每个li独占一行
	03.适用于我们的新闻列表，导航栏
	-->
	</head>
	<body>
	<ul>
	<li>好好学习</li>
	<li>好好学习</li>
	<li>好好学习</li>
	</ul>


	</body>
	</html>

有序列表

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>有序列表</title>
	<!--
	01.有顺序，前面默认是阿拉伯数字
	02.适用与试卷和问卷调查！
	-->
	</head>
	<body>
	<ol>
	<li>好好学习</li>
	<li>好好学习</li>
	<li>好好学习</li>
	</ol>
	</body>
	</html>

自定义标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>自定义列表</title>
	<!--
	01.每个dt dd都独占一行
	02.默认前面没有任何标记
	03.适用于一个标题下，有多个列表项的场景
	-->

	</head>
	<body>

	<dl>
	<dt>C盘</dt>
	<dd>文件1</dd>
	<dd>文件2</dd>

	<dt>D盘</dt>
	<dd>文件1</dd>
	<dd>文件2</dd>
	</dl>

	</body>
	</html>

表格

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>表格</title>
	<!--
	01.简单易用，便于阅读
	02.结构简单

	table中的属性：
	01.border：边框的像素
	02.cellpadding 设置内容和单元格之间的距离
	03.cellspacing 设置单元格和单元格之间的距离
	04.bgcolor 整个表格的背景色 #ffc0cb :代表的是16进制的颜色码
	05.width 表格在浏览器中的宽度比


	td节点中的
	align="left" 默认
	align="right"
	align="center"
	-->
	</head>
	<body>
	<table border="1px" cellpadding="5px" cellspacing="5px"
	bgcolor="pink" width="50%">
	<tr>
	<td>第1行的第1列</td>
	<td>第1行的第2列</td>
	<td>第1行的第3列</td>
	</tr>
	<tr>
	<td>第2行的第1列</td>
	<td>第2行的第2列</td>
	<td>第3行的第3列</td>
	</tr>
	</table>





	</body>
	</html>

跨行跨列

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>跨行跨列</title>

	<!--
	都必须写在td中
	rowspan :跨行
	colspan:跨列
	-->
	</head>
	<body>

	<table border="1px" cellpadding="5px">
	<tr>
	<td colspan="3" align="center"> 学生成绩表</td>
	</tr>

	<tr>
	<td rowspan="2">张三</td>
	<td>math</td>
	<td>80</td>
	</tr>
	<tr>
	<td>java</td>
	<td>90</td>
	</tr>
	<tr>
	<td rowspan="2">李四</td>
	<td>math</td>
	<td>85</td>
	</tr>
	<tr>
	<td>java</td>
	<td>95</td>
	</tr>


	</table>

	</body>
	</html>

高级表格

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>高级表格</title>
	</head>
	<body>
	<table border="1" cellspacing="0" width="70%">
	<caption>年终数据报表</caption> <!--标题-->
	<thead bgcolor="red"> <!--页眉-->
	<tr>
	<th>月份</th>
	<th>收入</th>
	</tr>
	</thead>
	<tbody bgcolor="pink"> <!--主体-->
	<tr>
	<td>1月份</td>
	<td>5000</td>
	</tr>
	<tr>
	<td>2月份</td>
	<td>5000</td>
	</tr>
	<tr>
	<td>3月份</td>
	<td>6000</td>
	</tr>
	<tr>
	<td>4月份</td>
	<td>8000</td>
	</tr>
	</tbody>

	<tfoot bgcolor="green"> <!--页脚-->
	<tr>
	<td>平均月收入</td>
	<td>6000</td>
	</tr>
	<tr>
	<td>总收入</td>
	<td>24000</td>
	</tr>
	</tfoot>
	</table>


	</body>
	</html>

音频标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>音频标签</title>

	<!--
	audio:音频标签
	controls：是否显示控制条
	autoplay：是否自动播放
	-->
	</head>
	<body>
	<audio controls autoplay>
	<source src="../audio/music.mp3">
	</audio>
	</body>
	</html>

视频标签

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>视频标签</title>
	<!--
	video:视频标签
	controls：是否显示控制条
	autoplay：是否自动播放
	-->
	</head>
	<body>
	<video controls autoplay src="../video/video.mp4"> </video>
	</body>
	</html>

结构元素

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>结构元素</title>

	<!--

	用于网页的布局：

	header: 头部区域
	section：html页面中的一块独立的部分
	footer：脚部区域
	nav:导航菜单
	article:独立的文章内容
	aside：常用于侧边栏
	-->

	<style type="text/css">
	header{
	height: 20px;
	border: 1px solid red;
	}
	section{
	height: 1000px;
	border: 1px solid black;
	}
	footer{
	height: 50px;
	border: 1px solid blue;
	}
	</style>
	</head>
	<body>

	<header>
	</header>

	<section>
	</section>

	<footer>
	</footer>

	</body>
	</html>

内联框架

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>内联框架</title>
	<!--
	src ：指的是我们需要引入的外部文件地址

	需求：
	用户点击不同的超链接，在iframe框架中显示不同的页面！

	-->
	</head>
	<body>

	<a href="http://www.jd.com" target="myIframe">京东</a>
	<a href="http://www.taobao.com" target="myIframe">淘宝</a>
	<a href="http://www.baidu.com" target="myIframe">百度</a>

	<iframe name="myIframe" src="http://www.baidu.com" scrolling="no" width="500" height="500"></iframe>

	</body>
	</html>

3、CSS美化页面

【

css美化页面

	如果在我们一行文字中，想让某个文字凸显出来，使用span！

	1.字体样式
	font-style:字体的风格 italic normal
	font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900
	font-size:字体的大小 10px 2em rem pc pt
	font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。

	font：风格粗细大小类型
	在一起设置属性的时候，四种属性顺序不能颠倒！

	2.文本样式
	color:文本颜色 red 16进制颜色码 rgb rgba
	rgb(red,green,blue)正数取值 0-255
	rgba(red,green,blue,alpha)
	alpha的取值必须是0-1 0不显示 1正常显示
	text-align:文本元素的水平对齐方式
	center left right justify(两端对齐)
	line-height:文本的行高!
	如果想设置文本的垂直居中line-height的值必须等于height的值
	text-indent:设置首行缩进
	p{
	text-indent:2em; 设置p首行缩进2个字符
	}
	text-decoration:文本的装饰
	none:默认值
	underline:下划线
	overline:上划线
	line-through:删除线
	text-shadow:文本阴影

	3.display 可以实现块元素和行内元素的互换！
	inline inline-block block

	4.超链接伪类

	结构伪类选择器：
	div:nth-of-type() :nth-child
	css伪类是一个特殊的类！它针对于我们设置的css选择器起作用！

	css伪类的语法：
	选择器:伪类名｛
	属性:属性值;
	｝
	:link ==> 还没有点击超链接的样式
	:visited ==> 点击之后超链接的样式
	:hover ==> 鼠标悬停在超链接的样式
	:active ==> 鼠标点击未释放超链接的样式

	love hate
	如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！

	5.列表样式
	list-style-type 列表符号样式
	none 无符号
	disc 实心圆
	circle 空心圆
	decimal 数字 .....
	list-style-image 列表图片 url
	list-style-position 列表符号是否被li包含，默认是ul包含
	list-style 列表样式

	如果同时设置了type和image 那么image会覆盖type！和书写先后顺序没关系！

	6.背景样式
	">	background-image:背景图片
	background-position:背景位置
	background-repeat:背景重复方式
	repeat:默认方式水平和垂直都平铺
	no-repeat:不平铺，只有一个图片
	repeat-x:水平平铺
	repeat-y:垂直平铺

	background: 背景色背景图片背景位置平铺方式
	虽然没有固定顺序，但是我们有个默认的写法！

	如果我们相对背景图片的大小进行设置！那么请使用background-size
	background-size:contain;
	background-size：背景图片的尺寸
	auto:默认值，使用图片的大小
	cover:让整个图片正好填充整个盒子
	contain：让图片自动的方法或者缩小适应盒子的大小
	percentage：使用百分比手动的校正图片在盒子中的大小


	7.渐变属性
	linear-gradient:(方向,color1,color2)
	to top :方向
	red:第1个颜色
	black:第2个颜色
	IE浏览器是Trident内核，加前缀：-ms-
	Chrome浏览器是Webkit内核，加前缀：-webkit-
	Safari浏览器是Webkit内核，加前缀：-webkit-
	Opera浏览器是Blink内核，加前缀：-o-
	Firefox浏览器是Mozilla内核，加前缀：-moz-

】

Span

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>span标签</title>
	<!--span标签
	想让某些文字凸显出来
	-->
	<style type="text/css">
	div:first-child span{
	color: red;
	}

	div:last-child span{
	color: green;
	}
	/同时设置body中的子元素span的风格粗细大小类型/
	body>span{
	font: oblique bold 50px "楷体";
	color: red;
	}

	</style>



	</head>
	<body>
	<div><span>今天</span>是个好日子！</div>
	<div><span>明天</span>也是个好日子！</div>
	<span>a</span>bcdefg
	</body>
	</html>

字体样式

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>字体样式</title>

	<style type="text/css">

	div{
	/01.设置字体的类型/
	font-family:"楷体" ;
	/02.设置字体的风格/
	font-style: italic;
	/03.设置字体的大小可以设置数值/
	font-size:small;
	/04.设置字体的粗细可以设置数值/
	font-weight: bold;
	}
	/* 简写方式==》同时设置字体的风格,粗细,大小，类型顺序不能发生变化*/
	span{
	font:italic bolder 60px "楷体";
	}
	</style>
	</head>
	<body>

	<div><span>今天</span>是个好日子！</div>
	<div><span>明天</span>也是个好日子！</div>
	</body>
	</html>

display

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>display属性</title>
	<!-- 实现块元素和内联元素的相互转换 -->

	<!-- 需求：
	01.设置块元素2和3 在一行显示
	02.设置块元素2和3 的边框和宽度高度 ==>因为已经变成了内联元素所以宽度高度无效
	03.我们想块元素2和3 在一行显示但是还能设置宽度高度？？？display: inline-block;
	04.把内联元素3 变成块元素并且设置宽度高度
	-->
	<style type="text/css">
	div:nth-of-type(2),div:nth-of-type(3){
	/* display: inline; 内联元素*/
	display: inline-block; /* 行内块元素*/
	border: 1px solid red;
	height: 50px;
	width: 50px;
	}
	span:nth-child(3){
	border: 1px solid red;
	display:block;/块元素/
	height: 50px;
	width: 50px;
	}

	</style>

	</head>
	<body>

	<span>内联元素1</span>
	<span>内联元素2</span>
	<span>内联元素3</span>

	<div>块元素1</div>
	<div>块元素2</div>
	<div>块元素3</div>



	</body>
	</html>

文本样式

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>文本样式</title>

	<style type="text/css">
	/* 01.设置文本的颜色
	RGB： red green blue
	rgb(red ,green,blue) 每个颜色的数值范围是0-255
	rgba(50,100,50,0.2) 最后一个参数设置透明度 alpha 取值是0-1
	16进制的颜色码 #020202
	前两位代表R的分量
	中间两位代表G的分量
	后两位代表B的分量


	02.设置文本的对齐方式
	text-align center right left

	03.设置文本的垂直居中
	我们设置的line-height的值要和盒子的 height属性值一致！

	04.文本的装饰
	text-decoration: line-through; 删除线
	text-decoration: underline; 下划线
	text-decoration: overline; 上划线
	05.文本的阴影
	text-shadow:red 2px 3px 1px ;
	red:阴影的颜色
	2px：x轴的位移
	3px：y轴的位移
	1px：阴影的模糊范围值越小看到的文本越清晰
	*/
	div{
	/color: rgb(50,100,50);只是设置文本颜色/
	color: rgba(50,100,50,0.8); /设置颜色的同时设置透明度/
	text-align: left;/水平居中方式/
	text-indent: 2em;/首行缩进/
	border: 1px solid red;
	height: 100px;
	line-height:100px ; /行高/
	text-decoration: underline;
	text-shadow:red 2px 2px 1px ;/文本的阴影/
	}

	</style>


	</head>
	<body>
	<div>现价 500</div>
	<div>原价 900</div>
	</body>
	</html>

超链接伪类

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>超链接伪类</title>
	<!--
	a:link 我们还没有访问超链接时的样式
	a:visited 访问之后超链接的样式
	a:hover 鼠标悬停在超链接上的样式
	a:active 鼠标点击未释放
	顺序一定不能有误！
	-->


	<style type="text/css">
	a:link{
	color: red;
	}
	a:visited{
	color: greenyellow;
	}
	a:hover{
	color: deeppink;
	}
	a:active{
	color: yellow;
	}

	div[id="haha2"]:hover{
	color: red;
	text-shadow: pink 2px 2px 1px;
	}


	span:hover{
	background: red;
	}

	</style>

	</head>
	<body>

	<span>haha</span>
	<a href="#">大家辛苦了！</a>

	<div id="haha">哈哈</div>
	<div id="haha1">哈哈1</div>
	<div id="haha2">哈哈2</div>
	</body>
	</html>

列表样式

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>列表样式</title>

	<style type="text/css">
	/*01.去掉列表前面实心圆点
	list-style-type: none;
	list-style-type:设置前面默认的样式

	02.把默认的小圆点换成图片
	list-style-image: url("../images/a.jpg");

	03.设置li和图标的关系
	li是否包含前面的小图标
	*/
	li{
	list-style-position: inside;
	/* list-style-image: url("../images/a.jpg");
	list-style-type: disc;*/
	}
	</style>
	</head>
	<body>
	<ul>
	<li>第1项</li>
	<li>第2项</li>
	<li>第3项</li>
	<li>第4项</li>
	</ul>
	</body>
	</html>

背景样式

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>背景样式</title>

	<style type="text/css">

	div{
	border: 1px solid red;
	height: 200px;
	width: 200px;
	background-color: aqua; /* 01.给div增加背景颜色*/
	background-image: url("../images/b.png"); /* 02.给div增加背景图片图片会把颜色覆盖，其实颜色在图片后面*/
	background-repeat: no-repeat;/03.设置图片的填充方式/
	/* background-position: 20px 10px;04.设置图片定位设置size时需要注释*/
	/* background:color image position repeat ; 简写的规范*/
	/*
	background-size:contain;
	background-size：背景图片的尺寸
	auto:默认值，使用图片的大小
	cover:让整个图片正好填充整个盒子
	contain：让图片自动的方法或者缩小适应盒子的大小
	percentage：使用百分比手动的校正图片在盒子中的大小 100%;
	*/
	}


	</style>


	</head>
	<body>
	<div></div>


	</body>
	</html>

渐变属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>渐变属性</title>
	<!--
	01.线性渐变
	颜色按照从上到下或者从左到右等顺序发生的变化
	02.径向渐变
	不是按照直线的顺序！圆形，椭圆！从一个点向所有的方向混合！
	-->

	<style type="text/css">
	div{
	border: 1px solid red;
	height: 200px;
	width: 200px;
	background: linear-gradient(to left top,red,green);
	/* to top :方向
	red:第1个颜色
	black:第2个颜色
	IE浏览器是Trident内核，加前缀：-ms-
	Chrome浏览器是Webkit内核，加前缀：-webkit-
	Safari浏览器是Webkit内核，加前缀：-webkit-
	Opera浏览器是Blink内核，加前缀：-o-
	Firefox浏览器是Mozilla内核，加前缀：-moz-
	*/
	}

	</style>


	</head>
	<body>

	<div></div>

	</body>
	</html>

文本属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
	div{
	height: 50px;
	border: 1px solid red;
	line-height: 50px;
	text-align: center;
	}

	</style>
	</head>
	<body>

	<div>我想垂直居中</div>

	</body>
	</html>

4、浮动

网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
	这种元素自然排列的方式，我们称之为====》标准文档流！

	浮动 float
	左浮动
	右浮动
	浮动之后会脱离标准文档流

	溢出 overflow
	overflow:
	01.visible:默认显示
	02.scroll：以滚动条的形式显示溢出部分
	03.hidden：溢出部分隐藏
	04.auto：自动跳转

	我们书写了一个页面，里面有很多块元素，默认排版就是标准文档流！

	如果我们想让ul中的li能在一行显示！
	01.display
	02.浮动

	只要是元素设置了浮动就会脱离标准文档流!
	如果我们的父元素容不下浮动元素！
	可以选择是否显示溢出的元素！
	使用overflow!

	clear 清除浮动
	none 默认
	left 在左侧不允许浮动
	right 在右侧不允许浮动
	both 左右侧都不允许浮动



	防止父级边框塌陷的方式：
	01.给父级盒子设置宽高！
	02.在父级盒子的最后一个位置增加div没有内容
	<div class="clear"></div>
	给这个div增加样式
	.clear{
	border: 1px solid black;
	clear: both;
	}
	03.在父盒子中设置溢出处理
	overflow: hidden;
	04.最终使用的方式 :after伪类
	在父盒子中增加一个class="clear"
	.clear:after{
	display: block;/在#main div的左后一个位置增加一个块元素/
	content: ''; /块元素的内容什么都没有/
	clear: both; /清除浮动/
	}

网页布局

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>网页布局</title>
	<!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
	这种元素自然排列的方式，我们称之为====》标准文档流！-->
	</head>
	<body>
	<span>11111</span>
	<span>22222</span>
	<span>33333</span>
	<div>33333</div>
	<span>11111</span>
	<span>22222</span>
	<span>33333</span>
	</body>
	</html>

浮动属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>浮动属性</title>
	<style type="text/css">
	#main{/大盒子/
	height: 300px;
	width: 300px;
	border: 1px solid red;
	/*针对于浮动之后内容溢出的处理
	overflow:
	01.visible:默认显示
	02.scroll：以滚动条的形式显示溢出部分
	03.hidden：溢出部分隐藏
	04.auto：自动调整
	*/
	overflow: scroll;
	}

	#a,#b,#c{ /三个小盒子/
	height: 150px;
	width: 110px;
	border: 1px solid red;
	margin: 2px;
	/浮动之后会脱离标准文档流/
	float: right;
	}

	</style>

	</head>
	<body>
	<div id="main">
	<div id="a">这是第1个盒子</div>
	<div id="b">这是第2个盒子</div>
	<div id="c">这是第3个盒子</div>
	</div>
	</body>
	</html>

清除浮动属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>浮动属性</title>
	<style type="text/css">
	#main{/大盒子/
	height: 300px;
	width: 300px;
	border: 1px solid red;
	}

	#a,#b,#c{ /三个小盒子/
	height: 50px;
	width: 70px;
	border: 1px solid blue;
	margin: 2px;
	float: left;
	}/*第三个盒子清除左浮动
	#c{
	clear: left;
	}*/
	/清除第二盒子的左浮动/
	#b{
	clear: left;
	}

	</style>

	</head>
	<body>
	<div id="main">
	<div id="a">这是第1个盒子</div>
	<div id="b">这是第2个盒子</div>
	<div id="c">这是第3个盒子</div>
	</div>
	</body>
	</html>

防止父级边框塌陷

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>防止父级边框塌陷</title>

	<style type="text/css">
	#main{
	border: 1px solid red;
	/*01.给父级div设置高度
	height: 500px;*/
	/* 03. 设置溢出处理 overflow: hidden;*/
	}

	#a,#b,#c{ /三个小盒子/
	border: 1px solid red;
	float: left; /* 01.因为父级div没有设置高度和宽度！子的div右浮动了？脱离文档流位置没了*/
	}

	/*02. 增加空div 防止父级边框塌陷
	.clear{
	border: 1px solid black;
	clear: both;
	}*/

	/04.推荐使用 after伪类 /
	.clear:after{
	display: block;/在#main div的左后一个位置增加一个块元素/
	content: ''; /块元素的内容什么都没有/
	clear: both; /清除浮动/
	}
	</style>
	</head>
	<body>
	<div id="main" class="clear">
	<div id="a"><img src="../images/b.png"></div>
	<div id="b"><img src="../images/b.png"></div>
	<div id="c"><img src="../images/b.png"></div>
	<!--02. 增加空div 防止父级边框塌陷 <div class="clear"></div> -->
	</div>
	</body>
	</html>

5、网页动画

css变形：transform

 平移   translate（x,y）

        translateX

        translateY

 transform:translate(100px,0)

 旋转   rotate(deg) 旋转多少度，不会改变元素的形状

 缩放   scale（x,y） 如果只书写了一个值，默认第2个参数等于第一个值

        scaleX

        scaleY

 倾斜   skew（x,y） deg 会改变元素的形状

        skewX

        skewY

 如果说我们想给一个元素同时设置多个 变形属性！

   transform： 倾斜  缩放  旋转  ；

    多个属性之间使用空格隔开！

我们上面的变形属性都是一瞬间就完成了！没有看到中间过程！

如果想看到！使用css过渡属性  transition==>是一个动画的转换过程！

css过渡属性：

transition:property  duration  timing-function  delay

property:过渡或者动画的css属性,例如color,width,如果想都设置使用all

duration:完成过渡效果需要的时间 s为单位

timing-function: 过渡函数

   ease：默认值  速度由快到慢

   linear：匀速

   ease-in:越来越快

   ease-out:越来越慢

   ease-in-out:先加速后减速

delay：过渡开始的延迟时间  s为单位

CSS动画

01.创建关键帧

@keyframes  名称(animates){

    0%{

      css属性：属性值；

    }

    50%{

      css属性：属性值；

    }

    100%{

      css属性：属性值；

    }

}

02.怎么调用关键帧

animation：关键帧的名称  3s linear 1s;

CSS3变形

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>css3变形</title>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	}
	li{
	list-style: none;
	float: left;
	margin-left: 15px;
	background: rgba(230,130,0,0.5);
	border-radius: 5px;/圆角属性/
	}

	li:hover{
	/transform 变形属性/
	/* transform:translate(4px,5px) ;平移*/
	transform: rotate(90deg) scale(1.5);/* 旋转的同时放大1.5倍*/
	/* transform: skewY(20deg);
	transform: skewX(20deg); 倾斜属性*/
	}

	a{
	text-decoration: none;
	}

	a:hover{
	background: rgba(150,230,100,0.5);
	border-radius: 5px;
	}



	</style>
	</head>
	<body>
	<ul>
	<li><a href="#">服装城</a></li>
	<li><a href="#">美妆馆</a></li>
	<li><a href="#">超市</a></li>
	<li><a href="#">全球购</a></li>
	<li><a href="#">闪购</a></li>
	<li><a href="#">团购</a></li>
	<li><a href="#">拍卖</a></li>
	<li><a href="#">金融</a></li>
	</ul>
	</body>
	</html>

CSS3过渡

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>CSS3过渡</title>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	}


	div{
	width: 100px;
	height: 100px;
	background-color: pink;
	text-align: center;
	line-height: 100px;
	transition:all 3s linear 2s;
	/**
	all： transition-property
	3s : transition-duration
	linear: transition-timing-function
	2s: transition-delay
	*/
	}

	div:hover{
	background-color: red;
	font-size: 25px;
	transform: rotate(90deg) scale(1.5); /旋转的同时放大1.5倍这两个效果一次性到位/
	/*transition属性的值：
	01.transition-property:过渡的css属性的名称（color,font-size,background）等！
	想给多个属性设置过渡效果，使用all！
	02.transition-duration:过渡效果需要的时间！
	03.transition-timing-function:设置速度曲线！
	ease：慢速开始，之后变快！
	linear：匀速!
	ease-in:慢速开始！
	ease-out:慢速结束！
	04.transition-delay:过度效果开始前需要等待的时间！默认 0s!
	*/
	}



	</style>
	</head>
	<body>
	<div>
	大家辛苦了！
	</div>
	</body>
	</html>

CSS3动画

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>CSS3动画</title>
	<style type="text/css">
	div{
	height: 50px;
	width: 50px;
	background: pink;
	/调用动画/
	animation:animates 5s linear 1s 2;
	}
	/创建关键帧/
	@keyframes animates{
	0%{
	width: 0px;
	transform: translate(50px,0);
	}
	25%{
	width: 25px;
	height: 25px;
	transform: translate(150px,0) rotate(90deg);
	}
	50%{
	width: 50px;
	height: 50px;
	transform: translate(300px,0) rotate(180deg);
	}
	75%{
	width: 25px;
	height: 25px;
	transform: translate(150px,0) rotate(270deg);
	}
	100%{
	width: 50px;
	height: 50px;
	transform: translate(50px,0) rotate(360deg);
	}
	}



	</style>


	</head>
	<body>
	<div></div>
	</body>
	</html>

6、表单

常见的表单元素：

   文本框        type="text"    默认值

   密码框        type="password"

   单选按钮      type="radio"

            <input type="radio" name="sex" value="男">男

            <input type="radio" name="sex" value="女">女<br/>

          name属性值必须一致！否则会都能选择！

         value属性值必须设置！否则后台无法获取属性值！

         后台只能获取一个值！

   复选框        type="checkbox"

     name属性值必须一致！否则会都能选择！

     value属性值必须设置！否则后台无法获取属性值！

     后台获取时，需要做非空验证！

     单选按钮和 复选框 默认被选中使用checked

   列表框        type="select"

       默认被选中,在option中使用selected

   按钮          type="button"  普通按钮   只是一个按钮 后面学了js可以绑定事件

                 type="reset"   重置按钮   把表单中所有的元素内容变为初始值

                 type="submit"  提交按钮   会把表单中的所有内容提交到服务器

   多行文本域     type="textarea"

   邮箱          type="email"

   数字          type="number"

   滑块          type="range"

   搜索          type="search"

登陆页面

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>登录页面</title>
	<!--
	form表单的意义：
	01.获取用户的输入 ==》收集数据
	02.将用户的输入发送到服务器===》与服务器产生交互


	action:我们获取完用户的输入之后提交到的服务器地址！
	#:代表当前页面！
	也可以不书写！

	method：我们提交的方式！
	可以理解成我们
	普通人说话 get
	和
	聋哑人打手语 post
	get和post的区别安不安全相对而言

	01.get会在url地址栏中显示我们输入的数据
	post会在请求头中显示用户的输入
	F12之后选择 network 向下拉到页面的最底部有一个 form data
	这里有post请求的数据！

	02.http协议对get和post请求都没有长度限制
	如果对url的长度进行限制只有两种原因：
	001.浏览器自身的设置
	002.服务器的设置


	input标签中的常用属性：
	name：可以理解成标记！用于服务器获取我们这个表单中的元素值！必须的！
	value: 用户在页面中输入的值！我们一般可以不写！
	maxlength:文本框的最大字节数量
	size:表单元素的初始长度！

	比如说：<input type="text" name="userName" value="">
	那么再我们点击注册按钮的时候，
	会提交到服务器的数据是 userName="value的属性值"
	服务器根据 name的属性值，获取value的属性值!
	placeholder:占位符，提示语！不是value的值！只有在value属性值为空的时候显示！
	-->
	</head>
	<body>

	<form action="#" method="post">
	昵称: <input type="text" name="userName" size="100" placeholder="请输入用户名" maxlength="50"><br/>
	密码: <input type="password" name="pwd"><br/>
	性别:<input type="radio" name="sex" value="男" checked>男
	<input type="radio" name="sex" value="女">女<br/>
	爱好:<input type="checkbox" name="love" value="足球" checked>足球
	<input type="checkbox" name="love" value="乒乓球">乒乓球
	<input type="checkbox" name="love" value="羽毛球">羽毛球
	<input type="checkbox" name="love" value="篮球">篮球<br/>

	民族:<select name="nation" size="1">
	<option value="" >请选择</option>
	<option value="汉族" selected>汉族</option>
	<option value="满族">满族</option>
	<option value="" ></option>
	</select><br/>

	协议:<textarea name="protocol" rows="20" cols="20">
	xxx xxx
	xxx xxx
	xxx xxx
	</textarea>
	<br/>
	文件上传： <input type="file">
	选择颜色： <input type="color">
	日期： <input type="date">
	时间： <input type="time">
	邮箱:<input type="email" name="email"><br/>
	数字:<input type="number" name="num" max="50" min="1"><br/>
	滑块:<input type="range" max="200" value="150" step="50"><br/>
	搜索:<input type="search" name="search"><br/>
	QQ只读:<input name="qq" value="501804292" readonly><br/>
	隐藏域: <input type="hidden" name="hidden" value="a"><br/>


	<label> 密码: <input type="password" name="pwd"></label>
	<label for="pwd"> 密码: <input type="password" name="pwd" id="pwd"></label>
	<br/>

	正则验证手机号：<input name="phoneNum" required pattern="^1[34578]\d{9}$">

	<input name="userName" required placeholder="必填项">
	<input type="button" value="普通">
	<input type="reset" value="重置">
	<input type="submit" value="注册" disabled> <!-- disabled 按钮禁用-->

	<button type="submit" >button</button> <!-- 默认就是提交按钮，没有value属性-->

	</form>


	</body>
	</html>

7、初识CSS

CSS(Cascading Style Sheet)  级联（层叠）样式表！   网页样式的设计！

 96年 css1.0

 04年 css2.1

 10年 css3.0

优势：

  01.页面和样式的分离

  02.便于我们修改和使用

  03.多个页面的应用，css样式可以复用

  04.层叠，一个元素可以多次设置样式！

  05.页面压缩

 设置HTML文件样式的计算机语言！

 可以对网页中的文字，颜色，字体大小，边框，背景，高度，网页定位等样式的设定！

 例子：

   之前设计表格的时候！ 每一个单元格都是td！

   我们想让每个td的内容都居中显示？？？ 我们怎么做？？

   在每个td上 都加上align="center"!   但是麻烦！

 现在   我们可以通过 css的选择器 来统一给整个页面中的所有td设置样式！

  怎么设置呢？？

  td{    //页面中所有的td内容 水平居中！

     text-align:center;

    }

CSS的语法规则：

  选择器｛    //开发者模式   便于阅读

          属性1：值1;

          属性2：值2;

          属性3：值3;   //最后一个;可以省略不写！但是不建议省略！

         ｝

  选择器｛属性1：值1;属性2：值2;属性3：值3;｝ //生产者模式   减少内存

HTML中引入CSS样式的3种方式：

 例子：

     假如我们是一个包工头，现在需要对我们已经建好的楼房进行装修！

     两种选择：

       01.自己装修             == 》行内样式    <a href="#" style="color:red">百度</a>

       02.别人装修

           001.自己人装修      == 》内部样式

           002.其他人装修      == 》外部样式

  如果说自己人和其他人以及你自己都想干装修！

  肯定是自己说了算！！！！

  css样式的优先级：

  行内样式  >  内部样式 >  外部样式

  导入外部样式的两种方式：

      01.链接式   <link  rel="stylesheet"  href="外部文件位置"  type="text/css">

      02.导入式

          <style  type="text/css">

               @import "外部文件位置";

          </style>

 链接式的导入式的区别：

  01.链接式的link属性XHTML     @import 属于css2.1

  02.链接式优先加载css样式，再加载页面中的html内容！

  03.@import先加载页面中的html内容，再加载css样式！

  04.@import存在浏览器兼容性问题！

 css中最重要就是 选择器：

 选择器：

  1.基本选择器

      01.标签选择器  p{}   a{}  div{}

      02.类选择器   .a 获取页面中class属性值是a的元素   可以有N个

      <span class="a">第一个span标签</span>

      <span class="a">第二个span标签 </span>

      <span class="a">第三个span标签</span>

      <div class="a">第1个div标签</span>

      <div class="a">第2个div标签</span>

      03.id选择器  #a  获取页面中id属性值是a的元素  只能有1个

      <div  id="a"></div>

  2.高级选择器

      01.交集选择器

      02.并集选择器

      03.层次选择器

         01.后代选择器

         02.子选择器

         03.相邻兄弟选择器    之后的一个兄弟元素

         04.通用兄弟选择器    之后的所有兄弟元素

      04.结构伪类选择器   *****

      05.属性选择器  [属性=属性值]

标签选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>标签选择器</title>
	<!-- 内部样式设置 style标签应该写在head标签中
	<style type="text/css">
	h1{ /* h1 页面中所有的h1标签*/
	color: red; /color 属性 red 属性值/
	font-size: 50px;
	}
	</style> 我们css的优势之一是网页和样式的分离-->

	<!-- 链接式
	<link rel="stylesheet" type="text/css" href="css/first.css">-->

	<!--导入式-->
	<style type="text/css">
	@import "css/first.css";
	</style>

	</head>
	<body>
	<!--需求：让页面中所有的h1标签字体颜色为红色字体大小50px-->
	<h1 style="color: pink">这是1级标题</h1> <!--验证优先级-->
	<h1>这是1级标题</h1>
	<h1>这是1级标题</h1>




	</body>
	</html>

类选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>类选择器</title>
	<!--需求：让页面中的class属性值为box的盒子颜色变成红色-->
	<style type="text/css">
	.box{ /.box 类选择器选取页面中的class属性值为box的元素/
	color:red;
	}

	/* 我想让2 3 盒子也有这个样式*/
	.boxSize{
	font-size: 52px;
	}

	</style>
	</head>
	<body>

	<div class="boxSize">这是第1个盒子</div>
	<!--说明这个div同时具有两个class样式-->
	<div class="box boxSize">这是第2个盒子</div>
	<div class="box boxSize">这是第3个盒子</div>
	<div class="box">这是第4个盒子</div>

	</body>
	</html>

id选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>id选择器</title>
	<!--在一个页面中id属性值相同的而只能有一个！页面id唯一！-->

	<style type="text/css">
	/给id="box2"的元素设置颜色为红色/
	#box2{
	color: red;
	}
	/给id="box3"的元素设置字体大小 50px/
	#box3{
	font-size: 50px;
	}

	</style>
	</head>
	<body>
	<div>这是第1个盒子</div>
	<div id="box2">这是第2个盒子</div>
	<div id="box3">这是第3个盒子</div>
	<div>这是第4个盒子</div>
	</body>
	</html>

选择器的优先级

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>选择器的优先级</title>
	<!--需求：
	分别使用标签，类和id三种选择器设置div的样式
	-->
	<style type="text/css">
	div{
	color: red;
	}
	.myDiv{
	color: black;
	}
	#name{
	color: pink; /* 页面显示的是粉色*/
	}
	/*
	id选择器 > 类选择器 > 标签选择器
	*/

	</style>

	</head>
	<body>
	<div id="name" class="myDiv">开始验证优先级</div>

	</body>
	</html>

元素样式的继承性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>元素的继承性</title>
	<!-- 需求：
	给页面中id为first的div设置样式
	给页面中id为second的div设置样式

	-->

	<style type="text/css">
	#first{
	color: red;
	}

	#second{
	color: pink;
	}
	#third{
	color: greenyellow;
	}

	</style>
	</head>
	<body>
	<div id="first"> 第一个
	<div id="second"> 第二个
	<div id="third">
	第三个
	</div>
	</div>
	</div>
	</body>
	</html>

并集选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>并集选择器</title>
	<!-- 需求
	给id="mySpan1" ，class="mySpan2" 标签是div的所有元素
	设置相同的样式！
	-->
	<style type="text/css">
	/* 多个选择器都具有的样式. 每个选择器之间使用,隔开
	多个选择器没有顺序
	*/
	#mySpan1,.mySpan2,div{
	color:red;
	}
	</style>



	</head>
	<body>
	<div>第1个盒子</div>
	<div>第2个盒子</div>
	<span id="mySpan1">这是第1个span</span>
	<span class="mySpan2">这是第2个span</span>
	</body>
	</html>

交集选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<!-- 交集选择器的规则
	01：标签选择器+id选择器
	02：标签选择器+类选择器
	03.多个选择器直接连着写，不需要有符号隔开
	必须标签选择器在前！-->


	<style type="text/css">
	/* 需求：
	页面中 class="mySpan2" 并且标签是div的元素设置样式
	*/
	div.mySpan2{
	color: red;
	}





	</style>

	</head>
	<body>
	<div>第1个盒子</div>

	<div class="mySpan2">第2个盒子</div>

	<span id="mySpan1">这是第1个span</span>

	<span class="mySpan2">这是第2个span</span>
	</body>
	</html>

后代选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<!-- 需求：
	改变body中所有span元素的样式
	后代选择器中间使用空格隔开
	包含子和孙子等所有的子孙节点
	-->
	<style type="text/css">
	body span{
	color: red;
	}
	</style>



	</head>
	<body>

	<div> 儿子div1
	<span>相对于body来说是孙子span1</span>
	</div>

	<div>儿子div2
	<span>相对于body来说是孙子span2</span>
	</div>


	<span>相对于body来说是儿子span1</span>
	<span>相对于body来说是儿子span2</span>


	</body>
	</html>

子选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>子选择器</title>
	<!-- 需求：
	改变body中所有子元素是span的样式
	只包含子节点
	-->
	<style type="text/css">
	body>span{
	color: red;
	}
	/选择body中子元素是div的节点，如果div中还有其他的节点，也会随之改变/
	body>div{
	color: red;
	}
	</style>



	</head>
	<body>

	<div> 儿子div1
	<span>相对于body来说是孙子span1</span>
	</div>

	<div>儿子div2
	<span>相对于body来说是孙子span2</span>
	</div>


	<span>相对于body来说是儿子span1</span>
	<span>相对于body来说是儿子span2</span>


	</body>
	</html>

相邻兄弟选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>相邻兄弟节点选择器</title>
	<!-- 需求：
	改变id=""second"的div元素后面第一个兄弟节点的样式
	-->
	<style type="text/css">
	#second+span{
	color: red;
	}
	</style>



	</head>
	<body>

	<div> 儿子div1
	<span>相对于body来说是孙子span1</span>
	</div>

	<div id="second">儿子div2
	<span>相对于body来说是孙子span2</span>
	</div>


	<span>相对于body来说是儿子span1</span>
	<span>相对于body来说是儿子span2</span>


	</body>
	</html>

通用兄弟选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>通用兄弟选择器</title>
	<!-- 需求：
	改变id=""second"的div元素后面所有兄弟节点的样式
	-->
	<style type="text/css">
	#second~span{
	color: red;
	}
	</style>



	</head>
	<body>

	<div> 儿子div1
	<span>相对于body来说是孙子span1</span>
	</div>

	<div id="second">儿子div2
	<span>相对于body来说是孙子span2</span>
	</div>


	<span>相对于body来说是儿子span1</span>
	<span>相对于body来说是儿子span2</span>
	<span>相对于body来说是儿子span3</span>
	<span>相对于body来说是儿子span4</span>


	</body>
	</html>

结构伪类选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>结构伪类选择器</title>
	<!-- 不需要在节点上新增额外的id或者class属性，需要我们知道节点的位置（下标）-->
	<style type="text/css">
	/*01.改变ul中第一个li的样式
	ul li:first-child{
	color: red;
	}*/
	/*02.改变ul中最后一个li的样式
	ul li:last-child{
	color: red;
	}*/

	/*03.改变第3个div的样式
	body中如果第3个元素是div就改变样式，
	否则都没有效果！着重于顺序！
	body div:nth-child(3){
	color: red;
	}*/
	/*04.改变页面中第2个span元素的样式
	nth-of-type：先查询类型再看顺序
	body span:nth-of-type(2){
	color: red;
	}

	body div:nth-of-type(3){
	color: red;
	}
	*/
	</style>


	</head>
	<body>

	<div>div1</div>
	<div>div2</div>
	<span>span1</span>
	<div>div3</div>
	<span>span2</span>

	<ul>
	<li>第1个列表的第1项</li>
	<li>第1个列表的第2项</li>
	<li>第1个列表的第3项</li>
	<li>第1个列表的第4项</li>
	</ul>
	<ul>
	<li>第2个列表的第1项</li>
	<li>第2个列表的第2项</li>
	<li>第2个列表的第3项</li>
	<li>第2个列表的第4项</li>
	</ul>
	</body>
	</html>

属性选择器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>属性选择器</title>

	<style type="text/css">
	/* 01.改变元素id="first"的样式
	div[id="first"]{
	color: red;
	}*/
	/*02.改变所有id属性元素
	div[id]{
	color: red;
	}*/
	/*03.改变所有id属性值以h开头元素
	div[id^="h"]{
	color: red;
	}*/
	/*04.改变所有id属性值以a结尾元素
	div[id$="a"]{
	color: red;
	}*/
	/*04.改变所有id属性值包含i的元素
	div[id*="i"]{
	color: red;
	}*/


	</style>


	</head>
	<body>
	<div id="first">第1个</div>
	<div id="haha">第2个</div>
	<div id="heihei">第3个</div>
	<div>第4个</div>
	<div style="color: red;font-size: 50px">第5个</div>
	</body>
	</html>

8、盒子模型

盒子模型     div+css3

边框  border

border:1px  solid red;

border-color:边框颜色  上右下左四个边

border-top-color:上边框颜色

border-right-color:右边框颜色

border-bottom-color:下边框颜色

border-left-color:左边框颜色

border-width:边框粗细  上右下左四个边  thin  medium  thick 可以是像素

border-top-width

border-right-width

border-bottom-width

border-left-width

border-width:5px 10px ; 上下为5px  左右为10px

border-width:5px 10px  20px ;  上为5px  下为20px  左右为10px

border-style:边框样式

dashed  常用

solid   常用

none

hidden

dotted

double

简写：

border:1px  solid red; 规范写法

       粗细  样式  颜色！

margin:外边距

margin-top

margin-right

margin-bottom

margin-left

margin:5px 10px;上下外边距为5px  左右外边距为10px

margin:0px auto; 网页中的盒子居中显示！

前提：

  01.必须是块元素

  02.固定宽度

padding:内边距

padding-top

padding-right

padding-bottom

padding-left

padding:5px 10px;上下内边距为5px  左右内边距为10px

盒子模型总尺寸=内容宽度+padding+border+margin

box-sizing:设置盒子模型的大小规则

content-box:盒子的总尺寸

border-box:盒子的宽度或者高度 等于  内容的宽度或者高度

inherit:继承父盒子

圆角属性

border-radius:左上 右上  右下 左下

盒子阴影

 box-shadow:inset 10px 10px 1px pink;

inset:阴影类型   内 外

x轴

y轴

阴影半径

阴影颜色

边框border

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>边框border</title>

	<!--
	border的常用属性：
	01. 设置边框的颜色 border-color
	02. 设置边框的粗细 border-width
	03. 设置边框的样式 border-style


	-->

	<style type="text/css">
	/设置盒子的宽高/
	div{
	height: 50px;
	width: 50px;
	/* 设置盒子的上边框
	border-top-color: red;
	border-top-width: 1px;
	border-top-style: dashed;
	*/
	/*同时设置四个边框
	border-color: red;
	border-width: 2px;
	border-style: dashed;
	*/
	/简写方式虽然没有顺序但是我们推荐使用先粗细再样式最后颜色！/
	border: 1px solid red;
	}
	</style>

	</head>
	<body>

	<div></div>
	</body>
	</html>

外边距margin

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>外边距margin</title>

	<style type="text/css">
	{ /去掉网页中所有元素的内外边距*/
	margin: 0px;
	padding: 0px;
	}


	div{
	/设置盒子的宽高/
	height: 150px;
	width: 150px;
	/设置盒子的边框/
	border: 1px solid red;
	/*设置外边距元素以左上角为准
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 50px;*/
	/*设置上下20px 左右50px
	设置边距的时候顺序是上右下左！
	margin: 20px 50px;*/
	margin: 20px;
	}

	</style>

	</head>
	<body>
	<div><img src="../images/b.png" alt="这是一个图片"></div>
	<div><img src="../images/b.png" alt="这是一个图片"></div>
	</body>
	</html>

内边距padding

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>内边距padding</title>

	<style type="text/css">
	{ /去掉网页中所有元素的内外边距*/
	margin: 0px;
	padding: 0px;
	}
	/设置大盒子/
	#bigBox{
	/设置盒子的宽高/
	height: 200px;
	width: 200px;
	/设置盒子的边框/
	border: 1px solid red;
	/padding-left:5px ;设置小盒子距离大盒子的左内边距/
	}
	/设置小盒子/
	#image{
	/设置盒子的宽高/
	height: 150px;
	width: 150px;
	/设置盒子的边框/
	border: 1px dashed pink;
	margin-left: 5px;
	}

	</style>

	</head>
	<body>
	<div id="bigBox"> <!--大盒子-->
	<div id="image"> <!--小盒子-->
	<img src="../images/b.png" alt="这是一个图片"><!--内容-->
	</div>
	</div>
	</body>
	</html>

网页居中

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>网页居中</title>
	<!--
	网页居中的必要条件：
	01.必须是一个块元素
	02.必须设置固定宽度
	-->
	<style type="text/css">
	{ /去掉网页中所有元素的内外边距*/
	margin: 0px;
	padding: 0px;
	}
	/设置大盒子/
	div{
	height: 200px; /设置盒子的宽高/
	width: 200px;
	/设置盒子的边框/
	border: 1px solid red;
	/通过外边距设置居中/
	margin:0px auto;
	}

	</style>

	</head>
	<body>

	<div> <!--大盒子-->
	</div>

	</body>
	</html>

盒子的尺寸boxsizing

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>盒子的尺寸boxsizing</title>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	}
	#father{/* 大盒子*/
	width: 100px;
	height: 100px;
	border: 1px solid red;
	box-sizing: border-box;
	}

	#son{/* 小盒子*/
	width: 40px;
	height: 40px;
	border: 1px solid yellowgreen;
	/* box-sizing: content-box;默认值。显示盒子总尺寸*/
	/* box-sizing: border-box; 盒子的高度和宽度就是内容的高度和宽度*/
	/如果大盒子设置了盒子的尺寸我们小盒子可以适应大盒子尺寸/
	box-sizing: inherit;
	}


	</style>
	</head>
	<body>
	<div id="father">
	<div id="son"></div>
	</div>
	</body>
	</html>

圆角属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>圆角属性</title>

	<style type="text/css">
	div{
	height: 50px;
	width: 50px;
	border: 1px solid red;

	border-radius: 5px 20px;/* 左上右下 5px 右上左下 20px*/
	/*设置圆角属性简写默认是左上右上右下左下顺时针方向
	border-radius: 5px;*/
	}

	</style>
	</head>
	<body>

	<div></div>
	</body>
	</html>

设置半圆

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>设置半圆</title>
	<style type="text/css">
	div{
	background: pink;
	margin: 20px;
	}
	div:nth-of-type(1){
	width: 100px;
	height: 50px;
	border-radius: 50px 50px 0 0;/* 左上和右上*/
	}

	div:nth-of-type(2){
	width: 100px;
	height: 50px;
	border-radius: 0 0 50px 50px ;/* 左下和右下*/
	}
	div:nth-of-type(3){
	width: 50px; /高度和宽度需要调整/
	height: 100px;
	border-radius:50px 0 0 50px ;/* 左上和左下*/
	}
	div:nth-of-type(4){
	width: 50px;
	height: 100px;
	border-radius: 0 50px 50px 0 ;/* 右上和右下*/
	}



	</style>

	</head>
	<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</body>
	</html>

设置圆形和扇形

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>设置圆形和扇形</title>
	<style type="text/css">
	div{
	background: pink;
	margin: 20px;
	}
	/设置圆形/
	div:nth-of-type(1){
	width: 50px;
	height: 50px;
	border-radius: 50px;
	}

	div:nth-of-type(2){
	width: 50px;
	height: 50px;
	border-radius: 50px 0 0 0;/* 左上*/
	}

	div:nth-of-type(3){
	width: 50px;
	height: 50px;
	border-radius: 0 50px 0 0;/* 右上*/
	}

	div:nth-of-type(4){
	width: 50px;
	height: 50px;
	border-radius: 0 0 50px 0;/* 右下*/
	}

	div:nth-of-type(5){
	width: 50px;
	height: 50px;
	border-radius: 0 0 0 50px;/* 左下*/
	}



	</style>

	</head>
	<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</body>
	</html>

盒子阴影

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style type="text/css">
	div{
	height: 50px;
	width: 50px;
	border: 1px solid red;/*
	box-shadow: 10px 10px 1px pink; 外阴影*/
	box-shadow:inset 10px 10px 10px pink; /内阴影/
	}

	</style>

	</head>
	<body>
	<div></div>
	</body>
	</html>

9、定位

定位：  position

  1.static 默认值  没有定位

  2.relative 相对定位，参照物是自身原来的位置

      01.  参照物是自身原来的位置

      02.  不会脱离标准文档流，对父级盒子和相邻的盒子不会产生影响

      03.  自身之前的位置会保留

  3.absolute 绝对定位，参照物是当前盒子的父级

      01.参照物是当前盒子的父级

      02.父级必须是设置了定位（一般父级都是相对定位）

      03.如果找不到祖先元素，以浏览器为参照物

      04.会脱离标准文档流，

          如果相邻的盒子没有设置定位属性，会产生影响，

          如果相邻的盒子设置定位属性，不会产生影响，

      05.自身之前的位置不会保留

  4.fixed    固定定位，参照物是浏览器

 顺序离我们最近的是

 fixed > relative  > absolute > static

z-index:

设置相同层面的元素  堆叠顺序   默认值 是0   值越大  离我们越近

定位属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>定位属性</title>
	<!--
	position
	01.static ：默认，没有定位！离我们最远
	02.absolute：绝对定位
	001.脱离了标准文档流
	002.位置发生变化之后，位置不会被保留!后续元素会顶替之前的位置
	003.参照离这个设置了定位属性的最近的父级元素！如果没有就以浏览器为准
	03.relative：相对定位
	001.相对于自身原来的位置
	002.没有脱离标准文档流
	003.位置发生变化之后，位置会被保留
	04.fixed：固定定位
	相对于浏览器
	-->

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	}

	div{
	height: 50px;
	width: 50px;
	}
	#box{ /大盒子/
	height: 300px;
	width: 300px;
	border: 2px solid red;
	}



	#box div:nth-of-type(1){
	background: red;
	/绝对定位/
	position: absolute;
	left: 20px; /* 距离父级元素左边20px*/
	}

	#box div:nth-of-type(2){
	background: orange;
	position:static ;/默认值/
	}

	#box div:nth-of-type(3){
	background: pink;
	/相对定位/
	position: relative;
	bottom:20px;
	}



	#box div:nth-of-type(4){
	background: red;
	/固定定位/
	position: fixed;
	left: 30px;
	top: 30px;
	}

	#box div:nth-of-type(5){ /如果两个盒子设置的定位属性相同，默认按照html结构元素顺序后面会覆盖前面/
	background: greenyellow;
	/*固定定位
	position: fixed;
	left: 30px;
	top: 30px;*/
	}

	/*层级关系
	固定定位 > 相对定位 > 绝对定位 > 默认static
	*/

	</style>

	</head>
	<body>
	<div id="box">
	<div>第1个盒子</div>
	<div>第2个盒子</div>
	<div>第3个盒子</div>
	<div>第4个盒子</div>
	<div>第5个盒子</div>
	</div>
	</body>
	</html>

z-index属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>z-index属性</title>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	}
	li{
	list-style: none;
	}
	#content{
	width: 350px;
	height: 300px;
	border: 1px solid red;
	margin: 0px auto;
	}

	.tipBg{ /带背景的/
	background: gray; /可以使用 rgba/
	opacity: 0.5;
	filter: alpha(opacity=50);/解决低版本IE兼容性/
	}
	.tipBg,.tipText{ /都需要跑到图片上去/
	position: absolute; /* 都是绝对定位*/
	height: 25px;
	line-height: 25px;
	width: 331px; ;
	top: 102px;
	}

	.tipText{
	z-index:1;/设置相同层面的元素堆叠顺序默认值是0 值越大离我们越近/
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div id="content">
	<ul>
	<li><img src="../images/maple.jpg" alt="香山红叶" /></li>
	<li class="tipText">京秋魅力•相约共赏香山红叶</li>
	<li class="tipBg"></li>
	<li>时间：11月16日星期六 8:30</li>
	<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
	</ul>
	</div>
	</body>
	</html>

随机推荐

[php]php总结（1）
1.变量可以连续传递赋值2.var_dump()打印变量信息3.isset()与unset()4.可变变量$p = "temp";$$p则表示$temp变量,即最右边的变量的值为下 ...
shell if判断中常用的a-z表达式含义
shell if判断中常用的a-z表达式含义可通过在在linux中man test命令查看下列参数的详细用法 [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 ...
J - Clairewd’s message HDU - 4300（扩展kmp）
题目链接:https://cn.vjudge.net/contest/276379#problem/J 感觉讲的很好的一篇博客:https://subetter.com/articles/extend ...
Java NIO 之 Channel（通道）
历史回顾: Java NIO 概览 Java NIO 之 Buffer(缓冲区) 其他高赞文章: 面试中关于Redis的问题看这篇就够了一文轻松搞懂redis集群原理及搭建与使用一 Channel ...
aarch64_n2
nodejs-is-dotfile-1.0.2-2.fc26.noarch.rpm 2017-02-12 00:27 9.5K fedora Mirroring Project nodejs-is-e ...
Java关于网络编程回顾
一.Java网络编程三要素:1.IP地址:是要确定发送的地址,IP地址一般分为5类. 2.端口:要确定发送的程序是哪一个,端口的范围是0--65535,其中0-1024是系统使用或保留端口 3.协议: ...
UrlRouteModule
一.请求流程当一个请求发往ASP.net MVC站点时的情景,IIS收到请求并将请求转到ASP.net,然后根据URL,或者更确切来说:被请求文件的扩展名.在IIS7 integrated模式下(默 ...
Python爬虫学习1: Requests模块的使用
Requests函数库是学习Python爬虫必备之一, 能够帮助我们方便地爬取. Requests: 让HTTP服务人类. 本文主要参考了其官方文档. Requests具有完备的中英文文档, 能完全满 ...
python面向对象（四）之抽象类与接口
学过java的应该知道java有抽象类和接口的那么python呢?(以前写的关于java抽象类的笔记java抽象类与接口) python作为一个动态语言,没有强类型的检查,而是以鸭子类型的方式提现 ...
Extjs6设置Store、Ajax、form的请求方式（GET、POST）
Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...

1、初识html

第一个网页html

标题标签

段落标签

特殊字符

图片标签

超链接

锚链接本页面跳转

锚链接需要的页面

块元素和内联元素

2、列表表格和媒体元素

无序列表

有序列表

自定义标签

表格

跨行跨列

高级表格

音频标签

视频标签

结构元素

内联框架

3、CSS美化页面

【

】

Span

字体样式

display

文本样式

超链接伪类

列表样式

背景样式

渐变属性

文本属性

4、浮动

网页布局

浮动属性

清除浮动属性

防止父级边框塌陷

5、网页动画

CSS3变形

CSS3过渡

CSS3动画

6、表单

登陆页面

7、初识CSS

标签选择器

类选择器

id选择器

选择器的优先级

元素样式的继承性

并集选择器

交集选择器

后代选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

结构伪类选择器

属性选择器

8、盒子模型

边框border

外边距margin

内边距padding

网页居中

盒子的尺寸boxsizing

圆角属性

设置半圆

设置圆形和扇形

盒子阴影

9、定位

定位属性

z-index属性

随机推荐

相关文章