HTML 常用標(biāo)簽簡介

HTML 常用標(biāo)簽

div 標(biāo)簽

div 標(biāo)簽用于組合其他 HTML 元素艰争，本身無實在意義杨名。常用于頁面的布局抚吠，比如一個展開式的廣告

<body>
    <div id="wrap-container">
        <div id="collapsed-container"></div>
        <div id="expanded-container"></div>
    </div>
</body>

div標(biāo)簽可修改

<div contenteditable="ture">你好</div>

span 標(biāo)簽

span 標(biāo)簽是短語內(nèi)容的通用行內(nèi)容器冀痕，并沒有任何特殊語義福铅÷苊可以使用它來編組元素以達(dá)到某種樣式意圖（通過使用類或者Id屬性），或者這些元素有著共同的屬性滑黔，比如lang珊泳。應(yīng)該在沒有其他合適的語義元素時才使用它。<span> 與 <div> 元素很相似拷沸，但 <div> 是一個塊元素而 <span> 則是行內(nèi)元素色查。

h1 ~ h6 標(biāo)簽

h1 ~ h6 用于設(shè)置文本字體大小

p 標(biāo)簽

p 標(biāo)簽表示文本的一個段落

<p>這是第一個段落。這是第一個段落撞芍。
   這是第一個段落秧了。這是第一個段落。</p>
<p>這是第二個段落序无。這是第二個段落验毡。
   這是第二個段落衡创。這是第二個段落。</p>

strong 標(biāo)簽

strong 標(biāo)簽表示文本十分重要晶通，一般用粗體顯示璃氢。strong是一個邏輯狀態(tài)，表示強(qiáng)調(diào)

b 標(biāo)簽

b 標(biāo)簽狮辽，一個物理狀態(tài)一也，僅表示加粗。

ol 標(biāo)簽

ol 標(biāo)簽喉脖，用于有序列表

<ol>
    <li>li 列表項（list item）</li>
    <li>li 列表項（list item）</li>
</ol>

ul 標(biāo)簽

ul 標(biāo)簽椰苟，用于無序列表

<ul>
    <li>li 列表項（list item）</li>
    <li>li 列表項（list item）</li>
</ul>

dl dt dd 標(biāo)簽

dl 標(biāo)簽是一個包含術(shù)語定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對列表)树叽。

<dl>
    <dt>dt 字典標(biāo)題（dictionary title）</dt>
    <dd>dd 字典數(shù)據(jù)（dictionary data）
    </dd>
    <dt>dt 字典標(biāo)題（dictionary title）</dt>
    <dd>dd 字典數(shù)據(jù)（dictionary data）
    </dd>
</dl>

form 標(biāo)簽

form 標(biāo)簽表示了文檔中的一個區(qū)域舆蝴，這個區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息题诵。

<form action="#" method="post">
    <input name="name" id="name">
    <input name="password" id="password">
    <button name="button">Click me</button>
</form>

<form action="users" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>
<!-- 構(gòu)造 /users 路徑下的 post 請求洁仗， Form Data 中的數(shù)據(jù)結(jié)構(gòu)是 
username=xxx&password=xxx, 這部分?jǐn)?shù)據(jù)其實是放在 body 里的-->

form 標(biāo)簽也有 target 參數(shù)，邏輯跟 a 標(biāo)簽一樣

form 標(biāo)簽 type 屬性細(xì)節(jié)

<form action="users" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button>button</button>
</form>

沒有寫 type 屬性性锭，自動升級為提交按鈕

<form action="users" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="button">button</button>
</form>

寫了類型京痢，點(diǎn)了沒用，說明 form 表單沒有提交按鈕

<form action="users" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="button" value="button">
</form>

這也不能提交篷店，只是個普通按鈕

<form action="users" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="button">
</form>

屬性是 submit祭椰，可以提交

<input type="checkbox">愛我

出現(xiàn)正方形的勾選框，只能點(diǎn)擊勾選框有反應(yīng)

<input type="checkbox" id="xxx"><label for="xxx">愛我</label>

點(diǎn)擊愛我疲陕，就等于點(diǎn)擊了勾選框

<form action="users" method="post">
  <label for="xxx">用戶名</label><input type="text" name="username" id="xxx">
  <label for="yyy">密碼</label><input type="password" name="password" id="yyy">
  <input type="submit" value="button">
</form>

