2.HTML

HTML是整個(gè)HTML文檔，也就是代表一個(gè)網(wǎng)頁(yè)。

html中的lang="en"定義文件的語(yǔ)言為英文

3.頭部

head是html的第一個(gè)子元素[sub-tag]，負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置，定義標(biāo)題。 設(shè)置包括定義網(wǎng)頁(yè)的編碼格式、外鏈css樣式文件和文件等。設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，title的內(nèi)容會(huì)顯示在標(biāo)題欄中。 那是標(biāo)題標(biāo)簽。

4.元

meta是html語(yǔ)言head標(biāo)簽中的一個(gè)輔助標(biāo)簽。 標(biāo)簽不包含任何內(nèi)容，但標(biāo)簽的屬性定義了與文檔關(guān)聯(lián)的名稱，例如：

5.身體

body也是HTML的一級(jí)子元素，我們頁(yè)面顯示的所有內(nèi)容都寫(xiě)在標(biāo)簽body中。

四、Html文件規(guī)范

HTML制定了文檔編寫(xiě)規(guī)范，必須遵守。

所有標(biāo)簽必須小寫(xiě)

所有屬性必須用雙引號(hào)括起來(lái)

五、Html注釋

可以在 html 文檔的代碼中插入注釋。 注釋是對(duì)代碼的說(shuō)明和解釋?zhuān)⑨尩膬?nèi)容不會(huì)顯示在頁(yè)面上。

注釋語(yǔ)法：

六、html基本屬性

注意：屬性是標(biāo)簽的輔助功能。

屬性 說(shuō)明 設(shè)置網(wǎng)頁(yè)的背景顏色 設(shè)置網(wǎng)頁(yè)的背景圖片

1.

設(shè)置網(wǎng)頁(yè)的背景顏色

html的屬性

2.路徑

我們?cè)陂_(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，經(jīng)常需要插入圖片、視頻、文件等操作，但是需要指定文件的位置，也就是所謂的路徑

路徑分為：

相對(duì)路徑是指目標(biāo)相對(duì)于當(dāng)前文件的路徑。 這種方法在網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)中常用來(lái)表示目標(biāo)的路徑。 相對(duì)路徑的表示方法有很多種，表示的含義也不盡相同。 表達(dá)方式如下： ./：表示文件所在目錄（可省略） ../：表示文件所在父目錄 ../../：表示父目錄的父目錄文件所在目錄 / : 表示文件所在根目錄 [/: 可以理解為目標(biāo)文件的絕對(duì)路徑] 絕對(duì)路徑是指目標(biāo)文件的完整路徑，從盤(pán)符開(kāi)始.  3.

設(shè)置網(wǎng)頁(yè)的背景圖片

html的屬性

防范措施：

并且不能同時(shí)使用

不能指定絕對(duì)路徑

七、html標(biāo)簽 1、網(wǎng)頁(yè)的組成

網(wǎng)頁(yè)的構(gòu)成：文字、圖片、視頻、超鏈接、列表、表格、表格等。

2.文本段落標(biāo)簽

標(biāo)簽描述hn設(shè)置文字標(biāo)題[n:取值范圍1~6]居中對(duì)齊hr橫線屬性(width:width color:color size:)br換行p段落

3.文本控制標(biāo)簽

標(biāo)簽描述字體 設(shè)置字體需要使用屬性設(shè)置

屬性 描述 color 設(shè)置字體 color size 設(shè)置字體大小，不需要單位，取值范圍：1~7 [瀏覽器默認(rèn)值：3] face 設(shè)置字體樣式

4.文本格式化標(biāo)簽

標(biāo)簽描述 b 定義粗體文本 em 定義強(qiáng)調(diào)文本 i 定義斜體文本 small 定義小字體 定義強(qiáng)調(diào) sub 定義下標(biāo) sup 定義上標(biāo) ins 定義插入 del 定義刪除

Html文本格式化標(biāo)簽粗體文本傾斜文本著重文本小號(hào)字加重語(yǔ)氣上標(biāo)下標(biāo)插入字刪除字

5.圖像標(biāo)簽

在 Html 中，圖像表示為

標(biāo)簽定義。

