HTML如何制作在透明輸入框里面添加圖標(biāo)

TML如何制作在透明輸入框里面添加圖標(biāo)

最近在寫(xiě)一個(gè)律師推薦前臺(tái)的網(wǎng)站，在上面搜索框這里出現(xiàn)了問(wèn)題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……

話(huà)不多說(shuō)，我們直接進(jìn)入主題：

基本思路

其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請(qǐng)輸入查找的律師或?qū)ｉL(zhǎng)">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設(shè)置外面整個(gè)div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設(shè)置里面的輸入框的長(zhǎng)寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個(gè)屬性就是透明度（在0-1之間）

ootstrap是用于開(kāi)發(fā)響應(yīng)式和移動(dòng)優(yōu)先的網(wǎng)站的CSS框架。Bootstrap增加了一個(gè)功能，人們可以使用Bootstrap提供的優(yōu)質(zhì)圖標(biāo)。這些圖標(biāo)可以用SVG或網(wǎng)頁(yè)字體格式。

Bootstrap提供了一千多個(gè)高質(zhì)量的圖標(biāo)，你可以在你的項(xiàng)目中使用它們。你還可以根據(jù)需要改變這些圖標(biāo)的顏色和大小。

是什么讓Bootstrap框架中的圖標(biāo)與眾不同，我們?yōu)槭裁匆褂盟?/p>

靈活性 “是使它與其他圖標(biāo)解決方案不同的原因。如果你在Bootstrap框架中使用圖標(biāo)，你可以借助CSS的color屬性來(lái)改變圖標(biāo)的顏色。
你也可以通過(guò)使用CSS的font-size屬性來(lái)改變圖標(biāo)的大小。
在你的項(xiàng)目中使用Bootstrap的圖標(biāo)不是必須的，你可以在有Bootstrap或沒(méi)有Bootstrap的情況下使用它。

使用Bootstrap圖標(biāo)的基本語(yǔ)法：

<i class="bi-class-name"></i>

<i>元素是一個(gè)容器元素，用于添加Bootstrap圖標(biāo)。字符串’bi-‘總是附在圖標(biāo)的類(lèi)名之前。它指的是Bootstrap圖標(biāo)。類(lèi)名基本上是我們正在使用的圖標(biāo)的類(lèi)別。Bootstrap為我們提供了許多類(lèi)別的圖標(biāo)，如Facebook、Twitter、地球、星星和搜索等。

例子：這是在提交按鈕中使用Bootstrap的搜索圖標(biāo)的HTML代碼。

<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  
    <!--Bootstrap Icons CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  
</head>
  
<body class="container">
    <h2>Welcome To GFG</h2>
    <p>
        The below button is using the bi-search 
        class to display the search icon.
    </p>
  
    <!-- We made a button on which Bootstrap 
        icon of 'search' class present -->
    <button type="submit" class="btn btn-primary">
        <span class="bi-search"></span>
        Search
    </button>
</body>
  
</html>

輸出：你在按鈕上看到的搜索圖標(biāo)是由Bootstrap框架提供的圖標(biāo)，屬于類(lèi)名search.。

1、安裝

Bootstrap 圖標(biāo)庫(kù) 已被發(fā)布到了 npm，但是仍然可以手動(dòng)下載并安裝。

1.1、通過(guò) npm 安裝

通過(guò) npm 安裝 Bootstrap 圖標(biāo)庫(kù)，包括 SVG 圖片、sprite 圖標(biāo)和圖標(biāo)字體。

npm i bootstrap-icons

1.2、下載安裝包

GitHub 上有所有已發(fā)布的版本，并且在壓縮包內(nèi)包含了所有 SVG 格式的圖標(biāo)、許可證和 readme 文件。package.json 文件也被包含在內(nèi)，不過(guò)這些 npm 腳本主要用于我們的開(kāi)發(fā)流程。

1.3、通過(guò)公共 CDN 加載

利用我們提供的公共 CDN 服務(wù)并將圖標(biāo)字體的樣式表添加到網(wǎng)站的 <head> 標(biāo)簽內(nèi)（或通過(guò) CSS 的 @import 指令加載）就能立即使用 Bootstrap 圖標(biāo)庫(kù)了。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");

2、用法

Bootstrap 圖標(biāo)庫(kù)的所有圖標(biāo)都是 SVG 格式的，因此你可以通過(guò)以下幾種方式將它們添加到你的 HTML 中，具體使用哪種方式取決于你的項(xiàng)目是如何設(shè)置的。我們建議設(shè)置 width: 1em（以及可選的 height: 1em），便于你通過(guò) font-size 屬性重置圖標(biāo)的大小。

