摘要：前言一直都想把前端基礎(chǔ)知識(shí)點(diǎn)梳理一下，由于種種原因主要是因?yàn)閼校恢蓖系搅爽F(xiàn)在。年月日，上線了地球上第一個(gè)網(wǎng)站，解釋了萬(wàn)維網(wǎng)的概念，年月日，宣布萬(wàn)維網(wǎng)對(duì)所有人免費(fèi)使開(kāi)放。
1、前言
一直都想把前端基礎(chǔ)知識(shí)點(diǎn)梳理一下，由于種種原因（主要是因?yàn)閼?●"?"●)），一直拖到了現(xiàn)在。好了，廢話不多說(shuō)，直接開(kāi)干！
因特網(wǎng) 和 萬(wàn)維網(wǎng)
很多同學(xué)搞不清楚因特網(wǎng)和萬(wàn)維網(wǎng)的區(qū)別，這里簡(jiǎn)單介紹一下。
因特網(wǎng)（Internet）
也叫互聯(lián)網(wǎng)，是由全球各地的計(jì)算機(jī)通過(guò)海底光纜，光纖，雙絞線，電磁波等物理介質(zhì)互相連接組成的網(wǎng)絡(luò)。因特網(wǎng)內(nèi)的計(jì)算機(jī)之間可以相互通信，傳遞資源。
萬(wàn)維網(wǎng)（ World Wide Web，簡(jiǎn)稱www）
是一個(gè)由超文本文件相互連接組成的系統(tǒng)，它將因特網(wǎng)上的文本、圖像、聲音等資源鏈接到一起。世界各地的計(jì)算機(jī)連接只要到因特網(wǎng)，就可以用瀏覽器軟件來(lái)獲取這些信息資源。因此，萬(wàn)維網(wǎng)只是因特網(wǎng)功能的一部分。使用萬(wàn)維網(wǎng)服務(wù)必須有：服務(wù)器和瀏覽器。
上網(wǎng)
我們說(shuō)的上網(wǎng)，是指讓計(jì)算機(jī)設(shè)備（PC,智能手機(jī)，平板電腦...）接入因特網(wǎng)，在因特網(wǎng)上開(kāi)展各種活動(dòng)。
因特網(wǎng)為我們提供了非常豐富的服務(wù)。
萬(wàn)維網(wǎng)服務(wù)（www）
郵件首發(fā)（E-mail）
文件傳輸（FTP）
在線交流（QQ，微信，陌陌...）
在線游戲（王者榮耀，絕地逃生）
因特網(wǎng)上大多內(nèi)容是免費(fèi)的，但是我們上網(wǎng)卻不是免費(fèi)的。需要向運(yùn)營(yíng)商繳納一定的費(fèi)用，用于運(yùn)營(yíng)商安裝，維護(hù)光纜，衛(wèi)星，等通信必須的物理設(shè)備。
軟件架構(gòu)
常見(jiàn)的軟件架構(gòu)有兩種，
B/S（即瀏覽器/服務(wù)器，browser/server）
C/S（即客戶端/服務(wù)器client/server）
我們前端開(kāi)發(fā)，主要是B/S架構(gòu)。無(wú)須安裝特定的軟件，只要有瀏覽器的計(jì)算機(jī)中，就可以訪問(wèn)應(yīng)用。
而C/S架構(gòu)，必須要安裝特定的軟件。比如王者榮耀，必須安裝特定的客戶端，才能和其他玩家一起游戲。
2、初識(shí)網(wǎng)頁(yè)
純文本
純文本文件用來(lái)保存單純的文字信息，這些信息沒(méi)有顏色，排版等樣式。
文件大小只由文字的數(shù)量決定：
一個(gè)漢字占2個(gè)字節(jié)，
一個(gè)英文字母占1個(gè)字節(jié)。
什么是HTML
HTML：Hyper Text Mark-up Language，超文本標(biāo)記語(yǔ)言
它是使用純文本來(lái)描述網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)的一種標(biāo)記語(yǔ)言。 比如文字，圖片，多媒體等。
是目前互聯(lián)網(wǎng)上應(yīng)用最為廣泛的語(yǔ)言。
html文件是純文本文件的一種，但是與普通的純文本又有所區(qū)別。
它有一個(gè)最基本的特征：
可以將網(wǎng)絡(luò)上的其它文檔與當(dāng)前文檔鏈接起來(lái)，進(jìn)而組成一個(gè)網(wǎng)----萬(wàn)維網(wǎng)。
一個(gè)文件如果以 .html為擴(kuò)展名，那么它就是一個(gè)網(wǎng)頁(yè)。
HTML發(fā)展史簡(jiǎn)述
蒂姆·伯納斯·李（Tim Berners-Lee），是歐洲原子核研究中心（CERN）的一名物理學(xué)家。他為了讓各國(guó)的核物理學(xué)家能夠通過(guò)計(jì)算機(jī)傳遞信息，及時(shí)溝通。在1989年，他開(kāi)發(fā)出世界上第一個(gè) Web服務(wù)器和瀏覽器。允許研究員通過(guò)網(wǎng)絡(luò)查詢其他研究員的聯(lián)系方式。
蒂姆為他的發(fā)明定名為：World Wide Web，即（WWW）。
1991年8月6日，CERN上線了地球上第一個(gè)網(wǎng)站，解釋了萬(wàn)維網(wǎng)的概念，
1993年4月30日，CERN宣布萬(wàn)維網(wǎng)對(duì)所有人免費(fèi)使開(kāi)放。
1994年10月，lee老師建立了萬(wàn)維網(wǎng)聯(lián)盟（World Wide Web Consortium，簡(jiǎn)稱W3C），致力于制定各種網(wǎng)頁(yè)技術(shù)的標(biāo)準(zhǔn)規(guī)范。
2017年，lee老師因“發(fā)明萬(wàn)維網(wǎng)、第一個(gè)瀏覽器和使萬(wàn)維網(wǎng)得以擴(kuò)展的基本協(xié)議和算法”而獲得2016年度的圖靈獎(jiǎng)。
第一版 ——1993 ——草案
HTML 2.0 ——1995年11月 ——標(biāo)準(zhǔn)
HTML 3.2 ——1997年1月14日 ——標(biāo)準(zhǔn)
HTML 4.0 ——1997年12月18日 ——標(biāo)準(zhǔn)
HTML 4.01 ——1999年12月24日 ——標(biāo)準(zhǔn)
HTML 5 ——2014年10月28日 ——標(biāo)準(zhǔn)
HTML編輯和瀏覽
編輯
編輯網(wǎng)頁(yè)要使用編輯工具，如最簡(jiǎn)單的記事本，還有比較智能的集成開(kāi)發(fā)環(huán)境（IDE），如 Brakets，Sublime Text，Webstorm等等。使用自己覺(jué)得趁手的就行了。
瀏覽
編輯好的網(wǎng)頁(yè)是拿來(lái)給用戶看的，用戶通過(guò)瀏覽器可以看到網(wǎng)頁(yè)的內(nèi)容，
以下是市場(chǎng)上最流行的五大瀏覽器。其中谷歌瀏覽器是對(duì)最新版HTML5支持最好的瀏覽器， 非常適合用于開(kāi)發(fā)和調(diào)試。
第一個(gè)網(wǎng)頁(yè)
右鍵新建一個(gè)文本文檔，
用記事本打開(kāi)，輸入一些內(nèi)容，
將其后綴名改為.html
用瀏覽器打開(kāi)。
我們可以看到，在html文件中，不管我們?cè)趺磽Q行。
在瀏覽器中瀏覽時(shí)，所有的文字都會(huì)擠在一起。
因?yàn)檫@些文字都沒(méi)有語(yǔ)言的意義，瀏覽器就按照自己的方式來(lái)處理（刪除多余空格，只留下一個(gè)）。
在HTML文件中使用標(biāo)簽可以讓網(wǎng)頁(yè)中的內(nèi)容變得有意義：
只需要用相應(yīng)的標(biāo)簽對(duì)將文字包裹起來(lái)即可：
段落
上述代碼，告訴瀏覽器，“段落”兩個(gè)字應(yīng)該被當(dāng)作段落處理。
標(biāo)簽只是為了給瀏覽器看，而對(duì)于用戶是不可見(jiàn)的。
2、基本語(yǔ)法
一個(gè)網(wǎng)頁(yè)中，可能包含下列常見(jiàn)的元素：
文字
圖片（gif，png，jpg）
動(dòng)畫(huà)（gif，swf）
視頻（mp4）
音頻（mp3）
超鏈接
表單
每一種網(wǎng)頁(yè)元素在html中都有相應(yīng)的標(biāo)簽與之對(duì)應(yīng)。
HTML元素和標(biāo)簽
標(biāo)簽：
由尖括號(hào)包圍的關(guān)鍵詞，比如 ，就是標(biāo)簽。標(biāo)簽一般成對(duì)出現(xiàn)。
如：
。也有多帶帶出現(xiàn)的標(biāo)簽，如：
wdth屬性和height屬性讓圖片具備了指定的寬高。
元素內(nèi)部可以嵌套其他元素
比如：
以上的代碼，我們可以說(shuō)：
p元素是div元素的 “子元素”，span元素是div元素的 “后代元素”。 div元素是p元素的 “父元素”，div元素是span元素的 “祖先元素”。
HTML代碼的規(guī)范
代碼縮進(jìn)：
空格，換行不會(huì)影響到顯示在瀏覽器中的效果。
為了代碼便于調(diào)試，美觀，易讀。我們要養(yǎng)成良好的縮進(jìn)代碼習(xí)慣。
代碼注釋：
我們寫(xiě)的代碼要方便別人閱讀，所以很多代碼都需要寫(xiě)一些注釋，解釋代碼的功能。
注釋的代碼會(huì)被瀏覽器忽視。
html中有專門(mén)的標(biāo)簽來(lái)寫(xiě)注釋。
在大多數(shù)IDE中，添加注釋的快捷鍵是：ctrl + /
3、常見(jiàn)元素
結(jié)構(gòu)元素
與網(wǎng)頁(yè)文件的結(jié)構(gòu)相關(guān)的一些元素有如下四個(gè)：
…
…
…
它位于文檔最開(kāi)始的位置，告訴瀏覽器當(dāng)前頁(yè)面使用了HTML的哪個(gè)版本，
各版本網(wǎng)頁(yè)聲明的寫(xiě)法有所區(qū)別：
HTML5：
HTML4：
低版本的html標(biāo)準(zhǔn)不支持高版本的某些功能，但高版本的標(biāo)準(zhǔn)可以兼容低版本。
所以我們直接寫(xiě)成即可。
IDE軟件自動(dòng)生成以上元素的快捷鍵是：
html5： ! + Tab或 html:5 + Tab
html4： html:4t + Tab
…
該元素告訴瀏覽器這是一個(gè)html文檔，
與 標(biāo)簽分別限定了文檔的開(kāi)始和結(jié)束，
html元素是其它元素的容器。除了聲明以外的所有元素，按照規(guī)范都應(yīng)該包裹在其內(nèi)部。
html元素有兩個(gè)子元素：head和body
…
該元素也是一個(gè)容器。一些不需要當(dāng)作內(nèi)容來(lái)顯示的元素，按照規(guī)范都應(yīng)該包裹在其內(nèi)部。
比如這些元素：
… ----------------網(wǎng)頁(yè)的標(biāo)題
…--------------網(wǎng)頁(yè)的元信息
---------------網(wǎng)頁(yè)應(yīng)用的樣式
英國(guó)人用英語(yǔ)稱呼它為：panda
中國(guó)人用中文稱呼它為：熊貓
計(jì)算機(jī)也類(lèi)似，對(duì)于漢字的“你”字，
用Unicode碼表示： u4f60
用ASCII碼表示： 你
對(duì)同樣的字符使用不同的字符集編碼，就會(huì)出現(xiàn)不同的結(jié)果，也就是亂碼問(wèn)題出現(xiàn)的根源。
網(wǎng)頁(yè)文檔默認(rèn)的字符格式是UTF-8，又稱“萬(wàn)國(guó)碼”，它包含了全世界所有國(guó)家需要用到的字符。
如果以后在網(wǎng)頁(yè)中遇到亂碼的情況。
1.確保文檔本身的字符集為UTF-8，可以用記事本打開(kāi)，另存為UTF-8形式；
2.確保文檔內(nèi)部的meta元素設(shè)置的字符集為UTF-8
2.網(wǎng)頁(yè)描述
使用搜索引擎搜索某個(gè)頁(yè)面的時(shí)候，會(huì)出現(xiàn)一段用于描述網(wǎng)站的文字。這些文字就是網(wǎng)站的描述信息，可以使用meta標(biāo)簽來(lái)設(shè)置。
3.作者信息
4.關(guān)鍵詞
搜索引擎通過(guò)關(guān)鍵詞抓取網(wǎng)頁(yè)。
定義文檔的主體。按照規(guī)范，我們應(yīng)當(dāng)將所有需要被瀏覽器顯示的內(nèi)容放到body元素內(nèi)部。
定義文檔的主體。按照規(guī)范，我們應(yīng)當(dāng)將所有需要被瀏覽器顯示的內(nèi)容放到body元素內(nèi)部。
格式元素
格式元素的作用是為網(wǎng)頁(yè)中的內(nèi)容添加一定的格式。
1.P元素
它屬于文本級(jí)元素，內(nèi)部只能放置文本，圖片，表單元素。 如果放置了其他標(biāo)簽，也會(huì)被瀏覽器自動(dòng)處理。 瀏覽器中的開(kāi)發(fā)者工具中可以查看到它的處理結(jié)果。
2.列表元素
列表標(biāo)簽的主要作用是使特定的內(nèi)容有序化
列表標(biāo)簽有三種，分別是：
無(wú)序列表，
有序列表
定義列表。
a.無(wú)序列表
無(wú)序列表元素的列表項(xiàng)之間，沒(méi)有先后順序。
由
和- 元素定義的:
ul：英文單詞unordered list的縮寫(xiě)，表示沒(méi)有順序的列表；
li：英文單詞list item的縮寫(xiě)，表示列表的項(xiàng)。
按照規(guī)范這兩個(gè)元素都不應(yīng)該多帶帶使用。
無(wú)序列表的默認(rèn)符號(hào)是圓點(diǎn)。
ul元素的type屬性，可以改變列表項(xiàng)的符號(hào)。
取值有：
disc(圓)
circle（圓圈）
square（方塊）
實(shí)際開(kāi)發(fā)中一般不會(huì)使用到這些樣式，而是使用CSS進(jìn)行樣式的設(shè)計(jì)。
b.有序列表
有序列表元素的列表項(xiàng)之間，有一定的先后順序。
由
和- 定義:
- 洗
- 剪
- 吹
- 燙
ol元素也有自己的type屬性，取值有：
1（數(shù)字）
A（大寫(xiě)字母）
a（小寫(xiě)字母）
I（大寫(xiě)羅馬字母）
i（小寫(xiě)羅馬字母）
ol元素還可以定義列表的起始編號(hào)，如我們希望列表的第一個(gè)編號(hào)為5，而不是1，則需要定義元素的start屬性
c.定義列表
定義列表，通常用在標(biāo)題下方有內(nèi)容的場(chǎng)景中。
由
,- ,
- 定義:
- 列表標(biāo)題
- 列表內(nèi)容
- 列表內(nèi)容
dl：是definition list的縮寫(xiě)，表示定義一個(gè)列表
dt：是definition title的縮寫(xiě)，表示定義標(biāo)題，dt是dl中的項(xiàng)。
dd：是definition description的縮寫(xiě)，表示定義描述，dd中的內(nèi)容是用來(lái)描述dt的
三種列表在開(kāi)發(fā)中最常用的是ul。其他兩種了解即可。
3.表格元素
將內(nèi)容放在表格中，可以顯得更加整齊。
html中，以下標(biāo)簽用于構(gòu)建表格：
創(chuàng)建一個(gè)表格：
定義一個(gè)表格，至少需要4種標(biāo)簽：table，tr，td，tbody.如果代碼中缺省的tbody，會(huì)被瀏覽器自動(dòng)補(bǔ)充。
上述代碼構(gòu)建的表格，并不是我們想象中的樣子。
我們需要為這三個(gè)元素添加一些屬性，讓表格變得稍微好看一些。
表格的美化：
1. border 和 bordercolor
給表格設(shè)置邊框和邊框顏色，只能設(shè)置給
標(biāo)簽。
2. bgcolor
設(shè)置背景顏色，寫(xiě)在
標(biāo)簽中對(duì)整個(gè)表格生效；
寫(xiě)在中對(duì)某一行中的所有單元格生效；
寫(xiě)在中對(duì)某個(gè)單元格生效。
3. align
設(shè)置對(duì)其方式，寫(xiě)在 標(biāo)簽中調(diào)整表格在網(wǎng)頁(yè)中的位置；
寫(xiě)在中對(duì)某一行的所有單元格內(nèi)容生效；
寫(xiě)在中對(duì)某個(gè)單元格中的內(nèi)容生效。
4. cellpadding 和 cellspacing
cellpadding用于設(shè)置單元格內(nèi)部間距，
cllspacing用于設(shè)置單元格與單元格之間的距離。設(shè)置給 標(biāo)簽
5. width 和 height
設(shè)置表格的寬高。
tr標(biāo)簽不能設(shè)置寬度，因?yàn)樗膶挾扰c整個(gè)表格的寬度一致。
單元格的寬度不管設(shè)置多少個(gè)，都以最大的為準(zhǔn)。
6. rowspan屬性和colspan屬性：
實(shí)際的應(yīng)用中的表格一般都是不標(biāo)準(zhǔn)的。
有些單元格可能占據(jù)多行，多列的情況。
如：
讓一個(gè)單元格跨越多行。
| 內(nèi)容 |
讓一個(gè)單元格跨越多列。
| 內(nèi)容 |
跨行和跨列會(huì)導(dǎo)致一些單元格本來(lái)的位置被占據(jù)，
為了使布局整齊，我們需要將位置被占據(jù)了的單元格刪除。
表格總結(jié)：
單元格元素中可以嵌套任何元素。
最開(kāi)始的網(wǎng)頁(yè)，設(shè)計(jì)師們就是使用表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行排版和布局的。
現(xiàn)在表格網(wǎng)布局已經(jīng)成為歷史。
文本元素
文本標(biāo)簽的作用是讓網(wǎng)頁(yè)中的文字具備某種樣式。常見(jiàn)的文本標(biāo)簽有：
"strong" 和 "em" 標(biāo)簽表示的是語(yǔ)言的意義，
可以理解為更委婉地告訴瀏覽器該文本的重要性。語(yǔ)義化更加便于人理解。
而"i" 和"b" 標(biāo)簽直接告訴瀏覽器應(yīng)該如何顯示文本。
按照w3c官方規(guī)范，建議使用"strong"和"em"標(biāo)簽。
圖像元素
在頁(yè)面上插入圖片。圖片的格式可以是：jpg,gif,png,bmp.
將圖片的地址賦值給src屬性即可：
img是image的縮寫(xiě)。圖像元素是單標(biāo)簽元素，只有一個(gè)標(biāo)簽。
圖像元素的屬性：
| src |
單詞source的縮寫(xiě)，圖片的地址，即可以是本地地址，也可以是網(wǎng)絡(luò)地址。 |
| alt |
單詞altermate的縮寫(xiě)，代替。如果圖片加載失敗了，可以在網(wǎng)頁(yè)上看到它的值。 |
| border |
圖片的邊框?qū)挾?/td>
|
| width |
圖片的寬度，如果不設(shè)置，就是圖片本身的寬度。 |
| height |
圖片的高度。 |
| title |
當(dāng)鼠標(biāo)移到圖片上方的時(shí)候顯示的文字。 |
路徑
凡是需要從外部引入資源的元素都需要使用src這個(gè)屬性。
從HTML文檔和資源的位置關(guān)系來(lái)看，它們的位置關(guān)系可以分為相對(duì)路徑和絕對(duì)路徑。
1.相對(duì)路徑：
從自己出發(fā)找到別人的位置。
a.如果資源在HTML文檔的同一級(jí)目錄，直接引用文件名即可：
b.如果資源在HTML文檔的同級(jí)目錄下的文件夾中，加上文件夾名即可：
c.如果資源在HTML文檔的上級(jí)目錄中，就用”../”來(lái)表示上一級(jí)，”../../”表示上兩級(jí)，以此類(lèi)推：
站點(diǎn)網(wǎng)頁(yè)文件不管拷貝到哪里，文件和圖片的相對(duì)路徑關(guān)系都是不變的。
但是資源和網(wǎng)頁(yè)必須在同一個(gè)盤(pán)符下。也就是在D盤(pán)的html文件不應(yīng)該引用C盤(pán)的資源。
2.絕對(duì)路徑：
絕對(duì)路徑就直接寫(xiě)具體地址即可：
a.如果在網(wǎng)絡(luò)上：
b.如果在本地硬盤(pán)：
第二種方式?jīng)]有任何意義，開(kāi)發(fā)項(xiàng)目中不會(huì)用到的。因?yàn)閷?shí)際項(xiàng)目中的服務(wù)器是大多是linux系統(tǒng)，沒(méi)有windows系統(tǒng)這樣的C盤(pán)，D盤(pán)。
錨點(diǎn)元素a
生活中船舶的錨，是用于將船體穩(wěn)定在水中的某個(gè)地方。
與其類(lèi)似，HTML中也有一個(gè)元素，叫做錨元素a。它也被叫做超鏈接。
它作用是將用戶的視線拋到指定的目標(biāo)上去。
這個(gè)目標(biāo)可以是：
當(dāng)前頁(yè)面的某個(gè)位置，
其它的網(wǎng)頁(yè)或其它網(wǎng)頁(yè)的某個(gè)位置
郵件地址。
通過(guò)超鏈接，可以將因特網(wǎng)中的資源相互連接，組成一個(gè)個(gè)網(wǎng)站，進(jìn)而組成萬(wàn)維網(wǎng)。
這也是HTML超文本標(biāo)記語(yǔ)言的意義所在。
1.鏈接到當(dāng)前頁(yè)面的某個(gè)位置有兩種形式：
id，這種形式對(duì)頁(yè)面中的任意元素都有效。
百度官網(wǎng)
內(nèi)容
name，這種形式只對(duì)a元素有效。
百度官網(wǎng)
這是叫做張三的錨點(diǎn)元素
2.鏈接到其它網(wǎng)頁(yè)：
鏈接到其他網(wǎng)頁(yè)：
百度官網(wǎng)
點(diǎn)擊網(wǎng)頁(yè)上的文字“百度官網(wǎng)”即可跳轉(zhuǎn)到百度的首頁(yè)。
href 是 hypertext reference的縮寫(xiě)，意思是超文本地址。
它的值可以是具體的資源地址，比如圖片，mp3，mp4等。用于文件的下載。
鏈接到其它網(wǎng)頁(yè)的某個(gè)位置：
百度官網(wǎng)
3.鏈接郵件：
錨點(diǎn)元素還能啟動(dòng)當(dāng)前計(jì)算機(jī)安裝的郵件軟件以發(fā)送郵件。
目標(biāo)郵箱
除了href之外，錨元素有另外的屬性：
target：目標(biāo)，是否在新窗口中打開(kāi)。不寫(xiě)該屬性就默認(rèn)在當(dāng)前窗口打開(kāi)。
如果要在新窗口打開(kāi)文檔，就將其值設(shè)置為”_blank”；
title：鼠標(biāo)移到錨點(diǎn)標(biāo)簽上方時(shí)，顯示的文字。
錨點(diǎn)標(biāo)簽中除了可以放文字之外，還能放圖片。可以點(diǎn)擊圖片進(jìn)行鏈接。
表單元素
html表單是站點(diǎn)搜集用戶信息的重要手段。
表單主要用于讓用戶輸入信息，然后提交給服務(wù)器。
表單在網(wǎng)頁(yè)中無(wú)處不在。
表單是網(wǎng)頁(yè)上的一個(gè)特定區(qū)域。由form元素定義。
需要提交到服務(wù)器的信息都在form里面的的各種表單元素中填寫(xiě)。
action屬性：表示你要將數(shù)據(jù)提交到的目標(biāo)地址。
method屬性：表示你希望用什么方式將數(shù)據(jù)提交。有g(shù)et、post…等方式。
get有數(shù)據(jù)量限制，post無(wú)限制。
如果只是獲取數(shù)據(jù)，用get；涉及私密數(shù)據(jù)的提交，那么就用post。
用來(lái)采集信息的元素有很多，比較常見(jiàn)的有：
1.單選框：
多個(gè)選項(xiàng)中只能選擇一個(gè)。
示例代碼：
蘋(píng)果
桔子
芒果
注意：
1.要達(dá)到互斥效果，必須將這些選項(xiàng)的name值設(shè)置為相同的值。
2.用checked屬性可以讓某一項(xiàng)默認(rèn)選中。
2.復(fù)選框，
多個(gè)選項(xiàng)中可以選擇多個(gè)。
示例代碼：
蘋(píng)果
桔子
芒果
注意：
1. 這些選項(xiàng)的name值必須設(shè)置為相同的值。
2. 用checked可以讓某一項(xiàng)默認(rèn)選中。
3.lable標(biāo)簽
可以看到，我們寫(xiě)文本框，密碼框，單選框，多選框的時(shí)候，旁邊的提示文字都是和這些控件沒(méi)有任何關(guān)系的。如：
蘋(píng)果
點(diǎn)擊蘋(píng)果二字，是不會(huì)選中多選框的。
HTML中的lable標(biāo)簽用來(lái)將文本和表單控件綁定在一起。用法如下：
id可以唯一地標(biāo)識(shí)某個(gè)元素，for將lable中的文本與表單控件綁定起來(lái)。
這時(shí)，我們點(diǎn)擊文字，就相當(dāng)于點(diǎn)擊了表單控件。
下拉列表
下拉列表，鼠標(biāo)點(diǎn)擊，可以出現(xiàn)一個(gè)列表，用于選擇信息。
示例代碼：
多行文本輸入框
多行文本框，可以輸入多行文字。
cols表示textarea的寬度（列），
rows表示textarea的高度（行）。
標(biāo)簽對(duì)中間不寫(xiě)內(nèi)容，如果寫(xiě)了，會(huì)被當(dāng)作默認(rèn)值。
表單中的信息填寫(xiě)好了之后，我們需要用戶點(diǎn)擊按鈕來(lái)將其提交到action屬性指定的地址。HTML提供了一種提交按鈕來(lái)完成這個(gè)提交操作。
如果信息填寫(xiě)有錯(cuò)，想要全部重新填寫(xiě)。我們不用一個(gè)一個(gè)地刪除。
HTML提供了另外一種重置按鈕來(lái)清除信息。
這兩種按鈕有默認(rèn)的文字，“提交”和“重置”，
如果想在按鈕上顯示其他文字，就設(shè)置一個(gè)value值即可。
“提交”和“重置”按鈕是兩種特殊的按鈕，自身已經(jīng)具備了特定的功能。雖然功能不同，但是長(zhǎng)相是相同的。
實(shí)際開(kāi)發(fā)中，我們更多的是賦予某個(gè)按鈕其他功能，這就需要用到普通按鈕。普通的按鈕寫(xiě)法如下：
方式一：
方式二：
普通按鈕的行為一般使用JavaScript腳本設(shè)置。
字符實(shí)體
在 HTML 中，很多特殊字符需要用字符實(shí)體來(lái)實(shí)現(xiàn)。
比如‘>’ 對(duì)應(yīng)的字符實(shí)體是 “>” 。(greater than的縮寫(xiě))
更多的字符實(shí)體見(jiàn)：http://www.w3cschool.cn/htmlt...
HTML部分完。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51396.html
-
Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
-
Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
-
Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
 asoren
評(píng)論0
收藏0
-
Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
-
摘要：基礎(chǔ)基礎(chǔ)是一種標(biāo)記語(yǔ)言，不是編程語(yǔ)言，需要明確這點(diǎn)。元素標(biāo)簽內(nèi)容基礎(chǔ)基礎(chǔ)負(fù)責(zé)文本樣式的呈現(xiàn)，既然將和分離開(kāi)，各自只負(fù)責(zé)各自的職責(zé)，那么肯定需要某種方式將兩者連接在一起。
本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布
聲明
本系列文章內(nèi)容全部梳理自以下四個(gè)來(lái)源：
《HTML5權(quán)威指南》
《JavaScript權(quán)威指南》
MDN web docs
Github:smyh...
男|高級(jí)講師
-
閱讀 1336·2021-11-25 09:43
-
閱讀 1895·2021-11-12 10:36
-
閱讀 5967·2021-09-22 15:05
-
閱讀 3480·2019-08-30 15:55
-
閱讀 2005·2019-08-26 14:06
-
閱讀 3641·2019-08-26 12:17
-
閱讀 492·2019-08-23 17:55
-
閱讀 2449·2019-08-23 16:23
<
| |
