一、認識WEB

1. 1、認識網頁

網頁主要由文字、影像和超鏈接等元素構成，當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等，

web

1.2、瀏覽器

瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，我們平時稱為五大瀏覽器，

可能你最熟悉的是 IE瀏覽器，但是他的相應速度實在是太慢了，

liulan

我們可以通過百度的流量研究院來查看目前瀏覽器的市場占比,2008年，大名鼎鼎的互聯網巨頭Google公司發布了它的首款瀏覽器Chrome瀏覽器，跟王思聰一樣，沒辦法，生下來人家就是富二代官二代啊，后臺太強，而且確實先天能力得天獨厚，出自谷歌，唯我不敗；一統江湖，千秋萬代，

1.3、常見瀏覽器內核

瀏覽器內核，英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現在流行稱為瀏覽器內核，他負責讀取網頁內容，整理訊息，計算網頁的顯示方式并顯示頁面，目前瀏覽器多種多樣，但是現在主要流行的就是下面幾個：

瀏覽器	內核	備注
IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	可惜這幾年已經沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome，
Safari	webkit	現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了，
chrome	Chromium/Blink	在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中，Blink 其實是 WebKit 的分支，大部分國產瀏覽器最新版都采用Blink內核，二次開發
Opera	blink	現在跟隨chrome用blink內核，

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核，他有兩大陣營：

Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發，
iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的，

1.4、Web標準

Web標準不是某一個標準，而是由W3C組織和其他標準化組織制定的一系列標準的集合，W3C 萬維網聯盟是國際最著名的標準化組織，1994年成立后，至今已發布近百項相關萬維網的標準，對萬維網發展做出了杰出的貢獻，W3C就類似于現實世界中的聯合國，

1.4.1、為什么要遵循WEB標準

通過以上瀏覽器不同內核不同，我們知道他們顯示頁面或者排版就有些許差異，所以我們需要制定一個統一的標注來展示統一的內容

1.4.2、Web 標準的好處

遵循web標準可以讓不同我們寫的頁面更標準更統一外，還有許多優點：

讓Web的發展前景更廣闊，
內容能被更廣泛的設備訪問，
更容易被搜尋引擎搜索，
降低網站流量費用，
使網站更易于維護，
提高頁面瀏覽速度，

1.4.3、Web 標準構成

web標注主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面，通俗來說就是HTML、CSS、JS，

標準	說明	備注
結構	結構用于對網頁元素進行整理和分類，咱們主要學的是HTML，
表現	表現用于設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS
行為	行為是指網頁模型的定義及互動的撰寫，咱們主要學的是 Javascript

1.4.4、總結

web標準有三層結構，分別是結構（html）、表現（css）和行為（javascript），
結構類似人的身體，表現類似人的著裝，行為類似人的行為動作，
理想狀態下，他們三層都是獨立的，放到不同的檔案里面，

1.5、html5的發展之路

html5

1.6、XHTML

XHTML可擴展超文本標記語言（英語：eXtensible HyperText Markup Language，XHTML），是一種標記語言，表現方式與超文本標記語言（HTML）類似，不過語法上更加嚴格，從繼承關系上講，HTML是一種基于標準通用標記語言（SGML）的應用，是一種非常靈活的置標語言，而XHTML則基于可擴展標記語言（XML），XML是SGML的一個子集，XHTML 1.0在2000年1月26日成為W3C的推薦標準，

二、HTML骨架

2.1、HTML定義

HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言，HTML 不是一種編程語言，而是一種標記語言 (markup language)，標記語言是一套標記標簽 (markup tag)，網頁是由網頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器決議，就可以顯示給用戶了，

所謂超文本，有2層含義：

因為它可以加入圖片、聲音、影片、多媒體等內容（**超越文本限制 **），
不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連接（**超級鏈接文本 **），

2.2、HTML骨架標簽

日常生活的書信，我們要遵循共同的約定，不然會看起來很沒有格式，一點都不易于閱讀，

mess

HTML 有自己的語言語法骨架格式，他是我們入門學習HTML的第一步，

<html>   
    <head>   
        <title></title>
    </head>
    <body>
    </body>
</html>

