一 列表标签
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><dl> ???<dt>选项</dt> ???<dd>111</dd> ???<dd>222</dd></dl></body></html>
二 表单标签
form标签：
cation属性：提交的地址或着路径，提交后的内容是一个键值对的格式。
input标签：写在form标签里面的
type属性：类型
（text：明文；password：密文；checkbox：多选框，根据选出来的内容对键值对相对应的key下面的列表添加值；radio：单选框，需要做约束，相对应的name值要一样；file：选择文件，这个里面的数据不会放在键值对里面；submit：提交；reset：重置；button：按钮，只是一个单纯的按钮，好用与js操作）
placeholder属性：灰色提示信息
name属性：键值对的key，没有这个就不会提交成功
value属性：键值对的值，被列表包起来，根据type的属性不同，value的值就会不同
textarea标签：文本框
cols属性：设置行宽
rows属性：设置列的高
name：key，键值对的key
value：值，键值对的值
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/reg/"> ???<p><label for="11">姓名</label> ???????<input type="text" name="name" placeholder="请输入用户名" id="11"></p> ???<p><label for="22">密码</label> ???????<input type="password" name="pwd" placeholder="请输入密码" id="22"></p> ???<p>爱好<input type="checkbox" name="hobbes" value="basketball">篮球 ???????<input type="checkbox" name="hobbies" value="football">足球 ???????<input type="checkbox" name="hobbies" value="badminton">羽毛球 </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="1" cols="30" rows="10"></textarea> ???<p><select name="address" id="4" multiple="multiple" size="2"> ???????<option>请输入省份</option> ???????<option value="henan">河南省</option> ???????<option value="hebei">河北省</option> ???????<option value="hubei">湖北省</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介绍
什么是css：就是网页的布局和渲染效果
什么是查找标签：就是操作标签、
如何进行查找标签：将需要操作的标签查找方法写在style标签里面，在这个里面之姐就可以操作，对相对应的标签进行布局和渲染
style标签：里面写的都是css代码，进行操作标签，使标签的展现更加美观。
四 css的引入方式
1 行列式：直接在标签的里面加上style属性，后面写上操作
<p style="background-color: rebeccapurple">hello yuan</p>
2 嵌入式：使用style标签，将相对应的操作写在style标签里面
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????p{ ???????????background-color: #2b99ff; ???????} ???</style></head>3 链接式：将相对应的操作写在一个css文件的里面，然后子使用link引入过来
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4 导入式：将文件路径放在style标签里的type属性里面，然后用@import在style标签里面引入文件
<style type="text/css"> ??????????@import"mystyle.css"; 此处要注意.css文件的路径 </style>
五 css的选择器
1 基本选择器
标签选择器：使用某些标签名对相对应的标签进行操作
id选择器：给相对应的标签设置id，id不能重复，然后在根据id号对相对应的标签进行操作，引入时id号前面需要加上#号
class选择器：给相对应的标签取一个类名，然后在跟类名对相对应的标签进行操作，class值可以重发，并且还可以传入多个值，引入时class值的前面加上一个点（.）
通配选择器：*号，找到所有的标签一起操作
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????color:red; ???????} ???????.c1{ ???????????color: #00A7FD; ???????} ???????#d1{ ???????????color:#0a8e6c; ???????} ???</style></head><body><div>div1</div><div class="c1">div2</div><div id="d1">div3</div></body></html>2 组合选择器：用于嵌套标签进行查找，可以多级进行同时查找，还可以不同的选择器联合使用
后代选择器：空格。父标签查找出来，然后加上空格，然后加上需要查找的后代标签。
子代选择器：> 。父标签查找出来后，然后加上 >，在加上需要查找的子代标签。
毗邻选择器： + 。找到该标签同级的下一个标签。
兄弟选择器： ~。查找该标签的同级标签，只能够想后面找。
多元素选择器： ，（逗号）。同时查找不同的标签，并且class值也不同
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.d1 .p1{ ???????????color: #00A7FD; ???????} ???????.d2>.p2{ ???????????color:#0000CC; ???????} ???????.d3+.p3{ ???????????color:#ffff00; ???????} ???????.d4~.p4{ ???????????color:#ff2200; ???????} ???</style></head><body><div class="d1"> ???<div> ???????<div> ???????????<p class="p1">p2</p> ???????</div> ???</div> ???<p class="p1">p1</p></div><div class="d2"> ???<div> ???????<div> ???????????<p class="p2">p3</p> ???????</div> ???</div> ???<p class="p2">p4</p></div><div class="d3"></div><p class="p3">p5</p><p class="p3">p6</p><div class="d4"></div><p class="p4">p7</p><p class="p4">p8</p></body></html>3 属性选择器：[ ](中括号和)，中括号里面放的是属性名
~：匹配其中的一个属性值
*：如果匹配的属性值包含某个字母，就能够匹配出来
^：匹配属性值的开头
$：匹配属性值的结尾
直接将属性名放进去：找出包含有这个属性的标签。如果属性的筛选不出来可以加上属性值
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????[fang]{ ???????????color: #ff2200; ???????} ???????[jie=j1]{ ???????????color:#ffee58; ???????} ???????[yi~=y1]{ ???????????color:#0000CC; ???????} ???????[he*=sa]{ ???????????color: #0a8e6c; ???????} ???????[dong^=d]{ ???????????color:#0C5404; ???????} ???????[lei$=l]{ ???????????color:#9c1b6a; ???????} ???</style></head><body><div fang="f1">div</div><div fang="f2">div1</div><div jie="j1">div2</div><div jie="j2">div3</div><div yi="y1">div4</div><div yi="y2">div5</div><div he="hsa1">div6</div><div he="hsada2">div7</div><div dong="dda">div8</div><div dong="asda">div9</div><div lei="asdl">div10</div><div lei="sasad">div11</div></body></html>六 选择器的优先级
从低到高：
标签查找：1====》class类查找：10====》id查找：100====》在标签内部使用style属性：1000====》！important
当优先级一样时，谁后加载就显示谁
！important：所有的规则都失效，按照这个的规则执行。
什么是继承：继承父标签的颜色和字体，其他的都不能继承。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????color:#2e2e2e; ???????} ???????.d1{ ???????????color: red; ???????} ???????#d2{ ???????????color:#00b6ee; ???????} ???????.p1{ ???????????color:#ffea00; ???????} ???</style></head><body><div class="d1"> ???<p >p1</p> ???<p id="d2" class="p1">p2</p> ???<p>p3</p></div></body></html>七 css的一些操作
颜色设置：
color：设置颜色
background-color：设置背景颜色
opacity：透明度
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.d1{ ???????????background-color: #ffea00; ???????????opacity: 0.5; ???????} ???????.p1{ ???????????color:#ff1744; ???????} ???</style></head><body><div class="d1"> ???<p class="p1">ppp</p></div></body></html>字体设置：
font-size：设置字体大小
font-weight：设置字体的粗细
font-style：字体变斜体
font-family：字体样式
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.s1{ ???????????font-size:30px; ???????} ???????.s2{ ???????????font-weight:600; ???????????font-style: italic; ???????} ???????.s3{ ???????????font-family: normal; ???????} ???</style></head><body><span class="s1">spqn1</span><span class="s2">spqn2</span><span class="s3">spqn3</span></body></html>位置操作：
text-algin：水平设置
text-indent：首行缩进
line-height：调上下，行高，垂直居中
float：悬浮（left：向左飘；right：向右飘）注意：非浮动元素正常显示；如果是浮点元素，会根据他上一个元素是否浮动判断位置。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.d1{ ???????????width: 100%; ???????????height:70px; ???????????background-color:darkgrey; ???????} ???????p{ ???????????text-align: center; ???????} ???????????????.s1{ ???????????line-height:70px; ???????} ???</style></head><body><div class="d1"> ???<p><span class="s1">hello</span></p></div></body></html>边框设置：
border：边框
padding：设置内边距
margin：设置外边距
（bottom：下；top：上；left：左；right：右）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.d1{ ???????????width:200px; ???????????height:200px; ???????????background-color: #ff1744; ???????????border: 5px solid #0C5404; ???????????margin-bottom: 30px; ???????} ???????.d2{ ???????????width:200px; ???????????height:150px; ???????????background-color: #00b6ee; ???????????padding: 100px ; ???????????margin-left: 20px; ???????} ???</style></head><body><div class="d1"></div><div class="d2"></div></body>其他操作：
text-decoration：设置样式 ：None；去掉某些标签的特殊符号
width：设置长
height：设置宽
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.a1{ ???????????text-decoration:None; ???????} ???</style></head><body><a href="#">继续</a><a href="about:cehome?from=extra_start" class="a1">点击</a></body></html>练习:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1 { ???????????width: 100%; ???????????height: 50px; ???????????background-color:#DDDDDD; ???????????opacity: 0.3; ???????} ???????.c4{ ???????????width:80%; ???????????height:50px; ???????????background-color:#DDDDDD; ???????????margin-left: 10%; ???????} ???????.c7{ ???????????width: 100px; ???????????height: 50px; ???????????float:left; ???????} ???????.c8{ ???????????width: 80px; ???????????height: 50px; ???????????float:right; ???????} ???????.c9{ ???????????width: 120px; ???????????height: 50px; ???????????float:right; ???????} ???????.c10{ ???????????width: 80px; ???????????height: 50px; ???????????float:right; ???????} ???????.c11{ ???????????width: 80px; ???????????height: 50px; ???????????float:right; ???????} ????????.c12{ ????????????width: 50px; ????????????height: 50px; ????????????float:right; ???????} ???????.s1{ ???????????line-height:50px; ???????????text-align: center; ???????????color:#1F1E1E; ???????} ???????.c2{ ???????????width:100%; ???????????height: 60px; ???????????background-color: #ffffff; ???????} ???????.c5{ ???????????width: 80%; ???????????height: 60px; ???????????background-color: #FFFFFF; ???????????margin-left: 10%; ???????} ???????.c3{ ???????????width:100%; ???????????height:auto; ???????} ???????.c6{ ???????????width: 80%; ???????????height: auto; ???????????margin-left: 10%; ???????} ???????.d1{ ???????????width: 500px; ???????????height: 400px; ???????????float: left; ???????????margin-top: 50px; ???????} ???????.d3{ ???????????width: 500px; ???????????height: 50px; ???????????margin-top:60px; ???????} ???????.s2{ ???????????font-weight:600; ???????????font-size:30px; ???????????color: #2e2e2e; ???????????line-height:50px; ???????????margin-left: 70px; ???????} ???????.p1{ ???????????margin-left: 120px; ???????} ???????.p2{ ???????????margin-left: 104px; ???????} ???????.i1{ ???????????width:70px; ???????} ???????.i2{ ???????????margin-left: 15px; ???????} ???????.p3{ ???????????margin-left: 120px; ???????} ???????.s3{ ???????????color:red; ???????} ???????.p4{ ???????????margin-left: 150px; ???????} ???????.s4{ ???????????color:#0000CC; ???????} ???????.i3{ ???????????font-size: 14px; ???????} ???????.p5{ ???????????margin-left: 200px; ???????} ???????.i5{ ???????????font-size: 10px; ????????????background-color:red; ???????} ???????.d2{ ???????????width: 314px; ???????????height:400px; ???????????float: right; ???????????margin-top: 50px; ???????} ???????.p6{ ???????????margin-left:30px; ???????} ???????.s5{ ???????????margin-left: 8px; ???????????color:#0000CC; ???????} ???????.p7{ ???????????margin-top: 50px; ???????} ???????.s6{ ???????????font-size: 12px; ???????} ???</style></head><body><div class="c1"> ???<div class="c4"> ???????<div class="c7"><span class="s1">*收藏网址</span></div> ???????<div class="c8"><span class="s1">客户服务</span></div> ???????<div class="c9"><span class="s1">VIP会员俱乐部</span></div> ???????<div class="c10"><span class="s1">我的订单</span></div> ???????<div class="c11"><span class="s1">免费注册</span></div> ???????<div class="c12"><span class="s1">登陆</span></div> ???</div></div><div class="c2"> ???<div class="c5"><img src="111.png" alt="悟空"></div></div><div class="c3"> ???<div class="c6"> ???????<div class="d1"> ???????????<div class="d3"><span class="s2">注册新用户</span></div> ???????????<form> ???????????????<p class="p1"><span class="s3">*</span>用户名：<input type="text" name="user" class="i2"></p> ???????????????<p class="p1"><span class="s3">*</span>手机号：<input type="text" name="phone" class="i2"></p> ???????????????<p class="p2"><span class="s3">*</span>登陆密码：<input type="password" name="passwd" class="i2"></p> ???????????????<p class="p2"><span class="s3">*</span>确认密码：<input type="password" name="pwd" class="i2"></p> ???????????????<p class="p3"><span class="s3">*</span>验证码：<input type="text" name="yanzheng" class="i1 i2"></p> ???????????????<p class="p4"><input type="checkbox" name="ppp"><span class="i3">我已阅读并同意</span><span class="s4 i3">《用户注册协议》</span> </p> ???????????????<p class="p5"><input type="button" value="同意以上协议并注册" class="i5"></p> ???????????</form> ???????</div> ???????<div class="d2"> ???????????<p class="p6"><span class="s6">我已经注册，现在就</span><span class="s5 s6">登陆</span></p> ???????????<p class="p6 p7"><img src="222.png" alt="悟天" width=‘250px‘ height="200px"></p> ???????</div> ???</div></div></body></html>结果：
重修课程day47（前端二之html二和css一）
原文地址：http://www.cnblogs.com/fangjie0410/p/7780965.html