[編程基礎] 常用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控件

.標簽

1.1meta標簽

meta主要用于設置網頁中的一些元數據，元數據不是給用戶看 charset 指定網頁的字符集 name 指定的數據的名稱 content 指定的數據的內容

keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

description 用于指定網站的描述

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網站

1.2title標簽

title標簽的內容會作為搜索結果的超鏈接上的文字顯示

<title>Document</title>

1.3標題

h1 ~ h6 一共有六級標題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網頁中的重要性僅次于title標簽，一般情況下一個頁面中只會有一個h1
標題元素是塊元素
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup
<hgroup>
<h1>回鄉偶書二首</h1>
<h2>其一</h2>
</hgroup>
其他標簽

p標簽表示頁面中的一個段落
<p>在p標簽中的內容就表示一個段落</p>
em標簽用于表示語音語調的一個加重
<p>今天天氣<em>真</em>不錯！</p>
strong表示強調，重要內容！
<p>你今天必須要<strong>完成作業</strong>！</p>
blockquote 表示一個長引用
<blockquote>
這句話我是從來沒有說過的！
</blockquote>
q表示一個短引用
子曰<q>學而時習之，樂呵樂呵！</q>
br標簽表示頁面中的換行
<br>

1.4布局標簽

header 表示網頁的頭部 main 表示網頁的主體部分(一個頁面中只會有一個main) footer 表示網頁的底部 nav 表示網頁中的導航 aside 和主體相關的其他內容（側邊欄） article 表示一個獨立的文章 section 表示一個獨立的區塊，上邊的標簽都不能表示時使用section

div 沒有語義，就用來表示一個區塊，目前來講div還是我們主要的布局元素

span 行內元素，沒有任何的語義，一般用于在網頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標簽來創建無序列表，使用li表示列表項

<ul>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標簽來創建無序列表，使用li表示列表項

<ol>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標簽來創建一個定義列表，使用dt來表示定義的內容，使用dd來對內容進行解釋說明

<dl>
       <dt>結構</dt>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置

1.6.2 定義

使用 a 標簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉的目標路徑

值可以是一個外部網站的地址

也可以寫一個內部頁面的地址

超鏈接是也是一個行內元素，在a標簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認值在當前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發生

將超鏈接的href屬性設置為#，這樣點擊超鏈接以后頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

跳轉到頁面的指定位置，只需將href屬性設置 #目標元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標簽

img標簽來引入外部圖片，img標簽是一個自結束標簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內聯框架

用于向當前頁面中引入一個其他頁面

src 指定要引入的網頁的路徑
frameborder 指定內聯框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標簽

1.8.1音頻

audio 標簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動播放

如果設置了autoplay 則音樂在打開頁面時會自動播放

loop 音樂是否循環播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

可以將一個表格分成三個部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設置邊框的合并

border-collapse: collapse;

如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標簽來創建一個表單
action 表單要提交的服務器的地址
數據要提交到服務器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
checked 可以將單選按鈕設置為默認選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

提交按鈕

<input type="submit" value="注冊">

屬性

autocomplete="off" 關閉自動補全
readonly 將表單項設置為只讀，數據會提交
disabled 將表單項設置為禁用，數據不會提交
autofocus 設置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標簽中（開始標簽或自結束標簽）還可以設置屬性
屬性是一個名值對（x=y）
屬性用來設置標簽中的內容如何顯示
屬性和標簽名或其他屬性應該使用空格隔開
屬性不能瞎寫，應該根據文檔中的規定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應該使用引號引起來

6.文檔聲明

<!doctype html>

天小編帶大家學習一下HTML中非常重要的標簽<form>標簽，也就是表單標簽，<form>標簽在HTML中即必不可少，幾乎每個頁面有至少一個<form>標簽，話不多說，直接進入今天的主題；

什么是表單標簽？就是指能夠和用戶進行交互的控件，簡單的來說就是你要輸入或許選擇的地方，那這個地方就是表單拉，后臺會獲取你輸入的內容或者選擇的內容進行相應的操作。

常用的表單標簽有3類：input標簽、select標簽、textare標簽、以及其他標簽；以下是各個標簽的詳解：