標簽名	定義	說明
<html></html>	HTML標簽	頁面中最大的標簽，我們成為根標簽
<head></head>	檔案的頭部	注意在head標簽中我們必須要設定的標簽是title
<titile></title>	檔案的標題	讓頁面擁有一個屬于自己的網頁標題
<body></body>	檔案的主體	元素包含檔案的所有內容，頁面內容基本都是放到body里面的

01html骨架

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫，

<head>   
        <title>我的第一個頁面</title>
 </head>

2.3、標簽

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的

<html>、<head>、<body>都是HTML骨架結構標簽，

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫，

2.4、元素分類

2.4.1、常規元素（雙標簽）

<標簽名> 內容 </標簽名>   
<!--示范-->
<body>  我是文字  </body>

該語法中<標簽名>表示該標簽的作用開始，一般稱為開始標簽（start tag），</標簽名>表示該標簽的作用結束，一般稱為結束標簽（end tag），
和開始標簽相比，結束標簽只是在前面加了一個關閉符/，
我們以后接觸的基本都是雙標簽，

2.4.2、空元素（單標簽）

<標簽名 />  
<!--示范-->
<br />

空元素用單標簽來表示，簡單點說，就是里面不需要包含內容，只有一個開始標簽不需要關閉，這種單身狗標簽非常少，一共沒多少，我們多記憶就好，

2.5、HTML標簽關系

主要針對于雙標簽 的相互關系分為兩種：

嵌套關系
并列關系

2.5.1、嵌套關系

類似于父子關系，

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

2.5.2、并列關系

類似于兄弟關系，

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

2.5.3、總結

如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格），
如果是并列關系，最好上下對齊，

2.6、檔案型別

<!--用法-->
<!DOCTYPE html>

他的作用是宣告位于檔案中的最前面的位置，處于標簽之前，此標簽可告知瀏覽器檔案使用哪種 HTML 或 XHTML 規范，

2.7、頁面語言

<!--指定html語言種類-->
<html lang="en">  
<html lang="zh-CN">  <!--指定該html標簽 內容 所用的語言為中文，考慮瀏覽器和作業系統的兼容性，目前仍然使用 zh-CN 屬性值-->

最常見的有兩個值：

en定義語言為英語，
zh-CN定義語言為中文，

2.8、字符集

字符集(Character set)是多個字符的集合，計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存盤各種文字，

<!--這句話是讓 html 檔案是以 UTF-8 編碼保存的， 瀏覽器根據編碼去解碼對應的html內容，-->
<meta charset="UTF-8" />

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312，

gb2312 簡單中文包括6763個漢字 GUO BIAO
BIG5 繁體中文港澳臺等用
GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則基本包含全世界所有國家需要用到的字符
這句代碼非常關鍵，是必須要寫的代碼，否則可能引起亂碼的情況，

三、HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了，

3.1、排版標簽

排版標簽主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽，

3.1.1、標題標簽

為了使網頁更具有語意化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題（h1~h6）

標題標簽語意： 作為標題使用，并且依據重要性遞減

<h1>   標題文本   </h1>
<h2>   標題文本   </h2>
<h3>   標題文本   </h3>
<h4>   標題文本   </h4>
<h5>   標題文本   </h5>
<h6>   標題文本   </h6>

3.1.2、段落標簽

段落標簽可以把 HTML 檔案分割為若干段落，在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，

<p>  文本內容  </p>

3.1.3、水平線標簽

在網頁中常常看到一些水平線將段落與段落之間隔開，使得檔案結構清晰，層次分明，這些水平線可以通過插入圖片實作，也可以簡單地通過標簽來完成，

<hr />就是創建橫跨網頁水平線的標簽，他可以在網頁中顯示默認樣式的水平線，

<!--單標簽-->
<hr />

3.1.4、換行標簽

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽，

<br />

3.1.5、div和span

div、span是沒有語意的，他們是我們網頁布局主要的2個盒子，用來裝我們網頁元素的，只不過他們有區別，

div標簽用來布局的，但是現在一行只能放一個div，
span標簽用來布局的，一行上可以放好多個span，

3.1.6、排版標簽總結

標簽名	定義	說明
<hx></hx>	標題標簽	作為標題使用，并且依據重要性遞減
<p></p>	段落標簽	可以把 HTML 檔案分割為若干段落
<hr />	水平線標簽	沒啥可說的，就是一條線
<br />	換行標簽
<div></div>	div標簽	用來布局的，但是現在一行只能放一個div
<span></span>	span標簽	用來布局的，一行上可以放好多個span

