前端基礎(chǔ)入門(mén)一（HTML）-創(chuàng)新互聯(lián)

學(xué)習(xí)大綱

了解常用瀏覽器
掌握WEB標(biāo)準(zhǔn)
理解標(biāo)簽語(yǔ)義化
掌握常用的排版標(biāo)簽
掌握常用的文本格式化圖像鏈接等標(biāo)簽
掌握三種列表標(biāo)簽
掌握表格標(biāo)簽
掌握表格標(biāo)簽
掌握表單標(biāo)簽
成都創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)的成都網(wǎng)站建設(shè)公司，我們專(zhuān)注成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、企業(yè)網(wǎng)站建設(shè)，友情鏈接，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
- *

HTML

能夠?qū)懗龌镜捻?yè)面（里面包含圖片、各種標(biāo)簽和鏈接）

開(kāi)發(fā)工具

我們主要用的開(kāi)發(fā)工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網(wǎng)頁(yè)顯示、運(yùn)行的平臺(tái)，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時(shí)稱(chēng)為五大瀏覽器。

瀏覽器內(nèi)核（理解）

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和?JS 引擎。
渲染引擎?：它負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。
JS 引擎?則是解析 Javascript 語(yǔ)言，執(zhí)行 javascript語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

最開(kāi)始渲染引擎和 JS 引擎并沒(méi)有區(qū)分的很明確，后來(lái) JS 引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。有一個(gè)網(wǎng)頁(yè)標(biāo)準(zhǔn)計(jì)劃小組制作了一個(gè) ACID 來(lái)測(cè)試引擎的兼容性和性能。內(nèi)核的種類(lèi)很多，如加上沒(méi)什么人使用的非商業(yè)的免費(fèi)內(nèi)核，可能會(huì)有10多種，但是常見(jiàn)的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。

了解一點(diǎn)：移動(dòng)端的瀏覽器內(nèi)核主要說(shuō)的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國(guó)產(chǎn)瀏覽器宣稱(chēng)的自己的內(nèi)核，基本上也是屬于webkit二次開(kāi)發(fā)。

iOS以及WP7平臺(tái)上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的>自己是個(gè)做了幾年開(kāi)發(fā)的老碼農(nóng)，希望本文對(duì)你有用！這里推薦一下我的前端學(xué)習(xí)交流圈：767273102 ，里面都是學(xué)習(xí)前端的，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴。2019最新技術(shù)，與企業(yè)需求同步。好友都在里面學(xué)習(xí)交流，每天都會(huì)有大牛定時(shí)講解前端技術(shù)!

Web標(biāo)準(zhǔn)

web標(biāo)準(zhǔn)的好處
1、讓W(xué)eb的發(fā)展前景更廣闊

2、內(nèi)容能被更廣泛的設(shè)備訪問(wèn)

3、更容易被搜尋引擎搜索

4、降低網(wǎng)站流量費(fèi)用

5、使網(wǎng)站更易于維護(hù)

6、提高頁(yè)面瀏覽速度

web標(biāo)準(zhǔn)的結(jié)構(gòu)

結(jié)構(gòu)標(biāo)準(zhǔn)：結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi)，咱們主要學(xué)的是HTML。最重要
表現(xiàn)標(biāo)準(zhǔn)：表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標(biāo)準(zhǔn)：行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)，咱們主要學(xué)的是 Javascript

HTML初識(shí)

HTML（英文Hyper Text Markup Language的縮寫(xiě)）中文譯為“超文本標(biāo)簽語(yǔ)言”。是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。

所謂超文本，因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫(huà)、多媒體等內(nèi)容，不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。

<h2>?我是一個(gè)大標(biāo)題?</h2>

注意：體會(huì) 文本標(biāo)簽語(yǔ)言幾個(gè)詞語(yǔ)

HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)

總結(jié)： HTML 作用就是用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)，把網(wǎng)頁(yè)內(nèi)容在瀏覽器中展示出來(lái)。

HTML骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

骨架結(jié)構(gòu)解析
1 HTML標(biāo)簽：
作用所有HTML中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。大的標(biāo)簽根標(biāo)簽
2 head標(biāo)簽：文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。

注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title

