作业的具体内容详情请看
链接：https://pan.baidu.com/s/1DkcPEZ64uMAWS54L9Up8Ag
提取码：0zy0
html 超文本标记语言
新建一个文件夹，直接把文件夹拉入到sublime text3
在sublime里面 右键-新建文件
给新文件命名，带html文件后缀，ctrl+s 保存文件
在创建的新html文件中 输入 html 按tab键可以补齐代码
html文档的结构
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<meta charset="utf-8">
<title></title>
<!-- 样式 -->
<style type="text/css"></style>
</head>
<!-- 身体 -->
<body>
<!-- 行为 -->
<script type="text/javascript"></script>
</body>
</html>
css样式分为（CSS引入方式 ）
内联样式 写到元素内部的
<div style="width: 200px;">这是一个div</div>
内部样式 写到head里面的style标签
外部样式 独立的css文件；
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)
字体样式属性 1、font-family ( 字体系列 ) 2、font-style ( 字体风格 ) 3、font-weight ( 字体加粗 ) 4、font-size ( 字体大小 ) 5、font ( 字体简写方式 ) ( font-style font-weight font-size/line-height font-family )
背景样式属性 1、background-color ( 背景颜色 ) 2、backgroud-image ( 背景图片 ) 3、backgroud-position ( 背景偏移位置 ) 4、backgroud-repeat ( 背景平铺 ) 5、backgroud ( backgroud-image backgroud-position backgroud-repeat )
链接样式属性 1、a:link ( 未被访问的链接 ) 2、a:visited ( 已被访问的链接 ) 3、a:hover ( 鼠标悬浮 ) 4、a:active ( 链接被点击时 )
列表样式属性 1、list-style-image ( 图片标志 ) 2、list-style-type ( 标志类型 ) 3、list-style-position ( 标志位置 ) 4、list-style ( list-style-image list-style-type list-style-position )
表格样式属性 1、border-collapse ( 折叠表格边框为单一边框 ) 2、border-spacing ( 分隔单元格的距离 ) 3、table-layout ( 表格布局 ) automatic ( 默认，列宽由单元格内容设定 ) fixed ( 列宽由表格宽度和列宽度设定 ) 固定表格算法快，但是不灵活，而自动表格算法比较慢
轮廓样式属性 1、outline-color ( 轮廓颜色 ) 2、outline-style ( 轮廓样式 ) 3、outline-width ( 轮廓宽度 ) 4、outline ( outline-width outline-style outline-color)
补充知识点：px、em、rem px: 像素 em: 相对父元素字体大小 默认：16px = 1em rem: 相对于html元素的字体大小
margin: 外边距
padding:内边距
margin简写属性
margin:0;
上下左右全部为0;
margin:10px 20px;
上下为10 左右为20
margin：10px 20px 30px
上为10px 左右为20px 下为30px
margin：10px 20px 30px 40px;
上 右 下 左
/*圆角属性*/
border-radius: 5px;
/*浮动属性*/
float:right;
float:left;
/*相对定位*/
position: relative;
相对于自身的静态位置定位
left 相对于原先的静态位置的left走，偏移了多少距离
right
top
bottom
字体左右居中
text-align: center;
行高等于高度时，字体上下居中
line-height:字体行高
DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。
从节点树中获取节点的一些方法：
1、getElementById() 返回带有指定 ID 的元素。
2、getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
3、getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
4、getElementsByName() 返回包含指定name的属性值的元素列表
5、querySelector(“#id”) “.p” 、”h1,h2” 方法返回匹配指定 CSS 选择器元素的第一个子元素
6、querySelectorAll() 返回所有匹配元素
eg：// 通过id获取元素
var p = document.getElementById('p1');
console.log(p);
// 通过类名获取元素
var h = document.getElementsByClassName('text');
console.log('h =>',h[2]);
var div = document.getElementsByTagName('div');
console.log(div);
var ele = document.querySelectorAll('*') //通过css选择器 返回所有匹配元素