HTML+CSS+JS.DOM文档

			HTML+CSS+JavaScript文档

1.HTML文档
1.什么是网页:网页是构成网站的基本元素；以html结尾
2.HTML语言:是一种超文本标记语言，用于描述网页的一种语言
3.Web标准:由W3C组织和其他标准组织指定的一系列标准的集合,W3C(万维网)是国际著名的标准化组织
组成:结构（HTML）;表现（CSS）;行为(JavaScirpt)
4.语法规范:
标签成对出现；标签必须由“<>”包括;只有一个标签的称为但标签；双标签关系可以分为嵌套关系
和并列关系。
5.HTML基本结构:
------开始标签
---------头部标签
------------标题标签


-------------主体标签

6.主要标签解释:
	<!DOCTYPE>		文档声明标签
	<meta charset="UTF-8">	表示编码格式（方式）
	<meta name="" content="">
7.主要标签:
	<h1></h1>	标题标签；标题标签有六个，分别从h1到h6标题依次变小；
	<p></p>		段落标签；对文章进行分段
	<br />		此为换行标签
8.文本格式化标签
	<strong></strong>或者<b></b>		对文本进行加粗
	<em></em>或者<i></i>			对文本文字做倾斜效果
	<del></del>或者<s></s>			对文本加入删除线效果
	<ins></ins>或者<u></u>			对文本加下划线效果
9.视图容器标签:
	<div></div>;<span><span>没有语义；用于分割，分区；用于装内容；主要用于对页面进行布局
一个div标签独占一行；而span标签一行可以放多个
10.图像标签:
	<img src="图片路径/图片名称"> 	①alt属性:替换文本属性，当图片显示不出来是；用此属性中的文本
代替图片显示；②title属性:提示文本属性；即当光标停留在图片时，可以显示提示文字;③图像标签可以添加多个属性；属性不分先后顺序
；标签名与属性、属性与属性之间用空格分开；属性采取键值对的形式。
11.路径问题:
	①根目录:打开文件夹的第一层为根目录；
	②相对路径:以引用文件所在位置为参考位置，而建立的目录；同级文件(同参考文件并列的文件)；下一级文件
（以“/”开始查找）;上一级文件(以"../"开始查找)
	③绝对路径:即文件的绝对位置；是从电脑的盘服开始到文件具体位置所结束；

12.链接标签:
	<a href="URL" target="目标弹窗方式"></a>		超链接标签；target属性:_self 当前窗口打开；_blank:型窗口打开；超链接
