本標記語言,即HTML(Hypertext Markup Language),是用于描述網頁文檔的一種標記語言。以下是小編為大家整理的HTML基本的標簽。
注:HTML 標簽對大小寫不敏感,但推薦使用小寫!
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容
<!--…--> 注釋
文本
<h1>...</h1> 標題字大?。╤1~h6)
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強調)
<i>...</i> 斜體字
<em>...</em> 斜體字(強調)
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標
<sup> 上標
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
另加16進制顏色,但僅僅有16種顏色名可用英文字母,其余的要用16進制值。 記住哦!
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
2、作用
meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:
- <meta http-equiv="charset" content="iso-8859-1">
- <meta http-equiv="expires" content="31 Dec 2008">
瀏覽器的頭部就會包括這些:
- charset:iso-8859-1
- expires:31 Dec 2008
只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme??紤]到scheme不是很常用,所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子
name
第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦,我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。
charset有兩種寫法
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
- <!-- 頁面標題<title>標簽(head 頭部必須) -->
- <title>your title</title>
- <!-- 頁面關鍵詞 keywords -->
- <meta name="keywords" content="your keywords">
- <!-- 頁面描述內容 description -->
- <meta name="description" content="your description">
- <!-- 定義網頁作者 author -->
- <meta name="author" content="author,email address">
- <!-- 定義網頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。 -->
- <meta name="robots" content="index,follow">
viewport
viewport主要是影響移動端頁面布局的,例如:
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
content 參數:
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no)
各瀏覽器平臺
Microsoft Internet Explorer
- <!-- 優先使用最新的ie版本 -->
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <!-- 是否開啟cleartype顯示效果 -->
- <meta http-equiv="cleartype" content="on">
- <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
-
-
- <!-- Pinned Site -->
- <!-- IE 10 / Windows 8 -->
- <meta name="msapplication-TileImage" content="pinned-tile-144.png">
- <meta name="msapplication-TileColor" content="#009900">
- <!-- IE 11 / Windows 9.1 -->
- <meta name="msapplication-config" content="ieconfig.xml">
Google Chrome
- <!-- 優先使用最新的chrome版本 -->
- <meta http-equiv="X-UA-Compatible" content="chrome=1" />
- <!-- 禁止自動翻譯 -->
- <meta name="google" value="notranslate">
360瀏覽器
- <!-- 選擇使用的瀏覽器解析內核 -->
- <meta name="renderer" content="webkit|ie-comp|ie-stand">
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
- <!-- 鎖定屏幕在特定方向 -->
- <meta name="x5-orientation" content="landscape/portrait">
- <!-- 全屏顯示 -->
- <meta name="x5-fullscreen" content="true">
- <!-- 頁面將以應用模式顯示 -->
- <meta name="x5-page-mode" content="app">
Apple iOS
- <!-- Smart App Banner -->
- <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
-
-
- <!-- 禁止自動探測并格式化手機號碼 -->
- <meta name="format-detection" content="telephone=no">
-
-
- <!-- Add to Home Screen添加到主屏 -->
- <!-- 是否啟用 WebApp 全屏模式 -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!-- 添加到主屏后的標題 -->
- <meta name="apple-mobile-web-app-title" content="App Title">
Google Android
- <meta name="theme-color" content="#E64545">
- <!-- 添加到主屏 -->
- <meta name="mobile-web-app-capable" content="yes">
- <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
App Links
- <!-- iOS -->
- <meta property="al:ios:url" content="applinks://docs">
- <meta property="al:ios:app_store_id" content="12345">
- <meta property="al:ios:app_name" content="App Links">
- <!-- Android -->
- <meta property="al:android:url" content="applinks://docs">
- <meta property="al:android:app_name" content="App Links">
- <meta property="al:android:package" content="org.applinks">
- <!-- Web Fallback -->
- <meta property="al:web:url" content="http://applinks.org/documentation">
- <!-- More info: http://applinks.org/documentation/ -->
最后——移動端常用的meta
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="format-detection"content="telephone=no, email=no" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
- <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話,忽略email識別 -->
- <!-- 啟用360瀏覽器的極速模式(webkit) -->
- <meta name="renderer" content="webkit">
- <!-- 避免IE使用兼容模式 -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
- <meta name="HandheldFriendly" content="true">
- <!-- 微軟的老式瀏覽器 -->
- <meta name="MobileOptimized" content="320">
- <!-- uc強制豎屏 -->
- <meta name="screen-orientation" content="portrait">
- <!-- QQ強制豎屏 -->
- <meta name="x5-orientation" content="portrait">
- <!-- UC強制全屏 -->
- <meta name="full-screen" content="yes">
- <!-- QQ強制全屏 -->
- <meta name="x5-fullscreen" content="true">
- <!-- UC應用模式 -->
- <meta name="browsermode" content="application">
- <!-- QQ應用模式 -->
- <meta name="x5-page-mode" content="app">
- <!-- windows phone 點擊無高光 -->
- <meta name="msapplication-tap-highlight" content="no">
- <!-- 適應移動端end -->
lt;form> 標簽用于為用戶輸入創建 HTML 表單。
表單能夠包含 input 元素,比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務器傳輸數據。
下面小編為大家介紹幾個常用的表單標簽。
<datalist>標簽
這個標簽規定了 <input> 元素可能的選項列表。
一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表,里邊的選項是預先定義好的,將作為用戶的輸入數據。
我們來演示一個案例,大家就知道怎么用了:
上面這個小代碼,我們看得出,input標簽的list屬性值和datalist標簽的id是一樣的,沒錯,它們就是這樣來相互關聯起來的。當它們結合起來之后,不僅可以像select標簽一樣可以通過下拉來選擇已有的選項,還可以根據用戶輸入的字符,對選項進行匹配篩選。
效果圖如下:
有了datalist標簽,我們實現這種效果起來十分簡單,不需要任何的JavaScript代碼也能輕松實現。
<output>標簽:
標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果,我們都可以使用這個標簽。
我們來舉個例子:輸入的數字乘以2后得到的結果,我們用output輸出顯示。
我們用oninput屬性監聽著表單的變化,并把得到的結果賦值到output標簽的value。我們來看看效果圖:
其中,output標簽是可以離開form表單標簽的,但是,如果你這樣做的話,必須給output標簽添加form屬性,其屬性值是與其相關聯form表單的id。
我們來將output移到form表單的外面試試:
<form id="demo" oninput="b.value = parseInt(a.value)*2">
<input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>
跟上面的代碼有幾處不同之處,form標簽多了一個id,值為“demo”,output標簽被移到了form標簽外面,不再是form標簽的子節點,變成了兄弟節點(當然你可以把它移到文檔的其他位置)。output標簽還多了一個form屬性,此時,它的值正好是form標簽的id值:“demo”。這種寫法,代碼同樣是奏效的。
<keygen>標簽
這個標簽相信大家很少用到,但是也是為了學習,我們來了解一下就好。
這個標簽規定用于表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器,這種機制是專為使用基于Web的證書管理系統。
我在MDN(Mozilla Developer Network)的網站上看到了關于它的一些介紹:
There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.
大意是:目前各大瀏覽器廠商還在討論是否要保留它,在討論結束之前,你最好還是別用它。
而另一段話則是更加直接明了:
This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.
大意是:雖然有些瀏覽器還支持它,但是這個特性已經被移除出web標準了,以后別使用它了。