目录
复习一下学过的知识，环境用的事HBuilder，貌似是国人做的，还不错！前端实际上是由html、css、js三部分组成的，基本元素是html标签，通过html可以有文档、表格之类内容的部分，css设置标签的样式，比如排放位置、颜色等，js则是动态交互的部分，可以通过js语言控制标签和交互动作。
一、html常用标签讲解
1，基本结构
html文件基本机构为:
<html>
<head>
</head>
<body>
</body>
</html>
新的各种框架的信息、元信息放在html标签前或者head中，之后的博客会进行讲解
2，文本类标签
（1）什么标签都不写 ： Hello world 写在页面里可以直接显示
（2）<br/>换行； <p></p>段落；<h1></h1> ~ <h6></h6> 六级标题；
（3）需转移内容：
| 显示结果 |
描述 |
实体名称 |
| 空格 |
|
|
| < |
小于号 |
< |
| > |
大于号 |
> |
| & |
和号 |
& |
| " |
引号 |
" |
（4）注释：<!--注释内容-->
3，超链接
格式：<a href=“链接目标”>链接对象</a>
链接对象：文字和图片等
链接目标：另一个网页、同网页上不同的位置、图片、电子邮件地址、文件、应用程序等。
href：规定链接目标
target：在何处打开目标
target属性值：
_blank：在新窗口打开
_self：在当前窗口打开（默认）
_parent：在父窗口打开
_top：在顶窗口打开
4，图片
<img src="images/logo.gif" width="143" height="126" alt="我是logo" />
<img/>：图片标签
src : 指明存储图像的位置
alt : 为图片添加替换文本（没有图片时显示的内容）
5，列表
注意列表（ul-li）不是表格（table），下面这个就是列表，而且是无序列表
（1）无序列表：
<ul>
<li></li>
<li></li>
</ul>
（2）有序列表
<ol>
<li></li>
<li></li>
</ol>
示例图如下：
6，表格
<table><tr><td></td></tr></table> 三个基本元素构成了表格（还有th表示表头）
table的属性包括：
border：规定表格边框的宽度（pixels）
cellpadding:规定单元边沿与其内容之间的
距离（pixels或%）
cellspacing:规定单元格之间的空白（pixels或%）
相关属性：
width:规定表格元素的宽度（pixels或%）
height:规定表格元素的高度（pixels或%）
看一个图来加强下理解（table的cellspacing和td的cellpadding）：
表格单元格的合并——跨列：
<td colspan = “2" >2888880</td>
表格单元格的合并——跨行：
<td rowspan = "2" >张三丰</td>
7，表单
（1）<form></form> 表单
相关属性：
action：规定当提交表单时向何处发送表单数据 值：URL
method：规定用于发送 form-data 的 HTTP 方法。 值：get/post
（2）文本域： （Text Fields）
结果示意：
（3）密码域：
（4）单选按钮：（Radio Buttons）
（5）复选框：（ Checkboxes）
（6）文件
总之 input 根据type的不同类别，可以有不同的展现形式，如密码，文本框等
（7）多行文本域：
相关属性：
rows：规定文本区内可见行数
cols：规定文本区内可见列数
（8）标签： （label）
（9）下拉列表
<form>
<select name="class">
<option value="first">软件一班</option>
<option value="two"> 软件二班</option>
<option value="three">软件三班</option>
<option value="four"> 软件四班</option>
</select>
</form>
（10）表单控件
submit和button：
<form action="form.asp" method="get" >
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name= "lname" /></p>
<input type="submit" value="Submit" />
<input type="button" value="Hello world!">
</form>
二、css选择器
这个很重要哦，以前跳着学，用到jqeury的时候摸不着头脑，这段时间跟着老师一起学着，感觉jquery还有爬虫还有mui之类的框架用起来都能看得懂这一类符号了！选择器的概念就是选择符合标准的一系列dom元素
简单说明下选择器的格式：
在css块里：
1，标签选择器
p { }
选择所有的p标签元素
2，类选择器
.myClass {}
选择所有class为myClass的元素
3，id选择器
#myId {}
选择id为myId的元素，选了第一个就不会再往后查了！
4，通配符选择器
* {}
选择所有元素
5，组合选择器
后代选择器(Ｅ Ｆ)
子元素选择器(E>F)
相邻兄弟元素选择器(E+F)
群组选择器（selector1,selector2,...,selectorN）
解析：所谓组合选择器嘛，就是多个选择器合在一起来选择元素咯，1-4统称为基本选择器。以后代选择器而言：
div a {}
这个选择器是指div 的 a标签元素！
6，属性选择器
所谓属性选择器，很好理解，基本选择器加上属性来选择元素就可以了！主要有一下三种格式（\表示或的意思）：
E[attr]\E[attr][attr]
可以根据一个或多个属性名来选择
E[attr="value"]
根据属性名和属性值来选择元素，可以有多个属性吗？当然可以有啊！html这么灵活的东东，你觉得可以的一般都可以，不可以的也不报错（非严格模式）。
E[attr~="value"]
不等于
7，伪类选择器
所谓伪类，就是像类而非类的东西
伪类选择器：UI 元素状态伪类（可用、不可用、选中、未选中、获得焦点、只读、可读写）
伪类选择器有很多人的，以被访问的a元素来看：
a:visited {}
就是类 + 伪类选择器 就可以了
列一下常用的伪类选择器（这个东西放在jquery用很方便的）：
超链接
:link 未被访问过
:visited 以访问
:hover 悬停
:active 活动
先后顺序，要让他们遵守一个爱恨原则LoVe/Hate， 也就是Link--visited--hover--active
:first-child 第一个孩子（这个孩子要特别注意，它实际上是sibling的概念）
比如：ol li:first-child{} 指的是第一个li！
:focus
:enabled选择器和:disabled选择器
:read-only选择器和:read-write选择器
:default选择器、:checked选择器
是不是有很多，所以嘛前端就是要多用、多记，熟练地掌握基本知识，然后去理解它的原理，现在可是有号称“大前端”的概念了哦。
8，样式的优先级
一般而言有如下公式：
1、ID选择器 > 类选择器> 标签选择器
2、行内样式>页内样式>外部样式 这里注意，这个公式的前提是外部样式定义在页内样式前，不然你试试，这个公式未必对！
3、就近原则，距离元素最近的样式优先
4、!important 这个鸟东西，可以突破样式的规范，告诉别人我的样式最大！
还有两个概念：
CSS样式的叠加：多个样式，在同一内容上共同实现
CSS样式的可继承性：文档中的某些元素，将沿用为其父元素所设置的
三、css盒子模型
实际上html的摆放就是通过css的盒子模型来排列的，通过盒子与盒子的嵌套、堆叠，控制页面内容的展示位置（布局）
1，什么是盒子模型？
盒子模型是由内容区域、padding、border、margin四个部分组成的，如下图所示：
有了这个图，再练练基本上也就熟悉了页面布局。
盒子模型就像一块内容，一块内容地分开放着，互相不会占用地盘。这实际上就是块级元素的特征，与之相对的事行内元素。
块级元素（block level element） 元素在显示时会独占一行，并同时具有宽、高、内外边距特征。
行内元素（inline element） 在显示时通常不会以新行开始，横向排列，到最右端自动折行。
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div {
width: 300px;
height: 300px;
background-color: lightblue;
/*border: 3px solid #0000FF;*/
border-width: 5px;
border-color: green;
border-style: solid;
border-bottom-color: red;
border-left-style: dotted;
/*margin-top: 40px;
margin-bottom: 20px;*/
/*上右下左*/
margin: 20px 40px 40px 70px;
padding: 20px 30px 20px 10px ;
/*没有宽高，占一行,上下边距没用了，左右还有*/
display: inline;
}
.div2 {
/*block：块级元素，inline：行内元素；none：不显示
inline-block：行内块级元素*/
display: inline-block;
width: 200px;
height: 100px;
/*display: none; 不显示，不占位*/
}
</style>
</head>
<body>
<div class="div">
盒子模型
</div>
<div class="div2" style="background-color: red;">
盒子模型2
</div>
<a href="http://www.baidu.com" target="_blank">新窗口</a>
<a href="http://www.baidu.com" target="_self">当前窗口</a>
<a href="http://www.baidu.com" target="_parent">父级串口</a>
<a href="http://www.baidu.com" target="_top">在顶窗口</a>
<!--替换文本-->
<img style="width:200px;height: 300px;" src="img/短信指令查询页面.png" alt="没有图片"/>
</body>
</html>
div1设为display: inline; 则两个div会显示在一行中，而且它的大小不会因为设置height等而改变。而如果没设置，则这个div1是block类型，立马就分在两行啦！不严谨地说行内元素不会换行，块级元素会换行。
2，常见的块级元素及行内元素
常见的块级元素：
div – 区块
form – 交互表单
h1 – 1级标题
hr – 水平分隔线
p – 段落
table – 表格
ul – 无序列表
ol – 有序列表
常见的行内元素：
a – 链接
img – 图片
input – 输入框
select – 项目选择
font – 字体设定
b – 粗体
i – 斜体
strong – 粗体强调
3，设置盒子元素的各项属性
盒子有哪些属性？看看下面这个图
分开来看：
（1）内容区域
height、width设置高度、宽度
（2）边框部分（就是那做边框、右边框之类的）
border-top、border-bottom、border-left、border-right：分别表示上、下、左、右边框的长度
当然border可以设置诸如线条样式、颜色等内容，举个例子：border: 1px solid black;
其他可以仿照着写
（3）内边距
内边距就是padding啦，和border的处理方式可以说是一模一样！
padding-top、padding-bottom、padding-right、padding-left：上下左右内边距
（4）外边距
外边距就是margin
也是有margin-top、margin-bottom、margin-right、margin-left四个
4，标签的显示方式
标签的显示方式通过display属性设置即可
display有三个值：block、inline、none
block：将元素显示为块级元素，该元素前后会带有换行符
inline：默认。元素会被显示为行内元素，该元素前后没有换行符
none：该元素不会被显示
5，计算盒子尺寸
根据第3点的讲解，知道盒子的宽度（尺寸）为margin+border+padding+height/width
比如横向的尺寸：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right