HTML最基本知識

標籤：速度   idt   根目錄   伺服器   accept   控制   ado   check   多選   

1）有序列表ol，由多個li標籤組成。

<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
顯示結果中內建序號：

2）無序列表ul
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
顯示結果中無序號：

兩層無序列表嵌套的話第二層的黑點變為空白心：

3）定義列表dl

<dl>
<dt>定義列表的標題</dt>
<dd>定義列表的描述項</dd>
<dd>定義列表的描述項</dd>
<dd>定義列表的描述項</dd>
</dl>
顯示結果中，標題自動頂格顯示，一個列表一般只有一個標題，但可
以有多個描述項。
4）figure組合標籤
包含img一張圖片，figcaption圖片的標題，在圖片正下方顯示
。

<figure>
<img src="img/icon.png" />
<figcaption>
表徵圖
</figcaption>
</figure>
5）div分區標籤
用於配合css使用，將網頁劃分為區塊，可以包裹各種標籤。

<div style="background-color: blue; >
div裡面的文字
</div>
6）span標籤
span標籤用於包裹行內的文字，常配合css使用修改文字樣式。

學習<span style="color: red; font-size: 50px;">前端</span>

7）em、i、strong、b標籤
em和i都表示傾斜，strong和b都表示加粗。
em和strong有強調含義，強調給搜尋引擎看。strong的強調成都比em
更高。
強調的作用：可以讓搜尋引擎快速抓取網頁的重點內容，實現代碼的
語義化。

<em>em標籤，字型傾斜+強調</em><br />
<strong>strong標籤，字型加粗+強調</strong><br />
<i>僅僅是傾斜</i><br />
<b>僅僅是加粗</b><br />

8）<u>底線標籤</u>

9） 引用標籤：blockquote、q、cite。
blockquote：顯示效果為整段縮排，用於引用一整段標籤，是塊級標
簽。
q：自動加引號，用於引用一句話，是行級標籤。
cite：字型傾斜常用語引用作品名，書畫名。
<blockquote cite="">引用標籤</blockquote>
<q cite="www.baidu.com">引用，自動加雙引號,短引用</q>
<cite>引用，字型傾斜。常用語作品名字的引用</cite>

10）img圖片標籤(行級標籤)
src：圖片所在路徑。
路徑的表示方式：①網狀圖片地址不建議使用；
②可以使用圖片的絕對路徑，因為絕
對路徑使用file://協議，網頁使用http://協 議開啟無法訪問
file協議的檔案。絕對路徑寫法file:///C:/tupian.jpg
③相對路徑，推薦使用的唯一方式。
a.圖片在當前檔案的下一層"檔案夾名
/圖片名"；
b.圖片與當前檔案在同一層，直接寫
圖片名；
c.在上一層，"../圖片名"，注意圖片
必須包含在項目裡面不能退出項目根目錄。
width/height:寬度高度屬性

title：滑鼠放在圖片上時顯示的文字。
alt：圖片由於各種原因無法載入出來時顯示的文字。
省略alt將預設顯示title的名稱。
align：圖片周圍的文字相對於圖片的相片順序。top、center、
bottom。
<img src="img/icon.png" width="50px" height="50px" title="鼠
標放在圖
片上時顯示的文字" alt="圖片未載入" align="center" />

11）超連結標籤a
href:跳轉的地址，可以是網路連接，也可以是本地html檔案的相對路
徑。
target:超連結新頁面開啟的位置。_self在當前頁面開啟(預設)，
_blank在新頁面開啟。
title:滑鼠指在超連結上顯示的文字。
功能性超連結：
mailto：給指定郵箱發送郵件
tencent：與指定QQ聊天。
錨連結：點擊超連結可以跳轉到頁面的指定的位置(錨點)。
a.在頁面指定位置定義一個錨點<a name="top"></a>
b.將超連結的href屬性改為 #錨點名稱。<a href="#top">
跳轉到某位置</a>
c.跳轉到其他頁面指定錨點的方式。<a href="其他頁面的地
址.html#top">其他頁面的某位置</a>
12）表格table及相關屬性
tr:行；td：列；th:首行表頭中每個儲存格用th表示，預設文字加粗
置中。
border：給表格的每個td和整個tabl加邊框。如果boder的值>1，則只
有最外層邊框加粗，td邊框不變。
cellspacing：儲存格與儲存格之間的間距。值為0時，相鄰的邊框不
會合并，而是兩條邊框的寬度。
表格邊框合并：
style="border-collapse: collapse;"
設定邊框合并以後，cellspacing屬性將會失效。
cellpadding：儲存格內邊距，儲存格中文字與邊框之間的距離。
width/height：表格的寬高。
align：表格的位置。
bodercolor/bgcolor/background:後倆同時存在是背景圖生效。
表格的行列屬性：
作用於tr或者td上的屬性：
1、寬高
2、bgcolor。當表格的屬性與行列的屬性發生衝突時，優先順序採用“
近者優先”的原則：table<td<tr
3、align/valign：設定儲存格中文字水平對齊/垂直對齊。
表格的跨行與跨列：
1、跨列：colspan
2、跨行：rowspan
3  H5智能表單