3.2、文本格式化標簽

在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示，

標簽	顯示效果
`<b></b>` 和 `<strong></strong>`	文字以加粗的形式顯示
`<i></i>` 和 `<em></em>`	文字以斜體的形式顯示
`<s></s>` 和 `<del></del>`	文字以~~加洗掉線~~的形式顯示
`<u></u>` 和 `<ins></ins>`	文字以`<u>`加下劃線`</u>`的形式顯示

3.3、標簽屬性

所謂屬性就是外在特性 比如手機的顏色手機的尺寸、顏色等特征，比如我們描述手機特性是：

手機的顏色是黑色，
手機的尺寸是 8寸，
水平線的長度是 200，
圖片的寬度是 300，

使用HTML制作網頁時，如果想讓HTML標簽提供更多的資訊，可以使用HTML標簽的屬性加以設定，其基本語法格式如下：

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
<手機 顏色="紅色" 大小="5寸">  </手機>

3.4、影像標簽img

要想在網頁中顯示影像就需要使用影像標簽，接下來將詳細介紹影像標簽<img />以及和他相關的屬性，（它是一個單身狗），他的語法格式如下：

<!-- src屬性用于指定影像檔案的路徑和檔案名，他是img標簽的必需屬性，-->
<img src="影像URL" />

他還有幾個常見的其他屬性，

屬性	屬性值	描述
src	圖片的url地址	圖形的路徑
alt	文本	影像不能顯示時的替換文本
title	文本	滑鼠懸停時顯示的內容
width	像素	設定影像的寬度
height	像素	設定影像的高度
border	數字	設定影像邊框的寬度

注意：

標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面，
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開，
任何標簽的屬性都有默認值，省略該屬性則取默認值，
采取鍵值對的格式 key=“value” 的格式，

	正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     帶有邊框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
	有提示文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" /><br />
	有替換文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />

2.5、鏈接標簽

在HTML中創建超鏈接非常簡單，只需用標簽把文字包括起來就好，他的語法格式是：

<a href="跳轉目標" target="目標視窗的彈出方式">文本或影像</a>

屬性	作用
href	用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能
target	用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新視窗中打開方式，

注意：

外部鏈接：需要添加 http:// www.baidu.com
內部鏈接：直接鏈接內部頁面名稱即可比如 < a href=“index.html”> 首頁
如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接，
不僅可以創建文本超鏈接，在網頁中各種網頁元素，如影像、表格、音頻、視頻等都可以添加超鏈接，

2.6、注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽，如果需要在HTML檔案中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽，

注釋內容不會顯示在瀏覽器視窗中，但是作為HTML檔案內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到，注釋是給人看的，目的是為了更好的解釋這部分代碼是干啥的，程式是不執行這個代碼的他的語法格式如下：

    <!-- 注釋陳述句 -->     
    快捷鍵是：ctrl + /       
	或者 ctrl +shift + /

2.7、路徑

實際作業中，我們的檔案不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個檔案夾來管理他們，這里有目錄檔案夾和根目錄兩個概念：

目錄檔案夾就是普通檔案夾，里面只不過存放了我們做頁面所需要的相關素材，比如 html檔案，圖片等等，
打開目錄檔案夾的第一層就是根目錄，

頁面中的圖片會非常多，通常我們再新建一個檔案夾專門用于存放影像檔案（images），這時再插入影像，就需要采用“路徑”的方式來指定影像檔案的位置，路徑可以分為：

相對路徑，
絕對路徑，

2.7.1、相對路徑

以參考檔案之網頁所在位置為參考基礎，而建立出的目錄路徑，因此，當保存于不同目錄的網頁參考同一個檔案時，所使用的路徑將不相同，故稱之為相對路徑，

路徑分類	符號	說明
同一級路徑		只需輸入影像檔案的名稱即可，
下一級路徑	“/”
上一級路徑	“…/”	在檔案名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，

簡單來說，相對路徑，是從這個檔案出發，去尋找我們的目標檔案的，

2.7.2、絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑，之所以稱為絕對，意指當所有網頁參考同一個檔案時，所使用的路徑都是一樣的，她是帶有磁盤路徑或者是完整地網路地址，

2.8、特殊字符

一些特殊的符號，我們再html 里面很難或者不方便直接使用，我們此時可以使用下面的替代代碼，