分为外部链(必须以https：//开始)；内部链接(网站内部页面之间的链接):直接链接文件名;下载链接:直接填写下载文件包
锚点链接:在链接文本中的href属性中添加"#名字";在目标位置标签中添加id属性；属性等于链接文本名字；
13.注释标签和特殊字符:
	格式:<!-- 需要注释的文本内容 -->	快捷键:ctrl+/
空格:&nbsp;	小于:&lt;		大于:&gt;		和:&amp;
人民币:&yen;	版权:&copy;	注册商标:&reg;等等
14.表格标签:
	作用:用于显示和展示数据;提高可读性；观赏性
	语法：<table></table>定义表格的标签；<tr></tr>定义表格中的行标签，必须嵌套在定义表格标签中；
<td></td>用于定义表格中的单元格；必须嵌套在<tr></tr>标签中；<th></th>定义表头单元格标签必须嵌套在
行标中；
15.表格属性:
	align属性:指定对齐方式；border属性:指定表格边框；cellpadding属性：指定文字与单元格边框之间的距离；
cellspacing属性:指定单元格与单元格之间的距离	
16.表格结构标签:
	<thead></thead>表示表格头部区域标签；<tbody><tbody>表示表格主题区域标签；
	跨行合并:rowspan="合并个数";跨列合并:colspan="合并个数"；跨列合并代码写在上方目标单元格；跨行合并代码写在
左侧单元格
17.列表标签:
	无序列表:<ul></ul>定义无序列表；
	有序列表:<ol></ol>定义有序列表；
	自定义列表:<dl></dl>用于对专用名词的解释或者说明；
		<dl>
			<dt>名词</dt>
			<dd>名词:解释</dd>
		</dl>
18.表单标签:
	表单组成:表单域(<form></form>)，
		<form action="" method="" name=""></form>	action属性指定接收地址；
method属性指定提交方式(GET或者POST);name属性指定表单范围	
	表单控件(表单元素):
		<input type="" name="名字" value="输入需要显示的内容">	表单元素标签；type属性的取值:button(按钮)；checkbox（复选框）；
file(输入文字，上传文件)；hiddle(隐藏输入字段)；image(图像形式的提交按钮);password（定义密码字段；不显示）;
radio（定义单选框）；reset(重置按钮)；sumbit(提交按钮)；text(文本）;单选框和复选框name要一致；
checked属性:默认选取；
		<select></select> 下拉表单控件；语法规范:<select><option></option></select>
在<option>中指定selected属性等于selected表示默认选取此元素；
		<textarea></textarea>	文本域标签；

2.CSS(层叠样式表)：
1.语法规范:
行内样式表: 写在标签中的样式;
外部样式表: 实际开发使用；单独建立CSS文件；实现方式；新建CSS文件目录；在HTML通过link标签引入到html页面中；
格式:
6.Emmet语法:
①生成标签 直接输入标签名按Tab键一键生成 示例:div+tab
②标签名number 可以生成多个相同标签 示例: div*3
③嵌套关系标签用">" 示例:ul>li
⑤并列关系标签用"+" 示例:div+p
⑥$生成有顺序的div标签示例:.demo$5
⑦生成带类名或id名标签 示例: div.demo
⑧标签中自带文字 示例: div{}
7.复合选择器:
后代选择器(选择器之间必须嵌套):
语法:选择器1 选择器 2{} 注:选择器与选择器之间必须要用空格隔开；最终改变样式的是选择器2
子选择器(选择器之间必须嵌套):
语法: 选择器1>选择器2{} 注:表示指定改变样式的选择器
并集选择器（选择器之间处于并列关系)：选择器1,选择器2{}
伪类选择器:
用于向某些选择器添加特殊效果；特点:用":"表示；
a:hover{} 鼠标停留在标签上时的样式
a:visited{} 链接被访问后的样式
a:link{} 链接未被访问的样式
a:active{} 鼠标按下未谈起时的样式
注:书写顺序LVHA
特例:(:focus伪类选择器)选取获得焦点的表单元素
8.元素显示模式:
块级元素:独占一行；可以控制高度、宽度、外边距、内边距 注:文字类元素中不能使用块级元素
行内元素:一行可以显示多个；高宽无效；行内元素只能容纳文本或其他行内元素
行内块元素:img标签、input标签、td标签
行内元素之间的转换:①转换为块级元素:display：block；②转化为行类元素:display：inline
9.单行文本垂直居中:指定行内块和块级元素的高度与line-height属性值相同;
10.CSS的背景:
backgroud-color：属性:(ransparent（透明))
backgroud-image：url(“图片路径”)
backgroud-repeat：指定图片是否平铺 repeat（平铺） | no-repeat(不平铺) | repeat-x(沿x轴平铺) | repeat-y(沿y轴平铺)
background-position：指定图片位置 精确点位(x,y)| 方位名词
backgroud-attachment：指定背景图像是否固定 scroll(滚动) | flxed(固定)
复合属性:
backgroud：背景颜色 背景图片地址 背景平铺 背景图滚动否 位置
backgroud: RGBA(0,0,0,0.3) 背景透明处理
backgroud-size:指定图片尺寸

11.CSS三大特性:
	①层叠性:就近原则；当选择器相同且样式冲突时；谁的层级高()，使用谁的样式
	②继承性:子类元素可以继承父类的样式;行高的继承性:行高也能继承
	③优先级:!important>行类样式>Id选择器>类选择器>元素选择器>继承选择器和"*"(通配符选择器)
	注:权重叠加问题
12.div模型组成:
	边框(border)、内容(content)、内边距(padding)、外边距(margin)
	border属性: boder-weigth(边框粗细) color(颜色) soild（实线）注:边框会影响div大小;
	padding(属性):指定块级元素与内容之间的距离;顺序(上右下左) 注:会影响div大小
	margin(属性):指定div等块级元素之间的距离
	margin应用(块级元素水平居中):0 auto;
	指定行类元素和行类块元素水平居中对齐:text-align:center;
13.嵌套块级元素塌陷问题:单子元素与父元素都有外边距时，会导致父边距塌陷；
	解决:①为父元素添加边框;②为父元素添加内边框;③为父元素添加overflow:hidden;
14.圆角边框:border-redius(原理两个圆的裁剪)
15.块级元素阴影效果:box-shadow:h-shadow(水平阴影位置) V-shadow(垂直阴影位置) blur(模糊距离) spreed(阴影尺寸) color（阴影颜色） inset(内阴影)/outset(外阴影)		 
   文字阴影:text-shadow:属性同上;
16.浮动:指定块级元素的排列位置;
	标准流:块级元素从上至下依次排列；行内元素和行内块元素从左至用依次排列;
	float属性:left or right 创建浮动框
		注:①会脱离标准流,不占有原来位置;②会一行显示;③具有行内块元素特性;
17.清除浮动:
	①额外标签法:在最后的浮动元素后面添加块级元素,然后为添加的块级元素添加属性clear:both;
	②为父元素添加overflow:hidden属性;
	③伪类元素:选择器:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
		   选择器{*zoom:1;}
	④双伪元素:选择器:before,选择器:after{content:""; display:table;}
		   选择器:after{clear:both;}  选择器{*zoom:1;}

