「HTML4」HTML入門

簽

標(biāo)簽：又稱元素，是HTML的基本組成單位雙標(biāo)簽（絕大多數(shù)都是雙標(biāo)簽）：<標(biāo)簽名>標(biāo)簽體</標(biāo)簽名>第一個(gè)標(biāo)簽叫起始標(biāo)簽，第二個(gè)標(biāo)簽叫結(jié)束標(biāo)簽例：<marquee>尚硅谷，讓天下沒有難學(xué)的技術(shù)！</marquee>單標(biāo)簽：<標(biāo)簽名/>/可以省略例：<input>
標(biāo)簽名不區(qū)分大小寫，但推薦小寫，因?yàn)樾懜?guī)范
標(biāo)簽之間的關(guān)系：并列關(guān)系、嵌套關(guān)系，可以使用 tab 鍵進(jìn)行縮進(jìn)
1
2
3
4
5
<marquee>
尚硅谷，讓天下沒有難學(xué)的技術(shù)！
<input>
</marquee>
<input>

標(biāo)簽屬性

用于給標(biāo)簽提供附加信息
可以寫在起始標(biāo)簽或單標(biāo)簽中，形式如下：<標(biāo)簽名屬性名="屬性值" 屬性名="屬性值">
1
2
<marquee loop="1" bgcolor="orange">尚硅谷，讓天下沒有難學(xué)的技術(shù)！</marquee>
<input type="password">
有些特殊的屬性，沒有屬性名，只有屬性值，如：<input disabled>

不同的標(biāo)簽，有不同的屬性；也有一些通用屬性（在任何標(biāo)簽內(nèi)都能寫）屬性名、屬性值不能亂寫，都是W3C規(guī)定好的屬性名、屬性值，都不區(qū)分大小寫，但推薦小寫雙引號(hào)，也可以寫成單引號(hào)，甚至不寫，但推薦寫雙引號(hào)標(biāo)簽中不要出現(xiàn)同名屬性，否則后寫的會(huì)失效，例如：<input type="text" type="password">

基本結(jié)構(gòu)

想要呈現(xiàn)在網(wǎng)頁中的內(nèi)容寫在body標(biāo)簽中
head標(biāo)簽中的內(nèi)容不會(huì)出現(xiàn)在網(wǎng)頁中
head標(biāo)簽中的title標(biāo)簽可以指定網(wǎng)頁的標(biāo)題
1
2
3
4
5
6
7
8
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
......
</body>
</html>

注釋

特點(diǎn)：注釋的內(nèi)容會(huì)被瀏覽器所忽略，不會(huì)呈現(xiàn)到頁面中，但源代碼中依然可見
作用：對(duì)代碼進(jìn)行解釋和說明
寫法
1
2
3
4

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>
注釋不可以嵌套

文檔聲明

作用：告訴瀏覽器當(dāng)前網(wǎng)頁的版本
寫法

舊寫法：要依網(wǎng)頁所用的HTML版本而定，寫法有很多參考：W3C QA - 可在 Web 文檔中使用的 Doctype 聲明的推薦列表
新寫法：W3C 推薦使用 HTML 5 的寫法
1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

文檔聲明必須在網(wǎng)頁的第一行，且在html標(biāo)簽的外側(cè)

字符編碼

計(jì)算機(jī)對(duì)數(shù)據(jù)的操作存儲(chǔ)時(shí)，對(duì)數(shù)據(jù)進(jìn)行：編碼讀取時(shí)，對(duì)數(shù)據(jù)進(jìn)行：解碼
編碼、解碼，會(huì)遵循一定的規(guī)范 —— 字符集
常見的字符集ASCII：大寫字母、小寫字母、數(shù)字、一些符號(hào)，共計(jì)128個(gè)ISO 8859-1：在 ASCII 基礎(chǔ)上，擴(kuò)充了一些希臘字符等，共計(jì)是256個(gè)GB2312：繼續(xù)擴(kuò)充，收錄了 6763 個(gè)常用漢字、682個(gè)字符GBK：收錄了的漢字和符號(hào)達(dá)到 20000+ ，支持繁體中文UTF-8 ：包含世界上所有文字與符號(hào)
為了讓瀏覽器在渲染html文件時(shí)，不犯錯(cuò)誤，可以通過meta標(biāo)簽配合charset屬性指定字符編碼
1
2
3
<head>
<meta charset="UTF-8"/>
</head>