是一個(gè)空標(biāo)簽，意味著它只包含屬性。

要在頁(yè)面上顯示圖像，您需要使用源屬性 (src)。  src 指的是“”。   屬性的值是圖像的 URL 地址。

標(biāo)簽描述 img 圖片標(biāo)簽

屬性說(shuō)明 src 指定圖片的地址 width 設(shè)置圖片的寬度 設(shè)置圖片的高度 alt 設(shè)置圖片的初始文字

注意：不建議設(shè)置圖片大小，容易失真

6. 音頻

在 Html 中，聲音由標(biāo)簽定義。

標(biāo)簽描述 audio 聲音標(biāo)簽

屬性描述 src 指定聲音地址

對(duì)不起，您的瀏覽器不支持

7.視頻

在Html中，video由video標(biāo)簽定義

標(biāo)簽描述視頻視頻標(biāo)簽

屬性描述 src 指定視頻地址

對(duì)不起，您的瀏覽器不支持

8.超鏈接

a 標(biāo)簽定義了一個(gè)超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。

a標(biāo)簽最重要的屬性是href，它指定了鏈接的目標(biāo)。

在所有瀏覽器中，鏈接的默認(rèn)外觀如下：

未訪問(wèn)的鏈接帶有下劃線和藍(lán)色

已訪問(wèn)過(guò)的鏈接帶有下劃線和紫色

活動(dòng)鏈接帶有下劃線和紅色

語(yǔ)法：

點(diǎn)擊內(nèi)容

屬性描述 href 指定鏈接目標(biāo)名稱 指定錨點(diǎn)名稱 指定下載鏈接 指定跳轉(zhuǎn)方式 屬性值描述 在新窗口打開(kāi) [常用] 在父窗口打開(kāi)鏈接 [知識(shí)] _self 默認(rèn)，在當(dāng)前窗口 [了解] _top opens in the   窗體打開(kāi)鏈接，并替換整個(gè)當(dāng)前窗體【理解】待講【常用】

超鏈接類(lèi)別：

9.清單

列表的使用類(lèi)似于word等軟件的列表概念，但只是應(yīng)用于網(wǎng)頁(yè)展示。

1.有序列表

有序列表是指帶有數(shù)字或字母的列表項(xiàng)，可以使用css定義更多樣式。

新聞一新聞二新聞三

屬性描述 type 設(shè)置符號(hào)類(lèi)型 取值：1 a AI i 默認(rèn)數(shù)字從數(shù)字開(kāi)始[在ol標(biāo)簽中使用] value從數(shù)字[在li標(biāo)簽中使用]

新聞一新聞二新聞三

2.無(wú)序列表

無(wú)序列表是指沒(méi)有數(shù)字和字母的列表項(xiàng)，可以使用css定義更多的樣式。

童裝男裝女裝

屬性描述type用于設(shè)置符號(hào)類(lèi)型，默認(rèn)：實(shí)心圓 值：空心圓，正方形[for ul, li]

童裝男裝女裝

三、說(shuō)明清單

描述性列表意味著每個(gè)列表項(xiàng)都有一個(gè)單獨(dú)的標(biāo)題。

開(kāi)源產(chǎn)品Java封裝庫(kù)Web組件庫(kù)網(wǎng)站導(dǎo)航mrliujava.commrliuweb.com

10.表格

表格在 Web 開(kāi)發(fā)中使用非常頻繁，尤其是在顯示數(shù)據(jù)時(shí)。

10.1 基本用法

標(biāo)簽描述表表示表標(biāo)簽表標(biāo)題thead表頭部分tbody表體部分tfoot表腳

屬性說(shuō)明 表格邊框單元格和單元格間距 width width  set  color set  image align

員工薪資統(tǒng)計(jì)表序號(hào)姓名性別職位薪資1狗蛋男JavaEe工程師87802黑妞女Web前端工程師97503傻蛋妖測(cè)試工程師996當(dāng)前頁(yè)：1 頁(yè)上一頁(yè)下一頁(yè)尾頁(yè)共 3 頁(yè)

10.2 單元合并

屬性 描述 行合并 列合并

這是行合并：