3.title標(biāo)簽：文檔的標(biāo)題
作用：讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題。
4.body標(biāo)簽：文檔的主體以后我們的頁(yè)面內(nèi)容基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML標(biāo)簽分類(lèi)

在HTML頁(yè)面中，帶有“< >”符號(hào)的元素被稱(chēng)為HTML標(biāo)簽，如上面提到的 HTML、head、body都是HTML骨架結(jié)構(gòu)標(biāo)簽。所謂標(biāo)簽就是放在“< >” 標(biāo)簽符中表示某個(gè)功能的編碼命令，也稱(chēng)為HTML標(biāo)簽或 HTML元素

1.雙標(biāo)簽

<標(biāo)簽名>?內(nèi)容?</標(biāo)簽名>

該語(yǔ)法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開(kāi)始，一般稱(chēng)為“開(kāi)始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱(chēng)為“結(jié)束標(biāo)簽（end tag）”。和開(kāi)始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。

比如?<body>我是文字?</body>

2.單標(biāo)簽

<標(biāo)簽名?/>

單標(biāo)簽也稱(chēng)空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。

比如?<br?/>

HTML標(biāo)簽關(guān)系

標(biāo)簽的相互關(guān)系就分為兩種：

1.嵌套關(guān)系

<head>?<title>?</title>?</head>

2.并列關(guān)系

<head></head>
<body></body>

HTML常用標(biāo)簽

首先 HTML和CSS是兩種完全不同的語(yǔ)言，我們學(xué)的是結(jié)構(gòu)，就只寫(xiě)HTML標(biāo)簽，認(rèn)識(shí)標(biāo)簽就可以了。不會(huì)再給結(jié)構(gòu)標(biāo)簽指定樣式了。

HTML標(biāo)簽有很多，這里我們學(xué)習(xí)最為常用的，后面有些較少用的，我們可以查下手冊(cè)就可以了。

排版標(biāo)簽

標(biāo)題標(biāo)簽（熟記）

單詞縮寫(xiě)： head 頭部. 標(biāo)題 title 文檔標(biāo)題

為了使網(wǎng)頁(yè)更具有語(yǔ)義化，我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題，即
<h2>、<h3>、<h4>、<h5>、<h6>和<h7>
其基本語(yǔ)法格式如下：

<hn>?標(biāo)題文本?</hn>

段落標(biāo)簽（熟記）

<p>?文本內(nèi)容?</p>

水平線標(biāo)簽（認(rèn)識(shí)）

<hr?/>是單標(biāo)簽

換行標(biāo)簽（熟記）

<br?/>

div span標(biāo)簽(重點(diǎn))

div span 是沒(méi)有語(yǔ)義的是我們網(wǎng)頁(yè)布局主要的2個(gè)盒子 css+div

div 就是 division 的縮寫(xiě) 分割，分區(qū)的意思其實(shí)有很多div 來(lái)組合網(wǎng)頁(yè)。

span, 跨度，跨距；范圍

語(yǔ)法格式：

<div>?這是頭部?</div>?<span>今日價(jià)格</span>

文本格式化標(biāo)簽(熟記)

在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。
前端基礎(chǔ)入門(mén)一（HTML）

b i s u 只有使用沒(méi)有強(qiáng)調(diào)的意思 strong em del ××× 語(yǔ)義更強(qiáng)烈

標(biāo)簽屬性

使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。其基本語(yǔ)法格式如下：

<標(biāo)簽名?屬性1="屬性值1"?屬性2="屬性值2"?…>?內(nèi)容?</標(biāo)簽名>

在上面的語(yǔ)法中，

1.標(biāo)簽可以擁有多個(gè)屬性，必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面。

2.屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開(kāi)。

3.任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性則取默認(rèn)值。

采取鍵值對(duì) 的格式 key="value" 的格式

比如:

<hr?width="400"?/>

屬性是寬度

值是 400

圖像標(biāo)簽img (重點(diǎn))

單詞縮寫(xiě)： image 圖像

HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽，要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽，接下來(lái)將詳細(xì)介紹圖像標(biāo)簽<img />以及和他相關(guān)的屬性。其基本語(yǔ)法格式如下：

該語(yǔ)法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性。

<img?src="圖像URL"?/>

前端基礎(chǔ)入門(mén)一（HTML）

鏈接標(biāo)簽(重點(diǎn))

