[編程基礎] 常用html標簽使用介紹

用html標簽使用介紹

本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。

常用html標簽列表

標簽	英文全拼	作用	特點
?<html></html>??	html	網頁的根標簽	所有的標簽都要寫在這一對根標簽里面
??<head></head>??	head	網頁的頭標簽	包括完檔的屬性和信息
??<body></body>??	body	網頁的主題	包含文檔的所有內容
??<div></div>??	division	定義一個區域	瀏覽器通常會在??<div>??前后放置一個換行符
??<!-- 注釋 -->??	-	注釋	單標簽
??<br>或<br/>??	break	換行	單標簽，不會在其前后創建空白行
??<hr>或<hr/>??	horizontal rule	添加水平線	單標簽
??<img src="">??	image	添加圖片	單標簽
??<embed src="">??	embed	嵌入外部應用	單標簽
??<meta>??	meta	提供有關頁面的元信息	單標簽，??<meta>???標簽通常位于??<head>??區域內
??<link>??	link	定義文檔與外部資源的關系	單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。
??<p></p>??	paragraph	定義段落	自動在其前后創建空白行
??<h1> to <h6>??	Header 1 to Header 6	定義標題	h1在一個頁面里只能出現一次
??<strong></strong>??	strong	文本加粗	加粗標記該文本
??<b></b>??	bold	文本加粗	加粗顯示文本，不推薦使用
??<em></em>??	emphasize	文本傾斜	傾斜標記文本
??<i></i>??	italic	文本傾斜	傾斜顯示文本，不推薦使用
??<del></del>??	delete	文本添加刪除線	-
??<s></s>??	strike	文本添加刪除線	不推薦使用
??<ins></ins>??	insert	文本添加下劃線	-
??<u></u>??	underline	文本添加下劃線	不推薦使用
??<a href="">填寫內容</a>??	anchor	添加超鏈接	最好使用CSS來改變鏈接的樣式
??<ul></ul>??	unordered list	定義無序列表	通常與??<li>??標簽一起使用
??<ol></ol>??	ordered list	定義有序列表	通常與??<li>??標簽一起使用
??<li></li>??	list item	創建列表項	可與各種列表定義標簽一起使用
??<dl></dl>??	definition list	定義描述列表	通常與??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定義條目	定義描述列表的項目
??<dd></dd>??	definition description	定義描述	對描述列表中的項目進行描述
??<table></table>??	table	定義HTML表格	盡可能通過樣式改變表格外觀
??<tr></tr>??	table row	定義表格的行	一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽
??<th></th>??	table headline	定義表格每一列的標題	該標簽的文本通常呈現為粗體且居中
??<td></td>??	table data	定義表格中的單元格數據	該標簽的文本呈現為普通且左對齊
??<caption>表格標題</caption>??	caption	定義整個表格的標題	??<caption>???標簽必須直接放在??<table>??標簽后
??<input type="">??	input	定義輸入控件	輸入字段可通過多種方式改變，取決于type屬性
??select??	select	定義下拉列表	??<select>???中的??<option>??標簽定義了列表中的可用選項
??<option></option>??	option	定義下拉列表中的可用項	??<option>??標簽不可自由定義寬高
??<optgroup></optgroup>??	options group	定義選項組	??<optgroup>??標簽用于把相關的選項組合在一起
??<textarea></textarea>??	textarea	定義多行的文本輸入控件	文本的默認字體是等寬字體
??<form></form>??	form	定義表單	??<form>??可以包含多個元素
??<fieldset></fieldset>??	field set	定義圍繞表單中元素的邊框	??<legend>???為??<fieldset>??定義標題
??<legend></legend>??	legend	為??<fieldset>??定義標題	??<legend>??通過css設定樣式
??<progress></progress>??	progress	定義運行中的任務進度	??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條
??<audio></audio>??	audio	添加音頻	??<audio>??標簽是HTML5的新標簽
??<video></video>??	video	添加視頻	??<video>??標簽是HTML5的新標簽
??<source>??	source	定義媒介資源	??<source>??標簽是HTML5中的新標簽

常用標簽使用說明

常用寫法：??<img src="" alt="" title=""width="" height=""??>
src：圖片的來源（必寫屬性）
alt：圖像不顯示時的替代文本
title：鼠標在移動到元素上的文本提示
width/height：圖片寬高，沒有定義寬高的時候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

