CSS標(biāo)簽有哪些及怎么用

這篇文章主要介紹了CSS標(biāo)簽有哪些及怎么用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS標(biāo)簽有哪些及怎么用文章都會有所收獲，下面我們一起來看看吧。

1，無序列表

ul-li是沒有前后順序的信息列表。

語法：

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

舉例：

<ul>

<li>精彩少年</li>

<li>美麗突然出現(xiàn)</li>

<li>觸動(dòng)心靈的旋律</li>

</ul>

ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)

2,有序列表

語法：

<ol>

<li>信息</li>

<li>信息</li>

......

</ol>

舉例：

下面是一個(gè)熱點(diǎn)課程下載排行榜：

<ol>

<li>前端開發(fā)面試心法 </li>

<li>零基礎(chǔ)學(xué)習(xí)html</li>

<li>JavaScript全攻略</li>

</ol>

<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號，序號默認(rèn)從1開

<div>容器標(biāo)簽

在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。

語法：

<div>&hellip;</div>

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器

注釋：<div> 是一個(gè)塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個(gè)換行符。

創(chuàng)建表格的五個(gè)元素：

table、tbody、tr、th、td

1、<table>&hellip;</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。

2、<tbody>&hellip;</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。（這個(gè)標(biāo)簽基本上不怎么用了）

3、<tr>&hellip;</tr>：表格的一行，所以有幾對tr 表格就有幾行。

4、<td>&hellip;</td>：表格的一個(gè)單元格，一行中包含幾對<td>...<td/>，說明一行中就有幾列。

5、<th>&hellip;</th>：表格的頭部的一個(gè)單元格，表格表頭。

6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。

表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要

<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機(jī)庫存量">

<caption>2012年到2013年庫存記錄</caption>

1，使用<a>標(biāo)簽，鏈接到別一個(gè)頁面

使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個(gè)標(biāo)簽。

語法：

<a href=”目標(biāo)網(wǎng)址”>鏈接顯示的文本</a>

例如：

<a href = "http://www.imooc.com">click here!</a>

上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到http://www.imooc.com這個(gè)網(wǎng)頁。

認(rèn)識<img>標(biāo)簽，為網(wǎng)頁插入圖片

在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。

語法：

<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標(biāo)識圖像的位置；

2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；

3、title：提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

關(guān)于“CSS標(biāo)簽有哪些及怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS標(biāo)簽有哪些及怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。