資訊專欄INFORMATION COLUMN
摘要：前端技術(shù)之詳解第一天一部分略。。。。中國(guó)主要城市北京上海廣州美國(guó)主要城市紐約洛杉磯華盛頓西雅圖在瀏覽器中，默認(rèn)是不會(huì)增加任何的效果改變的，但是語義變了，中的所有元素是一個(gè)小區(qū)域。
無序列表，用來表示一個(gè)列表的語義，并且每個(gè)項(xiàng)目和每個(gè)項(xiàng)目之間，是不分先后的。
ul就是英語unordered list，“無序列表”的意思。
li 就是英語list item ， “列表項(xiàng)”的意思。
你會(huì)發(fā)現(xiàn)，這是我們學(xué)習(xí)的第一個(gè)“組標(biāo)簽”，就是要么不寫，要么就要寫一組。
北京
也就是說，所以的li不能多帶帶存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有l(wèi)i。
下面的是錯(cuò)誤的，因?yàn)楸仨氂胾l包裹：
北京
下面的也是錯(cuò)誤的，因?yàn)閡l里面只能有l(wèi)i標(biāo)簽，而不能有別的：
中國(guó)主要城市
瀏覽器會(huì)默認(rèn)的給無序列表小圓點(diǎn)的“先導(dǎo)符號(hào)”
但是，我們這里再次強(qiáng)調(diào)，ul的作用，并不是給文字增加小圓點(diǎn)的，而是增加無序列表的“語義”的。
ul標(biāo)簽實(shí)際應(yīng)用場(chǎng)景：
導(dǎo)航條：
ul的兒子，只能是li。但是li是一個(gè)容器級(jí)標(biāo)簽，li里面什么都能放，比如：
甚至于可以再放一個(gè)ul：
1餅干
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>Documenttitle>head><body><h4>中國(guó)歌曲排行榜h4><ol><li>小蘋果li><li>月亮之上li><li>最炫民族風(fēng)li>ol>body>html>
也就是說，ol和ul就是語義不一樣，怎么使用都是一樣的。
ol里面只能有l(wèi)i，li必須被ol包裹。li是容器級(jí)。
ol這個(gè)東西用的不多，如果想表達(dá)順序，大家一般也用ul：
1. 小蘋果
定義列表也是一個(gè)組標(biāo)簽，不過比較復(fù)雜，出現(xiàn)了三個(gè)標(biāo)簽：
dl表示definition list 定義列表
dt表示definition title 定義標(biāo)題
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>Documenttitle>head><body><h3>中國(guó)主要城市h3><dl><dt>北京dt><dd>國(guó)家首都，政治文化中心dd><dd>污染很嚴(yán)重，PM2.0天天報(bào)表dd>dl><dl><dt>上海dt><dd>魔都，有外灘、東方明珠塔、黃浦江dd>dl><dl><dt>廣州dt><dd>中國(guó)南大門，有珠江、小蠻腰dd>dl>body>html>
表達(dá)的語義是兩層：
1) 是一個(gè)列表，列出了北京、上海、廣州三個(gè)項(xiàng)目
2）每一個(gè)詞兒都有自己的描述項(xiàng)。
dd是描述dt的。
dt、dd都是容器級(jí)標(biāo)簽，想放什么都可以。所以，現(xiàn)在就應(yīng)該更加清晰的知道：
用什么標(biāo)簽，不是根據(jù)樣子來決定，而是語義。
div和span是非常重要的標(biāo)簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。
這兩個(gè)東西，都是最最重要的“盒子”。
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>Documenttitle>head><body><div><h3>中國(guó)主要城市h3><ul><li>北京li><li>上海li><li>廣州li>ul>div><div><h3>美國(guó)主要城市h3><ul><li>紐約li><li>洛杉磯li><li>華盛頓li><li>西雅圖li>ul>div>body>html>
div在瀏覽器中，默認(rèn)是不會(huì)增加任何的效果改變的，但是語義變了，div中的所有元素是一個(gè)小區(qū)域。
div標(biāo)簽是一個(gè)容器級(jí)標(biāo)簽，里面什么都能放，甚至可以放div自己
span也是表達(dá)“小區(qū)域、小跨度”的標(biāo)簽，但是是一個(gè)“文本級(jí)”的標(biāo)簽。
就是說，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>Documenttitle><style type="text/css">span{background-color: pink;}style>head><body><h3>書h3><ul><li><p>書名p><p>簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介<span><a href="">詳細(xì)信息a><a href="">購(gòu)買a>span>p>li><li><p>書名p><p>簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介<span><a href="">詳細(xì)信息a><a href="">購(gòu)買a>span>p>li><li><p>書名p><p>簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介<span><a href="">詳細(xì)信息a><a href="">購(gòu)買a>span>p>li>ul>body>html>div標(biāo)簽是最最重要的布局標(biāo)簽
1
所以，我們親切的稱呼這種模式叫做“div+css”。div標(biāo)簽負(fù)責(zé)布局，負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)分塊。css負(fù)責(zé)樣式。
案例：
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>Documenttitle><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">這就是logodiv><div class="nav">導(dǎo)航條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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2310.html
摘要：前端技術(shù)之詳解第二天華文中宋基礎(chǔ)選擇器負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)樣式，負(fù)責(zé)行為。微軟雅黑瀏覽器的市場(chǎng)占有率瀏覽器打分兒子選擇器測(cè)試工具的兒子。表示選擇下一個(gè)兄弟微軟雅黑選擇上的是元素后面緊挨著的第一個(gè)兄弟。前端技術(shù)之_CSS詳解第二天 1、css基礎(chǔ)選擇器 html負(fù)責(zé)結(jié)構(gòu)，css負(fù)責(zé)樣式，js負(fù)責(zé)行為。 css寫在head標(biāo)簽里面，容器style標(biāo)簽。 先寫選擇器，然后寫大括號(hào)，大括號(hào)里面是樣式。 ...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
摘要：前端技術(shù)之詳解第四天一第三天的小總結(jié)盒模型，什么是盒子所有的標(biāo)簽都是盒子。如果不在標(biāo)準(zhǔn)流，比如盒子都浮動(dòng)了，那么兩個(gè)盒子之間是沒有塌陷現(xiàn)象的盒子居中的值可以為，表示自動(dòng)。前端技術(shù)之_CSS詳解第四天 一、第三天的小總結(jié) 盒模型box model，什么是盒子？ 所有的標(biāo)簽都是盒子。無論是div、span、a都是盒子。圖片、表單元素一律看做文本。 盒模型有哪些組成： width、hei...
摘要：第節(jié)認(rèn)識(shí)的作用學(xué)習(xí)的一原因現(xiàn)在的前端網(wǎng)頁功能豐富，特別是單頁應(yīng)用技術(shù)流行后，的復(fù)雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴(kuò)展寫法的編譯工作。在出現(xiàn)后，還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。其實(shí)就是獲取了項(xiàng)目的絕對(duì)路徑。 第01節(jié)：認(rèn)識(shí)WebPack的作用： 學(xué)習(xí)的一原因： 現(xiàn)在的前端網(wǎng)頁功能豐富，特別是SPA（single page web application 單頁應(yīng)用）技術(shù)流行后，...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6183·2021-11-29 11:00