員工薪資統(tǒng)計(jì)表序號(hào)姓名性別職位薪資1狗蛋男JavaEe工程師87802黑妞女97503傻蛋妖測(cè)試工程師996當(dāng)前頁(yè)：1 頁(yè)上一頁(yè)下一頁(yè)尾頁(yè)共 3 頁(yè)

這是列合并：

員工薪資統(tǒng)計(jì)表序號(hào)姓名性別職位薪資1狗蛋男JavaEe工程師87802黑妞女Web前端工程師97503傻蛋測(cè)試工程師996當(dāng)前頁(yè)：1 頁(yè)上一頁(yè)下一頁(yè)尾頁(yè)共 3 頁(yè)

11.表格

表單是包含表單元素的區(qū)域。

表單元素允許用戶在表單中輸入內(nèi)容，例如：文本域()、下拉列表()、單選框(radio)、復(fù)選框()等。

11.1 基本用法

需要使用 form 標(biāo)簽設(shè)置表單：

輸入元素

11.2 獲取&發(fā)布

屬性說(shuō)明后臺(tái)地址提交方式GET或POST

GET 和 POST 的區(qū)別：

1.獲取

2. 發(fā)布

11.3 標(biāo)簽

使用標(biāo)簽來(lái)描述表單的標(biāo)題。 單擊標(biāo)題時(shí)，文本框?qū)@得焦點(diǎn)。 需要保證使用的ID在頁(yè)面上是唯一的。

用戶名密碼

也可以把文本框放在label標(biāo)簽里面，這樣就不需要設(shè)置id和for屬性了。

11.4 輸入

文本框用于輸入單行文本，以下是常用屬性和示例。

屬性  type 表單類(lèi)型，默認(rèn)為text name 后臺(tái)接收字段名必須輸入提示文本內(nèi)容值 默認(rèn)是指允許輸入的最大字符數(shù) size 表單長(zhǎng)度一般由css控制。 設(shè)置選擇的類(lèi)型，如：.jpg 使用麥克風(fēng)\視頻或攝像頭從手機(jī)獲取上傳的文件。 支持的值是，視頻，

11.4.1 基本示例

用戶名

11.4.2 調(diào)用攝像頭

當(dāng)輸入類(lèi)型為文件時(shí)，手機(jī)將允許用戶選擇圖片或拍照。 如果你想直接調(diào)用相機(jī)，使用下面的代碼。

上傳文件

11.4.3 其他類(lèi)型

可以通過(guò)設(shè)置表單的類(lèi)型字段來(lái)指定不同的輸入內(nèi)容。

type  email 輸入內(nèi)容為email url 輸入內(nèi)容為URL地址 輸入內(nèi)容為 item tel phone  移動(dòng)端調(diào)出數(shù)字鍵盤(pán)搜索框隱藏表單提交表單重置重置表單自定義按鈕

11.4.4

隱藏表單是用來(lái)提交后臺(tái)數(shù)據(jù)的，但是前臺(tái)的內(nèi)容是不顯示的，所以在上面使用樣式定義是沒(méi)有意義的。

11.4.5

創(chuàng)建一個(gè)提交按鈕可以將表單數(shù)據(jù)提交到后臺(tái)。 提交數(shù)據(jù)的方式有很多種，比如：AJAX，或者Html form 。

A。 使用輸入構(gòu)建提交按鈕。 如果設(shè)置了name值，按鈕數(shù)據(jù)也會(huì)被提交到后臺(tái)。 如果有多個(gè)表單項(xiàng)，您可以使用它們來(lái)確定提交哪個(gè)表單。

b. 使用也可以提交，設(shè)置type屬性為或不設(shè)置都可以提交表單。

提交表單

11.4.6 禁用表單

通過(guò)為表單設(shè)置或禁止表單，可以將單個(gè)表單的數(shù)據(jù)提交到后臺(tái)

11.4.7

表單可以通過(guò)設(shè)置屬性來(lái)指定定期驗(yàn)證。

屬性描述 正則表達(dá)式校驗(yàn)規(guī)則輸入錯(cuò)誤時(shí)觸發(fā)的事件

用戶名提交表單