想學(xué)HTML該從何入手？web前端HTML終極指南

HTML從哪入手？

自學(xué)的話，首先要理解html的作用。html，hypertext markup language，超文本標(biāo)記語言，用來展示網(wǎng)頁中的內(nèi)容。同時 HTML 也是我們學(xué)習(xí)前端開發(fā)的基礎(chǔ)。隨著 web 前端技術(shù)的飛速發(fā)展，HTML 和 CSS 也成為了編程者的必備技能。而要想做一個網(wǎng)頁光會這一門語言是不夠的，還需要自學(xué)css，JavaScript。其中html和css較JavaScript容易。

可以這樣理解，HTML，是一個文件類型，可以被瀏覽器解析。如果不使用瀏覽器打開，我們看到的將是一行行代碼，在瀏覽器中打開以后呢，就會出現(xiàn)一些靜態(tài)效果了。下面介紹一下初步的一些HTML語法知識。

HTML 標(biāo)簽非常注重語義化，很多標(biāo)簽都是通俗易懂的，大大降低了我們學(xué)習(xí)的難度。這套 HTML 教程更是為了避免初學(xué)者走太多的彎路，指出了許多其它 HTML 教程中沒有提到的學(xué)習(xí)誤區(qū)，并且給初學(xué)者提供了一個具體的學(xué)習(xí)思路，除了注重 HTML 知識點的講解，更加注重 web 前端開發(fā)技巧和思維。幫助大家快速入門，其中包含大量的實踐經(jīng)驗，將知識系統(tǒng)化，濃縮為精華，用通俗易懂的語言直指網(wǎng)頁設(shè)計初學(xué)者的痛點。

學(xué)海無涯，苦做舟，學(xué)習(xí)如同修行，只有潛心才可以領(lǐng)悟真諦。HTML 中的每一個小知識點都可以讓頁面發(fā)生不同的變化，現(xiàn)在就讓我們行動起來，跟著 HTML 教程的步伐，讓我們一起走進 HTML 的世界。

HTML語言特點

超級文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點如下：

● 簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。

● 可擴展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。

● 平臺無關(guān)性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。

● 通用性：另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

什么時候用HTML

B（Browser）/S（Server）架構(gòu)方向，也是我們以后主攻方向

為什么要學(xué)HTML

我們以后主要為企業(yè)內(nèi)部提供解決方案，例如：企業(yè)內(nèi)部的辦公系統(tǒng)、供應(yīng)鏈管理系統(tǒng)、客戶關(guān)系管理系統(tǒng)等，而這些系統(tǒng)通常對界面的表現(xiàn)要求較低，對業(yè)務(wù)處理和數(shù)據(jù)處理要求較高，并且要求降低升級維護的成本，B/S架構(gòu)可以更好的被企業(yè)接受，所以我們以后主要的方向是開發(fā)基于B/S架構(gòu)的應(yīng)用，B/S架構(gòu)的開發(fā)通常又被叫做Web開發(fā)，Web開發(fā)通常包括Browser瀏覽器端的開發(fā)以及Server服務(wù)器端的開發(fā)。

雖然我們是學(xué)習(xí)Java后臺服務(wù)器編程，但是前端頁面編寫要了解，能看懂，簡單的頁面效果可以實現(xiàn)即可；

怎么開發(fā)HTML

創(chuàng)建一個以 .html或 .htm 結(jié)尾的文件，用文本編輯器打開就可以開發(fā)

怎么運行HTML

用瀏覽器打開以.html或.htm的文件就可以自上而下解析執(zhí)行，不需要編譯

DTD：Document Type Definition

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● DTD文件的作用

● 幫助你編寫合法的代碼

● 它讓瀏覽器正確地顯示器代碼，或者說DTD只是寫給檢查器看的

HTML與W3C（World Wide Web:www）

HTML規(guī)范是由w3c負(fù)責(zé)制定的，W3C是世界萬維網(wǎng)聯(lián)盟（World Wide Web:www）

安裝瀏覽器

FireFox、Google、IE

HTML元素

HTML標(biāo)簽

<>表示開始標(biāo)記

</>表示結(jié)束標(biāo)記

<html>開始標(biāo)簽

</html>結(jié)束標(biāo)簽

html為元素

HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。

HTML 元素語法

● HTML 元素以開始標(biāo)簽起始

● HTML 元素以結(jié)束標(biāo)簽終止

● 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容

● 某些 HTML 元素具有空內(nèi)容（empty content）

● 空元素在開始標(biāo)簽中進行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）

● 大多數(shù) HTML 元素可擁有屬性

嵌套 HTML 元素

大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文檔由嵌套的 HTML 元素構(gòu)成。

HTML 文檔實例

上面的例子包含三個 HTML 元素。

HTML 實例解釋