常用寫法：??<a href="" title="" target="">填寫內容</a>??
href：去往的路徑（必寫屬性）
title：鼠標在移動到元素上的文本提示
target：規定在何處打開路徑

_blank：新頁面打開
_parent：在父窗口中打開鏈接
_self：當前頁面跳轉（默認值）
_top：在當前窗體打開鏈接，并替換當前的整個窗體

當href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉
當href的值為#，表示超鏈接為空鏈接，點擊此鏈接時會跳轉到頁首的位置

錨點鏈接

錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：

給目標元素設置id值，如??<p id="id1"></p>??
設置錨點超鏈接，錨點的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設置

在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置

<head>
  <!-- 讓頁面所有的超鏈接新頁面打開 -->
  <base target="_blank">  
</head>

charset編碼

常用寫法： ??<meta charset="UTF-8">??
charset：定義文檔的字符編碼

ASCII/ANSI/Unicode：英語
GBK：亞洲通用字符集
GB2312：中文簡體
Big5：臺澳港繁體
UTF-8：世界通用字符集

name

關鍵字

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網頁的關鍵字，盡量將重要的關鍵詞放在前面

網頁描述

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網頁的主要內容

作者

常用寫法： ??<meta name="author" content="">??
描述：告訴搜索引擎網頁的作者

文件檢索

常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時候會有一些站點內容，不希望被ROBOTS抓取而公開。為了解決這個問題，ROBOTS開發界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標簽。
content: 文件檢索方式

all：文件將被檢索，且頁面上的鏈接可以被查詢（默認值）
none：文件將不被檢索，且頁面上的鏈接不可以被查詢
index：文件將被檢索；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢
follow：頁面上的鏈接可以被查詢
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

網頁自動跳轉

常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：網頁5秒后自動跳轉到谷歌主頁
url：為空則刷新本頁
常用寫法：
描述：規定當前文檔與被鏈接文檔/資源之間的關系
rel：定義當前文檔與被鏈接文檔之間的關系。rel 是 relationship的英文縮寫（必寫屬性）
type：規定被鏈接文檔的類型
href：鏈接的文件路徑
示例：

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設置網頁icon圖標：??<link rel="icon" href="a.ico">??

列表

無序列表

無序列表使用粗體圓點進行標記。簡單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

<dl>
        <dt>A</dt> <!-- 小標題 -->
            <dd>A1</dd> <!-- 解釋標題 -->
            <dd>A2</dd> <!-- 解釋標題 -->
        <dt>B</dt> <!-- 小標題 -->
            <dd>B1</dd> <!-- 解釋標題 -->
            <dd>B2</dd> <!-- 解釋標題 -->
    </dl>

表格

基礎表格

常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框寬度
cellspacing：單元格間距
cellpadding：內容與邊框間距

簡單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數據 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

常用寫法：??<td colspan=“” rowspan=“”></td>??
描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規定輸入字段的類型
name：輸入框的名字
maxlength：輸入文本長度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認值

簡單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

常用寫法：??<input type="password" name="">??
type：規定輸入字段的類型
name：輸入框的名字
密碼輸入框的其他參數和文本輸入框一樣

簡單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

常用寫法：??<input type="radio" name="" checked="checked">??
type：規定輸入字段的類型
name：輸入框的名字
checked：設定該輸入框被預先選定
想要多個單選框只能有一個被選中，設置所有單選框的name值相同即可實現

示例一，兩個單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個單選框只能有一個被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用寫法：??<select multiple=""></select>??
multiple：當該屬性為true時，可選擇多個選項。

??<optgroup>??

常用寫法：??<optgroup label=""></optgroup>??
label：設定選項組的描述。

??<option>??

常用寫法：??<option value="" selected="">選項值</option>??
value：定義送往服務器的選項值。
selected：當該屬性為true時，該選項被默認選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

常用寫法：??<input type="checkbox" checked="">??
type：規定輸入字段的類型
checked：設定該輸入框被預先選定

簡單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見文本的列數
rows：控制可見文本的行數
placeholder：提示字符

簡單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

常用寫法：??<input type="file" accept=""/>??
accept：規定提交的文件的類型

