(Lesson two) html 標籤

html 標籤學習

本文中使用了菜鳥教程在線編輯器

接着上節課內容繼續

一.html標籤

1.鏈接標籤(在線編輯)

• 接着上節課,學習鏈接標籤的屬性href

  • 上節課講 href 的值可以爲url/ 網址/本地資源文件地址/

  • 今天在增加一個href的值可以爲錨點

    • 錨點可以理解爲,$\color{red}{要跳轉到某個頁面的某個位置,使用錨點}$上節課學的可理解爲跳轉到某個頁面

    使用步驟
    注意事項:
    - 從當前頁面跳轉到當前頁面得某個位置,調用方法: #錨點名
    - 從當前頁面跳轉到另一頁面的某個位置,調用方法: 文件名#錨點名
    - 以下例子是指第一種情況 #錨點名

    1. 找到你要跳轉的位置加一個鏈接標籤,增加一個name屬性,其值即爲錨點名,其他屬性都不添加.如:下
       

    2. 引用.鏈接標籤href屬性引用格式 文件名/文件路徑#name值(name值指上面增加的那麼屬性的值),如:

        <a href="#getA">跳轉到第一行</a>
       

2.Image標籤(在線編輯)

格式:

<image src="https://www.runoob.com/images/pulpit.jpg" title="圖片" alt="這是圖片"></image>

• 屬性
  1. src: (圖片來源) 值爲相對路徑/絕對路徑,如下:
     
  2. title: 懸停文本,類似於鏈接標籤屬性title
  3. alt: 圖片資源加載失敗時的文字顯示
     
     

3. 列表標籤(在線編輯)

• 有序列表

  <ul>
    <li>無序列表1</li>
    <li>無序列表2</li>
    <li>無序列表3</li>
  </ul>
  

• 無序列表

   <ol>
     <li>有序列表1</li>
     <li>有序列表2</li>
     <li>有序列表3</li>
   </ol>
  

• 自定義列表

  <dl>
    <dt>自定義列表標題</dt>
    <dd>自定義列表描述1</dd>
    <dd>自定義列表描述2</dd>
  </dl>
  

4. 表格標籤(在線編輯)

• 表格完整格式如下:

<table>
  <caption>表格標題</caption>
  <thead>
  <tr>
    <th>列表標題1</th>
    <th>列表標題2</th>
    <th>列表標題3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>第一行 第一列</td>
    <td>1 - 2</td>
    <td>1 - 3</td>
  </tr>
  <tr>
    <td>第二行 第一列</td>
    <td>2 - 2</td>
    <td>2 - 3</td>
  </tr>
  <tr>
    <td>第三行 第一列</td>
    <td>3 - 2</td>
    <td>2 - 3</td>
  </tr>
  </tbody>
  <tfoot>
  <!--  表格尾部-->
  </tfoot>
</table>

• 合併單元格
  1. 合併列,使用屬性colspan,值爲正整數,爲幾,就是合併幾列
  2. 合併行,使用屬性rowspan,值爲正整數,爲幾,就是合併幾行
     
     

---

學習前端第二課總結,所有總結都是基於目前所學