● <p> 元素：

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素?fù)碛幸粋€開始標(biāo)簽 <p>，以及一個結(jié)束標(biāo)簽 </p>。

元素內(nèi)容是：This is my first paragraph。

● <body> 元素：

<body> 元素定義了 HTML 文檔的主體。

這個元素?fù)碛幸粋€開始標(biāo)簽 <body>，以及一個結(jié)束標(biāo)簽 </body>。

元素內(nèi)容是另一個 HTML 元素（p 元素）。

<html> 元素：

這個元素?fù)碛幸粋€開始標(biāo)簽 <html>，以及一個結(jié)束標(biāo)簽 </html>

元素內(nèi)容是另一個 HTML 元素（body 元素）。

不要忘記結(jié)束標(biāo)簽

即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會正確地顯示 HTML：

上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會產(chǎn)生不可預(yù)料的結(jié)果或錯誤。

注釋：未來的 HTML 版本不允許省略結(jié)束標(biāo)簽。

空元素

有一些元素必須使用單個標(biāo)簽表示。這些被稱為空元素。

一個這樣的元素是 hr 。

hr 是一個分組元素，用于表示一個段落級別的內(nèi)容。

您可以使用以下兩種方式之一使用void元素 - 第一種方法是僅指定開始標(biāo)記，如以下代碼所示。

瀏覽器知道hr是一個void元素，因此不希望看到結(jié)束標(biāo)記。

您可以使元素與空元素一致，如下面的代碼所示。

HTML注釋

注釋是關(guān)于HTML元素的有用信息。注釋使HTML文檔更易讀和可理解。

HTML中的注釋以標(biāo)簽<！-- 開頭，并以 --> 結(jié)尾。

瀏覽器將忽略您在這些標(biāo)記中放置的任何內(nèi)容。

以下代碼具有HTML注釋。

HTML標(biāo)簽

超文本標(biāo)記語言（外國語簡稱：HTML）標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽，HTML標(biāo)簽是HTML語言中最基本的單位，HTML標(biāo)簽是HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）最重要的組成部分。

HTML標(biāo)簽的大小寫無關(guān)的，例如“主體”<body>跟<BODY>表示的意思是一樣的，推薦使用小寫。

實例

標(biāo)簽定義及使用說明

<html> 標(biāo)簽告知瀏覽器這是一個 HTML 文檔。

<html> 標(biāo)簽是 HTML 文檔中最外層的元素。

<html> 標(biāo)簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標(biāo)簽）的容器。

瀏覽器支持

所有瀏覽器都支持 <html> 標(biāo)簽。

段落標(biāo)簽：<p></p>

定義：可以把 HTML 文檔分割為若干段落

標(biāo)題字：<h1></h1>至<h6></h6>

標(biāo)題是通過 <h1> - <h6> 等標(biāo)簽進行定義的

<h1>定義最大標(biāo)簽，<h6>定義最小標(biāo)簽

換行：<br>

定義：<br> 可插入一個簡單的換行符

<br> 標(biāo)簽是空標(biāo)簽，它沒有結(jié)束標(biāo)簽

注釋：

水平線：<hr/>

預(yù)留格式<pre>內(nèi)容</pre>

定義：頁面中輸入什么樣式就顯示什么樣式

實例：< >

搭配視頻效果更佳~~

https://www.ixigua.com/690746767030039398

、新建項目

1、新建===web項目===輸入項目名稱====完成

二、新建html文件

在新建項目中新建html模板

輸入文件名稱：

三、認(rèn)識基本格式

聯(lián)想出基本格式：

四、編輯html文件

運行html，選擇瀏覽器

五、html常用的快捷鍵

（1）ctrl+n+w web項目創(chuàng)建

（2）ctrl+n+h html文檔創(chuàng)建

（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）

（4）ctrl+r html運行
（5）ctrl+z 撤回
（6）！+tab鍵聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋

（8）ctrl+鼠標(biāo)滾輪，字體方大和縮小

六、認(rèn)識標(biāo)簽

（1）H標(biāo)簽（標(biāo)題標(biāo)簽）

（2）p標(biāo)簽（段落標(biāo)簽）

（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接

第一種

img中顯示圖片

img中引入圖片

第二種：網(wǎng)上圖片的鏈接：

（4）標(biāo)簽（空格）

（5）em 標(biāo)簽表示斜體

（6）i 標(biāo)簽表示斜體

（7）br 表示換行

（8）b 標(biāo)簽表示加粗

（9） strong 標(biāo)簽表示加粗

（10）s 標(biāo)簽（刪除線）

（11）u 標(biāo)簽（下劃線）

（12）font 顏色

（13）sub下標(biāo)
（14）sup上標(biāo)

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者h(yuǎn)tm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另一個網(wǎng)頁。