單詞縮寫(xiě)： anchor 的縮寫(xiě) [???k?(r)] ?；窘忉?錨, 鐵錨的

在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可，其基本語(yǔ)法格式如下：

<a?href="跳轉(zhuǎn)目標(biāo)"?target="目標(biāo)窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。 Hypertext Reference的縮寫(xiě)。意思是超文本引用

target：用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有self和blank兩種，其中self為默認(rèn)值，blank為在新窗口中打開(kāi)方式。

注意：

1.外部鏈接需要添加?http://?www.baidu.com

2.內(nèi)部鏈接直接鏈接內(nèi)部頁(yè)面名稱(chēng)即可比如 < a href="index.html"> 首頁(yè)

3.如果當(dāng)時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。

4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁(yè)中各種網(wǎng)頁(yè)元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點(diǎn)定位（難點(diǎn)）

通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。

創(chuàng)建錨點(diǎn)鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點(diǎn)擊的）
  <a href="#two">   

2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。
  <h4 id="two">第2集</h4>

base 標(biāo)簽基本的

base 可以設(shè)置整體鏈接的打開(kāi)狀態(tài)

base 寫(xiě)到 <head> </head> 之間

把所有的連接都默認(rèn)添加 target="_blank"

特殊字符標(biāo)簽（理解）

前端基礎(chǔ)入門(mén)一（HTML）

注釋標(biāo)簽

在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋文字，就需要使用注釋標(biāo)簽。其基本語(yǔ)法格式如下：

<!-- 注釋語(yǔ)句 -->?ctrl + / 或者 ctrl +shift + /

注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。

路徑(重點(diǎn)、難點(diǎn))

前端基礎(chǔ)入門(mén)一（HTML）

實(shí)際工作中，通常新建一個(gè)文件夾專(zhuān)門(mén)用于存放圖像文件，這時(shí)再插入圖像，就需要采用“路徑”的方式來(lái)指定圖像文件的位置。

路徑可以分為：相對(duì)路徑和絕對(duì)路徑

相對(duì)路徑

以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱(chēng)之為相對(duì)路徑。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱(chēng)即可，如img src="logo.gif" /。
圖像文件位于HTML文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開(kāi)，如img src="img/img01/logo.gif" /。
圖像文件位于HTML文件的上一級(jí)文件夾：在文件名之前加入“../” ，如果是上兩級(jí)，則需要使用 “../ ../”，以此類(lèi)推，如img src="../logo.gif" /。

絕對(duì)路徑

絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱(chēng)為絕對(duì)，意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/l...”。

思路貫穿線

前端基礎(chǔ)入門(mén)一（HTML）

列表標(biāo)簽

無(wú)序列表 ul （重點(diǎn)）

無(wú)序列表的各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，是并列的。其基本語(yǔ)法格式如下：

<ul>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ......
</ul>

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。
無(wú)序列表會(huì)帶有自己樣式屬性，放下那個(gè)樣式，一會(huì)讓CSS來(lái)！

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語(yǔ)法格式如下：

<ol>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ......
</ol>

所有特性基本與ul 一致。

但是實(shí)際工作中，較少用 ol img src="media/1.jpg" />

自定義列表（理解）

定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。其基本語(yǔ)法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

表格 table(會(huì)使用)

創(chuàng)建表格

在HTML網(wǎng)頁(yè)中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語(yǔ)法格式如下：

<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ...
  </tr>
  ...
</table>

在上面的語(yǔ)法中包含三對(duì)HTML標(biāo)簽，分別為 table</table、tr</tr、td</td，他們是創(chuàng)建表格的基本標(biāo)簽，缺一不可，下面對(duì)他們進(jìn)行具體地解釋
1.table用于定義一個(gè)表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標(biāo)簽中，在 table中包含幾對(duì) tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中，一對(duì) <tr> </tr>中包含幾對(duì)<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。

注意：

1\. <tr></tr>中只能嵌套<td></td>
2\. <td></td>標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素

表格屬性

前端基礎(chǔ)入門(mén)一（HTML）

表頭標(biāo)簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)簽th</th替代相應(yīng)的單元格標(biāo)簽td</td即可。
前端基礎(chǔ)入門(mén)一（HTML）

表格結(jié)構(gòu)（了解）