首先，input標簽，它是非封閉型標簽，簡單的寫法就是<input /> 小編提醒大家，這里的/ 千萬不能丟了，input標簽頁需要它自有屬性來實現的、type屬性、value屬性、name屬性、id屬性；其中type屬性是指這個表單標簽的類型，比如說文本框、單選，多選（也可稱為：復選）,按鈕等；

！！！注意如果type不寫，那么默認是文本框類型；

類型也分為：text、pass、radio、checkbox、submit、file、hidden(后面2類不常用)

1.text類型：語法規范：<input type="text">;可以有name屬性、id屬性、value屬性、還可以有maxLength屬性就是規定你輸入的內容最長不能超過多少個數；readongly屬性就是規定這個表單只能只讀，改變內容。

2.password類型：語法規范：<input type="password">。效果就是用戶輸入的內容會用******代替，所以小伙伴們在輸入一些密碼或者出現*****的時候，那么這個表單的類型就是password類型啦；這個表單的屬性和上述的text屬性一致

3.radio類型：語法規定：<input type="radio">,是實現單選的效果，這個表單屬性有name屬性、value屬性、checked屬性；需要特別注意的是在radio類型下，多個radio表單的name屬性的值必須是完全一致，這樣才能實現單選；check屬性即表示選中；

4.checkbox類型：語法規范：<input type="checkbox">；這個表單屬性有name屬性、value屬性、checked屬性；

5.按鈕類型：按鈕類型分為：submit（提交）、reset（重置）、button（普通按鈕）語法規范：<input type="submit" value="按鈕上的文字">

6.file類型：語法規范： <input type="file" />；這標簽就是當需要用戶上傳一些本地文件時用到

！??！特別注意：如果有文件上傳的話，必須將表單的enctype更改為 multipart/form-data,同時method必須為post

7、隱藏域類型：語法規范：<input type="hidden" name="" value="" />

使用場合：隱藏域在頁面中是看不到的，一般會配合后臺開發一起使用，從來不單獨使用。

其次，select標簽，就是下拉框列表，簡單的寫法就是<select></select>，這個標簽也需要相關的屬性，name屬性、size屬性、multip屬性、value屬性、selected屬性；

multip屬性：可以設置這個下拉列表可以多選；

selected屬性：表示選中；

完整的語法規范如下：

<option value="03">javascript</option>

</select>

再者：<textarea>標簽，語法規范：<textarea> 文本內容</textarea>常用屬性：name屬性、cols屬性、rows屬性

cols屬性：規定這個文本域的列數，就是這個文本域一行最多能輸入幾個文字；

rows屬性：規定這個文本域的行數，就是這個文本域最多能輸入幾行文字；

完整的語法規范如下：

<textarea cols=“10” rows“20”> 文本內容</textarea> 表示這個文本域可以輸入20行10列的文本；

最后：分享一下在表單中能提高用戶體驗的標簽<label>標簽；這個標簽作用在于點擊表單前的文本時，表單標簽會主動獲取焦點，而不需要點擊表單的時候才獲取焦點；<label>有一個非常重要的屬性for屬性，它是必須存在，for屬性值就是你要對應的那個表單

語法規范：<label for=""某個表單的id值"></label>

在實際的編碼過程中，小編強烈建議用<label>包裹表單前的文字

預告：下一篇：你所不知道的css（一）

在線咨詢

上一篇：HTML中的標簽是不是都成對？單個標簽是什么情況？
下一篇：HTML的表格與列表、塊及類與ID

您的項目需求

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

整合營銷服務商

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

用html標簽使用介紹

常用html標簽列表

常用標簽使用說明

列表

表格

與

多媒體資源

特殊字符

參考

.標簽

1.1meta標簽

1.2title標簽

1.3標題

1.4布局標簽

1.5列表

1.1.1分類

1.1.1.1有序列表

1.1.1.2 無序列表

1.1.1.3定義列表

1.1.1.4列表之間可以互相嵌套

1.6超鏈接

1.6.1 作用

1.6.2 定義

1.6.3 屬性

1.6.3.1屬性1：href

1.6.3.2 屬性2：target

1.6.4其他

1.7圖片標簽

1.8內聯框架

1.8 音視頻標簽

1.8.1音頻

1.8.1.1 屬性

1.8.2視頻

2.表格table

長表格

表格樣式

3.表單（form）

屬性

4.注釋

5.屬性

6.文檔聲明

您的項目需求