整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇介紹了html 中文本格式及段落等標(biāo)簽，今天說下列表，什么是列表？它就是一種數(shù)據(jù)排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：
無序列表在每行開始位置顯示一個(gè)符號(hào)，語法如下：
<html>
<body>
<h4>一個(gè)無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>顯示效果：
無序列表的符號(hào)可以通過在ul 標(biāo)簽上設(shè)置 type 屬性顯示不同的符號(hào)，比如：
1、disc —— 實(shí)心圓點(diǎn) (默認(rèn)類型)
2、circle —— 空心圓圈
3、square —— 實(shí)心方塊
實(shí)例代碼：
<html>
<body>
<h4>一個(gè)無序列表：</h4>
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個(gè)無序列表：</h4>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個(gè)無序列表：</h4>
<ul type="square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>顯示效果：
有序列表使用數(shù)字或字母符號(hào)排列，表示文本按一定順序顯示，語法如下：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>效果如下：
同無序列表一樣，在ol上通過type 屬性設(shè)置使用那種符號(hào)表示順序，有以下幾種：
1、1，表示數(shù)字 1、2、3..... （默認(rèn)數(shù)字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....
顯示效果如下：
html代碼：
<!DOCTYPE html>
<html>
<body>
數(shù)字
<ol type="1">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫字母
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫字母
<ol type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>有序列表還可以通過start 屬性設(shè)置起始數(shù)組，如下：
<ol start="3">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>顯示效果：
不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細(xì)地解釋文字，語法如下：
<html>
<body>
<h2>一個(gè)定義列表：</h2>
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
顯示效果：
第一行<dt>是要解釋的名詞，第二行標(biāo)簽<dd>是解釋文本，會(huì)自動(dòng)縮進(jìn)。
以上三種列表是可以嵌套使用的，看如下示例：
<html>
<body>
<h4>一個(gè)嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果：
每嵌套一層，它的符號(hào)是不一樣的，你可以試試再嵌套一層看看效果。
當(dāng)然，不同列表類型也可互相嵌套，根據(jù)顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：
<html>
<body>
<h4>一個(gè)嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ol>
<li>中國茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果如下：
列表是網(wǎng)頁制作中經(jīng)常會(huì)使用的標(biāo)簽，比如在制作網(wǎng)頁導(dǎo)航欄菜單時(shí)會(huì)經(jīng)常用到ul列表，以后會(huì)講如何通過ul標(biāo)簽制作一個(gè)下拉菜單，感謝您閱讀及關(guān)注，祝你學(xué)習(xí)愉快。
上篇：前端入門——html 文字格式、標(biāo)題與段落
下篇：前端入門——html 超鏈接
章我們給大家講解一下什么是css選擇器？css3中5種常見的基本選擇器。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
一：什么是css選擇器？
CSS是一種用于屏幕上渲染html，xml等一種語言，CSS主要是在相應(yīng)的元素中應(yīng)用樣式，來渲染相對(duì)應(yīng)用的元素，那么這樣我們選擇相應(yīng)的元素就很重要了，如何選擇對(duì)應(yīng)的元素，此時(shí)就需要我們所說的選擇器。在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點(diǎn)。
二：css3中5種常見的基本選擇器
css3中的選擇器種類有很多，下面介紹的是5種常見的基本選擇器：通配選擇器，類選擇器，元素選擇器， ID選擇器和群組選擇器。
1.通配符選擇器（所有瀏覽器支持）
通用選擇器用*來表示，用來選擇所有元素，，也可以選擇某個(gè)元素下的所有元素；
*{marigin: 0;
padding: 0;
font-size: 14px;
}上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設(shè)置為0，字體大小都設(shè)置為14px,另外一種就是選擇某個(gè)元素下的所有元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符選擇器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>效果圖：
我們可以看到在demo元素里的三個(gè)子元素div，p，span都是分別沒有設(shè)置css樣式的，但只要我們?cè)O(shè)置了demo元素下的所有元素的統(tǒng)一樣式，那么demo元素里的三個(gè)子元素div，p，span就會(huì)出現(xiàn)樣式。
對(duì)了，在這里說一下，我目前是在職web前端開發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開發(fā)工程師，在入門學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，都可以隨時(shí)關(guān)注并私信我：前端，我都會(huì)根據(jù)大家的問題給出針對(duì)性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程， 還有我做web前端技術(shù)這段時(shí)間整理的一些學(xué)習(xí)手冊(cè)，面試題，開發(fā)工具，PDF文檔書籍教程，都可以直接分享給大家。
2.類選擇器 （所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）
類選擇器根據(jù)類名來選擇，前面以”.”來標(biāo)志，是以一獨(dú)立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，換句話說需要保證類名在html標(biāo)記中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">類選擇器</div>
</body>
</html>效果圖：
3.元素選擇器（所有瀏覽器支持）
元素選擇器（標(biāo)簽名選擇器），是css3選擇器中最常見而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等下下面例子中選擇了span元素，并設(shè)置了字體顏色為紅色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>這里使用<span>元素選擇器</span>改變了樣式</p>
</div>
</body>
</html>效果圖：
4.ID選擇器（所有瀏覽器都支持）
ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對(duì)應(yīng)的元素，不同的是ID選擇器是一個(gè)頁面中唯一的值，我們?cè)陬愂褂脮r(shí)是在相對(duì)應(yīng)的類名前加上一個(gè)“.”號(hào)（.className）而id選擇器是在名稱前使用"#"如(#demo)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID選擇器</div>
</body>
</html>效果圖：
ID選擇器有幾個(gè)地方需要特別注意：
第一：一個(gè)文檔中一個(gè)id選擇器只充許使用一次，因?yàn)閕d在頁面中是唯一的；
第二，id選擇器不能像類選擇器一樣多個(gè)合并使用，一個(gè)元素只能命名一個(gè)id名；
第三，可以在不同的文檔中使用相同的id名，比如說在“test.html”中給h1定了“＃important”,也可給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個(gè)id叫"#important"的存在。
5.群組選擇器（所有瀏覽器都支持）
當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開，這個(gè)逗號(hào)告訴瀏覽器，規(guī)則中包含多個(gè)不同的選擇器，如果不有這個(gè)逗號(hào)，那么所表達(dá)的意就完全不同了，省去逗號(hào)就成了我們前面所說的后代選擇器，這一點(diǎn)大家在使用中千萬要小心加小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群組選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>這里是一個(gè)段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">鏈接一</a><br>
<span class="demo2">文字文字！</span>
</div>
</body>
</html>效果圖：
以上就是什么是css選擇器？css3中5種常見的基本選擇器（代碼實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注我！！！
作者：程序猿的生活
鏈接：https://zhuanlan.zhihu.com/p/152153067
lt;h2 id="title1">列表標(biāo)簽</h2>
<h3 id="title2">無序列表(unordered list)</h3>
作用: 給一堆內(nèi)容添加無序列表語義(一個(gè)沒有先后順序整體), 列表中的條目是不分先后
格式:
li 英文是 list item, 翻譯為列表項(xiàng)
<h4>選擇居住城市(CN)</h4> <ul> <li>北京</li> <li>上海</li> <li>廣州</li> <li>鐵嶺</li> </ul>
ul應(yīng)用場景:
導(dǎo)航條
商品列表等
新聞列表
注意事項(xiàng):
其實(shí)ul還有一個(gè)type屬性, 可以修改先導(dǎo)符號(hào)的樣式, 取值有disc、square、circle幾種
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
這里指的無序是指對(duì)于主體來說內(nèi)容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標(biāo)題改為"中國霧霾排行", 那么就必須有嚴(yán)格的排名,北京必須寫在前面
瀏覽器會(huì)給無需列表自動(dòng)添加先導(dǎo)符號(hào)但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點(diǎn), 而是增加無序列表的語義
ul是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說li標(biāo)簽不能單獨(dú)存在, 必須包裹在ul里面
由于ul和li是一個(gè)整體, 所以u(píng)l里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽
關(guān)注微信訂閱號(hào)：網(wǎng)頁設(shè)計(jì)輕松學(xué)
<ul> <li> 好吃的 <ul> <li>牛奶</li> <li>面包</li> </ul> </li> <li> 日用的 <ul> <li>毛巾</li> <li>牙膏</li> </ul> </li> </ul>
<h3 id="title3">有序列表(ordered list)</h3>
作用: 給一堆內(nèi)容添加有序列表語義(一個(gè)有順序整體), 列表中的條目有先后之分
格式:
<h4>中國房價(jià)排行</h4> <ol> <li>北京</li> <li>上海</li> <li>廣州</li> <li>鐵嶺</li> </ol>
ol應(yīng)用場景:
xxx排行榜
其實(shí)ol應(yīng)用場景并不多, 因?yàn)槟苡胦l做的用ul都能做
注意事項(xiàng):
ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點(diǎn)都一樣
其實(shí)ul還有兩個(gè)常見屬性start、type屬性, 可以修改先導(dǎo)符號(hào)的樣式和序號(hào)
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
<h3 id="title4">定義列表(definition list)</h3>
作用: 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個(gè)條目進(jìn)行相應(yīng)的描述
格式:
dt英文definition title, 翻譯為定義標(biāo)題
dd英文definition description, 翻譯為定義描述信息
<dl> <dt>北京</dt> <dd>國家的首都, 看升國旗的地方</dd> <dt>上海</dt> <dd>魔都, 遍地是黃金的地方</dd> </dl>
關(guān)注微信訂閱號(hào)：網(wǎng)頁設(shè)計(jì)輕松學(xué)
dl應(yīng)用場景:
網(wǎng)站底部相關(guān)信息
但凡看到一堆內(nèi)容都是用于描述某一個(gè)內(nèi)容的時(shí)候就要想到dl
注意事項(xiàng):
- dl是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標(biāo)簽不能單獨(dú)存在, 必須包裹在dl里面
由于dl和dt、dd是一個(gè)整體, 所以dl里面不推薦包裹其它標(biāo)簽
dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽
定義列表非常靈活, 可以給一個(gè)dt配置多個(gè)dd, 但是最好不要出現(xiàn)多個(gè)dt對(duì)應(yīng)一個(gè)dd, dd的語義是描述離它最近的一個(gè)dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個(gè)條目又可以對(duì)每一個(gè)條目進(jìn)行描述
定義列表非常靈活, 可以將多個(gè)dt+dd組合拆分為多個(gè)dl
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
