《筆記默寫》-HTML


Posted by Eloise-Elixir on 2020-10-12

概略

在HTML中,文字與內容是用 <標籤> 來改變型態,故稱作標記語言/標籤語言。

標籤分為 <開始標籤> 與 </終止標籤> ,通常倆倆一組,但也有只要單一存在即可的標籤,粗略分為<雙標籤>與<單標籤>。

HTML中的文字標籤

  • 標題標籤:使用 <h1> </h1>,h = heading,由大而小分 1-6 級,字體會被加粗。
  • 段落標籤:使用 <p> </p> ,p = paragraph ,標籤內為一段落。
  • 換行標籤:單標籤<br />,在HTML5中也可以只寫成<br>
  • 文本格式(雙標籤):粗體<strong><b> 斜體<em>或<i> 刪除線<del>或<s> 底線 <ins>或<u>,一般都推薦使用前者,語意較清晰。
  • 布局/排版區塊:<div> 一個div獨自一行,<span>則用於小區塊可並列,標籤本身沒有語意,用於幫網頁元素分組方便排版與修改管理。
  • 圖片:使用 <img>,加上屬性 src (source)指定圖片位置。可使用更多屬性指定圖片的寬高(width/height)替代文字(alt)說明文字(title)邊框(border),或是製成超連結。
  • 連結標籤:使用 <a> </a>,a = anchor ,被連結標籤包住的文字或圖片會在 browser 上顯示為超連結。要在 <a> 中指定連結目的地須加上 href 屬性。寫為 <a href="url">。用target屬性指定連結要在原視窗開啟(不寫時預設值_self)或新分頁開啟(_blank)。
    若連結的目的地尚未確定,可使用"#"設定一個空連結。
  • 錨點跳轉:與連結標籤相同,但實現的是在長形網頁中的區段間跳轉, href 屬性指定方式為 "#id" 。在指定跳轉點幫元素設定 id。
  • 特殊字符:空格&nbsp ; 括號 <> &lt ; &gt ; 。其他的不常用,先不用記,要用再查就可以了。

綜觀屬性

在HTML中,屬性一律都是隔一空格加在 <開始標籤> 中,「=」指引後務必要加上雙引號。

HTML中的表格

<table>
<!-- (表格標籤,加上屬性:align指定對齊方式,border指定外框,cellpadding指定格內邊距,cellspacing指定格與格的距離,還有其他屬性可用,但一般會在CSS中才指定) -->
<thead>(表示表頭)
   <tr>  (包覆內容為一行)
            <th>表頭列</th>(th專指表頭,字體會被置中加粗)
            <th>表頭列</th> 
            <th>表頭列</th>
   </tr>
</thead>
<tbody>(表示表格內容)
   <tr> 
            <td>第一列第二行</td>(td包覆為一個儲存格) 
            <td>第二列第二行</td>
            <td>第三列第二行</td>
  </tr>
   <tr> 
            <td>第一列第三行</td> 
            <td>第二列第三行</td>
            <td>第三列第三行</td>
  </tr>
</tbody>
</table>
  • 合併儲存格/指定儲存格大小:合併行(向下合併)rowspan="指定合併數量"/合併列(向右合併)colspan="指定合併數量"
    寫於為首的目標儲存格中,被合併的儲存格要刪除,否則儲存格會被重新分割。

HTML中的清單

列成清單可以使用 <li> </li>相關親子元素。母元素分為有序清單 ordered list <ol> </ol>與 無序清單 un-ordered list <ul> </ul>,另外還有自定義清單。以母元素包裹子元素<li> </li>來形成清單,並於子元素縮排來區分親子關係以增進可讀性。清單標籤中只能包含<li>,但<li>中可以包含任何元素。
在CSS中,可使用屬性list-style: none,來隱藏無序清單行頭的點點。

  • 自定義列表:經常用於對術語或名詞進行解釋或描述,可理解成一個大項底下帶著數個相關的小項,自定義列表沒有任何項目符號。<dt><dd>裡面可以包含任何元素。
     <dl>
          <dt>名詞</dt>
             <dd>名詞1說明</dd>
             <dd>名詞1說明</dd>
             <dd>名詞1說明</dd>
          </dt>
      </dl>
    

HTML中的表單

通常用於註冊頁面或問卷,目的都是為了蒐集用戶的訊息、與用戶進行互動。由表單域(包覆所有表單元素)、表單元素、提示訊息三個部分組成。

  • 表單域:<form></form>標籤用於定義表單域,會把範圍內的元素訊息發送給伺服器。

    *  action="url" 指定接收並處理表單中資料的程式的位置.php
    *  method="設置提交方式" 值為get或post
    *  name="表單域名稱" 用以區分一個頁面中的多個表單域
    
  • 表單元素:INPUT 允許用戶輸入或選擇內容的一種可控元件(接在提示訊息之後)。
    提示訊息<input type="屬性值" /> 單標籤,根據不同值有多種形式

    • button 定義按鈕(通常是用於讓JS啟動腳本,比如發送驗證信),value可指定文字
    • checkbox 複選框:選項<> 選項<> 選項<>,每個選項必須有相同的name
    • file 定義輸入字串和瀏覽按鈕供上傳檔案
    • hidden 定義隱藏的輸入字串
    • image 定義圖片形式的按鈕
    • password 定義密碼,其中的文字會被替換隱藏
    • radio 多選一按鈕 :選項<> 選項<>,每個選項必須有相同的name才可以多選一。
    • reset 重置,清除表單中所有資料,加上value可指定按鈕文字
    • submit 提交,會把資料送到伺服器,加上value可指定按鈕文字
    • text 單行文字,預設長度20字
    • name 定義input元素的名稱
    • value 規定/說明元素的值,主要是給後端人員分析資料用
    • checked 規定此元素在載入頁面時就被勾選 checked="checked"
    • maxlength 規定最大長度,必須是正整數,通常較少使用
  • <label> 不屬於表單但常搭配使用,通常都是為了增進用戶體驗
    <label for="表單元素的id"> 表單選項</label> (必須在input元素中加上id屬性)
    把input標籤放在label中,不需要for也能達到同樣效果。

  • 表單元素:SELECT 下拉選單
    母元素雙標籤<select>,包含子元素雙標籤<option>,數量1 ~ 無限多。selected="selected"可以設定預設值。

  • 表單元素:TEXTAREA 多行文字輸入框(文本域)
    當需要輸入的文字比較多就使用雙標籤<textarea>,常用於留言板、問卷、評論等。雙標籤中包夾的text會顯示於框中。用cols屬性指定每行字數,rows使定行數。(實際開發中不會使用這兩個屬性,會用CSS指定大小)


#beginner







Related Posts

實作簡單的REST API

實作簡單的REST API

嘉信開戶紀錄 || Charles Schwab

嘉信開戶紀錄 || Charles Schwab

Laravel and Cypress integration

Laravel and Cypress integration


Comments