列表标签
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: 设置宽
前端CSS
原文地址：http://www.cnblogs.com/tianjianng/p/7821936.html