关于html方面的课堂笔记
html 超文本标记语言
新建一个文件夹，直接把文件拉入到Sublime Text 3
在Sublime里面右键新建文件
给文件命名，带后缀，保存
在创建的新html文件中，按tab补齐代码
开标签+闭标签 要符合开闭原则
span标签是一个没有任何样式的段落标签
包裹文本加入style
pre是一个有带格式的p标签 保留标签内的文本格式（缩进，换行，用来展示代码）
div块级元素，默认占一行 可设置宽高
img行内块元素 不占行 可设置宽高
iframe是一个框架元素，用来显示其他内容
label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验
select 下拉列表
option
fieldset半包围边框
关于css方面的课堂笔记
css样式分为
内联样式 写到元素内部的
<div style="width: 200px";>
这是一个div
</div>
内部样式 写到head里面的style标签
外部样式 独立的css文件
margin 外边距
margin:0 auto;左右居中
margin:0; 上下左右全部为0
margin:10px 20px;
上下为10，左右为20
margin:10px 20px 30px
上为10 左右为20 下为30
margin:10px 20px 30px 40px
上 右 下 左
padding 内边距
/*圆角属性*/
border-radius: 200px;
浮动属性（左浮，右浮）脱离文档流
float: left;
/*相对定位*/
position: relative;
left:相对于原先的静态位置的left走，偏移了多少距离
right
top
bottom
absolute 绝对定位
relative 相对定位
fixed 固定定位 固定在浏览器的某个位置
text-align center 字体左右居中
line-height 字体上下位置
typeof null； object
css选择器有5种
.class类名选择器
#id id选择器
tagName 元素名选择器
* 通配符选择器
html,body,box分组选择器
js 事件的语法；
ele.action=
function(){
}
this指向
课堂操作截图
课后自学笔记
校内实训第一天学习日志
一、前端介绍和HTML基础
（1）浏览器内核构成
内核由渲染引擎和 JS 引擎构成
①渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息以及计算网页的显示方式，然后会输出至显示器。
②JS 引擎：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
（2）浏览器内核工作流程
①解析HTML用来重建DOM树；
②渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容 树”；
③ 布局渲染树：从根节点递归调用，计算每一个元素的大小，位置等，给每个节点所应该出现在屏幕上的精确坐标；
④绘制渲染树：遍历渲染树，每个节点将使用UI后端来绘制。
（3）HTML
①为 HTML5 建立的一些规则：
1. 新特性应该基于 HTML、CSS、DOM(文档对象模型document object model) 以及 JavaScript
2. 减少对外部插件的需求（比如 Flash）
3. 更优秀的错误处理
4. 更多取代脚本的标记
5. HTML5 应该独立于设备 ( 设备通用 )
②元素分类（补充）
表单元素：<from>、<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<label>、<fieldset>表单元素半包围边框、<legend>标题
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格元素：<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption>
特殊元素：<!DOCTYPE>、<!-- -->、<hr>
<a>元素的链接方式：文本和图片
<a>元素的作用：
1、指向另一个站点 href=”http://www.xiankesi.cn/”
2、指向站内的一个文件 href=”./myfile.html”
3、锚点定位
4、回到顶部
5、下载文件
二、CSS基础
（1）CSS定义及作用
定义：层叠样式表( Cascading Style Sheet )
作用：美化页面
（2）CSS引入方式及优先级分配
引入方式：
1、内联样式 ( 样式位于元素内部 )
2、内部样式 ( 样式位于head元素的style元素中 )
3、外部样式 ( 独立的CSS文件 )
优先级分配：
1、浏览器缺省样式
2、外部样式
3、内部样式
4、内联样式
（3）CSS文本样式属性
1、text-indent ( 缩进文本 ，属性值可以为负数，也可以为百分比)
2、text-align ( 文本对齐方式 )
3、letter-spacing ( 字母或者字符的间距 )
4、word-spacing ( 单词的间距 )
5、text-transform ( 文本转换 )
6、text-decoration ( 文本装饰 )
7、white-space ( 文本空白 )
8、color ( 文本颜色 )
9、background-color ( 背景颜色 )
10、line-height ( 行高，多数浏览器默认的行高是20px)
（4）CSS背景样式属性
1、background-color ( 背景颜色 )
2、backgroud-image ( 背景图片 )
3、backgroud-position ( 背景偏移位置 )
4、backgroud-repeat ( 背景平铺 )
5、backgroud ( backgroud-image backgroud-position backgroud-repeat )
（5）CSS链接样式属性
1、a:link ( 未被访问的链接 )
2、a:visited ( 已被访问的链接 )
3、a:hover ( 鼠标悬浮 )
4、a:active ( 链接被点击时 )
（6）CSS列表样式属性
1、list-style-image ( 图片标志 )
2、list-style-type ( 标志类型 )
3、list-style-position ( 标志位置 )
4、list-style ( list-style-image list-style-type list-style-position )
（7）CSS表格样式属性
1、border-collapse ( 折叠表格边框为单一边框 )
2、border-spacing ( 分隔单元格的距离 )
3、table-layout ( 表格布局 )
automatic ( 默认，列宽由单元格内容设定 )
fixed ( 列宽由表格宽度和列宽度设定 )
固定表格算法快，但是不灵活，而自动表格算法比较慢
（8）CSS轮廓样式属性
1、outline-color ( 轮廓颜色 )
2、outline-style ( 轮廓样式 )
3、outline-width ( 轮廓宽度 )
4、outline ( outline-width outline-style outline-color)
三、JS基础
（1）语句
JavaScript 语句：程序需要执行的命令。语句的作用是告诉浏览器该做什么。
JavaScript程序的执行单位为行，也就是一行一行地执行。一般情况下，每一行就是一个语句。
语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。
一条语句可以包含多个表达式。
语句以分号结尾，分号前面可以没有任何内容，JavaScript引擎将其视为空语句。
表达式不需要分号结尾。
（2）变量
变量：存储一个数据的空间的容器，主要作用是保存数据。
变量的声明和赋值，是分开的两个步骤。
如果只是声明变量而没有赋值，则该变量的值是undefined。
如果变量赋值的时候，忘了写var命令，这条语句也是有效的。
可以在同一条var命令中声明多个变量。
JavaScirpt是一种动态类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
如果使用var重新声明一个已经存在的变量，是无效的。如果第二次声明的同时还赋值了，则会覆盖掉前面的值。
变量提升：所有的变量的声明语句，都会被提升到代码的头部。
变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。
（3）常量
常量就是一旦声明就无法改变的量。
常量没有声明提前。
常量不能和变量同时声明相同的标识。
（4）数据类型
数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如”Hello World”）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示“未定义”或不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象（object）：各种值组成的集合。狭义的对象（object），数组（array），函数（function）
typeof操作符可以返回一个值的数据类型
1.原始类型
数值、字符串、布尔值分别返回number、string、boolean。
2.函数
函数返回function。
3.undefined
undefined返回undefined。
4.其他
其他情况都返回object。null的类型也是object。
null 一般用来释放内存资源
undefined 一般用来表示一个变量是否已经被定义
（5）注释
js注释方式：
双斜杠注释：// hello world
斜杠星星斜杠注释：/*hello world*/
四、DOM
（1）定义
DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作。
（2）节点
DOM的最小组成单位叫做节点（node）。
HTML 文档中的所有内容都是节点。
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
（3）节点树
1、在节点树中，顶端节点被称为根（root）
2、每个节点都有父节点、除了根（它没有父节点）
3、一个节点可拥有任意数量的子
4、同胞是拥有相同父节点的节点
（4）获取节点方法
1、getElementById() 返回带有指定 ID 的元素。
2、getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
3、getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
4、getElementsByName() 返回包含指定name的属性值的元素列表
5、querySelector(“#id”) “.p” 、”h1,h2” 方法返回匹配指定 CSS 选择器元素的第一个子元素
6、querySelectorAll() 返回所有匹配元素
（5）节点属性
1、nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
2、nodeValue 属性
nodeValue 属性规定节点的值。
3、nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
（6）操作节点
1、createElement() 创建元素节点。
2、appendChild() 把新的子节点添加到指定节点。
3、insertBefore() 在指定的子节点前面插入新的子节点。 element.insertBefore(newNode,oldNode);
4、removeChild() 删除子节点。
5、replaceChild() 替换子节点。
element.replaceChild(newNode,oldNode);
6、createTextNode() 创建文本节点。
（7）设置获取节点属性
1、getAttribute() 返回指定的属性值。
2、setAttribute() 把指定属性设置或修改为指定的值。
3、attributes 返回包含当前元素所有属性节点对象
4、attributes[i / “class”] 返回一个属性节点
5、attributes[i / “class”].value 返回一个属性节点值
6、removeAttribute() 移除指定属性节点
7、hasAttribute() 判断是否含有指定的属性
8、dataset.i
（8）获取节点的html和文本
1、innerHTML 返回当前节点包含的html以及文本
2、textContent 返回当前节点包含的文本
3、innerText 返回当前节点包含的文本/IE8
（9）操作DOM元素的CSS
style对象的setProperty()，getPropertyValue()，removeProperty()
Style对象的以下三个方法，用来读写行内CSS规则。
setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。
五、事件和BOM
（1）事件
1、window.onload //页面加载完成事件
2、onclick //点击事件 **
3、onmouseover //鼠标悬浮时事件 **
4、onmouseout //鼠标离开时事件 **
5、onmousemove //鼠标移动时事件 **
6、onchange //用户改变域的内容时事件 **
7、onfocus //获取焦点时事件 **
8、onblur //失去焦点时事件
9、onkeydown //键盘某个键被按下时事件 **
10、onkeypress //键盘某个键被按下或者按住时事件 **
11、ondblclick //双击事件 **
12、onresize //浏览器窗口大小被调整时事件
13、onscroll //滚动条滚动时事件 **
（2）BOM
1.window对象
在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。
“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。
window对象的属性
a、window.window
window对象的window属性指向自身。
b、window.name
window.name属性用于设置当前浏览器窗口的名字。
c、window.location
window.location返回一个location对象，用于获取窗口当前的URL信息。
d、window.open //打开窗口
e、window.screenX，window.screenY
window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位为像素。
f、window.innerHeight，window.innerWidth
window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。
g、window.outerHeight，window.outerWidth
window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。
h、window.pageXOffset，window.pageYOffset
window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。
i、window.screen对象
window.screen对象包含了显示设备的信息。
j、screen.availHeight和screen.availWidth属性返回屏幕可用的高度和宽度，单位为像素。它们的值为屏幕的实际大小减去操作系统某些功能占据的空间，比如系统的任务栏。