zifu

雖然有很多，但是我們平時用的比較較少，大家重點記住空格、大于號、小于號，基本上就可以了，剩下的回來查閱，

總結：

是以運算子&開頭,以分號運算子;結尾，
他們不是標簽，而是符號，
HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽決議，若要正確顯示，在 HTML 源代碼中使用字符物體，

四、表格

ttt

4.1、表格的作用

表格的現在還是較為常用的一種標簽，但不是用來布局，**常見顯示、展示表格式資料，**因為它可以讓資料顯示的非常的規整，可讀性非常好，

一個清爽簡約的表格能夠把繁雜的資料表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便，拿最近火爆的基金來說（需要這個腳本的可以私聊我）：

4.2、創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽，

<table>
  <tr>
    <td>單元格內的文字</td>
    ...
  </tr>
  ...
</table>

在上面的語法中包含基本的三對HTML標簽，分別為 table、tr、td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體地解釋

table用于定義一個表格標簽，
tr標簽用于定義表格中的行，必須嵌套在 table標簽中，
td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，
字母 td 指表格資料（table data），即資料單元格的內容，現在我們明白，表格最合適的地方就是用來存盤資料的，

07table基本結構

4.3、表格屬性

表格有部分屬性我們不常用，這里重點記住 cellspacing 、 cellpadding，

07table表格屬性

4.4、案例一

我們說了這么多，光說不練是不行滴，下面我們來做一個簡單的案例來鞏固一下，

表格效果01

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性別</th> <th>年齡</th>  </tr>
   <tr>  <td>劉德華</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>張學友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>劉曉慶</td> <td>女</td> <td>63</td>  </tr>
</table>

4.5、表頭標簽

一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中，

如果我們想定義表頭，只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可，th也是一個單元格只不過和普通的td單元格不一樣，它會讓自己里面的文字居中且加粗，

tht

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性別</th>
			<th>電話</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
	</table>

4.6、表格標題

如果我們想畫一個帶標題的表格怎么辦，也很簡單，只需使用標簽進行定義即可，

<table>
   <caption>我是表格標題</caption>
</table>

注意：

caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上，
caption 標簽必須緊隨 table 標簽之后，
這個標簽只存在表格里面才有意義，

4.7、合并單元格

4.7.1、概述

合并單元格是我們比較常用的一個操作，但是不會合并的很復雜，我們一般有兩種方式進行合并：

跨行合并：rowspan=“合并單元格的個數” ，
跨列合并：colspan=“合并單元格的個數”，

08table合并單元格

4.7.2、合并單元格三步曲

先確定是跨行還是跨列合并，
根據先上后下先左后右的原則找到目標單元格然后寫上合并方式還有要合并的單元格數量比如： <td colspan=“3”> </td>
洗掉多余的單元格單元格

4.8、表格劃分結構

對于比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注，而這三部分分別用：thead、tbody、tfoot來標注，這樣更好的分清表格結構，

thead

4.9、總結

標簽名	定義	說明
<table></table>	表格標簽	就是一個四方的盒子
<tr></tr>	表格行標簽	行標簽要再table標簽內部才有意義
<td></td>	單元格標簽	單元格標簽是個容器級元素，可以放任何東西
<th></th>	表頭單元格標簽	它還是一個單元格，但是里面的文字會居中且加粗
<caption></caption>	表格標題標簽	表格的標題，跟著表格一起走，和表格居中對齊
clospan 和 rowspan	合并屬性	用來合并單元格的

五、串列

串列最大的特點就是整齊、整潔、有序，跟表格類似，但是他可組合自由度會更高，

5.1、無序串列 ul

無序串列的各個串列項之間沒有順序級別之分，是并列的，其基本語法格式如下：

<ul>
  <li>串列項1</li>
  <li>串列項2</li>
  <li>串列項3</li>
  ......
</ul>

例如新聞是沒有順序的，不用排隊，先到先得，后發布先顯示，

總結：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的，
<li>與</li>之間相當于一個容器，可以容納所有元素，
無序串列會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

5.2、有序串列 ol

gold

有序串列即為有排列順序的串列，其各個串列項按照一定的順序排列定義，有序串列的基本語法格式如下：

<ol>
  <li>串列項1</li>
  <li>串列項2</li>
  <li>串列項3</li>
  ......
