学了几天的web了今天才来整理，这个相比较前面的python来说就比较好理解了，
那接下来我就以代码的方式呈现出来以便我们以后的查阅和理解，我就编辑到代
码框里了昂
1.列表标签
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><! --unorder list--> ?#unorder list 是没有排序的，前面是小黑点<ul> ???<li>111</li> ???<li>111</li> ???<li>111</li></ul><! --order list--> ??#order list 是前面有序号，<ol> ???<li>222</li> ???<li>222</li> ???<li>222</li></ol><! --defind list--><dl> ???<! --define title--> ???<dt>河北省</dt> ???<! --define data--> ???<dd>石家庄</dd> ???<dd>天津</dd> ???<dd>北京</dd> ???<dd>熊安</dd></dl></body></html>
2.form注册表单
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><h3>注册页面</h3><from action="" method="post"> ???<p>姓名:<input type="text" name="username" value="yuan"></p> ???<p>密码:<input type="password" name="password" value="123"></p> ???<p>性别:<input type="radio" name="gender" value="male"checked="checked">男<input type="radio" name="gender" value="male"checked="checked">女</p> ???<p>爱好:<input ?type="checkbox" name="hobby" value="basketball" checked="checked">篮球<input ?type="checkbox" name="hobby" value="football" checked="checked">足球</p> ???<p>头像:<input type="file" name="fileOBJ"> ???<p><input type="hidden" name="djfk" value="sfgd"></p> ???<p>个人简介<br> ???????<textarea name="perdonalinfi" id="" cils="50" rows="20"></textarea> ???</p> ??????<select name="province" size="5" multiple="multiple"> ?#multiple规定输入字段可选择多个值 ????????????<option value="hebei">河北省</option> ????????????<option value="hunan">湖南省</option> ????????????<option value="tianjin"selected>天津省</option> ????????????<option value="gansu"selected>甘肃省</option> ????????????<option value="henan">河南省</option> ??????</select> ???</p> ???<hr> ???<p><input type="reset" ></p> ???<p><input type="button"value="按钮" ></p> ???<p><input type="submit" ></p> ???</hr></from>{"username":"yuan","password":"123","gender":"male","hobby":["basketball","football"],"fileOBJ:fileOBJ","province:hebei"}</body></html>3.div
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><h3>yuan</h3><em style="color: red;font-size:25px">yuan</em><b>yuan</b><div style="background-color: darkorange">yuan</div><span>span</span><span>span</span></body></html>
4.css选择器，这里我首先分析一下咱们再举例实现
在下面的这个分析中不要晕哈，这个E和F只是大的
方向，而c和p则是我例子中的东西
基本选择器：标签选择器div{ ???color:red; ?}意思就是只要是div标签里面的就都变成红色id选择器#p2{ ?color:green;}这个意思就是选择id为p2的那个，将其变成绿色class 选择器.c1{ ?color:red;}就是说他是可以重复的，可以有多个，而id是不能重复的这个要区分开那就是像下面这样选择通配器*{ color:green;}这个就是说我们用*的话那就是所有的都匹配上组合选择器 ???1.多元素选择器 ???c2,p{ ???color:red; ???} ???E,F 多元素选择器，同时匹配所有E元素和F元素，E和F之间用逗号分隔 ?2.后代选择器 ??E F 就比如说E和F，那后代选择器就是匹配所有属于E元素后代的F元素，他们之间用空格分隔 ?那不知道有没有人和我一样，只知道用空格分隔，但不知道前面的这个点是用来干嘛的，我就告诉你吧 ?这个点就是说前面有class，就是看哪个class等于c2，那如果是#c2的话我们就应该去找id，看谁的id等于c2 ?，不知道这样说大家能够明白吗 ?.c2 p{ ???color:red; ?} ?3.子代选择器 ??E>F 匹配所有E元素的子元素F ??.c2>p{ ????color:green; ??} ??在这里要分清子代和后代，我在的过程中就给弄懵了 ?4.毗邻选择器 ??E+F ?匹配所有紧随E元素之后的统计元素在这里我又遇到一个问题，毗邻也就是紧紧的跟着，所以刚下我企图让中间隔着某些语句的匹配，就只匹配一个.c2+p{ color:pink}5.兄弟选择器E~F普通兄弟，以破折号分隔.c2~p{ ?color:red }这个只要是平级就都会显示接下来我们就在例子中真切的感受一下他，注释起来的到最后要用的话就用Ctrl+/来打开注释就好
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style>/* 一 基本选择器*/ ??????/*1 标签选择器*/ ???????/*div{*/ ???????????/*color: red;*/ ???????/*}*/ ??????/*2 id选择器*/ ???????/*#p2{*/ ??????????/*color:red;*/ ??????/*}*/ ?????/*3.class选择器*/ ???????/*.c1{*/ ???????????/*color: red;*/ ???????/*}*/ ???????/*4.通配选择器*/ ?????/** {*/ ?????????/*color: green;*/ ?????????/*padding: 0;*/ ?????/*}*//*组合选择器 ???????*/ ???????/*1.后代选择器*/ ???????/*.c2 p{*/ ???????????/*color: red;*/ ???????/*}*/ ???????/*2.子代选择器*/ ???????/*.c2>p{*/ ???????????/*color: red;*/ ???????/*}*/ ???????/*3.毗邻选择器*/ ????????.c2+p{ ????????????color: red; ???????????} ???????/*!*4.兄弟选择器*!*/ ???????/*.c2~p{*/ ???????????/*color: red;*/ ???????/*}*/ ???????/*5.多元素选择器*/ ???????.c2.c3,.c2~.c3{ ???????????color: red; ???????????background-color: darkorange; ???????????font-size:15px; ???????} ???????/*!*6.多元素选择器*! 意思就是匹配所有c2元素和p元素，那凡是带p的都一律匹配了*/ ???????????/*c2,p{*/ ???????????/*color: lightpink;*/ ???????????/*}*/ ???</style></head><body><p class="c1">p1</p><p id="p2">p2</p><p class="c1">p3</p><div class="c2"> ???<div> ???????<p>P3</p> ???</div> ???<p class="c3">P1</p></div><!--<span>span</span>--><p class="c3">P2</p><p class="c4">P3</p><p class="c5">P3</p><p class="c6">P5</p><div>DIV</div></body></html>5.css的四种引入方式，
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<!--<导入式>--> ???<style type="text/css"> ???????@import "index.css"; ???</style>><!--<嵌入式>--> <!--<style>--> ???????<!--p{--> ???????????<!--background-color: red;--> ?????????<!--}--> ???<!--</style>--> ???<!--链接式>--> ???<!--<link rel="stylesheet"href="index.css">--></head><body><!--<p>lanbo</p>--><!--<p>xiaohua</p>--><!--<p>baobao</p>--><!--<行内式>--><!--<p style="background-color: aqua">haha</p>--><p>最亲爱的王老师</p></body></html>这篇博客前面关于标签的这一部分阐述的还不是很清楚，待后面弄懂时再来仔细阐述一番，得来本篇就先说到这里
前端基础之css一
原文地址：http://www.cnblogs.com/1996-11-01-614lb/p/7566643.html