設(shè)置語言

主要作用讓瀏覽器顯示對(duì)應(yīng)的翻譯提示有利于搜索引擎優(yōu)化
具體寫法：<html lang="zh-CN">
lang屬性的編寫規(guī)則語言-國家/地區(qū)zh-CN ：中文-中國大陸（簡(jiǎn)體中文）zh-TW ：中文-中國臺(tái)灣（繁體中文）zh ：中文en-US ：英語-美國en-GB ：英語-英國語言—具體種類（已不推薦使用）zh-Hans ：中文—簡(jiǎn)體zh-Hant ：中文—繁體W3School 上的說明：《語言代碼參考手冊(cè)》、《國家/地區(qū)代碼參考手冊(cè)》 W3C官網(wǎng)上的說明：《Language tags in HTML》

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

HTML標(biāo)準(zhǔn)結(jié)構(gòu)如下
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

</body>

</html>

VSCode 刪除行快捷鍵：Ctrl+Shift+K

輸入!，隨后回車即可快速生成標(biāo)準(zhǔn)結(jié)構(gòu)
配置VScode 的內(nèi)置插件 emmet ，可以對(duì)生成結(jié)構(gòu)的屬性進(jìn)行定制
在存放代碼的文件夾中，存放一個(gè) favicon.ico 圖片，可配置網(wǎng)站圖標(biāo)

級(jí)版HTML視頻教程（全網(wǎng)原創(chuàng)首發(fā)！）

什么是HTML?HTML指的是超文本標(biāo)記語言，它是從事網(wǎng)頁設(shè)計(jì)工作的基礎(chǔ)，也是網(wǎng)站開發(fā)者必須熟練掌握的一門標(biāo)記語言。應(yīng)廣大學(xué)員的強(qiáng)烈要求，我愛自學(xué)網(wǎng)特推出《HTML基礎(chǔ)教程》，希望能得到廣大學(xué)員的支持。

學(xué)習(xí)交流

標(biāo) 題

第一課：HTML語言框架和相關(guān)標(biāo)簽95 1-1 學(xué)習(xí)html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標(biāo)簽和段標(biāo)簽29866 1-6 文字屬性標(biāo)簽28853 1-7 文字格式化標(biāo)簽26888 1-8 body標(biāo)簽27570 1-9 標(biāo)題標(biāo)簽25212

第二課：常用標(biāo)簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標(biāo)簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動(dòng)標(biāo)簽23217 2-10 轉(zhuǎn)義字符22227

第三課：表格標(biāo)簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

您說說看我發(fā)明的...是不是很牛逼呀[滑稽]

總高級(jí)版學(xué)習(xí)資料文件高達(dá)10G！！！

總高級(jí)版學(xué)習(xí)高清視頻資料的高達(dá)35G！！！

需要的話我后期會(huì)更新，所以關(guān)注我，學(xué)到的好東西都是你自己的哦[滑稽]

那么大概內(nèi)容就更新到這里

本教程后期會(huì)逐一更新高清視頻學(xué)習(xí)資料+超詳細(xì)的學(xué)習(xí)資料教程！

別忘了四連！！【點(diǎn)贊收藏關(guān)注投幣】

我怕你到時(shí)候想找我都找不到了～[鮮花]

注：本人原創(chuàng)首發(fā)，未經(jīng)允許禁止轉(zhuǎn)載/抄襲，如有違法，本人將有權(quán)追究法律責(zé)任！！！

單的工作過程

表單的信息發(fā)送與處理過程可以簡(jiǎn)單的進(jìn)行圖示，如下圖。

以注冊(cè)會(huì)員為例，用戶在自己的電腦上打開相應(yīng)的注冊(cè)表單頁面填寫信息，完成填寫后點(diǎn)擊提交按鈕，也就是圖中1所示過程。

這時(shí)瀏覽器會(huì)將這些信息發(fā)送給處理這些信息的服務(wù)器，服務(wù)器上有使用類似asp或php寫成的相應(yīng)的處理程序，處理完成后，生成一個(gè)反饋信息，也就是2到3的過程。

然后服務(wù)器將處理后的信息發(fā)送給個(gè)人電腦，個(gè)人電腦在瀏覽器上通過一個(gè)新頁面來提示用戶處理結(jié)果。