2.1、內(nèi)嵌

將圖標(biāo)嵌入你的 HTML 頁(yè)面中（與引用外部圖像文件相反）。如下例子中我們對(duì) width 和 height 屬性進(jìn)行了重新設(shè)置。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

2.2、Sprite

利用 SVG sprite 和 <use> 元素即可插入任何圖標(biāo)。使用圖標(biāo)的文件名作為片段標(biāo)識(shí)符（例如 toggles 就是 #toggles）。SVG sprites 允許你像 <img> 元素一樣引用外部文件，并支持 currentColor 的功能以便主題化。

注意！在 chrome 瀏覽器中，<use> 不能跨域使用。

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

2.3、作為外部圖片文件引用

將 Bootstrap 圖標(biāo)庫(kù) 的 SVG 文件復(fù)制到你所選擇的目錄中，并像引用普通圖片一樣通過(guò) <img> 元素引入 SVG 圖標(biāo)。

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

2.4、圖標(biāo)字體

Bootstrap 圖標(biāo)庫(kù)還提供了圖標(biāo)字體文件，并且包括了每個(gè)圖標(biāo)及其對(duì)應(yīng) class 名稱(chēng)。通過(guò)在頁(yè)面中引入圖標(biāo)字體文件，然后根據(jù)需要為 HTML 標(biāo)簽添加對(duì)應(yīng)的 class 名稱(chēng)即可（例如 <i class="bi-alarm-clock"></i>）。

使用 font-size 和 color 樣式屬性可以更改圖標(biāo)的外觀。

<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

2.5、CSS

你還可以在 CSS 中使用 SVG 圖標(biāo)（當(dāng)指定十六進(jìn)制顏色值時(shí) 務(wù)必對(duì)某些字符進(jìn)行轉(zhuǎn)義，例如將 # 字符替換為 %23）。如果未指定 <svg> 元素的 width 和 height 屬性，則圖標(biāo)將填滿(mǎn)所有可用空間。

如果需要使用 background-size 來(lái)調(diào)整圖標(biāo)的大小，則必須設(shè)置 viewBox 屬性。請(qǐng)注意，xmlns 屬性是必需的。

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

3、設(shè)置樣式

可以通過(guò)設(shè)置 .text-* 類(lèi)或自定義 CSS 來(lái)改變顏色

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

4、無(wú)障礙

對(duì)與純裝飾性圖標(biāo)，請(qǐng)?zhí)砑?aria-hidden="true" 屬性。否則，請(qǐng)?zhí)峁┻m當(dāng)?shù)奶娲晕谋尽８鶕?jù)添加圖標(biāo)的方法和使用位置（例如，作為獨(dú)立的圖片，或者作為按鈕等類(lèi)似組件上的唯一內(nèi)容），有多種使用方式。以下是幾個(gè)示例：

<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>

<i class="bi-github" role="img" aria-label="GitHub"></i>

<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

5、SVG 相關(guān)問(wèn)題

SVG 是非常棒的技術(shù)，但仍然存在一些需要處理的怪異行為。考慮到 SVG 有多種使用方式，我們?cè)诖a中沒(méi)有包含以下這些屬性和處理手段。

已知問(wèn)題包括：

在 Internet Explorer 和舊版本的 Edge 瀏覽器鐘 SVG 可以獲取焦點(diǎn)。在嵌入 SVG 時(shí)，請(qǐng)為 <svg>元素添加 focusable="false" 屬性。在 Stack Overflow 上有詳細(xì)解釋。
當(dāng) SVG 與 <img> 元素一起使用時(shí)，屏幕閱讀器可能不會(huì)將它們視為圖片來(lái)處理，也可能會(huì)完全跳過(guò)這類(lèi)圖片。為 <img> 元素設(shè)置role="img" 可以避免此類(lèi)問(wèn)題。
引用外部的 SVG sprites 圖可能在 Internet Explorer 瀏覽器中無(wú)法正常使用。請(qǐng)根據(jù)需要使用svg4everybody polyfill。

用html標(biāo)簽使用介紹

本文主要記錄常用的html標(biāo)簽使用說(shuō)明，用起來(lái)的時(shí)候偶爾查查。

常用html標(biāo)簽列表

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

常用標(biāo)簽使用說(shuō)明

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

普通用法

常用寫(xiě)法：??<a href="" title="" target="">填寫(xiě)內(nèi)容</a>??
href：去往的路徑（必寫(xiě)屬性）
title：鼠標(biāo)在移動(dòng)到元素上的文本提示
target：規(guī)定在何處打開(kāi)路徑

