总结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


	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

-->
	-->
	-->
	-->
	-->

	<!--
	meta:设置网页相关的元信息（meta-information）!
	比如：设置编码格式，搜索关键字，描述信息，页面跳转等。。。。
	meta常用的属性和属性值：
	01.charset：编码格式
	02.http-equiv：把content属性关联到我们的http头部！
	常用的属性值：
	001.keywords ：搜索关键字
	002.description：描述当前页面的信息
	003.refresh ：跳转页面

	03.content:定义和http-equiv或者name属性的对应值
	-->
	-->
	-->

	head>

	-->
	这是我的第一个页面！
	body>
	html>

标题标签

<!DOCTYPE html>
	html>


	title>
	<!--
	标题标签： h1-h6 其他的都没有效果！
	会自动换行！块元素（自己独占一行的元素）！
	-->
	head>
	body>
	h3>
	h4>
	h5>
	h6>
	h7>
	8级标题


	body>
	html>

段落标签

<!DOCTYPE html>
	html>


	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>


	title>
	<!--
	虽然有些特殊字符我们可以在页面上显示！但是不允许直接书写！
	需要特殊的符号来代替我们的特殊字符！
	特殊符号对照表：http://www.jb51.net/onlineread/htmlchar.htm
	-->
	head>
	body>
	br/>
	br/>
	br/>
	br/>
	br/>
	<!--


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

图片标签

<!DOCTYPE html>
	html>


	title>
	<!--
	常见的图片格式：
	bmp,gif,png,jpg! 压缩（率）比！

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

	src :指的是图片的位置！绝对不能写成绝对路径！
	项目中需要的所有文件，都在项目中的images文件夹中保存！
	src就写成项目的相对路径！
	title:鼠标放在图片上的悬停文字,如果没有alt属性，图片不显示时，显示title
	alt:不显示图片的时候替换文字
	height:高度
	width: 宽度
	-->
	head>
	body>


	body>
	html>

超链接

<!DOCTYPE html>
	html>


	title>
	<!--
	01.普通的超链接
	02.锚链接
	03.功能性链接

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

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

	br/>
	br/>
	br/>

	<!--
	把图片嵌套在超链接中！
	-->


	a>
	body>
	html>

锚链接本页面跳转

<!DOCTYPE html>
	html>


	title>
	<!--
	锚链接：
	01.从本页面的A位置跳转本页面的B位置使用 #+标记名称
	02.从本页面的A位置跳转其他页面的B位置使用页面名+#+标记名称
	name:标记的名称
	-->
	head>
	body>
	div>
	div>








	-->
	-->
	body>
	html>

锚链接需要的页面

<!DOCTYPE html>
	html>


	title>
	head>
	body>








	a>
	body>
	html>

块元素和内联元素

<!DOCTYPE html>
	html>


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


	我是一个小盒子
	div>

	a>


	body>
	html>

2、列表表格和媒体元素

无序列表

<!DOCTYPE html>
	html>


	title>
	<!--
	什么是列表
	列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，
	以便浏览者能更快捷地获得相应的信息！

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


	body>
	html>

有序列表

<!DOCTYPE html>
	html>


	title>
	<!--
	01.有顺序，前面默认是阿拉伯数字
	02.适用与试卷和问卷调查！
	-->
	head>
	body>
	ol>
	li>
	li>
	li>
	ol>
	body>
	html>

自定义标签

<!DOCTYPE html>
	html>


	title>
	<!--
	01.每个dt dd都独占一行
	02.默认前面没有任何标记
	03.适用于一个标题下，有多个列表项的场景
	-->

	head>
	body>

	dl>
	dt>
	dd>
	dd>

	dt>
	dd>
	dd>
	dl>

	body>
	html>

表格

<!DOCTYPE html>
	html>


	title>
	<!--
	01.简单易用，便于阅读
	02.结构简单

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


	td节点中的



	-->
	head>
	body>


	tr>
	td>
	td>
	td>
	tr>
	tr>
	td>
	td>
	td>
	tr>
	table>





	body>
	html>

跨行跨列

<!DOCTYPE html>
	html>


	title>

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


	tr>
	td>
	tr>

	tr>
	td>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>
	tr>
	td>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>


	table>

	body>
	html>

高级表格