1）H5給我們提供了將form外的input與表單關聯的方式。只需要給form表單起一個id，然後給表單外面的input添加form屬性，指向這個id，就可以實現表單與input的綁定。
2）H5給我們新增了許多input的新的type類型。
3）H5新增的input屬性：
①form：關聯制定表單的id。
②placeholder：輸入框的提示內容
③required：必填。
④autofocus：指定輸入框，自動擷取焦點。
⑤autocomplete：記住輸入情況。自動提示。可以給form標籤設定

 

1 表格完整化結構
caption：表格標題，無論<caption>標籤放在表格第幾行，表格標題
永遠在表格正上方置中。
thead:表頭，永遠在緊挨表格最上部。
tbody：身體部分，在thead之下，在tfoot之上。
tfoot：尾部，永遠在表格最下部。
2 表單

1）action：表單提交給哪個伺服器位址；
method：表單提交資料的方式。
get和post區別：
①get使用url傳遞資料，所有內容在地址欄可見，不安全。
post的資料無法在地址欄看到，較安全。
②get傳遞的資料量有限，而且只能傳遞純文字。而host可傳
遞大量資料，且可傳遞圖片、視頻等檔案。
③get傳輸速度比post快。
get傳遞資料的url格式：http://原來的地址.html?
name1=value1&name2=value2;
所以，input使用時，name屬性必不可少，若缺少name，
將導致該輸入框的資料不向後台傳遞。
2）input常用屬性(屬性名稱與值相同的，值都可以省略)
①type：表示當前輸入框時哪種類型的；
②name：給輸入框起別名，向後台傳遞時，使用name=value的形式傳
遞；
③value：當前input的預設值
④placeholder：輸入框的提示內容，當輸入框有value時，提示內容
消除。
⑤hidden：隱藏當前輸入框，可以寫為hidden="hidden"，也可以省略
屬性值，唯寫<input type="text" hidden />隱藏的輸入框內容，依
然可以向後台傳遞資料。
⑥disabled：禁用當前輸入框，顯示但不能使用。被禁用的輸入框內
容，將不能向後台傳遞資料。
3）input的type類型：
①text
②password
③radio：單選。value值不能省略。憑藉name是否相同，區
分按鈕是否為同一組。同一組按鈕只能選中一個，name必須相同。
checked="checked" 設定選項按鈕，預設被選中 。
④checkbox：多選按鈕，其他與選項按鈕相同。
⑤file：檔案上傳框。
accept屬性，可以限制上傳哪種類型的檔案。"*"表示可以上
傳所有類型檔案，"image/*"可以上傳圖片類型的所有。
multiple：設定可以上傳多個檔案。
⑥submit：表單提交按鈕。
⑦reset：表單重設按鈕。
⑧image：圖形提交按鈕，作用同submit。
⑨button：無任何作用，只顯示按鈕形狀。
⑩hidden：隱藏的輸入框。與text輸入框使用hidden時效果一樣。
4）select下拉選擇區塊
①此標籤裡每一項用<option></option>。
②name屬性，學要卸載select標籤中。
③option標籤中value值若有則傳遞value值，若沒有則傳遞標籤中間
的文字。
④option添加屬性selected="selected",設定預設選中項。
⑤selected屬性multiple，設定當前下拉控制項可以多選。(瞭解)
⑥option添加屬性title，滑鼠指向時顯示的文字。
⑦select可以使用<optgroup></optgroup>,標籤對選項進行分組，用
lable屬性顯示分組名。
5）textarea文本域
①文本域大小用css控制。
②設定文本域大小不能在網頁中顯示時拖動改變。
style="resize:none;"
③屬性readonly唯讀。文本域中的文字在網頁中顯示時不能更改。
④文字超出地區處理overflow樣式，可以設定文字超出地區的顯示方
式。style="overflow:"
a.overflow:hidden;超出地區的字隱藏。
b.overflow:scroll;無論文字多少都會顯示水平&垂直捲軸
。
c.overflow:auto;預設效果。文字多出現捲軸，文字少不
出現。
d.overflow-x/-y單獨修改某個方向的捲軸。

3  H5智能表單
1）H5給我們提供了將form外的input與表單關聯的方式。只需要給
form表單起一個id，然後給表單外面的input添加form屬性，指向這個
id，就可以實現表單與input的綁定。
2）H5給我們新增了許多input的新的type類型。
3）H5新增的input屬性：
①form：關聯制定表單的id。
②placeholder：輸入框的提示內容
③required：必填。
④autofocus：指定輸入框，自動擷取焦點。
⑤autocomplete：記住輸入情況。自動提示。可以給form標
簽設定。

HTML最基本知識