一、HTML
1、HTML:（HyperText Markup Language）超级文本标记语言
入门案例
<html> // 只要是HTML网页,要求 必须有一个根标签HTML
<head> //head标签,叫头标签,保存网页中的最最最重要的信息
//而且这些信息打开网页是开不见
//头标签中有多个子标签
<meta> 标签 保存了页面重要信息,编码,关键字等等
<title> 这是网页的标题,显示在打开网页的最上端
</head>
<body> body标签是网页的身体,就是我们写内容的地方
</body>
</html>
2、标题标签<h1>-<h6>
h1最大,6h最小
特点:自动换行,并且上下留白
3、水平线标签 <hr>
size:水平线的高度
noshade:设置纯色效果
width:设置宽度
4、字体标签<font>
size:字体大小 有值1-7, 其中7最大
color:字体颜色,颜色有两种表示 a.英文单词 b.#RGB #ff0000
face:设置字体,比如微软雅黑,宋体
5、格式化标签
<b>加粗
<i>倾斜
6、段落和换行
<p>,段落、特点:自动换行,上下留白
<br>：换行
7、图片标签<img>
src: 图片路径
绝对路径: http://www.baidu.com/logo.png
width:图片宽度,可以使用像素,也可以百分比
height:图片高度,可以使用像素,也可以百分比
atl:图片显示有问题时的代替文本
title:鼠标移动到图片上面时显示的文字
8、块标签与内联标签
<span>:内联标签、可以与其它内容公用一行
<div> ：块级标签、独占一行
9、列表标签 <ul> <ol>
<ul>:无序列表
<ol>:有序列表
<li>标签
type: 属性
ol中type的取值: 1(默认的) a A i I
ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)
10、超链接标签<a>
href: 表示点击后跳转的页面
target:表示点击后网页在哪一个位置显示
_self 本页面 _blank 新页面 framename:其他框架
11、表格标签<table>
<tr> 一行
<th> 表格的列标题：加粗、居中
<td> 一列
<caption> 表格的标题
<thead> 表格的头部
<tbody> 表格的主体
<tfoot> 表格的脚部
12、<Table>标签的属性:
width:表格的宽
border:边框的粗细、 单位 px
align:水平对齐方式,有 左对齐left 右对齐right 中间对齐center
bgcolor:设置整个表格的背景色,tr和td也有bgcolor
align 对齐方式、用在td、tr、table
cellspacing 单元格间的间隔
cellpadding 单元格内边距
13、实体字符：
空格
< 小于
> 大于
& &
© 版权符
14、<td>:合并单元格的属性
rowspan: 跨行合并,
colspan:跨列合并,
15.表单标签:主要是用来收集用户的数据,提交到服务器
<form action=”index.” method=”post”>:
Action: 数据提交给服务器的地址，如果没有这个属性，默认提交给自己
Method: 提交的方式，有2种常用的提交方式：get或post，默认是get方式，用post
Get: 数据会出现在地址栏的后面以?分隔，?前面是地址，后面是参数，参数之间使用&分隔
Post: 提交的参数不会显示在地址栏上，相对更加安全。
<form action="#" method="get" name="loginForm"> </form>
16、表单标签的子标签:
<input>:输入域 type属性：
text:文本输入域
<input type="text" name="username" value=”placeholder”>
password:密码输入框,显示的是*号代替文本
<input type="password" name="password" value =”placeholder”>
radio: 单选框 checked=”checked”
性别 : <input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
checkbox:复选框 checked=”checked”
爱好 : <input type="checkbox" name="hobby" value="lq">篮球
<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="ymq">羽毛球
button:普通按钮
<input type="button" value="按钮!">
reset:重置按钮
<input type="reset" value="重置!">
submit:提交按钮
提交按钮 : <input type="submit" value="我要提交啦!">
image:图片按钮
图片按钮 : <input type="image" src="../img/btn.jpg">
hidden:隐藏域(数据会提交,但是页面上看不见)
隐藏域 : <input type="hidden" name="id" value="itcast_001">
file:文件上传组件
头像 : <input type="file" name="upload">
下拉列表：
<select multiple=”multiple” size = 3> multiple:显示size值
子标签:
<option value = “1”>内容</option> name必须加在select身上，每个option都要写一个value
</select>
<select name="city" id="city">
<option value="bj" selected=”selected”>北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<textarea>:文本区域
rows 多少行
cols 多少列
<textarea name="desc" id="" cols="30" rows="5" style="resize: none"></textarea>
共同的属性:叫name属性
作用:
1.给标签起名字
2.给单选框和复选框分组,name一样的分为一组
3.有name属性的标签的值才会提交
共同的属性:叫value属性
作用:
1.给按钮上的文字赋值
2.当标签是单选框或者复选框,那么每一个选项必须有value值,否则提交时的值都是on
二、CSS
1、CSS:层叠样式表、用于网页美化（cascading）
2、css位置：
行内样式：<div style=”color:green”></div>
内部样式：<style type = “text/css”> </style> html内部
外部样式：方式一：<link type = “text/css” rel = “stylesheet” href=”css/out.css” />
type: 指定文本的类型
rel: 指定当前的HTML与CSS文件之间的关系 relation
href: 指定样式文件地址
方式二：
<style type=”text/css”>
@import url(“css/out.css”);
</style>
3、基本选择器
（1）、标签选择器
标签名{属性1:值1;属性2:值2;......}
（2）、ID选择器（每个标签只能有一个id名）
#name {属性1:值1;属性2:值2;......}
<div id="name"></div>
（3）、类选择器
.name{属性1:值1;属性2:值2;......}
<div class="name"></div>
优先级：标签选择器 < 类选择器 < ID选择器
4、拓展选择器
(1)、后代选择器（关联选择器）标签关系必须是嵌套关系
<style>
#red li {
color: red;
}
</style>
(2)、子元素选择器（直接后代选择器）: 选择器1 > 选择器2
<style>
.red > p {
color: red;
}
</style>
(3)、选择器分组（并集选择器）:
<style>
div, span, p, font {
color: red;
}
</style>
(4)、属性选择器: 选择器[属性的名称='属性的值']
<style>
input[type="text"] {
background-color: skyblue;
}
</style>
(5)、伪类选择器:
:link 未被访问过的链接
:visited 已经被访问过的链接
:hover 鼠标悬停在元素的上方（现在hover可以适用于任何标签）
:active 被激活的元素，例：点击中的链接
注意：如果全部书写，顺序不能变
:focus 获取键盘输入焦点的时候（通常用于表单元素）
5、css属性
(1)、文本样式：
color 颜色
line-height 行高、单位像素
text-decoration none/默认、underline/下划线、overline/上划线
text-align left 左边、 right 右边、center 中间
(2)、字体样式
font-family 字体
font-size 字体大小、单位像素
font-style 样式、italic 斜体、normal 默认值
font-weight 粗细 border加粗
font: 字体风格 字体变形 字体加粗 字体大小 行高 字体族科
(3)、盒子模型
margin-top
border-top
padding-top
margin-left margin-right
border-left content border-right
padding-left padding-right
padding-bottom
border-bottom
margin-bottom
（3.1）、边框
border: 1px solid #000; 生成1像素实线的黑色边框
实线solid 虚线dashed 点线dotted
Border-top/right/bottom/left 上右下左
（3.2）、内边距
padding:10px; 上下左右都是10px
padding:10px 20px; 上下10px，左右20px
padding:10px 20px 30px; 上10px，左右20px，下30px
padding:10px 20px 30px 40px; 上10px，右20px，下30px，左40px
注意：如果一个盒子有固定大小，加了padding会变大。
如果不想撑大, 可以设置box-sizing为 border-box. (默认为 content-box)
Padding-top/right/bottom/left 上右下左
（3.3）、外边距
margin:20px; 四种取值情况同padding
特殊取值：margin: 0 auto; 让一个固定大小的块元素本身水平居中
Margin-top/right/bottom/left 上右下左
(4)、背景样式background-color background-image background-repeat background-position
background-color:red; 只能设置颜色
background-image:url(图片的路径地址); 只能设置图片
background-repeat: no-repeat;
no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺
(5)、浮动和清除浮动
浮动：float 属性：left right
清除浮动：clear属性：left right both
(6)、display属性 ：控制元素的显示和隐藏
Inline ：设置元素为内联元素
Block ：设置元素为块级元素
None ：设置元素不可见
(7)、position 定义一个元素是否absolute(绝对)relative(相对)，static（静态),或者fixed（固定）
top 层距离顶点纵坐标的距离
left 层距离顶蹼横坐标的距离
width 层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值
height 层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值
z-index 判定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
(8)、visibility 这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用
inherit值设置子层继承父层的可见性，如果父层可见，子层也可见，
visible值时，无论父层是否可见，子层都可见，
hidden时，无论父层是否可见，子层都隐藏
(9)、overflow 用于设置层内的内容超出层所能容纳的范围处理方式，为该属性
设置visible值时，无论层的大小，内容都会显示出来，
当设置hidden值时，会隐藏超出层大小的内容，
当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条，
而值使用auto值时，只在内容超出层的范围时才显示滚动条