<!DOCTYPE html>
	html>


	title>
	head>
	body>

	-->
	-->
	tr>
	th>
	th>
	tr>
	thead>
	-->
	tr>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>
	tbody>

	-->
	tr>
	td>
	td>
	tr>
	tr>
	td>
	td>
	tr>
	tfoot>
	table>


	body>
	html>

音频标签

<!DOCTYPE html>
	html>


	title>

	<!--
	audio:音频标签
	controls：是否显示控制条
	autoplay：是否自动播放
	-->
	head>
	body>
	autoplay>

	audio>
	body>
	html>

视频标签

<!DOCTYPE html>
	html>


	title>
	<!--
	video:视频标签
	controls：是否显示控制条
	autoplay：是否自动播放
	-->
	head>
	body>
	video>
	body>
	html>

结构元素

<!DOCTYPE html>
	html>


	title>

	<!--

	用于网页的布局：

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


	header{
	px;
	red;
	}
	section{
	px;
	black;
	}
	footer{
	px;
	blue;
	}
	style>
	head>
	body>

	header>
	header>

	section>
	section>

	footer>
	footer>

	body>
	html>

内联框架

<!DOCTYPE html>
	html>


	title>
	<!--
	src ：指的是我们需要引入的外部文件地址

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

	-->
	head>
	body>

	a>
	a>
	a>

	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>


	title>
	<!--span标签
	想让某些文字凸显出来
	-->

	span{
	red;
	}

	span{
	green;
	}
	*/
	span{

	red;
	}

	style>



	head>
	body>
	div>
	div>
	span>bcdefg
	body>
	html>

字体样式

<!DOCTYPE html>
	html>


	title>



	div{
	*/

	*/
	italic;
	*/
	small;
	*/
	bold;
	}
	*/
	span{

	}
	style>
	head>
	body>

	div>
	div>
	body>
	html>

display

<!DOCTYPE html>
	html>


	title>
	-->

	<!-- 需求：
	01.设置块元素2和3 在一行显示
	02.设置块元素2和3 的边框和宽度高度 ==>因为已经变成了内联元素所以宽度高度无效
	03.我们想块元素2和3 在一行显示但是还能设置宽度高度？？？display: inline-block;
	04.把内联元素3 变成块元素并且设置宽度高度
	-->

	3){
	*/
	*/
	red;
	px;
	px;
	}
	3){
	red;
	*/
	px;
	px;
	}

	style>

	head>
	body>

	span>
	span>
	span>

	div>
	div>
	div>



	body>
	html>

文本样式

<!DOCTYPE html>
	html>


	title>


	/* 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{
	*/
	*/
	*/
	*/
	red;
	px;
	*/
	underline;
	*/
	}

	style>


	head>
	body>
	div>
	div>
	body>
	html>

超链接伪类

<!DOCTYPE html>
	html>


	title>
	<!--
	a:link 我们还没有访问超链接时的样式
	a:visited 访问之后超链接的样式
	a:hover 鼠标悬停在超链接上的样式
	a:active 鼠标点击未释放
	顺序一定不能有误！
	-->



	:link{
	red;
	}
	:visited{
	greenyellow;
	}
	:hover{
	deeppink;
	}
	:active{
	yellow;
	}

	:hover{
	red;
	px;
	}


	:hover{
	red;
	}

	style>

	head>
	body>

	span>
	a>

	div>
	div>
	div>
	body>
	html>

列表样式

<!DOCTYPE html>
	html>


	title>


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

	02.把默认的小圆点换成图片


	03.设置li和图标的关系
	li是否包含前面的小图标
	*/
	li{
	inside;

	*/
	}
	style>
	head>
	body>
	ul>
	li>
	li>
	li>
	li>
	ul>
	body>
	html>

背景样式

<!DOCTYPE html>
	html>


	title>



	div{
	red;
	px;
	px;
	*/
	*/
	*/
	*/
	*/
	/*
	background-size:contain;
	background-size：背景图片的尺寸
	auto:默认值，使用图片的大小
	cover:让整个图片正好填充整个盒子
	contain：让图片自动的方法或者缩小适应盒子的大小
	percentage：使用百分比手动的校正图片在盒子中的大小 100%;
	*/
	}


	style>


	head>
	body>
	div>


	body>
	html>

渐变属性

