HTML 常用標籤

zachcoco發表於2018-12-11
HTML

一、常用標籤

標籤 說明
基本
<!DOCTYPE> 定義文件型別。
<html> 代表 HTML 或 XHTML 文件的根。其他所有元素必須是這個元素的子節點。
<head> 代表關於文件後設資料的一個集合，包括指令碼或樣式表的連結或內容。
<meta> 定義其他 HTML 元素無法描述的後設資料。
<title> 定義文件的標題，將顯示在瀏覽器的標題欄或標籤頁上。該元素只能包含文字，包含的標籤不會被解釋。
<link> 用於連結外部的 CSS 到該文件。
<style> 用於內聯CSS樣式。
<script> 用於嵌入或引用可執行指令碼。
章節
<body> 定義文件的主體。
<header> 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
<nav> 定義只包含導航連結的章節。一般接<ul>
<main> 定義文件中主要或重要的內容。
<section> 定義文件中的一個章節。
<footer> 定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和反饋建議用的地址。
<h1>~<h6> 標題元素實現了六層文件標題，<h1> 是最大的標題，<h6> 是最小的標題。標題元素簡要地描述章節的主題。
<div> 代表一個通用的block容器，沒有特殊含義。
組織內容
<p> paragraph，定義一個段落。
<br> break，換行，空標籤。
<hr> 水平線。
<ol> ordered list，定義一個有序列表。
<ul> unordered list，定義一個無序列表。
<li> list，定義列表中的一個列表項
<dl> definition list，定義一個定義列表（一系列術語和其定義）。
<dt> definition title，代表一個由下一個 <dd> 定義的術語。
<dd> definition description，代表出現在它之前術語的定義。
<span> 代表一段沒有特殊含義的inline容器

示例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>網頁標題</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="topNavBar">
            <img src="#" alt="logo">
            <nav>
                <ul>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">SKILLS</a></li>
                    <li><a href="#">EXPERIENCE</a></li>
                </ul>
            </nav>
        </div>
        <div class="banner" style="background-image: url(#)">
        </div>
        <main>
            <div class="picAndText">
                <h1>Zach Z</h1>
                <p>前端開發工程師</p>
                <hr>
                <dl>
                    <dt>年齡</dt>
                    <dd>18</dd>
                    <dt>城市</dt>
                    <dd>北京</dd>
                </dl>
            </div>
            <footer class="media">
                <a href="#"><img src="#" alt="微信"></a>
                <a href="#"><img src="#" alt="知乎"></a>
                <a href="#"><img src="#" alt="掘金"></a>
            </footer>
        </main>

        <section>
            <h2>技能</h2>
            <ol>
                <li>HTML 5 &amp; CSS 3</li>
                <li>JavaScript</li>
                <li>jQuery</li>
            </ol>
        </section>
        <script src="js/main.js"></script>
    </body>
</html>
複製程式碼

二、文字編輯

標籤 說明
<b> 加粗
<strong> 代表特別重要的文字。
<i> 傾斜，代表一段不同性質 的文字，如技術術語、外文短語等。
<em> 代表強調文字。
<s> 刪除線，代表不準確或不相關 的內容。
<del> 定義從文件移除的內容。
<u> 下劃線
<ins> 定義增加到文件的內容。
<q> 代表內聯的引用。
<cite> 代表作品標題引用。
<blockquote> 代表其中的文字是引用內容。屬性cite表示引用地址

三、嵌入內容

  • 影像：<img>
    • src：圖片位置
    • alt：描述影像的替換文字。使用者將看到這個顯示，如果影像的URL是錯誤的
    • title：滑鼠懸停時內容
  • 內嵌網頁：<iframe>
    • src：網頁位置
    • frameborder：框架邊緣，一般設為0
    • 示例：
<iframe name=xxx src="#" frameborder=0></iframe>
<a target=xxx href="http://qq.com">QQ</a>
複製程式碼
  • 視訊：<video>
  • 音訊：<audio>

四、連結<a>

<a> 元素 (或錨(anchor)元素)，可以建立一個到其他網頁、檔案、同一頁面內的位置、電子郵件地址或任何其他URL(uniform resource locator)的超連結。（HTTP GET 請求）

屬性href

