標籤：水平 UI sel 選中 user desc 隱藏 multiple 論文
一、什麼是HTMLHTML是超文字標籤語言，即網頁的源碼。而瀏覽器就是翻譯解釋HTML源碼的工具。
二、HTML的基本格式<!DOCTYPE html>：
①文件類型聲明：讓瀏覽器按照HTML5的標準對代碼進行解釋與執行。
②文件類型聲明必不可少，而且，必須放在文檔的最上方，前面不可有任何一行代碼。
③如果不寫文件類型聲明，瀏覽器會按照相容模式運行，可能會出現不明bug。
<head></head>：主要放一些關於網頁設計的相關語句。
<body></body>:body中的內容，會顯示在瀏覽器的展示地區。
三、HTML的基本標籤之head部分1、設定網頁關鍵字
<meta name="keywords" content="HTML知識點"/>：
①name=“keywords” 表示當前語句用於設定網頁關鍵字。
②content=“” 表示網頁的關鍵字內容，多個關鍵字之間用英文逗號隔開。
<meta name="description" content="這是我的第一個網頁！！！"/> :設定網頁描述：網頁的描述，在搜尋引擎中搜尋網站時，標題下面的一段文字，就是網頁的描述內容。
3、title標題<title>我的第一個網頁</title>：網頁的標題，也就是網頁選項卡上的文字。
4、設定網頁小表徵圖（選項卡上的小圖片）例如：<link rel="icon" href="img/1.jpg"/>：
①rel屬性：選擇 icon（表徵圖），表示連結的檔案，將作為網頁的icon表徵圖。
②href屬性：選擇圖片所在的路徑地址。
四、HTML的基本標籤之body部分1、HTML標籤分為“塊級標籤”和“行級標籤”
【塊級標籤和行級標籤的區別】
①塊級標籤自動換行，前後隔一行；行級標籤不會自動換行，從左往右依次顯示；
②塊級標籤寬度預設是100%，行級標籤的寬度有文字內容撐開；
③塊級標籤可以設定寬度，高度，邊距等屬性，行級標籤不能設定上述屬性；
從寫法上看，HTML標籤分為“成對標籤”和“自閉合標籤（空標籤）”
成對標籤：成對出現，有開始標籤，必須有結束標籤，內容包裹在兩個標籤之間。
例如：<h></h1>,<p></p1>,<title></title>
自閉和標籤/空標籤：只有一個標籤，用/表示標籤的自動閉合（/可以省略）。
例如：<hr/>,<link/>,<meta/>
a.標題標籤：<h1></h1>......<h6></h6> 特點:h1最大，h6最小，自動加粗。
b.水平線標籤：<hr/>
c.段落標籤：<p></p>
d.換列標籤：<br/>
e.引用標籤：<blockquote></blockquote>
重要的cite屬性工作表明引用的來源，一般為網址，且網址不會在網頁中展示
瀏覽器一般顯示為首行縮排
f.預格式標籤：<pre></pre>
瀏覽器預設顯示樣式：①顯示為等寬字型
②代碼中的換行，空格等元素可在瀏覽器中直接顯示。
a.span標籤：用於包裹行內的文字。 常配合CSS使用修改文字樣式。
b.引用標籤
常見的引用標籤有：blockquote、q、cite
區別：
① 顯示效果上： blockquote整段縮排、q加引號、cite 傾斜
② 從功能上： blockquote用於引用一整段內容，是塊級標籤。 q用於引用一句話，是行級標籤。 cite常用於引用作品名、書畫名。
c.img圖片標籤
1. src屬性：表示圖片所在的路徑。
[路徑的表示方式]
① 網狀圖片地址。 並不建議使用。
http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
② 可以使用圖片的絕對路徑。但是，嚴禁使用絕對路徑。 因為，絕對路徑使用file://協議，網頁使用http://協議開啟無法訪問file://協議的檔案。
file:///C:/sunyang.jpg -- 絕對路徑寫法：file:///盤符:/檔案路徑
③ 使用相對路徑。 推薦使用的唯一方式。
a. 圖片在當前檔案的下一層， “檔案夾名/圖片名”
b. 圖片與當前檔案在同一層，直接寫"圖片名"
c. 圖片在當前檔案的上已成，"../圖片名" 。
(注意： 圖片必須包含在項目裡面，不能退出項目根目錄)
2. width、height 寬度、高度屬性
3. title：滑鼠指上時顯示的文字
4. alt： 圖片無法載入時，顯示的文字。 省略alt，將預設顯示title內容
5. align: 圖片周圍的文字，相對於圖片的相片順序；
top 文字居上
center 文字置中
bottom 文字局底
d.a標籤 超連結
1. href屬性： 超連結跳轉的地址。可以是網路連接，也可以是本地HTML檔案的相對路徑。
2. target屬性： 超連結新頁面開啟的位置。
_self在當前頁面開啟(預設) _blank在新頁面開啟
3. title屬性：滑鼠指在超連結上顯示的文字。
【功能性超連結】
1. mailto： 給指定郵箱發送郵件。
<a href="mailto://[email protected]">點擊給帥哥發郵件！</a>
2. tencent: 與指定QQ聊天。
<a href="tencent://message/?uin=2831705549">與帥哥聊天</a>
3. 錨連結：點擊超連結，可以跳轉到頁面的指定位置(錨點)
① 在頁面的指定位置，定義一個錨點：
<a name="center"></a>
② 將超連結的href屬性，改為 “#錨點名稱”
<a href="#center">跳到div上方</a>
③ 跳轉到其他頁面指定錨點的方式：
<a href="其他頁面地址.html#center">哈哈哈</a>
a、表格table屬性
表格中一行用tr表示;
一行中的每個儲存格,用td表示;
首行的表頭中，每個儲存格用th表示，th預設文字會加粗，置中。
b、表格中常用的各種屬性
1.border：給表格的每個td和整個table加邊框。如果border的值大於1，則只有最外層邊框加粗，td上的邊框不變。
2.cellspacing：設定儲存格與儲存格之間的間距。
cellspacing="0"可以設定邊框之間的間距為0，但是相鄰的邊框不會合并，而是顯示為兩條線的寬度。
[設定表格邊框合并]
可以使用css設定：style="border-collapse:collapse;"設定邊框合并以後，cellspacing屬性將會失效。
3.cellpadding：儲存格內邊距，儲存格中文字與邊框之間的距離。
4.width/height：表格的寬度和高度
5.align：設定表格在瀏覽器中，居左，置中，居右。
6.bgcolor：表格背景色
bordercolor：表格的邊框顏色
background：表格背景圖。背景色和背景圖同時存在時，背景圖生效。
c、表格的行列屬性
作用於tr和td上的屬性：
1.width、height：寬度，高度。
2.bgcolor：背景色。
當表格的屬性與行列的屬性發生衝突時，優先順序採用“近者優先”的原則：table<tr<td。
3.align：設定儲存格中的文字，水平對齊：left center right
valign：設定儲存格中的文字，垂直對齊：top center bottom
d、表格的跨行與跨列
1.跨列：colspan=“n”，如果某個儲存格跨n列，則該儲存格右側n-1個td就不需要了。
2.跨行：rowspan=“n”，如果某個儲存格跨n行，則該儲存格下方n-1個td就不需要了。
e、表格的結構化與直列化
1、【表格的結構化】
完整的表格結構,包括:
caption:表格的標題，無論<caption>標籤放在表格第幾行，表格標題永遠在表格正上方置中。
thead：表格的表頭部分。永遠在表格最上部。
tbody：表格的身體部分。在thead之下，tfoot之上。
tfoot：表格的尾部。永遠在表格最下部。
2、【表格的直列化】
表格有幾列，就可以在表格的最上方寫幾個<col />標籤，每個<col />標籤就對應著第幾列，可以對<col />標籤修改樣式、添加name等屬性，表示這一列的所有td同步修改。
如果，需要對多列修改共同樣式，可以使用<colgroup></colgroup>標籤包裹多個<col />。
結果如下：
結果如下：
5、form表單
1、form表單有兩個重要的屬性：
action：表示將表單提交給哪個伺服器位址；
method：表單提交資料的方式，可選值有get和post兩種。
[get和post的區別]
①get使用URL傳遞資料。所有內容在地址欄可見，不安全。
post的資料無法在地址欄看到，比較安全。
②get傳遞的資料量有限，而且只能傳遞純文字內容；
post可以傳遞大量資料，並且可以傳遞圖片、視頻等檔案。
③get的傳輸速度要比post快。
[get傳遞資料的URL格式]
http：//原來的地址.html？name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html？username=123
所以，input使用時，name屬性必不可少。缺少name，將導致該輸入框的資料不向後台傳遞。
2、input的常用屬性：
①type：表示當前輸入框是何種類型的輸入框；
②name：給輸入框起別名。向後台傳遞時，使用name=value的形式傳遞；
③value：當前input的預設值；
④placeholder：輸入框的提示內容。當輸入框有value時，提示內容消失。
⑤hidden：隱藏當前輸入框。可以寫為hidden="hidden"，也可以省略屬性值，唯寫<input type="text" hidden> 隱藏的輸入框內容，依然可以向後台傳輸資料
⑥disabled：禁用當前輸入框。可以顯示，不能使用。被禁用的輸入框內容，將不能向後台傳遞資料。
⑦checked="checked"設定選項按鈕/多選按鈕，預設選中。
3、input的type類型：
①text：普通的文字框；
②password:密碼框。輸入的內容，顯示為小黑點；
③radio：選項按鈕。選項按鈕的value不能省略，這個value需要傳到後台；
選項按鈕，憑藉name是否相同，區分按鈕是否為同一組。同一組按鈕只能選中一個，name必須相同。
checked="checked"設定選項按鈕，預設被選中。
④checkbox：多選按鈕。其他與選項按鈕相同。
⑤file：檔案上傳框。
accept屬性，可以限制只能上傳何種類型的檔案。"*"表示可以接受所有檔案，"image/*"表示只能接受圖片。
multiple="multiple"設定可以上傳多個檔案。
⑥submit：表單提交按鈕。
⑦reset：表單重設按鈕。點擊將表單恢複為初始狀態。
⑧image：圖形提交按鈕。src屬性匯入圖片，與submit都具有提交表單的作用。
⑨button：顯示為按鈕形狀，但是並沒有什麼作用。
⑩hidden：隱藏的輸入框。與普通輸入框*hidden="hidden"的作用相同。
4、select：下拉選擇區塊
①select裡面的每一項，用<option></option>標籤表示；
②name屬性，需要寫到select標籤上。
③option標籤如果有value屬性，則向後台傳遞的將是value屬性的值，如果沒有value屬性，則傳遞的是<option></option>標籤之間的文字。
④option添加屬性selected="selected"，設定預設選中項。
⑤select添加屬性multiple="multiple"，設定當前下拉控制項可以多選。
⑥option添加屬性title，表示滑鼠指上後顯示的文字。
⑦select可以使用<optgroup></optgroup>標籤對選項進行分組，用label屬性顯示分組名。
<select name="city" >
<optgroup label="沿海城市">
<option value="123">青島</option>
<option selected="selected">濟南</option>
</optgroup>
<optgroup label="內陸城市">
<option title="濰坊">濰坊</option>
<option >煙台</option>
</optgroup>
</select>
5、textarea 文本域
①文本域大小控制：
可以用文本域屬性cols="20"（寬度多少字元）rows="10"（高度多少行），可以使用css樣式style="width: 200px;height: 100px;"
②設定文本域大小不能拖動：style="resize：none;"
③設定文本域為唯讀模式，不能修改：<textarea readonly="readonly"></textarea>
④文字超出地區處理：
使用style="overflow：xx；"可以設定文字超出地區的顯示方式;
>>>overflow；hidden;超出地區的文字隱藏不顯示;
>>>overflow:scroll;無論文字多少，都會顯示水平垂直捲軸;
>>>overflow:auto;自動，預設效果。文字多顯示捲軸，文字少不顯示捲軸;
>>>可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸；
overflow-y：scroll;overflow-x：hidden;
1、HTML5給我們提供了將form外的input與表單關聯的方式。只需要給form表單起一個id，然後給表單外面的input添加form屬性，指向這個id，就可以實現表單與input的綁定；
<form id="ff"></form>
<input form="ff">
2、H5給我們新增了許多input的新的type類型。 range color date email url
3、H5新增的input屬性:
①form屬性：關聯指定表單的id。
②placeholder：輸入框的提示內容。
③required="required"：必填
④autofocus="autofocus"指定輸入框，自動獲得焦點。
⑤autocomplete：是否開啟自動提示完成功能。預設為開啟狀態，設定為off表示關閉，設定為on表示開啟。可以給form標籤設定autocomplete，控製表單所有輸入框的自動提示功能。
HTML5基本知識點
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
