HTML標籤

• 標題標籤<h1>、<h2>、<h3>、<h4>，標題標籤之間是不能巢狀的，下一級標題與上級標題之間通過同級
  
  關於書寫，下級標題解釋說明的是前面距離最近的上一級標題
• 權重
  <h1>在整個HTML中的權重非常高，內部應該html中最重要的內容。<h1>權重大於<h2>
  如果一個頁面出現多個<h1>，反而降低權重，往往會約定，一個頁面出現一個<h1>就夠了。

換行標籤

<br/> (breaking)標籤作用是換行，是一個單標籤
與<p>不同的是，<br>沒有建立新的段落的語義，只是簡單的進行強制換行<br>
這是br換行標籤使用<br>

段落標籤

 一對<p></p>標籤的內部元素為一個完整的段落<br>
 <p>這是標籤的使用emmmm</p>
 <p>這是標籤的使用emmmm</p>
 <p>這是標籤的使用emmmm</p>

• 文字格式化的標籤均為雙標籤，且文字級標籤內部只能寫文字

  標籤             描述
   b             定義粗體文字，bold
   big           定義大寫字型
   em            定義著重文字，emphasis，自帶斜體效果
   i             定義斜體字，italic
   small         定義小號字
   strong        定義加重語氣，自帶加粗效果
   sub           定義下標字，subscript
   sup           定義上標字，suprscript
   ins           定義插入字，自帶下劃線效果，insert
   del           定義刪除字，delete
   s             不贊成使用，使用del代替就可以了
   strike        不贊成使用，用del就好  
   u             定義下劃線，不贊成使用，後期讓css新增樣式即可
  

影像標籤

• 由<img>標籤進行定義，在指定的位置插入一張圖片，是一個單標籤
• <img>常用屬性展示，通過屬性進行相關的影像設定

程式碼示例：
<img src="picture.ipg" border="1" alt="圖片1">
 
  屬性名            描述
   src          表示圖片的路徑
   width        表示圖片的寬度
   height       表示圖片的高度
   border       邊框屬性，可以設定邊框的粗細
   title        設定提示文字
   alt          設定影像沒有找到時候的替換文字

• 引入影像需要填寫路徑，這裡路徑分為相對路徑、絕對路徑、相對路徑

• 相對路徑查詢檔案時，需要從HTML檔案本身出發，根據相對位置進行查詢，包含三種方向：

• 同級查詢：當目標檔案與和HTML檔案位於同一級，直接寫 檔名.字尾
  
  <img src="picture.jpg">

• 子集查詢：目標檔案在與HTML檔案同一級的資料夾裡面，這時就需要先找資料夾的名稱，
  然後通過關閉符號/進入資料夾查詢裡面的檔案
  
  <img src="img/picture.jpg">

• 上級查詢：目標檔案在HTML檔案所在的資料夾的更上一級，需要跳出當前資料夾到上一級，路徑則利用
  
      &nbsp …/表示跳出一級，若跳出多級，寫多次…/ 直到找到檔案

• 絕對路徑

• 絕對路徑查詢檔案時，不需要從和和HTML檔案出發，直接從電腦的碟符出發查詢，或者使用網址形式查詢
  
• 碟符查詢： <img src="C:\Users\xiaomi\Desktop\picture.jpg">
• 網址形式：<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2443910753,1558982167&fm=26&gp=0.jpg">
• 缺點：碟符出發的路徑不可移動，不可移植
  若路徑中有中文，易出錯

音訊控制條屬性

• 音訊載入後不會自動顯示播放器的控制條，設定controls屬性值為conntrols即可
  
  <audio src=""music.mp3" controls="controls">

視訊標籤

• <video>是雙標籤，支援的格式.mp4、.ogg、.webm
  設定方法與音訊類似
  
  <video src="video.mp4" controls="controls"><video>

超級連結標籤

• a 全稱anchor，錨的意思，為雙標籤，<a>標籤在指定的位置新增連結，提供使用者進行點選和跳轉
• <a>標籤可以實現兩種跳轉：跨頁面跳轉、頁面內跳轉
• herf超文字引用，用於規定連結的目標地址
  
  屬性值：連結目標的路徑地址，可以使用相對路徑或網址形式的絕對路徑
• targte屬性
  可以定義被連結的文件在何處跳轉顯示

  屬性值             描述
  _blank       在新的視窗開啟連結
  _self        預設，在相同的框架中開啟被連結文件
 _parent      在父級框架集中開啟被連結文件
  _top         在整個視窗中開啟被連結文件
  framename    在指定的框架中開啟被連結文件

無序列表標籤

• 無序列表需要兩個標籤參與，<ul>和<li>
• ul：定義一個無序列表的大結構
• li：列表項，定義的是無序列表內的某一項
• <ul>、<li>是巢狀關係，快捷鍵ul>li
• 注意：

• <ul>內部只能巢狀<li>，<li>標籤不能脫離<ul>單獨書寫
• <li>標籤是經典的容器級標籤，內部可以放置任意內容
• 無序列表的作用只是搭建列表結構，沒有新增樣式字首的功能，樣式是由css負責

