HTML 經常使用的標籤

時間 2019-12-11

標籤 html 經常使用標籤欄目 HTML 简体版

原文原文鏈接

什麼是 HTML 標籤

HTML 文檔和 HTML 元素是經過 HTML 標籤進行標記的
HTML 標籤由開始標籤和結束標籤組成
開始標籤是被括號包圍的元素名
結束標籤是被括號包圍的斜槓和元素名
某些 HTML 元素沒有結束標籤，好比 <br />

基本標籤

<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關係
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容

經常使用標籤

超連接標籤 a

① href屬性：表示超連接須要跳轉的頁面javascript

a.能夠寫網絡地址：

   <a href="http://www.baidu.com">這是一個超連接</a>

b.能夠打開本地html文件：

   採用相對路徑肯定文件地址，與img標籤肯定方式相同

   <a href="基本塊級標籤.html">這是一個超連接</a> 

c.JavaScript:;僞協議點擊a標籤不會跳轉頁面

   <a href="javascript:;">這是一個僞連接</a>
複製代碼

② title屬性：鼠標指上後顯示的提示文字html

<a href="http://www.baidu.com"title="hhh">這是一個超連接</a>
複製代碼

③ target屬性：設置新頁面打開的窗口位置java

可選值：_self自身頁面打開（默認）  _blank新窗口打開
        _parent在父級窗口打開          _top在頂層窗口打開

<a href="http://www.baidu.com"target="_blank">這是一個超連接</a>
複製代碼

④ download：表示連接式下載。bash

iframe 嵌套頁面標籤

iframe標籤和a標籤同時使用：在 a 標籤裏的 target 等於 iframe 的 name，表示 a 標籤連接在 iframe 的窗口打開。服務器

<iframe src="#" name="xxx"></iframe>
<a target="xxx" href="http://www.baidu.com">在iframe窗口打開</a>
複製代碼

form 標籤

標籤用於爲用戶輸入建立 HTML 表單。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含 menus、textareafieldset、legend 和 label 元素。
表單用於向服務器傳輸數據。
form標籤跳轉是發起HTTP POST請求（沒有提交按鈕就不能提交），而a標籤跳轉發起HTTP GET請求.

<form action="users" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
複製代碼

input 表單標籤

type：控件類型的顯示。若是這個屬性沒有指定，默認的類型是 text。可用的值包括：網絡

button 按鈕
Checkbox：多選框；必須使用 value 屬性定義此控件被提交時的值。使用 checked 屬性指示控件是否被選擇。
radio：單選框；必須使用 value 屬性定義此控件被提交時的值。使用 checked 必須指示控件是否缺省被選擇。在同一個」單選按鈕組「中，全部單選按鈕的 ame 屬性使用同一個值；一個單選按鈕組中是，同一時間只有一個單選按鈕能夠被選擇。
password：密文輸入信息；一個值被遮蓋的單行文本字段。使用 maxlength 指定能夠輸入的值的最大長度。
submit：用於提交表單的按鈕；
reset：重置

經過爲 input 設置 id 屬性，在 lable 標籤中設置 for=id 來讓說明文本和對應的 input 關聯起來；也能夠直接用 label 標籤把 input 包起來後也會自動關聯；ui

<label for="Name">xxx</label>  
<input type="text" id="Name"/>
複製代碼

select 下拉列表標籤

// 默認選擇第四組，第三組不可選，加個multiple能夠多選
<select name="group" multiple>
    <option value="-">-</option>
    <option value="1">第一組</option>
    <option value="2">第二組</option>
    <option value="3" disabled>第三組</option>
    <option value="4" selected>第四組</option>
</select>
複製代碼