二、Html標(biāo)簽語法

Html中標(biāo)簽分為：成對標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】

1、成對標(biāo)簽

成對出現(xiàn)，有開始標(biāo)簽必須有結(jié)束標(biāo)簽，內(nèi)容包裹在兩個標(biāo)簽中，而且開始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開頭

語法：

<font>內(nèi)容</font>

2、自閉合標(biāo)簽

只有一個標(biāo)簽，用斜杠結(jié)束，斜杠也可以省略

語法：

<br/>

注意事項：

成對標(biāo)簽中，結(jié)束標(biāo)簽必須以斜杠開頭
成對標(biāo)簽與成對標(biāo)簽可以嵌套不能交叉
標(biāo)簽名不區(qū)分大小寫，但是我們都必須小寫

三、Html基本架構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類型為html，并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進行解析html語言，如果不寫的話，會產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會用自己的方式進行解析，不同的瀏覽器有各自的解析方式，從而會出現(xiàn)無效果、不兼容等問題。
注意，html中有兩種聲明類型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個網(wǎng)頁。
html中的lang="en"是定義該文件語言是英文

3、head

head是html的第一層子元素【子標(biāo)簽】，負(fù)責(zé)對網(wǎng)頁進行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄中。即title標(biāo)簽。

4、meta

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

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁面中顯示的所有內(nèi)容全部都是編寫在該標(biāo)簽體中。

四、Html文檔規(guī)范

html制定了文檔的編寫規(guī)范，必須遵守。
所有的標(biāo)簽必須小寫
所有的屬性必須用雙引號括起來

五、Html注釋

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上。
注釋的語法：


六、html基本屬性

注：屬性是標(biāo)簽的輔助作用。

屬性描述 bgcolor 設(shè)置網(wǎng)頁的背景顏色 background 設(shè)置網(wǎng)頁的背景圖片

1.bgcolor

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們在開發(fā)網(wǎng)頁時，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個位置就是所謂的路徑

路徑分為：

相對路徑指目標(biāo)相對于當(dāng)前文件的路徑，網(wǎng)頁結(jié)構(gòu)設(shè)計中多采用這種方式來表示目標(biāo)的路徑。相對路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫）../ ：代表文件所在的父級目錄../../ ：代表文件所在的父級目錄的父級目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標(biāo)文件的絕對路徑】
絕對路徑指目標(biāo)文件的完整路徑，從盤符開始。

3.background

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項：
bgcolor和background不能同時使用
background不能指定絕對路徑

七、Html標(biāo)簽

1.網(wǎng)頁的組成

網(wǎng)頁的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

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

標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n：取值范圍 1~6】 center 居中對齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細(xì)） br 換行 p 段落

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

標(biāo)簽 描述 font 設(shè)置字體，需要借助屬性設(shè)置

屬性描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認(rèn)值：3】 face 設(shè)置字體風(fēng)格

<font size="2" color="red" face="黑體"></font>

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

標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號字 strong 定義加重語氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標(biāo)簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號字</small>
    <strong>加重語氣</strong>
    <sub>上標(biāo)</sub>
    <sup>下標(biāo)</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標(biāo)簽

在Html中，圖像由
標(biāo)簽定義。
是空標(biāo)簽，意思是說，它只包含屬性。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

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

屬性描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本

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

6、audio

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

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

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對不起，您的瀏覽器不支持</audio>

7、video

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

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

屬性描述 src 指定視頻地址

<video src="美女.mp4">對不起，您的瀏覽器不支持</video>

8、超鏈接

a標(biāo)簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。
a標(biāo)簽最重要的屬性是href，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀如下：
未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

語法：

<a href="鏈接目標(biāo)">點擊內(nèi)容</a>

屬性描述 href 指定鏈接目標(biāo) name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式屬性值描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認(rèn)，在當(dāng)前窗口打開【了解】 _top 在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類：

內(nèi)部鏈接鏈接目標(biāo)：本地頁面 <a href="demo.html">點擊內(nèi)容</a>
外部鏈接鏈接目標(biāo)：外部頁面 <a href="http://www.baidu.com">點擊內(nèi)容</a>
多媒體鏈接鏈接目標(biāo)：圖片、視頻等 <a href="images/美女.jpg">點擊內(nèi)容</a>
電子郵件鏈接鏈接目標(biāo)：電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點擊內(nèi)容</a>
錨鏈接鏈接目標(biāo)：錨點 1.建立錨點
<a name="錨點名"></a>

2.跳轉(zhuǎn)
<a href="#錨點名">點擊內(nèi)容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過是應(yīng)用在網(wǎng)頁展示中。

1.有序列表

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

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設(shè)置符號類型值：1 a A I i 默認(rèn)數(shù)字 start 從第幾個開始【用于ol標(biāo)簽中】 value 從第幾個開始【用于li標(biāo)簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無序列表