_blank：新頁(yè)面打開(kāi)
_parent：在父窗口中打開(kāi)鏈接
_self：當(dāng)前頁(yè)面跳轉(zhuǎn)（默認(rèn)值）
_top：在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體

當(dāng)href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉(zhuǎn)
當(dāng)href的值為#，表示超鏈接為空鏈接，點(diǎn)擊此鏈接時(shí)會(huì)跳轉(zhuǎn)到頁(yè)首的位置

錨點(diǎn)鏈接

錨點(diǎn)鏈接通過(guò)點(diǎn)擊超鏈接，自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置，類(lèi)似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性，最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁(yè)面元素，其他頁(yè)面跳轉(zhuǎn)自行搜索。
具體做法如下：

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

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

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

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

     (lorem*15)

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

超鏈接全局設(shè)置

在頁(yè)面head中寫(xiě)入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

<head>
  <!-- 讓頁(yè)面所有的超鏈接新頁(yè)面打開(kāi) -->
  <base target="_blank">  
</head>

charset編碼

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

ASCII/ANSI/Unicode：英語(yǔ)
GBK：亞洲通用字符集
GB2312：中文簡(jiǎn)體
Big5：臺(tái)澳港繁體
UTF-8：世界通用字符集

name

關(guān)鍵字

常用寫(xiě)法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的關(guān)鍵字，盡量將重要的關(guān)鍵詞放在前面

網(wǎng)頁(yè)描述

常用寫(xiě)法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的主要內(nèi)容

作者

常用寫(xiě)法： ??<meta name="author" content="">??
描述：告訴搜索引擎網(wǎng)頁(yè)的作者

文件檢索

常用寫(xiě)法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時(shí)候會(huì)有一些站點(diǎn)內(nèi)容，不希望被ROBOTS抓取而公開(kāi)。為了解決這個(gè)問(wèn)題，ROBOTS開(kāi)發(fā)界提供了兩個(gè)辦法：一個(gè)是robots.txt，另一個(gè)是The Robots META標(biāo)簽。
content: 文件檢索方式

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

網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)

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

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設(shè)置網(wǎng)頁(yè)icon圖標(biāo)：??<link rel="icon" href="a.ico">??

列表

無(wú)序列表

無(wú)序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡(jiǎn)單示例如下。

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

有序列表

有序列表使用數(shù)字進(jìn)行標(biāo)記，我們可以通過(guò)整數(shù)值start指定列表編號(hào)的起始值。簡(jiǎn)單示例如下。

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

描述列表

通過(guò)描述列表自定義列表，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡(jiǎn)單示例如下。

<dl>
        <dt>A</dt> <!-- 小標(biāo)題 -->
            <dd>A1</dd> <!-- 解釋標(biāo)題 -->
            <dd>A2</dd> <!-- 解釋標(biāo)題 -->
        <dt>B</dt> <!-- 小標(biāo)題 -->
            <dd>B1</dd> <!-- 解釋標(biāo)題 -->
            <dd>B2</dd> <!-- 解釋標(biāo)題 -->
    </dl>

表格

基礎(chǔ)表格

常用寫(xiě)法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框?qū)挾?/li>
cellspacing：?jiǎn)卧耖g距
cellpadding：內(nèi)容與邊框間距

簡(jiǎn)單示例如下。

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

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

單元格合并

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

簡(jiǎn)單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
<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>

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

文本輸入框

常用寫(xiě)法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規(guī)定輸入字段的類(lèi)型
name：輸入框的名字
maxlength：輸入文本長(zhǎng)度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認(rèn)值

簡(jiǎn)單示例如下。

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

密碼輸入框

常用寫(xiě)法：??<input type="password" name="">??
type：規(guī)定輸入字段的類(lèi)型
name：輸入框的名字
密碼輸入框的其他參數(shù)和文本輸入框一樣

簡(jiǎn)單示例如下。

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

單選框

常用寫(xiě)法：??<input type="radio" name="" checked="checked">??
type：規(guī)定輸入字段的類(lèi)型
name：輸入框的名字
checked：設(shè)定該輸入框被預(yù)先選定
想要多個(gè)單選框只能有一個(gè)被選中，設(shè)置所有單選框的name值相同即可實(shí)現(xiàn)

示例一，兩個(gè)單選框都可以被選中

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

示例二，兩個(gè)單選框只能有一個(gè)被選中

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

下拉列表

??<select>??

