1、标题标签
h标签
2、段落标签
p
3、换行
br
4、空格
5、大于号，小于号
>
<
6、双引号
"
7、版权符号
©
8、注册符
®
---------------------------------------------------------------------------------------------------
1、无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2、无序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3、自定义列表
<dl>
<dt>深圳</dt>
<dd>深圳1</dd>
<dd>深圳2</dd>
<dd>深圳3</dd>
<dt>广州</dt>
<dd>广州1</dd>
<dd>广州2</dd>
<dd>广州3</dd>
</dl>
3、超链接标签
<a href="www.baidu.com" target="_blank" title="xxxxx">百度一下</a>
超连接到的地址就是href属性的值"www.baidu.com"
你的鼠标放在百度一下的文字上浮动框显示的内容title属性的值"xxxxx"
target的属性的值的意思就是点击百度一下会重新打开一个tab页面,如果没有设置target属性
则默认会在当前窗口打开这个页面，也就是属性的值是“self”
4、表格标签,tr表示行，td表示列
4_1、table的属性
width设置宽度，height设置高度，align设置表格左右对齐
bgcolor设置背景颜色,cellspacing设置单元格和单元格之间的间距,cellpading设置单元格边框和文字之间的距离
4_2、tr的属性
align属性：设置文字在单元格中的位置，比如靠左，靠右，中间
bgcolor属性：背景属性
4_3、td的属性
align:水平对齐
valign:垂直对齐
<!--border="1"的作用是给表格加一个边框-->
<table border="1" width="100px" height="100px" align="left" bgcolor="red" cellspacing="2px" cellpadding="2px">
<caption>测试的表格</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
表格还可以做合并单元格的处理
<table border="1">
<caption>测试合并单元格横向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<!--colspan="3"作用是横向合并-->
<td colspan="3">表身体第一行：第一列</td>
<!--<td>表身体第一行：第二列</td>-->
<!--<td>表身体第一行：第三列</td>-->
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>测试合并单元格纵向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
rowspan="3">：作用是纵向合并单元格
<td rowspan="3">表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<!--<td>表身体第二行：第一列</td>-->
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<!--<td>表身体第三行：第一列</td>-->
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
5、表单标签
5_1:form的属性
name:表单的名称
action:提交数据到哪里
method:提交的方式，有post和get两种方式
target:_bank:和a标签的target属性一致
<form name="表单的名称" action="url" method="post/get">
1、form标签中可以使用的标签
1_1、input标签，文本框
<input type="text" value="你好" placeholder="hello">
1_2、input标签，密码框
<input type="password">
1_3、input标签，单选框,checked="true"的意思默认被选中,如果是单选框，则同样的name属性的标签只能选中一个，才会互斥
<input name="sex" type="radio" checked="true">男
<input name="sex" type="radio" checked="true">女
1_4、input标签，复选框
<input type="checked" name="hob" value="100" checked="true">足球
<input type="checked" name="hob" value="100">篮球
<input type="checked" name="hob" value="100">学习
1_5、文件
<input type="file"><input type="button" value="浏览">
1_6、input标签的属性值
<!--text：就是一个文本输入框-->
<!--submit:可以将数据提交到后台的框-->
<!--password:是一个密码的输入框-->
<!--checkbox:是一个复选框，可以实现多选-->
<!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的-->
<!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的-->
<!--file:是一个上传文件的标签-->
<!--reset:清空输入框的输入的内容-->
2、select标签，下拉菜单
<!--select:实现一个下拉框的标签-->
<!--默认只显示第一个内容，且只能单选，无默认选中项-->
<!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
<select name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第2个内容，且只能单选，无默认选中项-->
<select size="2" name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示2个内容，且可以多选，无默认选中项-->
选项:<select size="2" multiple="multiple">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第一个内容，且可以多选，有默认选中项-->
<select size="2" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
</select>
<!--实现的效果就是实现一个下拉框，按照选项进行了分类-->
<!--那下面这种select该如何提交数据呢？-->
<div>
<select name="bf">
<optgroup label="第一集团军">
<option value="bf1">北伐军1</option>
<option value="bf2">北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option value="bf3">北伐军3</option>
<option value="bf4">北伐军4</option>
</optgroup>
</select>
</div>
3、文本域
<!--textarea:一个输入框-->
<!--控制行数rows-->
<!--控制列数cols-->
<div>
<textarea rows="10" cols="20">
自我简介
</textarea>
</div>
4、图像域,图像就一个标签
<input type="image" src="图片地址">
</form>
-------------------------------------------------------------------------
css
1、引入方法
行内样式
内联样式
外部样式
2、css选择器
简单选择器
标签名
id
class
组合选择器
后代选择器：空格
子代选择器：大于号
并行选择器：逗号
毗邻选择器：加号
属性选择器
假如有一个标签的属性实例如下，一个标签的test属性可以有多个值
<a test="abc1" "abc2"></a>
[test]：选中所有的标签中有属性名称为test的标签
[test="abc1"]：选中所有的标签中有属性名称为test的标签，且标签的值为abc1
[test~="abc1"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值中只要有“abc1”就会被选中
[test^="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值只中以abc开头的标签
[test$="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值只中以abc结尾的标签
[test*="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值有abc这个字母就可以了
属性的前面还可以加一个标签的值，类似下面的例子
a[test]
3、字体属性
font-family：设置字体的格式，比如楷书等等
font-size：设置字体的大小
font-style：设置字体的风格,比如斜体
font-weight：设置字体的粗细
color：设置字体的颜色
4、文本属性
color：设置文本的颜色
text-align：设置元素的水平对齐方式，比如test-align:left
text-indent：设置首行文本的缩进方式，比如test-indent:20px
line-height：设置文本的行高，比如line-height：25px
test-decoration：设置文本的装饰
test-decoration:none：默认的格式，无任何装饰
test-decoration:underline：下划线
test-decoration:overline：上划线
test-decoration:line-through：中划线
5、超链接的伪样式
a:hover{
这里写样式，比如颜色，字体等，意思是鼠标悬浮上去上去css的样式变成什么样子
}
a:link{
这里写样式，比如颜色，字体等，意思是我这个超链接放在那里最初始的状态
}
a:visited{
这里写样式，比如颜色，字体等，意思是鼠标单击访问后超链接的样式
}
a:active{
这里写样式，比如颜色，字体等，意思是鼠标单击未释放的超链接的样式
}
6、列表和背景
列表样式，这里主要是说每一行前面那个小圆点的样式
list-style-type:
none：无标记符号
disc：实心圆，默认的样式
circle：空心圆
square：实心正方形
decimal：数字
背景
背景颜色
background-colour
背景图片
background-img:url(背景图片的路径)
背景图片重复的方式
background-repeat:
repeat：水平和垂直方向平铺
no-repeat：不平铺，只显示一个
repeat-x：水平方向平铺
repate-y：垂直方向平铺
背景图片的定位
background-position:100px 300px;
距离左边100像素，距离上边300像素
background-position:30% 50%;
距离左边的距离是占30%，距离上边是占50%
background-position:[水平方向的关键字]left
ightcenter
background-position:[垂直方向的关键字]topottomcenter
background-position:水平方向关键字 垂直方向关键字
背景图片的尺寸
background-size:
auto:背景图片保持原样
20% 60%：占整个标签水平方向的百分比和垂直方向的百分比
cover:背景图片放大填充整个元素
contain:让图片水平和垂直方向等比例扩大或者缩小
7、盒子模型
7_1、边框
边框的风格
border-style:上边风格、右边风格、下边风格、左边风格【四个值】
border-style:上下风格、左右风格【两个值】
border-top-style
border-bottom-style
border-left-style
border-right-style
边框的颜色
border-color:上边颜色、右边颜色、下边颜色、左边颜色
border-style:上下颜色、左右颜色【两个值】
border-top-color
border-bottom-color
border-left-color
border-right-color
边框的宽度，使用方法和color和style是一样的
border-width
7_2、盒子外边距,盒子距离其他盒子的距离
margin：距离上边盒子的距离、距离右边盒子的距离、距离下边盒子的距离、距离左边盒子的距离
margin-top:
margin-bottom:
margin-left:
margin-right:
margin:0 auto【上下的外边距为0，左右居中，就可以实现居中】
7_3、盒子内边距，盒子中的文本距离盒子内边框的距离
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
8、文档流
标准文档流组成
块级标签
内联标签
display属性
block:标签会被设置为块级标签[转换块级元素和内联元素]
inline：标签会被设置为内联标签[转换块级元素和内联元素]
inline-block:既有内联元素的属性，又有块级元素的属性[控制块级元素放到一行]
none:该元素不会被显示出来[控制元素的显示和隐藏]
9、浮动，会脱离正常的文档流
浮动起来的元素会怎么浮动呢?今天终于弄明白了，比如我们一个元素float的值为left，则他向左边浮动，如果他前面的标签是块级标签，则会浮动到该元素的下边框
就停止了，如果他前面的是内联标签，则该内联标签会被挤到该元素的右边，如果他前面的元素也是浮动的，则该元素会浮动到他前一个浮动元素的右边
float:left
float；right
clear:left
意思保证该元素的左边没有浮动元素
clear:right
意思保证该元素的右边没有浮动元素
总上所述，把块级标签排列的一行有2个办法，一个就是display:inline-block,一个就是float属性
10、postion,元素定位
fixed:元素是固定的，不会移动
static:默认的位置
relative:相对于static的位置移动，他移动也不会脱离文档流,relative的标签所占的位置还是之前未偏移的时候所占的位置
absolute:
1、首先设置为absolut属性的标签会脱离正常文档流，就会浮动起来
2、然后确定的位置是他的父元素，如果父元素的postion被设置为[relative或者absolut]的话，如果父元素的postion属性
没有被设置为上述任意两种元素，则会继续找父元素的父元素，以此类推
11、z-index:设置绝对定位元素的重叠顺序
1、首先他只对position设置为absolut的标签生效
2、z-index的值大的标签比z-index的值小的标签会更显示到上面