web前端——html基礎筆記 NO.3

標籤：

使用ul，添加新聞資訊列表

ul-li是沒有前後順序的資訊列表。

<ul>  <li>資訊</li>  <li>資訊</li>   ......</ul>

 

舉例：

<ul>  <li>精彩少年</li>  <li>美麗突然出現</li>  <li>觸動心靈的旋律</li></ul>

 

ul-li在網頁中顯示的預設樣式一般為：每項li前都內建一個圓點，如所示：

 

使用ol，添加圖書銷售熱門排行榜

文法：

<ol>   <li>資訊</li>   <li>資訊</li>   ......</ol>

 

舉例：

下面是一個熱點課程下載熱門排行榜：

<ol>   <li>前端開發面試心法 </li>   <li>零基礎學習html</li>   <li>JavaScript全攻略</li></ol>

 

<ol>在網頁中顯示的預設樣式一般為：每項<li>前都內建一個序號，序號預設從1開始，如所示：

 

認識div在排版中的作用

文法：

<div>…</div>

確定邏輯部分：

什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器。

 給div命名，使邏輯更加清晰

<div  id="版塊名稱">…</div>

 

 

table標籤---認識網頁上的表格

想在網頁上展示上述表格效果可以使用以下代碼：

1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。

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

4、<td>…</td>：表格的一個儲存格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

5、<th>…</th>：表格的頭部的一個儲存格，表格表頭。

6、表格中列的個數，取決於一行中資料儲存格的個數。

上述代碼在瀏覽器中顯示的預設的樣式為：

小總結：

1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的

2、表頭，也就是th標籤中的文本預設為粗體並且置中顯示

 

caption標籤，為表格添加標題和摘要

摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕助讀程式更好的協助特殊使用者讀取表格內容。

    文法：<table summary="表格簡介文本">

標題

用以描述表格內容，標題的顯示位置：表格上方。

     文法：

<table>    <caption>標題文本</caption>    <tr>        <td>…</td>        <td>…</td>        …    </tr>…</table>

 

web前端——html基礎筆記 NO.3