包含超連結指向的URL或URL片段。

  • 地址一定要加協議型別
    • 支援協議包括http:，file:，ftp:，mailto：
    • 無協議地址，則使用當前頁面協議
  • 相對URL
    • 相同資料夾只用檔名：review.html
    • 子資料夾：movies/dvd/reviews.html
    • 祖父資料夾：../../index.html
  • href後面可以寫什麼？
    • 空著，點選則會重新整理頁面
    • ="#ssss"：加錨點，頁面內跳轉，不發請求。#後無內容則跳轉頁面頂部
    • ="?name=jake"：瀏覽器會自動判斷意思，發起get請求
    • ="javascript:;"，使用偽協議js:，不是類似http:這樣的真協議

屬性target

  • _self: 當前頁面載入。此值是預設的，如果沒有指定屬性的話。
  • _blank: 新視窗開啟，即到一個新的未命名的HTML瀏覽上下文
  • _parent: 父頁面開啟。如果沒有父頁面，此選項的行為方式相同_self。
  • _top: 頂層視窗開啟。如果沒有父頁面或頂層視窗，此選項的行為方式相同_self。

屬性download

此屬性指示瀏覽器下載URL而不是導航到它，因此將提示使用者將其儲存為本地檔案。

五、表格<table>

  • <tr>：(table row)每行開始
  • <td>：(table data)每格元素
  • <th>：(table heading)標題
    • scope屬性(row，col)：表示列標題還是行標題
  • <thead>：一塊列標籤（表頭）。
  • <tbody>：一塊具體資料（表格主體）
  • <tfoot>：一塊列摘要（表尾），例如：總計。
  • <caption>：表格的標題 。
  • colspan(數字)屬性：跨列
  • rowspan(數字)屬性：跨行

六、表單<form>

屬性

  • action：伺服器上接受資訊的URL（xxx.php）
  • method：一般用post，極少用get
  • id：新增元素標識

控制元件

  • <button>：按鈕 。
  • <select>：表下拉框 。
  • <textarea>：多行文字框 。
  • <label>：代表表單控制元件的標題 。 一般label加for，input加id建立關聯。老手直接用label把input包起來就建立關聯了。
  • <option>：代表一個<select>元素或<datalist>元素中的一個選項

控制元件<input>

允許使用者編輯資料的資料區（文字框、單選框、核取方塊等），詳情見MDN

type屬性：

  • button：無預設行為按鈕
  • text：單行欄位；換行會將自動從輸入的值中移除。
  • password：一個值被遮蓋的單行文字欄位。使用 maxlength 指定可以輸入的值的最大長度 。
  • checkbox： 核取方塊。必須使用 value 屬性定義此控制元件被提交時的值。使用 checked 屬性指示控制元件是否被選擇。
  • radio：單選按鈕。必須使用 value 屬性定義此控制元件被提交時的值。使用checked 必須指示控制元件是否預設被選擇。在同一個”單選按鈕組“中，所有單選按鈕的 name 屬性使用同一個值；一個單選按鈕組中是，同一時間只有一個單選按鈕可以被選擇。
  • submit：用於提交表單的按鈕。
  • file：此控制元件可以讓使用者選擇檔案。使用 accept 屬性可以定義控制元件可以選擇的檔案型別。
  • image：圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文字。還可以使用 height 和 width 屬性以畫素為單位定義圖片的大小。
  • hidden：不顯示在頁面上的控制元件，但它的值會被提交到伺服器。
  • search：HTML5用於輸入搜尋字串的單行文字欄位。換行會被從輸入的值中自動移除。
  • 其它控制元件：color,number,range,reset,tel,url,email,month,week,time,date,datetime,datetime-local

說明

  1. 沒有提交按鈕就無法提交。加<input type="submit" value="提交">
  2. 主要是發起post請求。
  3. http以明文傳密碼。post的時候可以看到。在第四部分。
  4. 中文都會被轉譯為utf-8
  5. file協議不支援post。用localhost:8080/index.html
  6. method都用post，get會把引數放到查詢引數裡。
  7. 通過action="users=?zzz=3"，可以使post支援查詢引數，但get沒辦法上傳
  8. a標籤和form標籤是一對。

相關文章