簡單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網址控件
  <input type="date">日期控件 
  <input type="time">時間控件
  <!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??

??<progress>??

常用寫法：??<progress value="" max=""></progress>??
value：規定進程的當前值
max：規定需要完成的值

簡單示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規定度量的當前值
max：規定被界定為高的值的范圍
min：規定被界定為低的值的范圍
low：規定被界定為低的值的范圍
high：規定被界定為高的值的范圍
optimum：規定度量的最優值
具體使用見meter標簽改變顏色規則

簡單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

常用寫法：??<audio src="" controls autoplay loop></audio>??
src：規定音頻文件的url
controls：如果出現該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現該屬性，自動播放音頻
loop：如果出現該屬性，循環播放音頻

簡單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：規定視頻文件的url
width：設置視頻播放器的寬度（pixels）
height：設置視頻播放器的高度（pixels）
poster：設置視頻未播放時展示的畫面
controls：如果出現該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現該屬性，自動播放音頻
loop：如果出現該屬性，循環播放音頻

簡單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用寫法：??<source src="" type="">??
src：規定媒體文件的url
type：規定媒體文件的類型
因為不同瀏覽器支持的媒體格式不同，當添加媒體文件時，需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件，然后使用source 標簽，讓瀏覽器從上到下選擇支持的媒體格式

簡單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對照表??

參考

??HTML基礎??
??HTML 參考手冊??
HTML中標簽對應的英文
meter標簽改變顏色規則
HTML5 progress和meter控件

天繼續說下HTML第二講，空元素、小寫標簽、屬性和對應的具體使用。

先說下HTML 空元素:

沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。

<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

使用HTML小標簽:

HTML 標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。

HTML屬性:

屬性是 HTML 元素提供的附加信息。

屬性都包含:

HTML 元素可以設置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標簽

屬性總是以名稱/值對的形式出現，比如：name="value"。

接著我們看一個實例:

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定

<a href="http://www.liepin.com">這是一個鏈接</a>

我們在Sublime Text上試下

<!DOCTYPE html>

<html>

<head>

<title>20210815---測試開發轉型</title>

</head>

<body>

<p>沒有內容的 HTML 元素被稱為空元素</p>

</body>

<a href ="https://www.baidu.com">這是一個招聘網站</a>

</html>

由于 http://www.liepin.com跳轉需要的時間有點長，可能是家里網速不好，頁面一直跳轉不成功。就修改為 www.baidu.com 這樣就可以了。點擊可以跳轉到新的網址。

HTML 屬性常用引用屬性值

屬性值應該始終被包括在引號內。

雙引號是最常用的，不過使用單引號也沒有問題。

提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

HTML 屬性參考手冊

下面列出了適用于大多數 HTML 元素的屬性：

屬性描述

class 為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id 定義元素的唯一id

style 規定元素的行內樣式（inline style）

title 描述了元素的額外信息 (作為工具條使用)

HTML 標題

標題（Heading）是通過 <h1> - <h6> 標簽進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

接著我們看一個實例:

<!DOCTYPE html>

<html>

<head>

<title>20210815---測試開發轉型</title>

</head>

<body>

<p>沒有內容的 HTML 元素被稱為空元素</p>

<h1>我是最大的，你忍一下</h1>

<h2>我是老二，你也要忍一下</h2>

<h5>我是老五，我忠于革命</h5>

<h6>我是老六，我是最小的，我啥也不是</h6>

</body>

<a href ="https://www.baidu.com">這是一個招聘網站</a>

</html>

嘗試一下 ?

注釋: 瀏覽器會自動地在標題的前后添加空行。

可以看出，文字是越來越小的，標題越來越小。說明符合要求

TML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 標簽來定義的.

h是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。

這里有六個標題元素標簽 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每個元素代表文檔中不同級別的內容：

<h1> 表示主標題（ the main heading ），<h2> 表示二級子標題（ subheadings ），<h3>表示三級子標題（ sub-subheadings ），<h4>、<h5>、<h6>字體的大小依次遞減。

<h1>這是標題1</h1>
<h2>這是標題2</h2>
<h3>這是標題3</h3>
<h4>這是標題4</h4>
<h5>這是標題5</h5>
<h6>這是標題6</h6>

HTML 段落

HTML 段落是通過標簽<p>來定義的，P是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣。