<!DOCTYPE html>
	html>


	title>
	<!--
	01.线性渐变
	颜色按照从上到下或者从左到右等顺序发生的变化
	02.径向渐变
	不是按照直线的顺序！圆形，椭圆！从一个点向所有的方向混合！
	-->


	div{
	red;
	px;
	px;
	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>

	body>
	html>

文本属性

<!DOCTYPE html>
	html>


	title>


	div{
	px;
	red;
	px;
	center;
	}

	style>
	head>
	body>

	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增加样式
	.clear{
	border: 1px solid black;
	clear: both;
	}
	03.在父盒子中设置溢出处理
	overflow: hidden;
	04.最终使用的方式 :after伪类

	.clear:after{
	display: block;/在#main div的左后一个位置增加一个块元素/
	content: ''; /块元素的内容什么都没有/
	clear: both; /清除浮动/
	}

网页布局

<!DOCTYPE html>
	html>


	title>
	<!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
	-->
	head>
	body>
	span>
	span>
	span>
	div>
	span>
	span>
	span>
	body>
	html>

浮动属性

<!DOCTYPE html>
	html>


	title>

	*/
	px;
	px;
	red;
	/*针对于浮动之后内容溢出的处理
	overflow:
	01.visible:默认显示
	02.scroll：以滚动条的形式显示溢出部分
	03.hidden：溢出部分隐藏
	04.auto：自动调整
	*/
	scroll;
	}

	*/
	px;
	px;
	red;
	px;
	*/
	right;
	}

	style>

	head>
	body>

	div>
	div>
	div>
	div>
	body>
	html>

清除浮动属性

<!DOCTYPE html>
	html>


	title>

	*/
	px;
	px;
	red;
	}

	*/
	px;
	px;
	blue;
	px;
	left;
	/*第三个盒子清除左浮动
	#c{
	clear: left;
	*/
	*/
	#b{
	left;
	}

	style>

	head>
	body>

	div>
	div>
	div>
	div>
	body>
	html>

防止父级边框塌陷

<!DOCTYPE html>
	html>


	title>


	#main{
	red;
	/*01.给父级div设置高度
	*/
	*/
	}

	*/
	red;
	*/
	}

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

	*/
	:after{
	*/
	*/
	*/
	}
	style>
	head>
	body>

	div>
	div>
	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>


	title>


	*{
	px;
	px;
	}
	li{
	none;
	left;
	px;
	0.5);
	*/
	}

	:hover{
	*/
	*/
	*/
	/* transform: skewY(20deg);
	*/
	}

	a{
	none;
	}

	:hover{
	0.5);
	px;
	}



	style>
	head>
	body>
	ul>
	li>
	li>
	li>
	li>
	li>
	li>
	li>
	li>
	ul>
	body>
	html>

CSS3过渡

<!DOCTYPE html>
	html>


	title>


	*{
	px;
	px;
	}


	div{
	px;
	px;
	pink;
	center;
	px;
	s;
	/**
	all： transition-property
	3s : transition-duration
	linear: transition-timing-function
	2s: transition-delay
	*/
	}

	:hover{
	red;
	px;
	*/
	/*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>


	title>

	div{
	px;
	px;
	pink;
	*/
	2;
	}
	*/
	animates{
	0%{
	px;
	0);
	}
	25%{
	px;
	px;
	deg);
	}
	50%{
	px;
	px;
	deg);
	}
	75%{
	px;
	px;
	deg);
	}
	100%{
	px;
	px;
	deg);
	}
	}



	style>


	head>
	body>
	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>


	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:表单元素的初始长度！


	那么再我们点击注册按钮的时候，

	服务器根据 name的属性值，获取value的属性值!
	placeholder:占位符，提示语！不是value的值！只有在value属性值为空的时候显示！
	-->
	head>
	body>


	br/>
	br/>
	checked>男
	br/>
	checked>足球


	br/>


	option>
	option>
	option>
	option>
	br/>


	xxx xxx
	xxx xxx
	xxx xxx
	textarea>
	br/>




	br/>
	br/>
	br/>
	br/>
	br/>
	br/>


	label>
	label>
	br/>






	-->

	-->

	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  ></div>

  2.高级选择器
      01.交集选择器
      02.并集选择器
      03.层次选择器
         01.后代选择器
         02.子选择器
         03.相邻兄弟选择器    之后的一个兄弟元素
         04.通用兄弟选择器    之后的所有兄弟元素

      04.结构伪类选择器   *****
      05.属性选择器  [属性=属性值]