在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁(yè)腳（頁(yè)腳因?yàn)橛屑嫒菪詥?wèn)題，我們不在贅述），具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標(biāo)簽中，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。

表格標(biāo)題

表格的標(biāo)題： caption
定義和用法

caption 元素定義表格標(biāo)題。

<table>
   <caption>我是表格標(biāo)題</caption>
</table>

caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。

合并單元格(難點(diǎn))

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

 將多個(gè)內(nèi)容合并的時(shí)候，就會(huì)有多余的東西，把它刪除。    例如 把 3個(gè) td 合并成一個(gè)， 那就多余了2個(gè)，需要?jiǎng)h除。

 公式：  刪除的個(gè)數(shù)  =  合并的個(gè)數(shù)  - 1

合并的順序先上先左

總結(jié)表格

表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
表格中由行中的單元格組成。
表格中沒(méi)有列元素，列的個(gè)數(shù)取決于行的單元格個(gè)數(shù)。
表格不要糾結(jié)于外觀，那是CSS 的作用。

表格的學(xué)習(xí)要求：能手寫(xiě)表格結(jié)構(gòu)，并且能合并單元格。

表單標(biāo)簽(掌握)

表單控件：

包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

提示信息：

一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作。

表單域：

  他相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

input 控件(重點(diǎn))

在上面的語(yǔ)法中，input /標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類(lèi)型。除了type屬性之外，input /標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。
前端基礎(chǔ)入門(mén)一（HTML）

label標(biāo)簽(理解)

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。

作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到textarea/textarea標(biāo)簽。通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語(yǔ)法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
  文本內(nèi)容
</textarea>

前端基礎(chǔ)入門(mén)一（HTML）

下拉菜單

使用select控件定義下拉菜單的基本語(yǔ)法格式如下

<select>
  <option>選項(xiàng)1</option>
  <option>選項(xiàng)2</option>
  <option>選項(xiàng)3</option>
  ...
</select>

注意：

select</select中至少應(yīng)包含一對(duì)option></option。
在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

表單域

在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下：

<form action="url地址" method="提交方式" name="表單名稱(chēng)">
  各種表單控件
</form>

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
method
用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
name
用于指定表單的名稱(chēng)，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。

注意：每個(gè)表單都應(yīng)該有自己表單域。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱(chēng)：前端基礎(chǔ)入門(mén)一（HTML）-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://aaarwkj.com/article44/iopee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站導(dǎo)航、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

前端基礎(chǔ)入門(mén)一（HTML）-創(chuàng)新互聯(lián)

學(xué)習(xí)大綱

HTML

開(kāi)發(fā)工具

瀏覽器顯示

瀏覽器內(nèi)核（理解）

Web標(biāo)準(zhǔn)

web標(biāo)準(zhǔn)的結(jié)構(gòu)

HTML初識(shí)

HTML骨架格式

HTML標(biāo)簽分類(lèi)

HTML標(biāo)簽關(guān)系

HTML常用標(biāo)簽

標(biāo)題標(biāo)簽（熟記）

段落標(biāo)簽（熟記）

水平線標(biāo)簽（認(rèn)識(shí)）

換行標(biāo)簽（熟記）

div span標(biāo)簽(重點(diǎn))

文本格式化標(biāo)簽(熟記)

標(biāo)簽屬性

圖像標(biāo)簽img (重點(diǎn))

鏈接標(biāo)簽(重點(diǎn))

錨點(diǎn)定位 （難點(diǎn)）

base 標(biāo)簽 基本的

特殊字符標(biāo)簽 （理解）

注釋標(biāo)簽

路徑(重點(diǎn)、難點(diǎn))

相對(duì)路徑

絕對(duì)路徑

思路貫穿線

列表標(biāo)簽

無(wú)序列表 ul （重點(diǎn)）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會(huì)使用)

創(chuàng)建表格

表格屬性

表頭標(biāo)簽

表格結(jié)構(gòu)（了解）

表格標(biāo)題

合并單元格(難點(diǎn))

總結(jié)表格

表單標(biāo)簽(掌握)

input 控件(重點(diǎn))

label標(biāo)簽(理解)

textarea控件(文本域)

下拉菜單

表單域

錨點(diǎn)定位（難點(diǎn)）

base 標(biāo)簽基本的

特殊字符標(biāo)簽（理解）