<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 中的鏈接

HTML 鏈接是通過標簽<a>來定義的。a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。

<a href="http://www.liyadong.cn">這是一個鏈接</a>
<a href="#">這是一個空鏈接</a>

HTML 圖像

HTML 圖像是通過標簽<img>來定義的。使用img元素來為你的網站添加圖片，使用src 屬性指向一個圖片的具體地址。

<img src="logonew2.png" width="206" height="36">

請注意：img元素是自關閉元素，不需要結束標記。

HTML 強調

在 HTML 中我們可以使用em（emphasis）元素來標記這樣的情況，瀏覽器默認風格為斜體：

在 HTML 中我們還可以使用<strong>(strong importance)元素來標記這樣的請況，瀏覽器默認風格為粗體：

<p>我 <em>很高興</em>你不 <em>討厭我</em>.</p>
<p>這種液體是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不會</strong> 遲到!</p>

HTML 水平線

<hr> 標簽在 HTML 頁面中創建水平線。

hr 元素可用于分隔內容，使用該元素產生的水平線可以在視覺上將文檔分隔成各個部分。

<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

HTML 注釋可以方便地用來幫助網頁設計人員，提醒他們與程序相關的信息。

注釋寫法如下:

<!-- 這是一個注釋 -->

HTML 折行

如果您希望在不產生一個新起點的情況下進行換行（新行），請使用 <br /> 標簽。

在 HTML 語言中，<br /> 標簽定義為一個換行符，它可以理解為簡單的輸入一個空行，而不是用來對內容進行拆分：

<p>這個<br>段落<br>演示了分行的效果</p>

HTML 文本格式化標簽

標簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

HTML "計算機輸出" 標簽

標簽	描述
<code>	定義計算機代碼
<kbd>	定義鍵盤碼
<samp>	定義計算機代碼樣本
<var>	定義變量
<pre>	定義預格式文本

HTML 引文, 引用, 及標簽定義

標簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目。

HTML <q> 用于短的引用

HTML <q> 元素定義短的引用。

瀏覽器通常會為 <q> 元素包圍引號。

<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>

用于長引用的 HTML <blockquote>

HTML <blockquote> 元素定義被引用的節。

瀏覽器通常會對 <blockquote> 元素進行縮進處理。

<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力于保護自然界的未來。
世界領先的環保組織，WWF 工作于 100 個國家，
并得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>

用于縮略詞的 HTML <abbr>

HTML <abbr> 元素定義縮寫或首字母縮略語。

對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

用于定義的 HTML <dfn>

HTML <dfn> 元素定義項目或縮寫的定義。

<dfn> 的用法，按照 HTML5 標準中的描述，有點復雜：

1. 如果設置了 <dfn> 元素的 title 屬性，則定義項目：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

2. 如果 <dfn> 元素包含具有標題的 <abbr> 元素，則 title 定義項目：

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

3. 否則，<dfn> 文本內容即是項目，并且父元素包含定義。

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

注釋：如果您希望簡而化之，請使用第一條，或使用 <abbr> 代替。

用于聯系信息的 HTML <address>

HTML <address> 元素定義文檔或文章的聯系信息（作者/擁有者）。此元素通常以斜體顯示。大多數瀏覽器會在此元素前后添加折行。

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

用于著作標題的 HTML <cite>

HTML <cite> 元素定義著作的標題。

瀏覽器通常會以斜體顯示 <cite> 元素。

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于雙向重寫的 HTML <bdo>

HTML <bdo> 元素定義雙流向覆蓋（bi-directional override）。

<bdo> 元素用于覆蓋當前文本方向：

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 引文、引用和定義元素

標簽	描述
<abbr>	定義縮寫或首字母縮略語。
<address>	定義文檔作者或擁有者的聯系信息。
<bdo>	定義文本方向。
<blockquote>	定義從其他來源引用的節。
<dfn>	定義項目或縮略詞的定義。
<q>	定義短的行內引用。
<cite>	定義著作的標題。

HTML 區塊

HTML 可以通過 <div> 和 <span> 將元素組合起來。

HTML 區塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

實例: <h1>, <p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時通常不會以新行開始。

實例: <b>, <td>, <a>, <img>

HTML <div> 元素