有序列表標籤

• 有序列表需要兩個標籤參與，<ol>和<li>
• <ol>定義一個有序的列表的大結構
• <li>定義的是有序列表的每一項，<ol>和<li>是巢狀關係，快捷鍵：ol>li
• 注意：

• <ol>內部只能巢狀<li>，<li>標籤不能脫離<ol>單獨書寫
• <li>標籤是經典的容器級標籤，內部可以放置任意內容
• 有序列表的列表項<li>之間，存在順序先後之分

定義列表標籤

• 自定義列表不僅僅是一列專案，而是專案及其註釋的組合
• 由<dl>、<dt>、<dd>組成

• dl：定義一個自定義列表的大結構
• dt：定義自定義列表中的一個主題或術語
• dd：定義解釋項，表示描述或解釋前面的定義主題
• <dl>內部只能巢狀<dt>、<dd>，<dt>和<dd>是同級關係

程式碼示例：      
      <dl>
         <dt>主題<dt>
         <dd>解釋<dd>
      </dl>
 注意：1.<dl>內部只能巢狀<dt>和<dd>，<dt>和<dd>標籤不能脫離<dl>單獨書寫
       2.<dl>內部可以存放多組dt和dd，每個dd解釋說明的搜尋前面距離最近的一個dt
       3.每個dt後面可以有多個dd或者0個
       4.後期新增css樣式，最好每個dl新增一組dt和dd

佈局標籤

• <div>和<span>標籤常用作佈局工具，俗稱為盒子
• <div> 俗稱大盒子，雙標籤，容器級標籤，多用於劃分網頁區域，進行結構佈局。
• <span> 俗稱小盒子，雙標籤，容器級標籤，不改變整體效果的情況下，可以輔助進行區域性調整

HTML基本語法–表格基礎

• <table> border ---- 邊框屬性值
• 設定border表格的單元格之間有預設的空隙，會導致雙邊框線
• border-collapse:collapse-----表示邊框塌陷（單邊框線）

 樣式css
  <style type="text/css">
       table
     {
     border-collapse:collapse;
     }
   
   table, td, th
     {
     border:1px solid black;
     }
       </style>

…

  表格table
       <table>
           <th colspan="2">這是表頭</th>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>              
        </tr>
         <tr>
            <td>第二行第一列</td>
            <td rowspan="2">第二行第二列</td>              
         </tr>
         <tr>
             <td>第三行第一列</td>
          </tr>
          <tr>
             <td colspan=”2“>第四行第一列</td>
          </tr>
        </table>

rowspan：跨行合併，上下的合併

colspan：跨列合併，左右的合併

HTML基本語法–表單元素

• 表單的作用就是收集資料；由表單元素和表單的控制元件元素組成；其功能就是負責顯示、收集、提交資料到伺服器上

• <form>標籤通過對應屬性規定提交資料的方法和提交位置

  屬性名 屬性值 描述
  action url 指定接收並處理表單資料的伺服器程式的url地址
  method get/post 用於設定表單資料的提交方式
  name 自定義名稱 規定表單的名稱

• <form action="xxx.php" method="post/get" name="message">表單區域<from>

<input>標籤屬性

     屬性名      屬性值        描述
                text        單行文字框
                password    密碼文字框
                radio       單選框
                submit      提交按鈕
     type       reset       重置按鈕
                button      按鈕
                image       影像形式按鈕，src="../../地址"
                file        定義輸入欄位和‘瀏覽’按鈕，上傳檔案
                            multiple屬性決定是否可以選則多個檔案
                checkbox    核取方塊，預設選中checked
                hidden      定義隱藏的輸入欄位
     name                   定義控制元件的名稱
     value                  定義控制元件的預設文字
     size       數字         定義控制元件的寬度
     checked    checked     定義選框控制元件的預設被選中項
     maxlength  數字         定義允許輸入的最多字元數

<textarea>文字域

• 雙標籤，多行文字區域

• rows：行，
• cols：列，每一行顯示的最大位元組數
  
  <textarea rows="10" cols="30">這是一個文字框</textarea>

下拉選單<select>的分組管理

• 分組管理使用<optgroup>標籤對選項進行分組，<optroup>是一個雙標籤，該標籤也可以設定一個label屬性，

• 表示給這一組選項新增一個分組標籤名，分組標籤<optgroup>是不能被點選選擇的

  程式碼示例:
  <select>
    <optgroup label="陝西">
         <option>西安</option>
         <option>安康</option>
    </optgroup>
    <optgroup label="四川">
         <option>成都</option>
         <option>綿陽</option>  
    </optgroup>      
  </select>
  

label標籤

• label標籤主要作用就是幫助表單元素定義標註，將<label>與表單控制元件進行繫結後，

• 使用者點選<label>內的提示內容是時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上

   繫結方法一：    
      <input type="checkbox" name="class" id="classType"/>
      <label for="Chinese">語文</label>
  
   繫結服務二：
      <label><input type="radio" name"sex">女</label>
      簡化繫結