【HTML】HTML学习笔记（全）
HTML5
認(rèn)識(shí)WEB
**「網(wǎng)頁」**主要是由文字、圖像和超鏈接等元素構(gòu)成，當(dāng)然除了這些元素，網(wǎng)頁中還可以包括音頻、視頻以及Flash等。
**「瀏覽器」**是網(wǎng)頁顯示、運(yùn)行的平臺(tái)。
「瀏覽器內(nèi)核」(排版引擎、解釋引擎、渲染引擎)
負(fù)責(zé)讀取網(wǎng)頁內(nèi)容，整理訊息，計(jì)算網(wǎng)頁的顯示方式并顯示頁面。
| IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 可惜這幾年已經(jīng)沒落了，打開速度慢、升級(jí)頻繁、豬一樣的隊(duì)友flash、神一樣的對(duì)手chrome。 |
| Safari | webkit | 現(xiàn)在很多人錯(cuò)誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈在廁所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實(shí)是 WebKit 的分支。大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開發(fā) |
| Opera | blink | 現(xiàn)在跟隨chrome用blink內(nèi)核。 |
Web標(biāo)準(zhǔn)
**「構(gòu)成」**👉 結(jié)構(gòu)標(biāo)準(zhǔn)，表現(xiàn)標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)
- 結(jié)構(gòu)標(biāo)準(zhǔn)用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類(HTML)
- 表現(xiàn)標(biāo)準(zhǔn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀屬性(CSS)
- 行為標(biāo)準(zhǔn)用于對(duì)網(wǎng)頁模型的定義及交互的編寫(JavaScript)
**「Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)」**👇
- 易于維護(hù)：只需更改CSS文件，就可以改變整站的樣式
- 頁面響應(yīng)快：HTML文檔體積變小，響應(yīng)時(shí)間短
- 可訪問性：語義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫的網(wǎng)頁文件，更容易被屏幕閱讀器識(shí)別
- 設(shè)備兼容性：不同的樣式表可以讓網(wǎng)頁在不同的設(shè)備上呈現(xiàn)不同的樣式
- 搜索引擎：語義化的HTML能更容易被搜索引擎解析，提升排名
HTML初識(shí)
HTML初識(shí)
「HTML」(Hyper Text Markup Language): 超文本標(biāo)記語言
「所謂超文本，有2層含義：」
- 因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、多媒體等內(nèi)容（超越文本限制 ）
- 不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接（超級(jí)鏈接文本）。
「HTML骨架格式」
<!-- 頁面中最大的標(biāo)簽 根標(biāo)簽 --> <html><!-- 頭部標(biāo)簽 --><head> <!-- 標(biāo)題標(biāo)簽 --><title></title> </head><!-- 文檔的主體 --><body></body> </html>「團(tuán)隊(duì)約定大小寫」
- HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫
「HTML元素標(biāo)簽分類」
- 常規(guī)元素(雙標(biāo)簽)
- 空元素(單標(biāo)簽)
「HTML標(biāo)簽關(guān)系」
-
嵌套關(guān)系父子級(jí)包含關(guān)系
-
并列關(guān)系兄弟級(jí)并列關(guān)系
-
- 如果兩個(gè)標(biāo)簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進(jìn)一個(gè)tab鍵的身位（一個(gè)tab是4個(gè)空格）。如果是并列關(guān)系，最好上下對(duì)齊。
文檔類型< !DOCTYPE >
**「文檔類型」**用來說明你用的XHTML或者HTML是什么版本。< !DOCTYPE html>告訴瀏覽器按照HTML5標(biāo)準(zhǔn)解析頁面。
頁面語言lang
lang指定該html標(biāo)簽內(nèi)容所用的語言
<html lang="en"> en 定義語言為英語 zh-CN定義語言為中文「lang的作用」
- 根據(jù)根據(jù)lang屬性來設(shè)定不同語言的css樣式，或者字體
- 告訴搜索引擎做精確的識(shí)別
- 讓語法檢查程序做語言識(shí)別
- 幫助翻譯工具做識(shí)別
- 幫助網(wǎng)頁閱讀程序做識(shí)別
字符集
「字符集」(Character set)是多個(gè)字符的集合,計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。
- UTF-8是目前最常用的字符集編碼方式
- 讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對(duì)應(yīng)的html內(nèi)容。
「meta viewport的用法」
通常viewport是指視窗、視口。瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域。在移動(dòng)端和pc端視口是不同的，pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端有三個(gè)不同的視口概念：布局視口、視覺視口、理想視口
meta有兩個(gè)屬性name 和 http-equiv
name屬性的取值
- keywords(關(guān)鍵字) 告訴搜索引擎，該網(wǎng)頁的關(guān)鍵字
- description(網(wǎng)站內(nèi)容描述) 用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。
- viewport(移動(dòng)端的窗口)
- robots(定義搜索引擎爬蟲的索引方式) robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引
- author(作者)
- generator(網(wǎng)頁制作軟件）
- copyright(版權(quán))
http-equiv有以下參數(shù)
http-equiv相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容
- content-Type 設(shè)定網(wǎng)頁字符集(Html4用法，不推薦)
- Expires(期限) ,可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。
- Pragma(cache模式),是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出
- Refresh(刷新),自動(dòng)刷新并指向新頁面。
- cache-control（請(qǐng)求和響應(yīng)遵循的緩存機(jī)制）
HTML標(biāo)簽的語義化
- 方便代碼的閱讀和維護(hù)，樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
- 有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
- 方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁
「拓展」 標(biāo)簽：規(guī)定頁面上所有鏈接的默認(rèn) URL 和設(shè)置整體鏈接的打開狀態(tài)
<head><base href="http://www.baidu.com" target="_blank"><base target="_self"> </head> <body><a href="">測(cè)試</a> 跳轉(zhuǎn)到 百度 </body>HTML常用標(biāo)簽
排版標(biāo)簽
主要和css搭配使用，顯示網(wǎng)頁結(jié)構(gòu)的標(biāo)簽，是網(wǎng)頁布局最常用的標(biāo)簽。
-
標(biāo)題標(biāo)簽h(h1~h6)
-
段落標(biāo)簽<p> </p>,可以把 HTML 文檔分割為若干段落
<p>paragraph段落標(biāo)簽</p>- 文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口大小自動(dòng)換行
- 段落和段落之間有空格
-
換行標(biāo)簽<br />
- break
- <br />是個(gè)單標(biāo)簽
- <br />標(biāo)簽只是簡(jiǎn)單地開始新的一行，跟段落不一樣，段落之間會(huì)插入一些垂直的間距。
-
div和span標(biāo)簽:是沒有語義的,是我們網(wǎng)頁布局最主要的2個(gè)盒子。
-
div是division縮寫，表示分割，分區(qū)。span意為跨度、跨距。
-
<div>標(biāo)簽用來布局，但是一行只能放一個(gè)<div>。（會(huì)自動(dòng)換行）。大盒子
-
<span>標(biāo)簽用來布局，一行可以多個(gè)<span>。小盒子
-
「 排版標(biāo)簽」
-
b和strong 文字以粗體顯示
-
i和em 文字以斜體顯示
-
s和del 文字以加刪除線顯示
-
u和ins 文字以加下劃線顯示
標(biāo)簽屬性(行內(nèi)式)
使用HTML制作網(wǎng)頁時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名> <手機(jī) 顏色="紅色" 大小="5寸"> </手機(jī)>圖像標(biāo)簽
<img src = "圖像URL" />image的縮寫。單標(biāo)簽。
- src是<img>標(biāo)簽的必須屬性，他用于指定圖像文件的路徑和文件名
- 屬性：簡(jiǎn)單理解是屬于這個(gè)圖像標(biāo)簽的特性
| src | URL | 圖像的路徑 |
| alt | 文本 | 圖像不能顯示時(shí)的替換文本 |
| title | 文本 | 鼠標(biāo)懸停時(shí)顯示的內(nèi)容 |
| width | 像素 | 設(shè)置圖像的寬度 |
| height | 像素 | 設(shè)置圖像的高度 |
| border | 數(shù)字 | 設(shè)置圖像邊框的寬度 |
寬度和高度一般只修改一個(gè)，另外一個(gè)自動(dòng)。
注意：
- 標(biāo)簽可以擁有多個(gè)屬性，必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。
- 屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
- 采取 鍵值對(duì) 的格式 key=“value” 的格式
路徑
- 相對(duì)路徑：圖片相對(duì)于HTML頁面的位置
| 同一級(jí)路徑 | 圖像文件位于HTML文件同一級(jí) 如<img src="baidu.gif" /> | |
| 下一級(jí)路徑 | / | 圖像文件位于HTML文件下一級(jí) 如<img src="images/img.jpg" /> |
| 上一級(jí)路徑 | ../ | 圖像文件位于HTML文件上一級(jí) 如<img src="../2.png" /> |
- 絕對(duì)路徑：是指目錄下的絕對(duì)位置，直接到達(dá)目標(biāo)位置，通常是從盤符開始的路徑。\
超鏈接標(biāo)簽
- 超鏈接語法格式
anchor 錨
| href | 用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能 |
| target | 用于指定鏈接頁面的打開方式，其取值有_ self和 _ blan兩種，其中_ self為默認(rèn)值，_blank為在新窗口中打開方式。 |
- 鏈接分類
例如<a href="http://www.qq.com" target="_blank">騰訊</a>
網(wǎng)站內(nèi)部之間的相互鏈接，直接鏈接內(nèi)部頁面名稱即可。
例如<a href="index.html">首頁</a>
<h4>內(nèi)部鏈接：網(wǎng)站內(nèi)部頁面之間的相互鏈接</h4> <a href="inner.html" target="_blank">內(nèi)部鏈接</a>如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)， <a herf="#">首頁</a>
如果href里面地址是一個(gè)文件或者壓縮包，會(huì)下載這個(gè)文件。
在網(wǎng)頁中的各種網(wǎng)頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接
例如：給圖片添加超鏈接
<h4>網(wǎng)頁元素鏈接</h4><a href="http://www.baidu.com"><img src="img.jpg" /></a>點(diǎn)擊鏈接可以快速定位到頁面中的某個(gè)位置
(1). 在鏈接文本的href屬性中，設(shè)置屬性值為#名字的形式，如<a href="#two">第2集</a>
(2). 找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性=剛才的名字，如<h3 id="two">第2集介紹</h3>
1. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點(diǎn)擊的） <a href="#two"> 2. 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (目標(biāo)位置) <h3 id="two">第2集</h3>返回頂部
注釋標(biāo)簽
<!-- 內(nèi)容 -->快捷鍵：Ctrl+/
特殊字符
空格： 牛逼space
小于號(hào)：< less than
大于號(hào)：> more than
表格
現(xiàn)在還是較為常用的一種標(biāo)簽，但不是用來布局，常見顯示、展示表格式數(shù)據(jù)。因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺(tái)展示數(shù)據(jù)的時(shí)候表格運(yùn)用是否熟練就顯得很重要，一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。
表格基本語法
<table> <tr> <td>單元格內(nèi)的文字</td> ... </tr> ...</table>table、tr、td，他們是創(chuàng)建表格的基本標(biāo)簽，缺一不可
- table用于定義一個(gè)表格標(biāo)簽。
- tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。
- td 用于定義表格中的單元格，必須嵌套在< tr>< /tr>標(biāo)簽中。
- 字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，現(xiàn)在我們明白，表格最合適的地方就是用來存儲(chǔ)數(shù)據(jù)的。td像一個(gè)容器，可以容納所有的元素。
表頭單元格標(biāo)簽
table head ——> <th>。表頭單元格里面的文本加粗并且居中顯示。
表格屬性
這些屬性要寫到標(biāo)簽table里面去
三參為0，平時(shí)開發(fā)的我們這三個(gè)參數(shù) border cellpadding cellspacing 為 0
| align | left、center、right | 規(guī)定表格相對(duì)周圍元素的對(duì)齊方式 |
| border | “1"或”" | 規(guī)定表格單元是否擁有邊框，默認(rèn)為""，表示沒有邊框 |
| cellpadding | 像素值 | 規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn)1像素 |
| cellspacing | 像素值 | 規(guī)定單元格之間的空白，默認(rèn)2像素 |
| width | 像素值或百分比 | 規(guī)定表格的寬度 |
| height | 像素值或百分比 | 規(guī)定表格的高度 |
表格結(jié)構(gòu)標(biāo)簽
<thead>標(biāo)簽：表格的頭部區(qū)域。<thead>內(nèi)部必須擁有<tr>標(biāo)簽，一般是位于第一行。
<tbody>標(biāo)簽：表格的主體區(qū)域，主要用于放數(shù)據(jù)本體。
對(duì)于比較復(fù)雜的表格，表格的結(jié)構(gòu)也就相對(duì)的復(fù)雜了，所以又將表格分割成三個(gè)部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標(biāo)注， 這樣更好的分清表格結(jié)構(gòu)。
注意：
1、< thead>< /thead>：用于定義表格的頭部。用來放標(biāo)題之類的東西。< thead> 內(nèi)部必須擁有< tr> 標(biāo)簽！
2、< tbody>< /tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
3、< tfoot>< /tfoot>放表格的腳注之類。
4、 以上標(biāo)簽都是放到table標(biāo)簽中。
合并單元格
合并的順序我們按照 先上 后下 先左 后右 的順序 ,合并完之后需要?jiǎng)h除多余的單元格。
- 跨行合并：rowspan="合并單元格的個(gè)數(shù)"
- 跨列合并：colspan="合并單元格的個(gè)數(shù)"
目標(biāo)單元格：(寫合并代碼)
- 跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼
- 跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼
合并單元格三部曲：
- 先確定跨行還是跨列合并
- 找到目標(biāo)單元格，寫上合并方式=合并的單元格數(shù)量。比如：<td colspan="2"></td>
- 刪除多余的單元格
表格總結(jié)
| < table>< /table> | 表格標(biāo)簽 | 就是一個(gè)四方的盒子 |
| < tr>< /tr> | 表格行標(biāo)簽 | 行標(biāo)簽要再table標(biāo)簽內(nèi)部才有意義 |
| < td>< /td> | 單元格標(biāo)簽 | 單元格標(biāo)簽是個(gè)容器級(jí)元素，可以放任何東西 |
| < th>< /th> | 表頭單元格標(biāo)簽 | 它還是一個(gè)單元格，但是里面的文字會(huì)居中且加粗 |
| < caption>< /caption> | 表格標(biāo)題標(biāo)簽 | 表格的標(biāo)題，跟著表格一起走，和表格居中對(duì)齊 |
| clospan 和 rowspan | 合并屬性 | 用來合并單元格的 |
列表
布局。
**「列表ul」**容器里面裝載著結(jié)構(gòu)，樣式一致的文字或圖表的一種形式，叫列表。
列表最大的特點(diǎn)就是整齊 、整潔、 有序，跟表格類似，但是它可組合自由度會(huì)更高。
無序列表ul (重點(diǎn))
- < ul>< /ul>中只能嵌套< li>< /li>，直接在< ul>< /ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
- < li>與< /li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。
有序列表ol
- < ol>標(biāo)簽中的type屬性值為排序的序列號(hào)，不添加type屬性時(shí)，有序列表默認(rèn)從數(shù)字1開始排序。
- 常用的type屬性值分別為是1，a，A，i，I
- < ol reversed=“reversed”>中的reversed屬性能夠讓有序列表中的序列倒序排列。
- < ol start=“3”>中的start屬性值為3，有序列表中的第一個(gè)序列號(hào)將從3開始排列。
自定義列表dl
- 定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。
父親 - 大哥 - 弟弟
表單
在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。
表單目的是為了收集用戶信息。
表單控件：
包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
提示信息：
一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。
表單域：
它相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。
表單域
-
收集的用戶信息怎么傳遞給服務(wù)器？
-
- 通過form表單域
-
目的：
-
- 在HTML中，form標(biāo)簽被用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。
常用屬性：
- 每個(gè)表單都應(yīng)該有自己表單域。后面學(xué) ajax 后臺(tái)交互的時(shí)候，必須需要form表單域。
| action | url地址 | 用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。 |
| method | get/post | 用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。 |
| name | 名稱 | 用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。 |
表單控件（表單元素）
input 控件
<input type="屬性值" value="你好">- input 輸入的意思
- < input />標(biāo)簽為單標(biāo)簽
- type屬性設(shè)置不同的屬性值用來指定不同的控件類型
- 除了type屬性還有別的屬性
radio、checkbox按鈕name值要一樣！！！
性別：男 <input type="radio" name="radio"> 女 <input type="radio" name="radio"> <br> 愛好：吃飯<input type="checkbox" name="hobby"> 睡覺<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br>submit屬性
<!-- <input type="submit"> <br> --><input type="submit" value="免費(fèi)注冊(cè)">點(diǎn)擊了提交按鈕，可以把 表單域form 里面的表單元素 里面的值 提交到后臺(tái)服務(wù)器
reset屬性
重置按鈕還原表單初始默認(rèn)狀態(tài)
<input type="reset" value="重新填寫">button屬性
普通按鈕
<input type="button" value="獲取短信驗(yàn)證碼">file屬性
上傳頭像：<input type="file">value屬性
- value 默認(rèn)的文本值。有些表單想剛打開頁面就默認(rèn)顯示幾個(gè)文字，就可以通過這個(gè)value 來設(shè)置。
- name和value是每個(gè)元素都有的屬性值，主要給后臺(tái)人員使用
name屬性
-
name表單的名字， 這樣，后臺(tái)可以通過這個(gè)name屬性找到這個(gè)表單。 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。
-
- name屬性后面的值，是我們自己定義的。
- radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個(gè)選其中的一個(gè)啦
- name屬性，我們現(xiàn)在用的較少，但是，當(dāng)我們學(xué)ajax 和后臺(tái)的時(shí)候，是必須的。
checked屬性
- 表示默認(rèn)選中狀態(tài)。 較常見于 單選按鈕和復(fù)選按鈕。
input 屬性小結(jié)
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單里面默認(rèn)顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。 |
| checked | 默認(rèn)選中 | 表示那個(gè)單選或者復(fù)選按鈕一開始就被選中了 |
label標(biāo)簽
- label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。
- label標(biāo)簽主要目的是為了提高用戶體驗(yàn)。為用戶提高最優(yōu)秀的服務(wù)。
**作用：**用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)。
如何綁定元素呢
- 第一種用法就是用label標(biāo)簽直接包含input表單， 適合單個(gè)表單選擇
- 第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定(通過id)。
栗子
<label for="username">用戶名:</label> <input type="text" id="username"> <br><input type="radio" name="sex" id="nan"> <label for="nan">男</label><input type="radio" name="sex" id="nv"> <label for="nv">女</label>select下拉列表
- 如果有多個(gè)選項(xiàng)讓用戶選擇，為了節(jié)約空間，我們可以使用select控件定義下拉列表。
- 在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
- 我們實(shí)際開發(fā)會(huì)用的比較少
栗子
籍貫: <select> <option>山東</option> <option>北京</option> <option selected="selected">外星球</option> </select>textarea控件(文本域)
- 通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.
- cols=“每行中的字符數(shù)” rows=“顯示的行數(shù)” 我們實(shí)際開發(fā)不用
栗子
今日反饋: <textarea cols="50" rows="5">我知道這個(gè)反饋留言是textarea寫的. </textarea>總結(jié)
以上是生活随笔為你收集整理的【HTML】HTML学习笔记（全）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 愚见——工大之软件工程
- 下一篇： java企业通用模块_[模板风格]Wor