<div> 標簽可以把文檔分割為獨立的、不同的部分。

HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

<p>這是一些文本。</p>
<div style="color:#00FFFF">
<h3>這是一個在 div 元素中的標題。</h3>
<p>這是一個在 div 元素中的文本。</p>
</div>
<p>這是一些文本。</p>

HTML <span> 與元素

HTML <span> 元素是內聯元素，可用作文本的容器

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。

<p>我有一雙
<span style="color:gold">金色</span> 的
<span style="font-size:50px">大眼睛</span>和 
<span style="color:blue">藍色的頭發</span>。
</p>

HTML 分組標簽

標簽	描述
<div>	定義了文檔的區域，塊級 (block-level)
<span>	用來組合文檔中的行內元素，內聯元素(inline)

HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表適合成員之間無級別順序關系的情況。

無序列表使用 <ul> 標簽：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

有序列表適合各項目之間存在順序關系的情況。

<ol>       
<li>Coffee</li>      
<li>Milk</li>       
</ol>

HTML 自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

自定義列表中的一個術語名可以對應多重定義或者多個術語名對應同一個定義，如果只有術語名或者只有定義也是可行的，也就是說 <dt> 與 <dd> 在其中數量不限、對應關系不限。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 表格

表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

　HTML 表格的基本結構：

<table>…</table>：定義表格

<th>…</th>：定義表格的標題欄（文字加粗）

<tr>…</tr>：定義表格的行

<td>…</td>：定義表格的列

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 表格標簽

標簽	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用于表格列的屬性
<thead>	定義表格的頁眉
<tbody>	定義表格的主體
<tfoot>	定義表格的頁腳

HTML框架

一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

iframe 語法：

<iframe src="URL"></iframe>

該URL指向不同的網頁，將窗口內容顯示為URL地址指向頁面。

height和width屬性用來定義iframe標簽的高度與寬度。屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").

<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

iframe可以顯示一個目標鏈接的頁面，目標鏈接的屬性必須使用iframe的屬性，如下實例：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容，比如：文本域 (textarea)、下拉列表、單選框 (radio-buttons)、復選框 (checkboxes)等等。

表單使用表單標簽 <form> 來設置:

<form>
.   
input elements        
.
</form>

文本域通過 <input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。您可以在編程測試中創建文本輸入框！

<form>
姓名: <input type="text" name="firstname"><br>       
電話號碼: <input type="text" name="lastname">      
</form>

密碼字段通過標簽 <input type="password"> 來定義:

單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單單選框選項。

<form>        
<input type="radio" name="sex" value="male">男<br>      
<input type="radio" name="sex" value="female">女       
</form>

復選框（Checkboxes）

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<form>      
<input type="checkbox" name="vehicle" value="Bike">我有自行車<br>      
<input type="checkbox" name="vehicle" value="Car">我有小車
</form>

提交按鈕 (Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

以上內容整理于網絡，如有侵權請聯系刪除。

在線咨詢

上一篇：來篇Java集合框架綜述，助你吃透它（建議收藏常看）！
下一篇：按鈕設計的7個基本原則

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

[編程基礎] 常用html標簽使用介紹

用html標簽使用介紹

常用html標簽列表

常用標簽使用說明

列表

表格

與

多媒體資源

特殊字符

參考

TML 標題

HTML 段落

HTML 中的鏈接

HTML 圖像

HTML 強調

HTML 水平線

HTML 注釋

HTML 折行

HTML 文本格式化標簽

HTML "計算機輸出" 標簽

HTML 引文, 引用, 及標簽定義

HTML <q> 用于短的引用

用于長引用的 HTML <blockquote>

用于縮略詞的 HTML <abbr>

用于定義的 HTML <dfn>

用于聯系信息的 HTML <address>

用于著作標題的 HTML <cite>

用于雙向重寫的 HTML <bdo>

HTML 引文、引用和定義元素

HTML 區塊

HTML 區塊元素

HTML 內聯元素

HTML <div> 元素

HTML <span> 與元素

HTML 分組標簽

HTML無序列表

HTML 有序列表

HTML 自定義列表

HTML 表格

HTML 表格標簽

HTML框架

HTML 表單

單選按鈕（Radio Buttons）

復選框（Checkboxes）

提交按鈕 (Submit Button)

您的項目需求