標籤：構建 發送 col 資源 動態網頁 doctype 作用 mon row
html常識什麼是HTML標籤一般分為兩種：
1. 塊級標籤
霸佔一整行的標籤。比如：<h>,<p>,<div>,<form>等
2. 行內標籤
可以多個標籤共同佔用一行的標籤。比如：<span>,<a>,<input>,<img>,<label>等
3. 塊級標籤特點
4. 行內標籤特點
< >；"；©®
html檔案結構 標籤使用範圍說明由可以看出，html檔案主要由<head>標籤和<body>標籤組成。在這兩個標籤的標籤體中能夠嵌套如下標籤：
由於曆史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出台以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility Mode)；
由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standarsmode)，這就是二者最簡單的區別。
W3C標準推出以後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的相容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。
window.top.document.compatMode：//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器裡顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
<meta>標籤有兩個屬性：http-equiv屬性 和 name屬性，不同屬性有不同的參數，這些不同的參數使得名，meta標籤有不同的功能。
http-equiv屬性http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv="Refresh"Content="30"> 每隔30秒重新整理一次網頁<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 過5秒跳轉到某網頁。（關於跳轉，可以在應急的時候用，一般可以用js實現）
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />name屬性
name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
<meta name="keywords" content="星際2，飛船，UFO，皮卡"> 關鍵字
<meta name="description" content="為您提供最新的資訊"> 網站描述<title>標籤
title標籤寫網站頭部資訊，即網頁標籤的名稱
<link>標籤link標籤有兩個作用：
1.設定標籤頁表徵圖：<link rel="shortcut icon" href="image/favicon.ico"> # rel指的是類型，href是檔案路徑，(image是存放圖片的檔案夾)2.外聯CSS檔案：
<link rel="stylesheet" type="text/css" href="css/common.css"> # rel指的是類型，href是存放css檔案的檔案夾<style>標籤
在html檔案中編寫css樣式
<script>標籤1.引進檔案<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>2.寫js代碼
<script type="text/javascript">...</script>基本標籤
<hn>：n的取值範圍是1~6; 從大到小. 用來表示標題.<p>：段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>：加粗標籤.<strike>：為文字加上一條中線.<em>：文字變成斜體.<sup>和<sub>：上角標 和 下角表.<br>：換行.<hr>：水平線<div>：白板，本身沒有特性，塊級標籤。<span>：白板，本身沒有特性，行內標籤。<sup>和<sub>的使用
<p>這個文本包含 <sub>下標</sub>文本。</p><p>這個文本包含 <sup>上標</sup> 文本。</p>
顯示結果：
這個文本包含 下標文本。
這個文本包含 上標 文本。
<input>標籤type屬性可以有如下取值：
text 文本輸入框password 密碼輸入框radio 單選框checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"name屬性
表單提交項的值。
checked屬性radio 和 checkbox 預設被選中
readonly屬性唯讀，text 和 password 標籤中使用
disabled屬性使得input標籤無法編輯，對所用的input標籤都有效
<textarea>標籤文本域標籤，有如下三個屬性：
name: 表單提交項的鍵.cols: 文本域預設有多少列rows: 文本域預設有多少行<label>標籤
<label for="xxx">姓名</label><input id="xxx" type="text">
當label標籤通過for屬性與其他標籤的id屬性關聯時，點擊label標籤的標籤體時，會自動響應label標籤所關聯的標籤
<select>標籤選擇框，有如下屬性：
name: 表單提交項的鍵。
value：表單提交項的值。size：選項個數multiple：multiple
selectted：預設選擇項
如果屬性設定multiple="multiple" size="3"，表示選擇框只能同時顯示三項。<option>內的 value 為後台識別，innerText為常值內容。
<p>選擇你的地址</p> <select name="city"> <option value="1" selected="selected">北京</option> <!-- selected 預設選項 --> <option value="2">深圳</option> <option value="3">上海</option> <option value="4">杭州</option> <option value="5">成都</option> </select>
<p>請選擇籍貫</p> <select name="jiguan"> <optgroup label="河北省"> <option value="1">石家莊</option> <option value="2">保定</option> <option value="3">邯鄲</option> </optgroup> <optgroup label="湖南"> <option>長沙</option> <option>株洲</option> <option>湘潭</option> </optgroup> <optgroup label="廣東"> <option>廣州</option> <option>深圳</option> <option>佛山</option> <option>珠海</option> <option>中山</option> </optgroup> </select><form>標籤
表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method屬性表單的提交方式 post/get 。 預設取值就是 get。
get: 1. 提交的索引值對.放在地址欄中url後面. 2. 安全性相對較差. 3.對提交內容的長度有限制.post: 1. 提交的索引值對 不在地址欄. 2. 安全性相對較高. 3. 對提交內容的長度理論上無限制.get/post是常見的兩種請求方式.enctype屬性
當上傳檔案時，form標籤必須添加該屬性，而且還必須已post方式發送請求
enctype="multipart/form-data"<a>標籤
有兩個作用：
<a href="http://www.baidu.com" target="_blank" title="點一下看看啊">你好</a>
<a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><a href="#i4">第四章</a><a href="#i5">第五章</a> <div id="i1" style="height:600px;">第一章的內容 <p>緒論</p></div><div id="i2" style="height:600px;">第二章的內容 <p>公元500年</p></div><div id="i3" style="height:600px;">第三章的內容 <p>公園1000年</p></div><div id="i4" style="height:600px;">第四章的內容 <p>公元1900年</p></div><div id="i5" style="height:600px;">第五章的內容 <p>公元2010年</p></div>
注意：<a>標籤預設的顯示樣式會有底線，如果看著不爽想要去掉，在a標籤樣式中設定：text-decoration:none;
<img>標籤圖片顯示標籤
屬性如下：src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放
注意：也可以把img標籤嵌套在a標籤中，來實現點擊圖片跳轉的功能。
列表標籤<ul>: 無序列表<ol>: 有序列表 <li>:列表中的每一項.<dl> 定義列表 <dt> 列表標題 <dd> 清單項目<ul> 標籤
<ul><li>Coffee</li><li>Milk</li></ul>
瀏覽器顯示如下：
<ol><li>Coffee</li><li>Milk</li></ol>
瀏覽器中顯示如下：
1.Coffee
2.Milk
<dl>標籤<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
瀏覽器顯示如下：
構建表格。
屬性如下：border: 表格邊框.cellpadding: 內邊距cellspacing: 外邊距width: 像素 百分比.（最好通過css來設定長寬）<tr>: table row <th>: table head cell <td>: table data cellrowspan: 儲存格豎跨多少行colspan: 儲存格橫跨多少列（即合併儲存格）<th>: table header <tbody>(不常用): 為表格進行分區.合併儲存格
<h4>儲存格跨兩格:</h4><table border="1"><tr> <th>Name</th> <th colspan="2">Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>
<h4>儲存格跨兩列:</h4><table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table>
html標籤簡介（常用）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
