JavaScript、HTML和CSS的关系：
HTML:用来编写网页结构。CSS:美化网页（样式）。JavaScript：实现网页与用户之间互动的桥梁，让网页具有丰富的生命力。
HTML:超文本标记语言，专门用来描述文本语义的！
基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在这里放网页的标题emmm</title>
</head>
<body>
</body>
</html>
特性：标签都是成对出现，有开始和结束标签。其他标签都必须写在html标签内，也就是写在html开始和结束标签之间。
HTML作用:用于告诉浏览器这是一个网页，也就是说告诉浏览器是一个HTML文档。
HTML文档head作用：用于给网站添加一些配置信，如：（指定网站的标题/ICON，指定网站的关键字/描述信息，外挂一些外部的CSS和JavaScript文件，添加一些浏览器适配相关的内容等）。
HTML文档title作用：专门用于指定网站的标题，并且这个标题还会作为用户保存网站的默认标题。
title标签必须写在head标签里面。
HTML文档body的作用：专门用于定义HTML文档中需要显示给用户查看的内容（文字、图片、音频、视频等），一对html标签只能有一对body标签！
新手常犯的错误：
1.不加DOCTYPE<导致低版本IE,解析效果不一致>；
2.id为数字；
3.编码不一致；
如:<mate charset="GBK" />、<mate charset="utf-8" />，文件编码与charset声明必须一致！
4.在style中id前面要加#，class前面要加. ，标签前什么也不用加。
为什么会出现乱码现象？<就是因为我们在编写网页时没有指定字符集>
如何解决乱码问题？
在head标签中添加<meta charset="GBK" />,meta的作用就是指定网页的字符集。
编码技巧：快速建立多个相同标签：
如：div>div*3 按下Tab键，可快速建立3个div。
在同一个class中快速建立多个id为Iverson的相同标签：
如：div.Iverson*3 按下Tab键，可快速建立3个id为Iverson的相同标签。
快速建立一个id为Iverson的div:
div#Iverson 按下Tab键,可快速建立一个id为Iverson的div。
快速建立多个不同id的div:
div#XX + div#YY
-------------------------------------------------------------------------------------------------------------------
不管定义的div为多少像素宽，div总是独占一行，使用浮动布局可以让div"移动"到屏幕指定位置,如：
float:"left"
*清除div上方的浮动div；
clear:"left"
clear:"right"
clear:"both"//左右浮动都清除
*建立div时，先建一个总的div,其它div放在其中，方便调整全部div的属性！盒模型:
margin:"10px" //外边距10px<上-右-下-左>
padding:"1em" //内边距1em
border:"2px solid #000" //有一个宽2px,实线，黑色的边框
实线:solid 虚线:dashed 点线:dotted 立体:outset
border可以分开设置其属性：
border-top:"2px solid #000"
border-width:2px //边框宽度
border-style:solid //边框形状
border-color:#000 //边框颜色
inline内联元素<行内元素>用法举例：
<span>Iverson.Tian</span>
span内的元素(一般为文字)，即被约束在span之中，即通过span添加css样式来控制其中文字的显示效果。*盒模型文字部分的大小只与div的长宽有关！
在总的div中设置margin: 0 auto,可以使页面布局整体自适应居中。
margin重叠现象？
相邻的普通元素，上下边距并非简单的相加，而是:取其中较大的margin值！
inline内联元素<行内元素>用法：
区分：块级元素：能独占一行，设置宽高，有竖直方向上的margin、padding
内联元素：不能独占一行，设置宽高，没有竖直方向上的margin、padding
块级元素与内联元素的转化：
可以通过元素的display属性来设置：
display:block //强制声明为块状元素
display:inline //强制声明为内联元素
display:none //设置隐藏，等同于删除，在页面不占任何空间
CSS控制段落文字：
text-indent:20px //文字段落缩进20px
text-align:center //段落文字居中
text-align:right //段落文字从右向左排布
文本下划线：
none:无装饰(默认值) blink:闪烁 underline:下划线 line-through:贯穿线 overline:上划线
如：给文字添加下划线
text-decoration:underline
文字的样式：
normal:默认值，正常的文字 italic:斜体 oblique:倾斜的文字(没有斜体变量的特殊字体)
如：
font-style:italic
文字之间的间距：
letter-spacing:20px
你设置的字体用户机器未必有安装，一般选一个"安全"的通用字体放在最后！
如：
font-family:XX,YY,serif
背景图片：
background-image:url(xxx.jpg)
background-repeat: repeat-x; //图片在X轴重复
background-repeat: repeat-x; //图片在Y轴重复
background-repeat: no-repeat; //图片不重复
background-attachment: fixed; //图片固定
背景图片和背景色同时设置，优先显示背景图片！
background-position: right center; //水平居右，竖直居中
background-position: center; //居中
background-position: -20px +20px; //将图片向左拖动20px,再向下拖动20px
在标签末尾加上<br/>可以实现换行！css选择器:id选择器、class选择器、标签选择器、派生选择器（从上到下选择）
在一个CSS文件中导入外部css文件：
@import url(xxx); //当前目录
@import url(..xxx); //上一级目录
标签：
h1-h6表示1-6号标题，字体大小越来越小，p标签表示段落，经常与h1-h6一起出现。
*img标签表示图片，是单闭合标签，是特殊
<img src="xxx.jpg" alt="图片说明" title="鼠标放上去就会显示此文字" />
src="xxx.jpg" //本地当前目录
src="..xxx.jpg" //本地上一级目录
src="图片超链接" //外网图片链接
有序列表和无序列表：
ul:有序列表 ol:无序列表
整体的表格：<两行两列，table表示表格，tr表示行，td表示列>
<table>
<tr>
<td>Iverson</td>
<td>Iverson</td>
</tr>
<tr>
<td>Iverson</td>
<td>Iverson</td>
</tr>
</table>
可以在style中对table的tr和td分别进行"装饰美化"表格语法取值;
border-collapse:separate //边框独立(默认值)
border-collapse:collapse //相邻边被合并
如:向右合并3格（包括自身）和向下合并3格（包括自身）写法如下：
<td colspan="3">Iverson</td>
<td rowspan="3">Iverson</td>
超链接标签a:
<a href="链接地址" target="_blank" title="鼠标放上来就显示该文字"></a>
锚点：通过锚点可以快速定位到锚点所在位置
锚点添加的三种方式：
<div>
<a href="#Iverson"></a>
</div>>
<p id="Iverson">练习</p>
<div>
<a href="#Iverson"></a>
</div>
<a name="Iverson" href=“#”>练习</a> //使用name属性只能针对a标签来定位
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
CSS中a标签的伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
HTML字符实体：<HTML 中的预留字符必须被替换为字符实体>
常用字符实体：
<pre>在pre标签中，写的是什么格式，网页上就显示什么格式，无需定义格式，如换行等</pre>
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
利用行高完成文字垂直居中：
在style中设置line-height和height高度一致即可！
line-height: 30px;
height: 30px;
色彩表示：
1.用16进制来组合[0~255]-[OO,FF],如#0083FF
2.用16进制来组合,如rgb(34,56,78)
3.用html提供的常用颜色的名称来表示，如orange
4.#EEEEEE可以写成#EEE
用CSS来为div画圆角：
border-radius: 20px;
当border-radius的值等于div(正方形)边长的一半时，就可以画出一个半径为div边长一半的圆overflow溢出效果：<子元素超出父元素显示区域>
相对定位和绝对定位：
相对定位是指元素在其原来的位置，偏移某些像素。
绝对定位是指元素相对父元素的四个方向来定位。