常用寫(xiě)法：??<select multiple=""></select>??
multiple：當(dāng)該屬性為true時(shí)，可選擇多個(gè)選項(xiàng)。

??<optgroup>??

常用寫(xiě)法：??<optgroup label=""></optgroup>??
label：設(shè)定選項(xiàng)組的描述。

??<option>??

常用寫(xiě)法：??<option value="" selected="">選項(xiàng)值</option>??
value：定義送往服務(wù)器的選項(xiàng)值。
selected：當(dāng)該屬性為true時(shí)，該選項(xiàng)被默認(rèn)選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認(rèn)選中 -->
  </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>

多選框

常用寫(xiě)法：??<input type="checkbox" checked="">??
type：規(guī)定輸入字段的類(lèi)型
checked：設(shè)定該輸入框被預(yù)先選定

簡(jiǎn)單示例如下。

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

文本框

常用寫(xiě)法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見(jiàn)文本的列數(shù)
rows：控制可見(jiàn)文本的行數(shù)
placeholder：提示字符

簡(jiǎn)單示例如下。

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

文本上傳控件

常用寫(xiě)法：??<input type="file" accept=""/>??
accept：規(guī)定提交的文件的類(lèi)型

簡(jiǎn)單示例如下。

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

其他類(lèi)型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網(wǎng)址控件
  <input type="date">日期控件 
  <input type="time">時(shí)間控件
  <!--email提供了郵箱的完整驗(yàn)證，必須包含@和后綴，如果不滿(mǎn)足驗(yàn)證，會(huì)阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數(shù)字控件
  <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>??主要區(qū)別和用法見(jiàn)??HTML5 progress和meter控件??

??<progress>??

常用寫(xiě)法：??<progress value="" max=""></progress>??
value：規(guī)定進(jìn)程的當(dāng)前值
max：規(guī)定需要完成的值

簡(jiǎn)單示例如下。

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

??<meter>??

常用寫(xiě)法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規(guī)定度量的當(dāng)前值
max：規(guī)定被界定為高的值的范圍
min：規(guī)定被界定為低的值的范圍
low：規(guī)定被界定為低的值的范圍
high：規(guī)定被界定為高的值的范圍
optimum：規(guī)定度量的最優(yōu)值
具體使用見(jiàn)meter標(biāo)簽改變顏色規(guī)則

簡(jiǎn)單示例如下

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

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

簡(jiǎn)單示例如下

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

??<video>??

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

簡(jiǎn)單示例如下

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

??<source>??

常用寫(xiě)法：??<source src="" type="">??
src：規(guī)定媒體文件的url
type：規(guī)定媒體文件的類(lèi)型
因?yàn)椴煌瑸g覽器支持的媒體格式不同，當(dāng)添加媒體文件時(shí)，需要考慮瀏覽器是否支持它們。我們可以準(zhǔn)備多種不同格式的媒體文件，然后使用source 標(biāo)簽，讓瀏覽器從上到下選擇支持的媒體格式

簡(jiǎn)單示例如下

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

特殊字符

??HTML特殊字符編碼對(duì)照表??

參考

??HTML基礎(chǔ)??
??HTML 參考手冊(cè)??
HTML中標(biāo)簽對(duì)應(yīng)的英文
meter標(biāo)簽改變顏色規(guī)則
HTML5 progress和meter控件

在線(xiàn)咨詢(xún)

上一篇：好程序員技術(shù)分享html5和JavaScript的區(qū)別
下一篇：HTML5 視頻播放器 flv.js 簡(jiǎn)單使用示例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML如何制作在透明輸入框里面添加圖標(biāo)

TML如何制作在透明輸入框里面添加圖標(biāo)

基本思路

使用Bootstrap圖標(biāo)的基本語(yǔ)法：

例子：這是在提交按鈕中使用Bootstrap的搜索圖標(biāo)的HTML代碼。

輸出：你在按鈕上看到的搜索圖標(biāo)是由Bootstrap框架提供的圖標(biāo)，屬于類(lèi)名search.。

1、安裝

1.1、通過(guò) npm 安裝

1.2、下載安裝包

1.3、通過(guò)公共 CDN 加載

2、用法

2.1、內(nèi)嵌

2.2、Sprite

2.3、作為外部圖片文件引用

2.4、圖標(biāo)字體

2.5、CSS

3、設(shè)置樣式

4、無(wú)障礙

5、SVG 相關(guān)問(wèn)題

用html標(biāo)簽使用介紹

常用html標(biāo)簽列表

常用標(biāo)簽使用說(shuō)明

列表

表格

與

多媒體資源

特殊字符

參考

您的項(xiàng)目需求