標籤：bsp val 存在 智能 唯讀 eth 內容 baidu table
什麼是 HTML？HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言 (HTML) (Hyper Text Markup Language)
HTML 不是一種程式設計語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 標籤HTML 標籤標籤通常被稱為 HTML 標籤 (HTML tag)。
HTML 標籤是由角括弧包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
HTML 文檔 = 網頁HTML 文檔描述網頁
HTML 文檔包含 HTML 標籤和純文字
HTML 文檔也被稱為網頁
網頁瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：
例子解釋<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示為標題
<p> 與 </p> 之間的文本被顯示為段落
HTML 注釋標籤可以通過如下文法向 HTML 原始碼添加註釋：
執行個體<!-- 在此處寫注釋 -->
注釋：在開始標籤中有一個驚歎號，但是結束標籤中沒有。
瀏覽器不會顯示注釋，但是能夠協助記錄您的 HTML 文檔。
HTML head部分1、<!DOCTYPE html>
文件類型聲明,讓瀏覽器按照html5標準代碼進行解釋與執行,
文件類型聲明不可少,必須放在文檔上方,
如果不寫，瀏覽器會預設按照相容模式運行，可能出現BUG。
2、<meta charset="utf-8" />
設定網頁字元集編碼格式：
GB2312：國標碼/簡體中文編碼格式。
GBK：擴充國標碼。比國標碼多了更多的編碼格式。
utf-8：萬國碼可以相容絕大多數國家語言。
html4.01之前聲明字元集編碼格式：
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
3、<meta name="keywords" content="HTML5,web開發" />
設定網頁描述：網頁描述內容。
name="keywords":當前語句用於設定網頁關鍵字
content="":網頁關鍵字內容，用逗號隔開。
4、<title>部落格園</title>
網頁標題，網頁選項卡上的文字
5、<link rel="icon" href="img/w-1.PNG" />
連結網頁小表徵圖：選項卡上的小表徵圖
rel屬性：icon：表示串連的檔案，作為網頁的icon表徵圖.
href屬性：選擇圖片所在路徑地址。
HTML 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。
HTML標籤分為"塊級標籤"和"行級標籤"
區別：
1、塊級標籤自動換行，前後隔一行；
行級標籤不會自動換行，從左往右依次顯示；
2、塊級標籤的寬度預設100%；
行級標籤寬度由文字內容撐開；
3、塊級標籤可以設定寬高，邊距，行級標籤不行。
HTML標籤分為“成對標籤”和“自閉和標籤（空標籤）”
成對標籤：成對出現，有開始標籤，必須有結束標籤，
例如：<h1></h1> <p></p>
自閉和標籤/空標籤：只有一個標籤，用/表示標籤的自動閉合（/可以省略）
例如：<hr /> <link /> <meta />
HTML 段落是通過 <p> 標籤進行定義的。
例子<p>This is a paragraph.</p><p>This is another paragraph.</p>HTML 連結
HTML 連結是通過 <a> 標籤進行定義的。
【a標籤 超連結】
1、href:超連結跳轉地址，可以是網路連結，也可以是本地HTML檔案相對路徑。
2、target:超連結新頁面開啟檔案位置。_self在當前頁面開啟(預設)
3、title:滑鼠指在串連上顯示的文字。
【功能性超連結】
1、mailto:給指定郵箱發郵件。
<a href="mailto://[email protected]">給騰寶發郵件</a>
2、tencent:與指定QQ聊天。
3、錨連結：點選連結，可以跳轉到頁面指定位置（錨點）
a.頁面指定位置定義一個錨點，
b.將超連結的href屬性，改為“#錨點名字”
<a name="top"></a>
.......
<a href="#top">跳轉頂部</a>
4、跳轉到其他頁面地址的指定錨點方式：
<a href="其他頁面地址.html#center">跳轉</a>
<a href="http://www.baidu.com.cn">This is a link</a>HTML 映像
HTML 映像是通過 <img> 標籤進行定義的。
圖片標籤<img>，行級標籤
1、src屬性：圖片路徑。
【路徑表示方式】
a、網狀圖片地址，不建議使用（http://..）
b、絕對路徑（file:///C:/tupian.jpg）,嚴禁使用絕對路徑，絕對路徑使用file://協議，網頁使用htp://協議無法開啟file://協議檔案。
絕對路徑寫法：file:///盤符：/檔案路徑
c、相對路徑：
1、圖片在當前檔案的下一層，“檔案夾名/圖片名”
2、圖片與當前檔案在同一層，直接寫“圖片名”
3、圖片在當前檔案上一層，直接“../圖片名”
注意：圖片不能退出當前項目的根目錄，即圖片必須包含在項目裡邊。
d、width、height:有寬高屬性
e、title:滑鼠指上時所顯示的文字
f、 alt=" ";圖片無法載入時顯示的內容。省略alt,將預設顯示tiitle內容。
g、align=" ";圖片周圍的文字相對於圖片相片順序。
top:文字居上 center:文字置中 bottom：文字局低
<img src="longmao.jpg" width="104" height="142" />無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個清單項目始於 <li>。
清單項目內部可以使用段落、分行符號、圖片、連結以及其他列表等等。
例子
<ul><li>Coffee</li><li>Milk</li></ul>有序列表
同樣，有序列表也是一列項目，清單項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個清單項目始於 <li> 標籤。
清單項目內部可以使用段落、分行符號、圖片、連結以及其他列表等等。
例子
<ol><li>Coffee</li><li>Milk</li></ol>定義列表
自訂欄表不僅僅是一列項目，而是項目及其注釋的組合。
自訂欄表以 <dl> 標籤開始。每個自訂欄表項以 <dt> 開始。每個自訂欄表項的定義以 <dd> 開始。
定義列表的清單項目內部可以使用段落、分行符號、圖片、連結以及其他列表等等。
例子
<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
表格屬性
<th>表頭，預設加粗置中
<tr>表示行
<td>表示列
1、border:給表格每個<td>和整個table加邊框。
如果border>1,則只有最外層邊框加粗，<td>邊框不變。
2、cellspacing:設定儲存格與儲存格之間的間距。
3、cellspacing="0";可以設定邊框之間的間距為0，但是相鄰的邊框不會合并，而是顯示兩條線寬度。
【設定表格邊框合并】
可以使用CSS設定：style="border-collapse: collapse;"
設定邊框合并以後，cellspacing屬性將會失效。
4、cellpadding:儲存格內邊距，儲存格文字與邊框之間的距離。
5、width/heght:表格寬高
6、align:center/left/right; 設定表格在瀏覽器中位置。
7、bgcolor:表格背景色。
8、bordercolor：表格邊框顏色。
9、backgroud:表格背景圖。背景圖和背景色同時存在時，背景圖生效。
【表格行列的屬性】
a、width/height:寬高
b、bgcolor:背景色（當表格與列屬性發生衝突時，優先採用“近者優先”）原則：table<tr<td
c、align:設定儲存格中的內容在表格裡位置。
d、valign:設定儲存格中內容，垂直對齊。
【表格的跨行與跨列】
1、colspan="n"; 跨列。如果某個儲存格跨n列，則該儲存格右側n-1個td就不需要了。
2、rowspan="n";跨行。如果某個儲存格跨n行，則該儲存格下側n-1個td就不需要了。
-->
【表格的結構化：】
完整的結構，包括：
caption:表格的標題，無論<caption></caption>標籤放在表格第幾行，表格標題永遠在表格正上方置中。
thead:表格表頭部分。永遠在表格最上部。
tbody:表格的身體部分，在thead之下，tfoot之下。
tfoot:表格尾部，
【表格的直列化：】
表格有記列，就可以在表格上方寫幾個<col />標籤，每個<col />就對應第幾列，可以對<col />標籤修改樣式，添加name等屬性，表示這一列的所有td同步修改；
如果需要對多列修改樣式，可以使用<colgroup></colgroup>標籤包裹多個<col />。
執行個體
<table border="1" width="700" height="280" style="border-collapse: collapse">
<h1 align="center" style="width: 700px;">特別休假申請單</h1>
<h2>申請日期：年 月 日</h2>
<tr>
<td>所屬單位</td>
<td>部組班</td>
<td>職稱</td>
<td>111</td>
<td>姓名</td>
<td>111</td>
<td>廠長</td>
</tr>
<tr>
<td rowspan="2">地方</td>
<td colspan="3">年 月 日</td>
<td rowspan="2" colspan="2">阿紅</td>
<td>111</td>
</tr>
<tr>
<td colspan="3">年 月 日</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">花灑哈吉好</td>
<td colspan="4">好的</td>
<td>花灑</td>
</tr>
<tr>
<td>到期日</td>
<td colspan="3">年 月 日</td>
<td colspan="2">互促好很</td>
<td>哈哈</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">bdbckbbj</td>
<td colspan="2">nksdjc</td>
</tr>
</table>
form表單
1、action:表單提交的伺服器位址。
2、method:表單提交資料的方式，可選值有get和post.
【get和post的區別】
a、get：使用URL傳遞資料，內容可在地址欄可見，不安全。
b、post：資料無法在地址欄可見，比較安全。
c、get傳遞的資料量有限，只能傳純文字內容。
d、post：可以傳遞大量的資料，並且可以傳遞圖片，視頻等檔案。
e、get:傳輸速度比post快。
【get傳遞資料的URL格式】
http：//原來的地址，html？name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html?username=123
比如，input使用時，name屬性必不可少，缺少name,將導致該輸入框的資料不向後台傳遞。
【input常用屬性】
1、type：表示當前輸入框是何種類型輸入框。
2、name：給輸入框起別名，向後台傳遞時，使用name=value的形式傳遞。
3、value：給輸入框提供預設值。
4、placeholder:輸入框的提示內容，當輸入框有value時，提示內容消失。
5、hidden隱藏當前輸入框。可以寫hidden="hidden",也可以省略屬性值，唯寫<input type="text" hidden />
隱藏的輸入框內容，也可以向後台傳輸。
6、disable：禁用當前輸入框，可以顯示，不能使用。被禁用輸入框內容不能向後台傳遞。
【input的type類型】
a、text:普通文字框。
b、password:密碼框，
c、radio:選項按鈕，value不能省略，這個value需要傳到後台；
選項按鈕，憑藉name是否相同，區分按鈕是否同一組，同一組按鈕只能選一個，name相同。
d、checkbox:多選按鈕，value不能省略，這個value需要傳到後台；
checked="checked";設定選項按鈕/多選按鈕，預設選中。
e、file:檔案上傳框。
accept屬性，可以限制只能上傳何種類型的檔案，*表示可以接受所有檔案，比如：“image/*”表示只可以接收圖片
mutiple="mutiple":設定可以上傳多個檔案。
f、submit:表單提交按鈕。
g、reset:表單重設按鈕。
h、image:圖形提交按鈕，src屬性匯入圖片，與submit都具有提交表單的作用。
i、button:顯示為按鈕形狀，無作用。
j、hidden：隱藏的輸入框，與普通的輸入框+hidden=“hidden”的作用相同。
【select下拉選擇區塊】
1、select裡邊的每一項，用<option></option>標籤表示
2、name：需要寫在select裡邊。
3、option標籤如果有value屬性，則向後台傳遞的將是value屬性的值，如果沒有value屬性，
則傳遞是<option></option>之間的文字。
4、option添加屬性select="select";設定預設選中。
5、select添加屬性mutiple="mutiple";設定當前下拉控制項可以多選。
6、option添加title，滑鼠指上去顯示的文字。
7、select可以使用<optgroup></optgroup>標籤對選項進行分組，用lable屬性顯示分組名。
【文本域】
a、文本域大小控制：
可以用文本域屬性cols="20"（寬度多少字元） rows="10"（高度多少字元）
可以使用css樣式style="width:200px; height: 100px;"
b、設定文本域大小不能拖動：
style="resize: none;"
c、設定文本域為唯讀模式，不能修改：
<textarea readonly="readonly"></textarea>
d、文字超出地區處理：
使用style="overflow： xx;"可以設定文字超出地區的顯示方式。
overflow: hidden;超出地區的文字隱藏不顯示。
overflow: scroll；不管文字多少都顯示水平垂直捲軸。
overflow: auto;自動，預設效果。文字多顯示捲軸，不多時，不顯示。
overflow-x:水平方向顯示捲軸。
overflow-y:垂直方向nput與表單關聯方式。只需給form表單起一個id，然後給表單外面的
input添加form屬性，指向這個id，顯示捲軸。
【智能表單】
1、H5給我們提供了將from外的i就可以實現表單與input的綁定；
<form id="hh"></form>
<input form="hh">
【H5新增input屬性】
1、form屬性：關聯指定表單的id
2、placeholder：輸入框提示內容
3、required="required":內容必填
4、autofocus="autofocus"；指定輸入框，自動獲得焦點
5、autocomplete：是否自動開啟提示完成功能，預設開啟狀態，設定為off表示關閉，設定on表示開啟
執行個體
<form>
<table>
<tr>
<td>登入名稱：</td>
<td><input type="text" name="username" >（可包含a-z、0-9和底線）</td>
<td><img src="images/a.gif">閱讀貴網服務合約</td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="psw">（至少包含六個字元）</td>
<td rowspan="8"><textarea style="width: 200px; height: 200px;overflow-y: scroll;">歡迎閱讀服務條款協議......</textarea></td>
</tr>
<tr>
<td>再次輸入密碼：</td>
<td><input type="password" name="psw"></td>
</tr>
<tr>
<td>電子郵箱：</td>
<td><input type="text" name="email">（必須包含@字元）</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" checked="checked"><img src="images/a.gif">男
<input type="radio" name="sex"><img src="images/a.gif">女
</td>
</tr>
<tr>
<td>頭像：</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>愛好：</td>
<td>
<input type="checkbox" name="hobby">運動
<input type="checkbox" name="hobby">聊天
<input type="checkbox" name="hobby">玩遊戲
</td>
</tr>
<tr>
<td rowspan="2">喜歡的城市：</td>
<td>
<select>
<option>請選擇城市</option>
<option>廈門</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="同意右側服務條款，提交註冊資訊">
<input type="reset" value="重填"></td>
</tr>
</table>
</form>
H5-html基礎-1
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