</ol>

所有特性基本與ul 一致，但是實際中比無序串列用的少很多，

5.3、自定義串列

定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，其基本語法如下：

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

定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，其基本語法如下：

5.4、串列總結

標簽名	定義	說明
	無序標簽	里面只能包含li 沒有順序，我們以后布局中最常用的串列
	有序標簽	里面只能包含li 有順序，使用情況較少
	自定義串列	里面有2個兄弟， dt 和 dd

六、表單

6.1、表單概述

現實中的表單，類似我們去銀行辦理信用卡填寫的單子，如下圖

car

**作用： **

表單目的是為了收集用戶資訊，在我們網頁中，我們也需要跟用戶進行互動，收集用戶資料，此時也需要表單，在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成，

表單控制元件：

? 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等，

提示資訊：

? 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作，

表單域：

? 他相當于一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到服務器的方法，如果不定義表單域，表單中的資料就無法傳送到后臺服務器，

6.2、input 控制元件

<input type="屬性值" value="你好">

input

6.2.1、type 屬性

這個屬性通過改變值，可以決定了你屬于那種input表單，
比如 type = ‘text’ 就表示文本框可以做用戶名，昵稱等，
比如 type = ‘password’ 就是表示密碼框用戶輸入的內容是不可見的，

用戶名: <input type="text" /> 
密  碼：<input type="password" />

6.2.2、value屬性

用戶名:<input type="text"  name="username" value="請輸入用戶名">

value 默認的文本值，有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設定，

6.2.3、name屬性

用戶名:<input type="text"  name=“username” />

name表單的名字，這樣，后臺可以通過這個name屬性找到這個表單，頁面中的表單很多，name主要作用就是用于區別不同的表單，

name屬性后面的值，是我們自己定義的，
radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

name屬性，我們現在用的較少，但是，當我們學ajax 和后臺的時候，是必須的，

6.2.4、checked屬性

表示默認選中狀態，較常見于單選按鈕和復選按鈕，

性    別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

6.2.5、總結

屬性	說明	作用
type	表單型別	用來指定不同的控制元件型別
value	表單值	表單里面默認顯示的文本
name	表單名字	頁面中的表單很多，name主要作用就是用于區別不同的表單，
checked	默認選中	表示那個單選或者復選按鈕一開始就被選中了

6.3、 label標簽

label標簽用于系結一個表單元素, 當點擊label標簽的時候, 被系結的表單元素就會獲得輸入焦點，我們系結元素有兩種方式：

第一種用法就是用label直接包括input表單，適合單個表單選擇，

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名">   </label>

第二種用法 for 屬性規定 label 與哪個表單元素系結，

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

6.4、textarea控制元件

textarea

<textarea >
  文本內容
</textarea>

他有兩個作用：

通過textarea控制元件可以輕松地創建多行文本輸入框.
cols=“每行中的字符數” rows=“顯示的行數” 我們實際開發不用

文本框和文本域區別

表單	名稱	區別	默認值顯示	用于場景
input type=“text”	文本框	只能顯示一行文本	單標簽，通過value顯示默認值	用戶名、昵稱、密碼等
textarea	文本域	可以顯示多行文本	雙標簽，默認值寫到標簽中間	留言板

6.5、select下拉串列

如果有多個選項讓用戶選擇，為了節約空間，我們可以使用select控制元件定義下拉串列，

sele

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

注意：

<select> 中至少包含一對 option
在option 中定義selected =" selected "時，當前項即為默認選中項，
但是我們實際開發會用的比較少

6.6、form表單域

在HTML中，form標簽被用于定義表單域，以實作用戶資訊的收集和傳遞，form中的所有內容都會被提交給服務器，

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控制元件
</form>

常用屬性：

屬性	屬性值	作用
action	url地址	用于指定接收并處理表單資料的服務器程式的url地址，
method	get/post	用于設定表單資料的提交方式，其取值為get或post，
name	名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單，

每個表單都應該有自己表單域，我們現在做頁面，不寫看不到效果，但是如果后面學 ajax 后臺互動的時候，必須需要 form表單域，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/289343.html

標籤：其他

上一篇：對c語言的初步理解--來自新手小白

下一篇：某東14薪變16薪，是誠意還是套路？

前端HTML萬字血書大總結，來看看你入門了嗎？