3.JavaScript:
1.DOM简介:文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，可以改变网页的内容、结构和样式。
文档:一个页面就是一个文档，DOM中使用document表示。
元素:页面中的所有标签都是元素，DOM中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示。
2.获取元素:
1.根据id获取:getElementById(“id名”)方法
2.根据标签名获取:getElementByTagName(“标签名”)方法;获取某个元素(父元素)内部所有指定标签名
的子元素:element.getElementsByTagName(“标签名”);
注:父元素必须是单个对象(必须指明是哪一个元素的对象)，获取的时候不包括父元素自己。
3.通过HTML5新增的方法获取:
根据类名获取选择器:document.getElementsByClassName(“类名”);
根据指定选择器返回第一个元素对象:document.querySelector(“选择器”);
querySelector() 返回指定元素的第一个元素对象、选择器需要加符号 .box #nav li
注:document.querySelectorAll()返回指定选择器的所有元素对象的集合
4.特殊元素获取:
获取body元素:document.body;
获取html元素:document.documentElement;
3.事件基础:
1.事件三要素:事件源、事件类型、事件处理程序;事件执行步骤:获取事件源、注册事件、添加事件处理程序。
2.事件类型: onclick 点击鼠标左键触发;onmouseover 鼠标经过触发;onmouseout 鼠标离开触发;onfocus 获取鼠标焦点出发;
onblur 失去鼠标焦点触发;onmousemove 鼠标移动触发;onmouseup 鼠标弹起触发;onmousedown 鼠标按下触发
4.操作元素:
element.innerText:从起始位置到终点位置的内容、但它去除html标签、同时空格和换行也会去掉。
elemnent.innerHTML:从起始位置到终点位置的全部内容、包括html标签、同时保留空格和换行。
5.获取自定义属性:element.getAttribute(“属性名”);设置自定义属性值:element.setAttribute(“属性名”);
移除属性值:element.removeAttribute(“属性名”)
6.节点操作:
1.节点层次关系:父子兄层级关系。
获取父节点:childNode(子节点).parentNode;
获取子节点:parentNode(父节点).childNodes(children 非标准，可使用.获取子元素节点);
获取第一个指定元素节点:parentNode.firstElementChild(children[i] 非标准，可使用);
获取最后一个指定元素节点:parentNode.lastElementChild(children[i] 非标准，可使用);
获取兄弟节点:node(兄弟节点).nextSibling; //获取下一个节点
node.prviousSibling; //获取上一个节点
获取下一个元素节点:node.nextElementSibling;
获取上一个元素节点:node.prviousElementSibling;
创建节点:document.createElement(“元素名”)
添加节点:node(父节点).appendChild(“创建好的元素节点”)
指定添加节点位置:node.insertBefore(创建好的元素节点 , 指定元素)
删除节点:node.removeChild(“删除元素”)
复制节点:node.cloneNode() //if括号参数为空，则为浅拷贝，即只复制节点本身，
不拷贝里面的子节点。else括号参数为true，则为深拷贝，即拷贝节点本身及里面所有子节点。
7.创建元素方式:
1.document.write是直接将内容写入页面的内容流，但是文档执行完毕，则它会导致页面重绘。
2.innerHTML 是将内容写入DOM节点，不会导致页面全部重绘
3.innerHTML 创建多个元素效率更高(不拼接字符串的形式，而是采用数组形式拼接)，结构稍复杂。
4.createElement() 创建多个元素效率稍低一点，但结构清晰。
区别:innerHTML > createElement >document.write 创建速度。
8.注册事件:
给元素添加事件，称为注册事件或者绑定事件
1.传统注册方式:以on开头，事件具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后之策的处理函数将会覆盖前面的处理函数。
2.方法监听注册方式(addEventListener()):不支持ie9以前的版本,同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行；
3.addEventListener(type,listener[,userCapture])监听方式：
type:事件类型字符串(比如click点击事件)，注:不需要加"on";
listener:事件处理函数，事件发生时，会调用监听函数;
UserCapture:可选参数，是一个布尔值，默认为false
9.DOM事件流:
1.事件流描述的是从页面中接收事件的顺序，事件发生时会在元素系欸但之间按照特定的顺序传播，这个传播过程即为DOM事件流。
2.js代码中只能执行捕获或者冒泡其中的一个阶段。
3.onclick和attachEvent只能的到冒泡阶段。
4.addEventListener的第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果为false，表示在事件冒泡阶段调用事件处理程序。
注:实际开发不使用事件捕获，更关注事件冒泡；以下事件没有冒泡事件:onblur、onfocus、onmouseenter、onmouseleave
10.事件对象:event对象代表事件的状态；事件对象的常见属性和方法。
e.target //返回触发事件的对象 标准
e.srcElement //返回触发事件的对象 ie6、7、8
e.type //返回事件类型 标准
e.cancelBubble //阻止事件冒泡 ie6、7、8
e.sreturnValue //阻止默认事件(默认行为) ie6.7、8 不让链接跳转
e.preventDefault//阻止默认事件(默认行为) 标准 不让链接跳转
e.stopPropagation//阻止冒泡 标准