标签选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 内部样式设置 style标签应该写在head标签中

	h1{ /* h1 页面中所有的h1标签*/
	color: red; /color 属性 red 属性值/
	font-size: 50px;
	}
	-->

	<!-- 链接式
	-->

	-->


	style>

	head>
	body>
	-->
	-->
	h1>
	h1>




	body>
	html>

类选择器

<!DOCTYPE html>
	html>


	title>
	-->

	*/
	red;
	}

	*/
	.boxSize{
	px;
	}

	style>
	head>
	body>

	div>
	-->
	div>
	div>
	div>

	body>
	html>

id选择器

<!DOCTYPE html>
	html>


	title>
	-->


	*/
	#box2{
	red;
	}
	*/
	#box3{
	px;
	}

	style>
	head>
	body>
	div>
	div>
	div>
	div>
	body>
	html>

选择器的优先级

<!DOCTYPE html>
	html>


	title>
	<!--需求：
	分别使用标签，类和id三种选择器设置div的样式
	-->

	div{
	red;
	}
	.myDiv{
	black;
	}
	#name{
	*/
	}
	/*
	id选择器 > 类选择器 > 标签选择器
	*/

	style>

	head>
	body>
	div>

	body>
	html>

元素样式的继承性

<!DOCTYPE html>
	html>


	title>
	<!-- 需求：
	给页面中id为first的div设置样式
	给页面中id为second的div设置样式

	-->


	#first{
	red;
	}

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

	style>
	head>
	body>



	第三个
	div>
	div>
	div>
	body>
	html>

并集选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 需求

	设置相同的样式！
	-->

	/* 多个选择器都具有的样式. 每个选择器之间使用,隔开
	多个选择器没有顺序
	*/
	div{
	red;
	}
	style>



	head>
	body>
	div>
	div>
	span>
	span>
	body>
	html>

交集选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 交集选择器的规则
	01：标签选择器+id选择器
	02：标签选择器+类选择器
	03.多个选择器直接连着写，不需要有符号隔开
	-->



	/* 需求：

	*/
	.mySpan2{
	red;
	}





	style>

	head>
	body>
	div>

	div>

	span>

	span>
	body>
	html>

后代选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 需求：
	改变body中所有span元素的样式
	后代选择器中间使用空格隔开
	包含子和孙子等所有的子孙节点
	-->

	span{
	red;
	}
	style>



	head>
	body>

	div> 儿子div1
	span>
	div>

	div>儿子div2
	span>
	div>


	span>
	span>


	body>
	html>

子选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 需求：
	改变body中所有子元素是span的样式
	只包含子节点
	-->

	span{
	red;
	}
	*/
	div{
	red;
	}
	style>



	head>
	body>

	div> 儿子div1
	span>
	div>

	div>儿子div2
	span>
	div>


	span>
	span>


	body>
	html>

相邻兄弟选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 需求：

	-->

	span{
	red;
	}
	style>



	head>
	body>

	div> 儿子div1
	span>
	div>


	span>
	div>


	span>
	span>


	body>
	html>

通用兄弟选择器

<!DOCTYPE html>
	html>


	title>
	<!-- 需求：

	-->

	span{
	red;
	}
	style>



	head>
	body>

	div> 儿子div1
	span>
	div>


	span>
	div>


	span>
	span>
	span>
	span>


	body>
	html>

结构伪类选择器

<!DOCTYPE html>
	html>


	title>
	-->

	/*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>
	div>
	span>
	div>
	span>

	ul>
	li>
	li>
	li>
	li>
	ul>
	ul>
	li>
	li>
	li>
	li>
	ul>
	body>
	html>

属性选择器

<!DOCTYPE html>
	html>


	title>




	color: red;
	*/
	/*02.改变所有id属性元素
	div[id]{
	color: red;
	*/
	/*03.改变所有id属性值以h开头元素

	color: red;
	*/
	/*04.改变所有id属性值以a结尾元素

	color: red;
	*/
	/*04.改变所有id属性值包含i的元素

	color: red;
	*/


	style>


	head>
	body>
	div>
	div>
	div>
	div>
	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>


	title>

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


	-->


	*/
	div{
	px;
	px;
	/* 设置盒子的上边框
	border-top-color: red;
	border-top-width: 1px;
	border-top-style: dashed;
	*/
	/*同时设置四个边框
	border-color: red;
	border-width: 2px;
	border-style: dashed;
	*/
	*/
	red;
	}
	style>

	head>
	body>

	div>
	body>
	html>

