前端技術之_CSS詳解第一天 一html部分 略。。。。 二、列表 列表有3種 2.1 無序列表 無序列表，用來表示一個列表的語義，並且每個項目和每個項目之間，是不分先後的。 ul就是英語unordered list，“無序列表”的意思。 li 就是英語list item ， “列表項”的意思。 你 ...
前端技術之_CSS詳解第一天
一html部分
略。。。。
二、列表
列表有3種
2.1 無序列表
無序列表，用來表示一個列表的語義，並且每個項目和每個項目之間，是不分先後的。
ul就是英語unordered list，“無序列表”的意思。
li 就是英語list item ， “列表項”的意思。
你會發現，這是我們學習的第一個“組標簽”，就是要麼不寫，要麼就要寫一組。
<ul><li>北京</li><li>上海</li><li>廣州</li><li>鐵嶺</li> </ul>
也就是說，所以的li不能單獨存在，必須包裹在ul裡面；反過來說，ul的“兒子”不能是別的東西，只能有li。
下麵的是錯誤的，因為必須用ul包裹：
<li>北京</li> <li>上海</li> <li>廣州</li> <li>鐵嶺</li>
下麵的也是錯誤的，因為ul裡面只能有li標簽，而不能有別的：
<ul>
<h3>中國主要城市</h3>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>鐵嶺</li> </ul>
瀏覽器會預設的給無序列表小圓點的“先導符號”
但是，我們這裡再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。
ul標簽實際應用場景：
導航條：
ul的兒子，只能是li。但是li是一個容器級標簽，li裡面什麼都能放，比如：
甚至於可以再放一個ul：
1<ul> 2 <li> 3 吃的 18 <ul> 19 <li>餅干</li> 20 <li>麵包</li> 21 <li> 22 巧克力 23 <ul> 24 <li>德芙</li> 25 <li>費列羅</li> 26 </ul> 27 </li> 28 </ul> 4 </li> 5 <li> 6 用的 7 <ul> 8 <li>筆記本</li> 9 <li>圓珠筆</li> 10 </ul> 11 </li> 12 <li> 13 喝的 14 <ul> 15 <li>牛奶</li> 16 <li>可樂</li> 17 </ul> 18 </li> </ul>
2.2 有序列表
ordered list 有序列表，用ol表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <h4>中國歌曲排行榜</h4> <ol> <li>小蘋果</li> <li>月亮之上</li> <li>最炫民族風</li> </ol> </body> </html>
也就是說，ol和ul就是語義不一樣，怎麼使用都是一樣的。
ol裡面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的不多，如果想表達順序，大家一般也用ul：
<ul> <li>1. 小蘋果</li> <li>2. 月亮之上</li> <li>3. 最炫民族風</li> </ul>
2.3定義列表
定義列表也是一個組標簽，不過比較複雜，出現了三個標簽：
dl表示definition list 定義列表
dt表示definition title 定義標題
dd表示definition description 定義表述詞兒
dt、dd只能在dl裡面；dl裡面只能有dt、dd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <h3>中國主要城市</h3> <dl> <dt>北京</dt> <dd>國家首都，政治文化中心</dd> <dd>污染很嚴重，PM2.0天天報表</dd> </dl> <dl> <dt>上海</dt> <dd>魔都，有外灘、東方明珠塔、黃浦江</dd> </dl> <dl> <dt>廣州</dt> <dd>中國南大門，有珠江、小蠻腰</dd> </dl> </body> </html>
表達的語義是兩層：
1) 是一個列表，列出了北京、上海、廣州三個項目
2）每一個詞兒都有自己的描述項。
dd是描述dt的。
dt、dd都是容器級標簽，想放什麼都可以。所以，現在就應該更加清晰的知道：
用什麼標簽，不是根據樣子來決定，而是語義。
三、div和span
div和span是非常重要的標簽，div的語義是division“分割”； span的語義就是span“範圍、跨度”。
這兩個東西，都是最最重要的“盒子”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div> <h3>中國主要城市</h3> <ul> <li>北京</li> <li>上海</li> <li>廣州</li> </ul> </div> <div> <h3>美國主要城市</h3> <ul> <li>紐約</li> <li>洛杉磯</li> <li>華盛頓</li> <li>西雅圖</li> </ul> </div> </body> </html>
div在瀏覽器中，預設是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小區域。
div標簽是一個容器級標簽，裡面什麼都能放，甚至可以放div自己
span也是表達“小區域、小跨度”的標簽，但是是一個“文本級”的標簽。
就是說，span裡面只能放置文字、圖片、表單元素。 span裡面不能放p、h、ul、dl、ol、div。
span裡面是放置小元素的，div裡面放置大東西的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> span{ background-color: pink; } </style> </head> <body> <h3>書</h3> <ul> <li> <p>書名</p> <p> 簡介簡介簡介簡介簡介簡介簡介簡介 <span> <a href="">詳細信息</a> <a href="">購買</a> </span> </p> </li> <li> <p>書名</p> <p> 簡介簡介簡介簡介簡介簡介簡介簡介 <span> <a href="">詳細信息</a> <a href="">購買</a> </span> </p> </li> <li> <p>書名</p> <p> 簡介簡介簡介簡介簡介簡介簡介簡介 <span> <a href="">詳細信息</a> <a href="">購買</a> </span> </p> </li> </ul> </body> </html>
div標簽是最最重要的佈局標簽
1 <div class="header"> 2 <div class="logo"></div> 3 <div class="nav"></div> 4 </div> 5 <div class="content"> 6 <div class="guanggao"></div> 7 <div class="dongxi"></div> 8 </div> <div class="footer"></div>
所以，我們親切的稱呼這種模式叫做“div+css”。div標簽負責佈局，負責結構，負責分塊。css負責樣式。
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> .header{ width: 980px; height:100px; margin: 0 auto; margin-bottom: 10px; } .content{ width: 980px; height: 400px; margin: 0 auto; margin-bottom: 10px; } .footer{ width: 980px; height:100px; margin: 0 auto; background-color: yellow; margin-bottom: 10px; } .logo{ float: left; width: 200px; height: 60px; background-color: red; } .nav{ float: right; width: 600px; height: 60px; background-color: blue; } .guanggao{ float: left; width: 250px; height: 400px; background-color: darkblue; } .dongxi{ float: right; width: 690px; height: 400px; background-color: skyblue; } </style> </head> <body> <div class="header"> <div class="logo">這就是logo</div> <div class="nav">導航條</div> </div> <div class="content"> <div class="guanggao">廣告</div> <div class="dongxi">賣的東西</div> </div> <div class="footer">頁腳</div> </body> </html>
四、表單
表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div> <h3>歡迎註冊本網站</h3> <form action="1.php"> <p> 請輸入您的姓名: <input type="text" value="預設有的值，(*^__^*) 嘻嘻……" /> </p> <p> 請輸入您的密碼： <input type="password" /> </p> <p> 請選擇你的性別： <input type="radio" name="xingbie" /> 男 <input type="radio" name="xingbie" /> 女 <input type="radio" name="xingbie" /> 保密 </p> <p> 請選擇你的學歷： <input type="radio" name="xueli" /> 幼兒園 <input type="radio" name="xueli" /> 小學 <input type="radio" name="xueli" /> 初中 <input type="radio" name="xueli" /> 高中 <input type="radio" name="xueli" /> 大學 <input type="radio" name="xueli" /> 碩士 <input type="radio" name="xueli" /> 博士 <input