這里就涉及到一個(gè)問題，一個(gè)網(wǎng)站會(huì)有針對(duì)不同用戶的信息注冊(cè)表單以及相應(yīng)的信息處理程序，比如我們注冊(cè)頭條號(hào)就有"個(gè)人"、"企業(yè)"、"媒體"和"國家機(jī)構(gòu)"的區(qū)分。如何使不同的表單找到相應(yīng)的處理程序呢？在<form>標(biāo)簽中，有一個(gè)action屬性就是為這個(gè)表單信息指定處理程序的。

<form>中的action屬性

調(diào)用程序

<form>的action屬性實(shí)際上就是為表單提示處理程序所在的路徑，如果程序和頁面在一個(gè)服務(wù)器中存儲(chǔ)，那使用相對(duì)路徑即可，如果在其他服務(wù)器，則要使用絕對(duì)路徑。示例代碼如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

這段代碼中的"form_action.asp"程序和這個(gè)表單頁面在一個(gè)文件夾中，故直接寫名稱即可調(diào)用。

發(fā)送郵件

action屬性除了調(diào)用程序外，也可以發(fā)送郵件，示例代碼如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>這個(gè)表單會(huì)把電子郵件發(fā)送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
內(nèi)容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="發(fā)送">
<input type="reset" value="重置">
</form>

這段代碼中。發(fā)送郵件的寫法是這樣的：action="MAILTO:someone@w3school.com.cn"，通過MAILTO:告訴瀏覽器，這里要發(fā)送郵件！然后輸入相應(yīng)的郵箱地址，這樣就會(huì)把表單中的信息以郵件的形式發(fā)送到相應(yīng)的郵箱中了。

大家可以把郵箱地址改成自己的郵箱試一下，瀏覽器會(huì)讓大家選擇發(fā)送郵件的程序。如圖所示：

使用這個(gè)功能我們可以寫一個(gè)簡(jiǎn)單的郵件發(fā)送頁面，示例代碼如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主題：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

這樣的寫法大家可能會(huì)發(fā)現(xiàn)問題，即如果一個(gè)網(wǎng)站注冊(cè)用戶超過100人以后，靠這種手動(dòng)輸入用戶郵箱的方法發(fā)送郵件簡(jiǎn)直就是折磨人啊！

實(shí)際上，在網(wǎng)站中，我們會(huì)把會(huì)員或注冊(cè)用戶的郵箱存在數(shù)據(jù)庫中，通過調(diào)用數(shù)據(jù)庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可，再通過程序，可以針對(duì)全部用戶或部分用戶進(jìn)行群發(fā)信息。

其中，enctype屬性是向服務(wù)器聲明上傳信息的形式，也就是向服務(wù)器說明發(fā)送的數(shù)據(jù)到底是數(shù)字還是英文還是中文還是編程語句。專業(yè)一些的說法是"規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。"

全部屬性值有三個(gè)，如圖所示，大家可以簡(jiǎn)要理解一下。

除此之外，我們還發(fā)現(xiàn)一個(gè)屬性叫做method（方法），通過上面的示例代碼可知，method屬性有兩個(gè)屬性值，一個(gè)是get一個(gè)是post，這是什么意思呢？

信息上傳的兩種方法

<form>中的method標(biāo)簽即為表單信息指定相應(yīng)的發(fā)送方法。

方法有兩種，一種叫g(shù)et，這種方法通常用來發(fā)送簡(jiǎn)短的且低安全要求的信息，特點(diǎn)是速度比較快。

post經(jīng)常用來發(fā)送體積較大的信息，如果發(fā)送一些對(duì)安全性要求高的信息，html的官方說明中建議使用post方法。

我個(gè)人認(rèn)為，現(xiàn)階段大家能記住這兩個(gè)方法的主要特點(diǎn)即可。這一篇的內(nèi)容實(shí)際上也是前端學(xué)習(xí)者對(duì)服務(wù)器端的運(yùn)行的了解內(nèi)容。

下面為大家附上更為專業(yè)的講解，看不懂也沒關(guān)系，盡量讀，至少能被專業(yè)詞匯洗禮一下!

method 屬性

瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理。共有兩種方法：POST 方法和 GET 方法。