外边距margin

<!DOCTYPE html>
	html>


	title>


	*/
	px;
	px;
	}


	div{
	*/
	px;
	px;
	*/
	red;
	/*设置外边距元素以左上角为准
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
	*/
	/*设置上下20px 左右50px
	设置边距的时候顺序是上右下左！
	*/
	px;
	}

	style>

	head>
	body>
	div>
	div>
	body>
	html>

内边距padding

<!DOCTYPE html>
	html>


	title>


	*/
	px;
	px;
	}
	*/
	#bigBox{
	*/
	px;
	px;
	*/
	red;
	*/
	}
	*/
	#image{
	*/
	px;
	px;
	*/
	pink;
	px;
	}

	style>

	head>
	body>
	-->
	-->
	-->
	div>
	div>
	body>
	html>

网页居中

<!DOCTYPE html>
	html>


	title>
	<!--
	网页居中的必要条件：
	01.必须是一个块元素
	02.必须设置固定宽度
	-->

	*/
	px;
	px;
	}
	*/
	div{
	*/
	px;
	*/
	red;
	*/
	auto;
	}

	style>

	head>
	body>

	-->
	div>

	body>
	html>

盒子的尺寸boxsizing

<!DOCTYPE html>
	html>


	title>


	*{
	px;
	px;
	}
	*/
	px;
	px;
	red;
	border-box;
	}

	*/
	px;
	px;
	yellowgreen;
	*/
	*/
	*/
	inherit;
	}


	style>
	head>
	body>

	div>
	div>
	body>
	html>

圆角属性

<!DOCTYPE html>
	html>


	title>


	div{
	px;
	px;
	red;

	*/
	/*设置圆角属性简写默认是左上右上右下左下顺时针方向
	*/
	}

	style>
	head>
	body>

	div>
	body>
	html>

设置半圆

<!DOCTYPE html>
	html>


	title>

	div{
	pink;
	px;
	}
	1){
	px;
	px;
	*/
	}

	2){
	px;
	px;
	*/
	}
	3){
	*/
	px;
	*/
	}
	4){
	px;
	px;
	*/
	}



	style>

	head>
	body>
	div>
	div>
	div>
	div>
	body>
	html>

设置圆形和扇形

<!DOCTYPE html>
	html>


	title>

	div{
	pink;
	px;
	}
	*/
	1){
	px;
	px;
	px;
	}

	2){
	px;
	px;
	*/
	}

	3){
	px;
	px;
	*/
	}

	4){
	px;
	px;
	*/
	}

	5){
	px;
	px;
	*/
	}



	style>

	head>
	body>
	div>
	div>
	div>
	div>
	div>
	body>
	html>

盒子阴影

<!DOCTYPE html>
	html>


	title>

	div{
	px;
	px;
	/*
	*/
	*/
	}

	style>

	head>
	body>
	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>


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


	*{
	px;
	px;
	}

	div{
	px;
	px;
	}
	*/
	px;
	px;
	red;
	}



	1){
	red;
	*/
	absolute;
	*/
	}

	2){
	orange;
	*/
	}

	3){
	pink;
	*/
	relative;
	px;
	}



	4){
	red;
	*/
	fixed;
	px;
	px;
	}

	*/
	greenyellow;
	/*固定定位
	position: fixed;
	left: 30px;
	*/
	}

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

	style>

	head>
	body>

	div>
	div>
	div>
	div>
	div>
	div>
	body>
	html>

z-index属性

<!DOCTYPE html>
	html>


	title>


	*{
	px;
	px;
	}
	li{
	none;
	}
	#content{
	px;
	px;
	red;
	auto;
	}

	*/
	*/
	0.5;
	*/
	}
	*/
	*/
	px;
	px;
	px; ;
	px;
	}

	.tipText{
	*/
	center;
	}
	style>
	head>
	body>

	ul>
	li>
	li>
	li>
	li>
	li>
	ul>
	div>
	body>
	html>