點(diǎn)擊用戶名或密碼方淤，光標(biāo)就跳到對應(yīng)的輸入框內(nèi)

<form action="users" method="post">
  <label>用戶名<input type="text" name="username"></label> 
  <label>密碼<input type="password" name="password"></label>
  <input type="submit" value="button">
</form>

這樣寫，不用 id 也跟上面同樣效果

<form action="users" method="get">
  <label>用戶名<input type="text" name="username"></label> 
  <label>密碼<input type="password" name="password"></label>
  喜歡的水果
  <label><input type="checkbox" name="fruit" value="orange">橘子</label>
  <label><input type="checkbox" name="fruit" value="banana">香蕉</label>
  愛我
  <label><input type="radio" name="loveme" value="yes">yes</label>
  <label><input type="radio" name="loveme" value="no">no</label>
  <select name="group">
    <option value="">-</option>
    <option value="1">第一組</option>
    <option value="2">第二組</option>
    <option value="3" disabled>第三組</option>
    <option value="4" selected>第四組</option>
  </select>
  <input type="submit" value="button">
</form>

輸入用戶名密碼勾選橘子香蕉蹄殃，單選框選中 yes,選項默認(rèn)第四組携茂，選擇第一組，
點(diǎn)擊提交按鈕诅岩，發(fā)送 get 請求讳苦，請求地址為：
localhost:8080/users?username=1&password=2&fruit=orange&fruit=banana&loveme=yes&group=1

<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>

select 有 multiple 屬性，按住 Ctrl 鍵可以多選

button 標(biāo)簽

button 標(biāo)簽表示一個可點(diǎn)擊的按鈕吩谦，可以用在表單或文檔其它需要使用簡單標(biāo)準(zhǔn)按鈕的地方鸳谜。

<form action="#" method="post">
    <input name="name" id="name">
    <input name="password" id="password">
    <button name="button">提交</button>
</form>

table 標(biāo)簽

table 標(biāo)簽表示表格數(shù)據(jù) — 即通過二維數(shù)據(jù)表表示的信息。

<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<table>
  <thead>
    <tr>
      <th>班級</th><th>姓名</th><th>分?jǐn)?shù)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>小明</td><td>93</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>2</td><td>小紅</td><td>90</td>
    </tr>
  </tfoot>
</table>

textarea 標(biāo)簽

textarea 標(biāo)簽表示一個多行純文本編輯控件式廷。用于多行文本輸入咐扭。

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

<textarea style="resize=none; width:200px;height:100px;"
 name="愛好" cols="30" rows="10"></textarea>

用 style 控制文本框的大小或用 cols 或 rows 控制

img 標(biāo)簽

img 標(biāo)簽用于鏈接圖片,alt 這個屬性定義了描述圖像的替換文本。用戶將看到這個顯示，如果圖像的URL是錯誤的蝗肪，該圖像不在支持的格式列表中袜爪，或者如果圖像還沒有被下載。

<img src="#" alt="圖片" />

canvas 標(biāo)簽

canvas 標(biāo)簽提供了一個空白繪圖區(qū)域薛闪，可以使用 APIs （比如 Canvas 2D 或 WebGL）來繪制圖形辛馆。

<canvas id="canvas" width="寬度" height="高度">
  您的瀏覽器不支援canvas元素（此信息在瀏覽器不支援canvas元素時顯示）
</canvas>

a 標(biāo)簽

a 標(biāo)簽可以創(chuàng)建通向其他網(wǎng)頁、文件豁延、同一頁面內(nèi)的位置昙篙、電子郵件地址或任何其他 URL 的超鏈接。

<p>You can reach Michael at:</p>

<ul>
  <li><a >Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

iframe 標(biāo)簽

iframe 標(biāo)簽是在當(dāng)前網(wǎng)頁嵌套一個目標(biāo)網(wǎng)頁

<iframe name=xxx src="#" frameboder="0"></iframe>
<a target=xxx >QQ</a>
<a target=xxx >baidu</a>

a 標(biāo)簽間的區(qū)別

<a  target="_blank">QQ</a>
// 在空頁面打開

<a  target="_self">QQ</a>
// 在自己頁面打開术浪，如果嵌套在iframe中，就在iframe中打開

<a  target="_parent">QQ</a>
// 在父節(jié)點(diǎn)頁面打開

<a  target="_top">QQ</a>
// 在祖先節(jié)點(diǎn)頁面打開