如果采用 POST 方法，瀏覽器將會(huì)按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與 action 屬性中指定的表單處理服務(wù)器建立聯(lián)系，一旦建立連接之后，瀏覽器就會(huì)按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。

在服務(wù)器端，一旦 POST 樣式的應(yīng)用程序開始執(zhí)行時(shí)，就應(yīng)該從一個(gè)標(biāo)志位置讀取參數(shù)，而一旦讀到參數(shù)，在應(yīng)用程序能夠使用這些表單值以前，必須對(duì)這些參數(shù)進(jìn)行解碼。用戶特定的服務(wù)器會(huì)明確指定應(yīng)用程序應(yīng)該如何接受這些參數(shù)。

另一種情況是采用 GET 方法，這時(shí)瀏覽器會(huì)與表單處理服務(wù)器建立連接，然后直接在一個(gè)傳輸步驟中發(fā)送所有的表單數(shù)據(jù)：瀏覽器會(huì)將數(shù)據(jù)直接附在表單的 action URL 之后。這兩者之間用問號(hào)進(jìn)行分隔。

一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務(wù)器只接受其中一種方法提供的數(shù)據(jù)。可以在 <form> 標(biāo)簽的 method （方法）屬性中指明表單處理服務(wù)器要用方法來處理數(shù)據(jù)，使 POST 還是 GET。

POST 還是 GET？

如果表單處理服務(wù)器既支持 POST 方法又支持 GET 方法，那么你該選擇哪種方法呢？下面是有關(guān)這方面的一些規(guī)律：

如果希望獲得最佳表單傳輸性能，可以采用 GET 方法發(fā)送只有少數(shù)簡(jiǎn)短字段的小表單。

一些服務(wù)器操作系統(tǒng)在處理可以立即傳遞給應(yīng)用程序的命令行參數(shù)時(shí)，會(huì)限制其數(shù)目和長(zhǎng)度，在這種情況下，對(duì)那些有許多字段或是很長(zhǎng)的文本域的表單來說，就應(yīng)該采用 POST 方法來發(fā)送。

如果你在編寫服務(wù)器端的表單處理應(yīng)用程序方面經(jīng)驗(yàn)不足，應(yīng)該選擇 GET 方法。如果采用 POST 方法，就要在讀取和解碼方法做些額外的工作，也許這并不很難，但是也許你不太愿意去處理這些問題。

如果安全性是個(gè)問題，那么我們建議選用 POST 方法。GET 方法將表單參數(shù)直接放在應(yīng)用程序的 URL 中，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進(jìn)行摘錄。如果參數(shù)中包含了信用卡帳號(hào)這樣的敏感信息，就會(huì)在不知不覺中危及用戶的安全。而 POST 應(yīng)用程序就沒有安全方面的漏洞，在將參數(shù)作為單獨(dú)的事務(wù)傳輸給服務(wù)器進(jìn)行處理時(shí)，至少還可以采用加密的方法。

如果想在表單之外調(diào)用服務(wù)器端的應(yīng)用程序，而且包括向其傳遞參數(shù)的過程，就要采用 GET 方法，因?yàn)樵摲椒ㄔ试S把表單這樣的參數(shù)包括進(jìn)來作為 URL 的一部分。而另一方面，使用 POST 樣式的應(yīng)用程序卻希望在 URL 后還能有一個(gè)來自瀏覽器額外的傳輸過程，其中傳輸?shù)膬?nèi)容不能作為傳統(tǒng) <a> 標(biāo)簽的內(nèi)容。

以上內(nèi)容來自W3school

今天的內(nèi)容結(jié)束了，這一篇內(nèi)容實(shí)踐的東西比較少，主要是閱讀與了解。

至此，HTML表單部分的講解就算告于段落了，如果您有任何疑問請(qǐng)給我留言，如有問題或錯(cuò)誤請(qǐng)予以斧正！

如果您喜歡我的教程請(qǐng)關(guān)注我，點(diǎn)贊也能讓我充滿動(dòng)力！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：誰來教我滲透測(cè)試-黑客必須掌握的HTML基礎(chǔ)（二）
下一篇：B端設(shè)計(jì)指南：“按鈕”究竟應(yīng)該如何設(shè)計(jì)？

您的項(xiàng)目需求

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

整合營銷服務(wù)商