总结html

时间：2017-11-04 22:23:59 阅读：138 评论：0 收藏：0 [点我收藏+]

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>

总结html

标签：之一内容 cte art 编辑 method 编码格式存在侧边栏

原文地址：http://www.cnblogs.com/yunfeioliver/p/7784681.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行