無序列表是指沒有數(shù)字編號或字母的列表項，可以使用css定義更多樣式。

<!-- 無序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設(shè)置符號類型，默認(rèn)：實心圓值：空心圓、正方形【用于ul、li】

<!-- 無序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個列表項有單獨的標(biāo)題。

<!-- 描述列表 -->
    <dl>
        <dt>開源產(chǎn)品</dt>
        <dd>Java封裝庫</dd>
        <dd>Web組件庫</dd>
        
        <dt>網(wǎng)站導(dǎo)航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網(wǎng)頁開發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時候。

10.1 基本使用

標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性說明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。

11.1 基本使用

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

<form>
input元素
</form>

11.2 GET&POST

屬性說明 action 后臺地址 method 提交方式GET或POST

GET和POST區(qū)別：

1.GET

數(shù)據(jù)會顯示在地址欄中，數(shù)據(jù)不安全
數(shù)據(jù)大小有限制
數(shù)據(jù)通過請求頭傳遞

2.POST

數(shù)據(jù)不會顯示在地址欄中，數(shù)據(jù)安全
數(shù)據(jù)對大小無限制
數(shù)據(jù)通過實體內(nèi)容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標(biāo)題，當(dāng)點擊標(biāo)題后文本框會獲得焦點，需要保證使用的ID在頁面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標(biāo)簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性說明 type 表單類型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類型比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" placeholder="請輸入用戶名" maxlength="5" size="50" required>
</form>

11.4.2 調(diào)用攝像頭

當(dāng)input類型為file時手機會讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類型

通過設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

類型說明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項 tel 電話號,移動端會調(diào)出數(shù)字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺數(shù)據(jù),但在前臺內(nèi)容不顯示所以在其上做用樣式定義也沒有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺,有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會提交到后臺,如果有多個表單項可以通過這些進行判斷是哪個表單提交的.

<input type="submit" name="submit" value="提交表單">

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

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

<input type="text" value="數(shù)據(jù)" readonly>

11.4.7 PATTERN

表單可以通過設(shè)置pattern屬性指定正則驗證.

屬性說明 pattern 正則表達(dá)式驗證規(guī)則 oninvalid 輸入錯誤時觸發(fā)的事件

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請輸入5~20位字母的用戶名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性說明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

<textarea cols="30" rows="3">請踩踩我......</textarea>

11.4.9 SELECT

下拉列表項可用于多個值中的選擇.

屬性說明 multiple 支持多選 size 列表框高度 optgroup 選項組 selected 選中狀態(tài) option 選項值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個選項的表單,如性別的選擇:男 , 女 , 保密只能選擇一個.

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復(fù)選框指允許選擇多個值的表單

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.

屬性說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時間

屬性說明 min 最小時間 max 最大時間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時間

<h1>日期與時間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項列表

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺管理語言</option>
            <option value="CSS">美化網(wǎng)站頁面</option>
            <option value="MYSQL">掌握數(shù)據(jù)庫使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個框架集。它被用來組織多個窗口（框架），每個框架存有獨立的文檔，在其最簡單的應(yīng)用中，frameset元素僅僅會規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項：由于是分割原網(wǎng)頁，所以我們不能在body中進行編寫，在head中進行分割。

標(biāo)簽 說明 frameset 框架集 frame 框架

屬性說明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導(dǎo)航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野獸</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html鏈接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動物.html" target="view">動物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內(nèi)聯(lián)框架

iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架。

屬性說明 align 對齊方式，后期采用css的方式進行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動條 frameborder 設(shè)置iframe的邊框

在線咨詢

上一篇：都2021年了，做個Chrome插件給自己吧
下一篇：精選13個HTML5學(xué)習(xí)必備網(wǎng)站

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

想學(xué)HTML該從何入手？web前端HTML終極指南

HTML從哪入手？

HTML語言特點

什么時候用HTML

為什么要學(xué)HTML

怎么開發(fā)HTML

怎么運行HTML

DTD：Document Type Definition

HTML與W3C（World Wide Web:www）

安裝瀏覽器

HTML元素

HTML標(biāo)簽

HTML 元素語法

嵌套 HTML 元素

HTML 文檔實例

HTML 實例解釋

<html> 元素：

不要忘記結(jié)束標(biāo)簽

空元素

HTML注釋

HTML標(biāo)簽

標(biāo)簽定義及使用說明

瀏覽器支持

、Html概述

二、Html標(biāo)簽語法

1、成對標(biāo)簽

2、自閉合標(biāo)簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標(biāo)簽

1.網(wǎng)頁的組成

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

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

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

5、圖片標(biāo)簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導(dǎo)航框架

13、內(nèi)聯(lián)框架