<a  download>下載</a>
// 下載頁面
// 不設(shè)置 download 屬性寿酌，如果 http 的 
// Content-type: application/octet-stream 會以下載的方式接收請求

a 標(biāo)簽的 href 細(xì)節(jié)問題

<a href="qq.com">QQ</a>

會將 qq.com 當(dāng)作文件處理胰苏，加到當(dāng)前網(wǎng)址后面

<a >QQ</a>

當(dāng)前文件是什么協(xié)議，就以什么協(xié)議打開醇疼。
若想以 http 協(xié)議打開硕并，可以上傳到 github 瀏覽方式打開，或啟用本地的 nodejs server

npm i -g http-server
http-server -c -1 // 不用緩存啟動本地nodejs server

<a href="xxx.html">QQ</a>
// 跳轉(zhuǎn)到/xxx.html 秧荆，根目錄下的xxx.html

<a href="#tx01">QQ</a>
// 錨點(diǎn)倔毙，直接加到網(wǎng)址上，本頁錨點(diǎn)定位乙濒，不會發(fā)請求

<a href="?name=ben">QQ</a>
// 后綴直接加到網(wǎng)址上陕赃，發(fā)送一個帶參數(shù)的 get 請求

<a href="javascript: alert(1);">QQ</a>
// 偽協(xié)議,點(diǎn)擊出現(xiàn) alert 窗口

<a href="javascript:;">QQ</a>
// 什么也不會做

<a href="">QQ</a>
// 發(fā)送一個 get 請求到自身網(wǎng)址，刷新頁面
<br>

<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<a href="#">QQ</a>// 點(diǎn)擊颁股，頁面動一下么库，跳到 p 標(biāo)簽位置

HTML 空元素

在 HTML 中，通常在一個空元素上使用一個閉標(biāo)簽是無效的甘有。例如诉儒，<input type="text"></input> 的閉標(biāo)簽是無效的 HTML。
在 HTML 中有以下這些空元素：

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

可替換元素

在 CSS 中亏掀，可替換元素（replaced element）的展現(xiàn)效果不是由 CSS 來控制的忱反。這些元素是一種外部對象，它們外觀的渲染滤愕，是獨(dú)立于 CSS 的温算。

簡單來說，它們的內(nèi)容不受當(dāng)前文檔的樣式的影響间影。CSS 可以影響可替換元素的位置米者，但不會影響到可替換元素自身的內(nèi)容。某些可替換元素，例如 <iframe>元素蔓搞，可能具有自己的樣式表胰丁，但它們不會繼承父文檔的樣式。

CSS 能對可替換元素產(chǎn)生的唯一影響在于喂分，部分屬性支持控制元素內(nèi)容在其框中的位置或定位方式锦庸。

可替換元素節(jié)
典型的可替換元素有：

<iframe>
<video>
<embed>
<img>

有些元素僅在特定情況下被作為可替換元素處理，例如：

<option>
<audio>
<canvas>
<object>
<applet>

HTML 規(guī)范也說了 <input> 元素可替換蒲祈，因為 "image" 類型的 <input> 元素就像<img>一樣被替換甘萧。但是其他形式的控制元素，包括其他類型的 <input> 元素梆掸，被明確地列為非可替換元素（non-replaced elements）扬卷。該規(guī)范用術(shù)語小掛件（Widgets）來描述它們默認(rèn)的限定平臺的渲染行為。

用 CSS content 屬性插入的對象是匿名的可替換元素酸钦。它們并不存在于 HTML 標(biāo)記中怪得，因此是“匿名的”。

正確的插入背景圖片

<body style="background-image:url(background.gif)">

article 標(biāo)簽

article 標(biāo)簽表示文檔卑硫、頁面徒恋、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)欢伏，如在發(fā)布中入挣，它可能是論壇帖子、雜志或新聞文章硝拧、博客径筏、用戶提交的評論、交互式組件障陶，或者其他獨(dú)立的內(nèi)容項目匠璧。??

section 標(biāo)簽

section 標(biāo)簽表示一個包含在HTML文檔中的獨(dú)立部分，它沒有更具體的語義元素來表示咸这，一般來說會有包含一個標(biāo)題夷恍。（章節(jié)）

& 特殊符號在 HTML 中要轉(zhuǎn)義處理

轉(zhuǎn)義為

&amp;

參考鏈接:
MDN