ul标签：无序列表
ol标签：有序列表
li标签：写在ul和ol标签里面的
dl标签：定义列表
dt标签和dd标签：都写在dl里面的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<d1>
<dt>选项</dt>
<dd>111</dd>
<dd>222</dd>
</d1>
</body>
</html>
表单标签
form标签：
action属性：提交的地址或者路径，提交后的内容是一个键值对的格式
input标签： 写在from标签里面的
type属性:类型
text:明文
password: 密文
checkbox: 多选框（根据选出来的内容对键值对相对应的列表添加值）
radio: 单选框（做约束，相对应的name值要一样）
file: 选择文件（这个里面的数据不会放在键值对里面）
submit: 提交
reset: 重置
button: 按钮，只是一个操作用于JS
placeholder属性： 灰色提示信息
name属性： 键值对的key，没有这个就不会提交成功
value属性：键值对的值，被列表包起来，根据type的属性不同，value的值也会不同
textarea 标签：文本框
clos属性： 设置行宽
rows属性： 设置列的高
select 标签： 下拉框标签
name属性： 放在select标签里面的，键值对的key
multiple属性： 多选文本，放在select标签里面的
size属性：多显框显示的个数
option标签： 选择下拉框
value: 放在option标签里面的，键值对的值
lable标签：只接收文本，与input 标签做关联
for属性： 用id关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9000">
<p><label for="1">姓名</label>
<input type="text" name="name"placeholder="用户名" id="1"></p>
<p><label for="2">密码</label>
<input type="password" name="paw" placeholder="密码" id="2"></p>
<p>爱好 <input type="checkbox" name="1" value="baskeball">篮球
<input type="checkbox" name="2" value="football">足球
<input type="checkbox" name="3" value="badmiton">羽毛球</p>
<p>性别 <input type="radio" name="sex" value="male" >男
<input type="radio" name="sex" value="female">女</p>
<p>选择文件<input type="file"></p>
<textarea name="information" id="4" cols="30" rows="10"></textarea>
<p><select name="选择省份" id="5" mutiple="multipe" size="1">
<option>省份</option>
<option value="HN">河南省</option>
<option value="HB">河北省</option>
<option value="YN">云南省</option>
</select></p>
<p><input type="reset" value="重置"></p>
<p><input type="button" value="按钮"></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
css介绍
定义：就是网页的布局和渲染效果
标签操作：（查找标签）
将需要操作的标签查找方法写在style标签里面，对相对应的标签进行布局和渲染
style标签：里面写的都是CSS代码，进行操作标签，使标签展现更加美观
CSS的引入方式
行列式：直接在标签里面加上style属性，后面写上操作
<p style="background-color:mediumvioletred">hello</p>
嵌入式：使用sytle标签，将对应操作写在style标签里面
<style>
p{
background-color:#b4b4b4;
}
</style>
链接式：将相对应的操作写在一个css文件里面，然后子使用link引入过来
<link href=‘mystyle.css‘ rel=‘stylesheet‘ typle=‘text/css/‘>
导入式：将文件路径放在style标签里，然后用@import在标签里面引入文件
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径 </style> CSS的选择器
1.基本选择器:使用某些标签名对相应的标签进行操作
2.id选择器： 给相应的标签设置id,id 不能重复，然后在根据id号对相应的标签进行操作，操作前要在id号前加 ‘ # ’
3.class 选择器：给相对应的标签取一个类名，然后再跟类名相对应的标签进行操作，操作前要在类名前加”.“
4.通配选择器：*号，找到所有的标签一起操作
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
color:#99aecb;
}
#d1{
color:#339900;
}
.c1{
color:#2b47ff；
}
</style>
</head>
<body>
<div>div</div>
<div id="d1">hello</div>
<div class="c1">hello</div>
</body>
组合选择器：用于嵌套标签进行查找，或以多级进行同时查找 ，还可以不同的选择器联合使用
后代选择器：空格。父标查找出来，然后加上空格，然后加上需要查找的后代标签
子代选择器：>。 父标查找出来，然后加上 > ,然后加上需要查找的子标
毗邻选择器：+。 查找该标签同级的下一个标签
兄弟选择器： ~。 查找该标签的同级标签，只能够向后面找
多元素选择器： ，。同时查找不同的标签，并且class值是不一样的
属性选择器
[]里面放属性名：直接查找属性名。
~：匹配其中的一个属性值
*：如果匹配的属性值包含某个字母，就能够匹配出来
^: 匹配属性值的开头
$: 匹配属性值的结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[A]{
color:red;
}
[B=b1]{
color:yellow;
}
[C~=c1]{
color:blue;
}
[D*=d1]{
color:green;
}
[E^=e1]{
color:black;
}
[F$=f1]{
color:white;
}
</style>
</head>
<body>
<div A="a1">hello</div>
<div B="b1">hello</div>
<div C="c1">hello</div>
<div D="d1">hello</div>
<div E="e1">hello</div>
<div F="f1">hello</div>
</body>
</html>
选择的优先级
从低到高：
class < id < style < !important
当优先级一样时谁后加载显示谁
！important: 所有的规则都失效，按照这个规则执行
继承只可以是父标的颜色和字体
颜色设置：
color: 设置颜色
background-color:设置背景颜色
opacity: 透明度
字体设置：
font-size: 设置字体大小
font-weight: 设置字体的粗细
font-style: 斜体
font-family: 字体样式
位置操作：
text-algin： 水平设置
text-indent: 首行缩进
line-height: 调上下，行高，垂直居中
float: 悬浮（left:向左飘 right: 向右飘）
非浮点元素正常排序，如果是浮点元素要根据上一个元素的状态来判断位置
边框设置：
border: 边框
bottom:下； top: 上； left: 左； right:右；
padding: 设置内边距
margin: 设置外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 200px;
height: 200px;
background-color: #99aecb;
border: 5px solid red;
margin-bottom: 1px;
/*float: left;*/
}
.d2{
width:300px;
height: 150px;
background-color: #204982;
border:2px solid #f0ad4e;
float:left;
}
.d3{
width: 400px;
height: 200px;
background-color: #84a42b;
border: 3px solid black;
margin-right: 30px;
margin-top: 1px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
其它操作：
text-decoration: 设置样式： None; 去掉某些标签的特殊符号
width: 设置长
height: 设置宽
原文：http://www.cnblogs.com/tianjianng/p/7821936.html