接上期后續(xù)

本期分享第四章節(jié)-HTML

三章都有已經(jīng)分享完了，大家都跟上了嗎？

跟上的我就不得不說真厲害~

沒跟上的要加油了！

但時(shí)間還久，后面要學(xué)還有很多~

大家需保持耐心慢慢來

爭(zhēng)取你們學(xué)習(xí)的速度！

跟上我更新的速度哦~?

今日新篇章

【HTML】?

【主要內(nèi)容】WEB:

1．Web前端簡(jiǎn)介

2．創(chuàng)建第一個(gè)前端項(xiàng)目

3．相關(guān)標(biāo)簽詳解

4．表格標(biāo)簽詳解

5．表單標(biāo)簽詳解

6．框架和實(shí)體字符

【學(xué)習(xí)目標(biāo)】

1.?Web前端簡(jiǎn)介

1.1?為什么要學(xué)習(xí)Web前端？

目前軟件的形式分兩種一種是C(client)/S(server)架構(gòu)，另一種是B(browser)/S(server)架構(gòu):

l?C/S架構(gòu)（Client/Server，客戶端/服務(wù)器模式）

l?B/S架構(gòu)（Browser/Server，瀏覽器/服務(wù)器模式）

那么，要想在瀏覽器中展示數(shù)據(jù)，必然涉及到Web前端的知識(shí)。因此，Web前端也成為目前軟件工程師必須要掌握的基本技能！

1.2?Web前端需要學(xué)習(xí)那些知識(shí)

一個(gè)網(wǎng)站由多個(gè)網(wǎng)頁組成，每個(gè)網(wǎng)頁又由HTML、CSS和JavaScript組成！

l?HTML?：結(jié)構(gòu)， 決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容(“是什么”)

l?CSS?：表現(xiàn)(樣式) ， 設(shè)定網(wǎng)頁的表現(xiàn)樣式(“什么樣子”)

l?JavaScript：行為， 控制網(wǎng)頁的行為(“做什么”)

開發(fā)一個(gè)網(wǎng)頁，就如同修建一個(gè)房子。先把房子的結(jié)構(gòu)建好（HTML），例如房子有幾層高、每層有幾間房間。房子建好之后給房子裝修（CSS），例如給窗戶安裝窗簾、往地板鋪設(shè)漂亮的瓷磚。裝修完畢之后，當(dāng)夜幕降臨的時(shí)候，我們要開燈（JavaScript），這樣屋子就能夠看得見了。

1.3?常見瀏覽器介紹?

既然學(xué)習(xí)web前端開發(fā)，那么就少不了跟瀏覽器打交道，那么我們?cè)撨x用什么類型的瀏覽器呢？

您可能用過一下瀏覽器：w3c:HTML、css、javascript、jquery

?

當(dāng)然我們更推薦使用以下瀏覽器：

?

為什么推薦使用以上的瀏覽器呢？這個(gè)得從瀏覽器的內(nèi)核說起，瀏覽器按內(nèi)核劃分為：
一、Gecko內(nèi)核：前綴為 -moz- ，代表產(chǎn)品火狐瀏覽器

二、Webkit內(nèi)核：前綴為 -webkit- ，代表產(chǎn)品chrome瀏覽器、safari瀏覽器、360極速、世界之窗、獵豹等。

三、Trident內(nèi)核：前綴為 -ms- ，也稱IE內(nèi)核，代表產(chǎn)品IE瀏覽器。

四、Presto內(nèi)核：前綴為 -o-，代表作品Opera瀏覽器

1.4?瀏覽器與服務(wù)器的交互過程

HTML語言被稱為互聯(lián)網(wǎng)的三大基石之一(其余兩大基石分別為：HTTP協(xié)議、URL)，它解決了如何以豐富的效果展示數(shù)據(jù)內(nèi)容的問題?；ヂ?lián)網(wǎng)中，數(shù)據(jù)是在服務(wù)器和瀏覽器之間互相傳送和執(zhí)行。

三大基石分別解決了如下問題：

l?HTTP協(xié)議：解決了服務(wù)器和瀏覽器之間數(shù)據(jù)如何傳送、傳送格式的問題，實(shí)現(xiàn)了分布式的信息共享。

l?URL協(xié)議：解決了眾多服務(wù)器中資源定位問題。從而讓瀏覽器可以訪問不同的服務(wù)器資源，實(shí)現(xiàn)了全球信息的精確定位。

l?HTML語言：解決了數(shù)據(jù)在瀏覽器中如何豐富多彩的展示，及如何合理標(biāo)示信息的問題。

?

2.?HTML發(fā)展史

2.1?HTML的簡(jiǎn)介

HTML(Hyper Text Markup Language)中文譯為“超文本標(biāo)記語言”，主要是通過HTML標(biāo)記對(duì)網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。HTML不是一種編程語言，而是一種標(biāo)記語言，它提供了許多標(biāo)記，如段落標(biāo)記、標(biāo)題標(biāo)記、超鏈接標(biāo)記、圖片標(biāo)記等，網(wǎng)頁中需要定義什么內(nèi)容，就用相應(yīng)的HTML標(biāo)記描述即可。

1)?<標(biāo)簽名 [屬性名=”屬性值”]> [內(nèi)容]</標(biāo)簽名>

2)?<標(biāo)簽名 [屬性名=”屬性值”] />

HTML之所以稱為超文本標(biāo)記語言，不僅是因?yàn)樗ㄟ^標(biāo)記描述網(wǎng)頁內(nèi)容，同時(shí)也由于文本中包含了所謂的“超級(jí)鏈接”點(diǎn)。通過超鏈接將網(wǎng)站與網(wǎng)頁以及各種網(wǎng)頁元素鏈接起來，構(gòu)成了豐富多彩的Web頁面。

2.2?HTML發(fā)展歷程

HTML5開發(fā)主要是由以下3個(gè)組織負(fù)責(zé)和實(shí)施，HTML5是HTML的第五次重大修改。

l?W3C：World Wide Web Consortium萬維網(wǎng)聯(lián)盟，負(fù)責(zé)發(fā)布HTML5規(guī)范。

l?WHATWG：由Apple、Mozilla、Google和Opera等瀏覽器廠商人員組成，成立于2004年，致力于開發(fā)HTML和Web應(yīng)用API。

l?IETF：因特網(wǎng)工程任務(wù)組，負(fù)責(zé)開發(fā)Internet協(xié)議，HTML5定義的新API鎖依賴的WebSocket協(xié)議，正式由它負(fù)責(zé)開發(fā)。

HTML發(fā)展歷程：

HTML1.0 超文本標(biāo)記語言(第一版) 在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))

HTML2.0 1995年11月作為RFC 1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)。

HTML3.2 1996年1月14日，W3C推薦標(biāo)準(zhǔn)。

HTML4.0 1997年12月18日，W3C推薦標(biāo)準(zhǔn)。

HTML4.01: 1999年12月24日，W3C推薦標(biāo)準(zhǔn)。

XHTML1.0 發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后經(jīng)過修訂于2002年8月1日重新發(fā)布。

XHTML1.1 于2001年5月31日發(fā)布。

HTML5.0 2014年10月28日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的努力，標(biāo)準(zhǔn)規(guī)范終于制定完成。

Html(弱語言:不區(qū)分大小寫、后綴名隨意(.html、.htm、.HTML、.HTM、.HtMl)、寫錯(cuò)不報(bào)錯(cuò))--->xhtml--->xml

2.3?XHTML和HTML的區(qū)別??

XHTML是HTML向XML的一個(gè)過渡語言，在最初W3C組織希望把HTML變成更為嚴(yán)謹(jǐn)?shù)臉?biāo)記語言（比如XML），但HTML的已經(jīng)應(yīng)用的太為廣泛，全部換掉不太現(xiàn)實(shí)。因此產(chǎn)生了XHTML這樣一種過度形式。它比HTML更嚴(yán)謹(jǐn)，基本標(biāo)簽都還是沿用了HTML，但廢除了“表現(xiàn)層”的標(biāo)簽，同時(shí)要求標(biāo)簽的嚴(yán)格嵌套，標(biāo)簽結(jié)束等等。

3.?IDE環(huán)境安裝配置

3.1?IDE環(huán)境介紹

IDE是"集成開發(fā)環(huán)境"的英文縮寫。我們都知道網(wǎng)上的頁面是編程人員寫出來的，用什么寫的呢？
答案：用編碼工具或IDE集成開發(fā)環(huán)境。

3.2?編碼工具

輔助程序員編寫源代碼的工具，它類似word，我們寫文檔會(huì)打開word文檔來編寫。寫代碼也一樣，需要借助工具來開發(fā)。

常見的編碼工具有：記事本、sublime Text、notepad++

3.3?IDE集成開發(fā)環(huán)境

用于提供程序開發(fā)環(huán)境的應(yīng)用軟件，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面工具。集成了代碼編寫功能、分析功能、編譯功能、調(diào)試功能等一體化的開發(fā)軟件服務(wù)套。

它和單純的編碼工具不同，它不僅包含了編輯器，還有分析、編譯等功能。它集成了一系列軟件開發(fā)所需的功能，所以稱為“集成開發(fā)環(huán)境”。

常見前端IDE有：VS-CODE、WebStorm、HBuilder、Dreamweaver

https://code.visualstudio.com/???--免費(fèi)

https://www.jetbrains.com/webstorm/download/??--收費(fèi)可破解

https://www.dcloud.io/??????--免費(fèi) 國產(chǎn)的

https://www.adobe.com/cn/products/dreamweaver.html????收費(fèi)可破解

https://www.jetbrains.com/idea/????收費(fèi)，也就是我們學(xué)習(xí)JAVA的開發(fā)工具--我們就使用這個(gè)

3.4?我們使用哪種工具來開發(fā)？

推薦使用WebStorm、sublimeText和HBuilder、IDEA，它們四款都是非常好用的開發(fā)工具，但在前期強(qiáng)制要求使用IDEA，我們需要對(duì)一種開發(fā)環(huán)境非常熟悉，IDEA從普及程度、認(rèn)可程度無疑都是最好的選擇，后期熟練后可以隨意使用喜歡的開發(fā)工具。

我們來比較一下這三款非常流行的軟件

3.4.1?VS-Code

Visual Studio Code（國內(nèi)一般都不喊全名，都是簡(jiǎn)稱 VS Code），是一個(gè)由微軟開發(fā)，同時(shí)支持 Windows 、 Linux 和 macOS 操作系統(tǒng)的開放代碼編輯器。

以前的前端開發(fā)者討論使用什么軟件寫代碼的時(shí)候，討論最火熱的是`webstorm`和`sublim`哪個(gè)好，自從巨硬強(qiáng)力退出 vscode 以后，sublim 已經(jīng)被干到七零八碎了。

vscode 支持內(nèi)置了 Git 版本控制，同時(shí)也具有開發(fā)環(huán)境功能，例如代碼補(bǔ)全、代碼片段和代碼重構(gòu)等；

也支持用戶個(gè)性化配置，例如改變主題顏色、鍵盤快捷方式等各種屬性和參數(shù)；

同時(shí)還在編輯器中內(nèi)置了擴(kuò)展程序管理的功能（這個(gè)是一個(gè)大殺器，一定要多用，有很多效率插件）

vscode 是一個(gè)帶 GUI 的代碼編輯器，也就是只能完成簡(jiǎn)單的代碼編輯功能，并不是一個(gè)集成開發(fā)環(huán)境/IDE（但是我感覺和IDE也差不多了）。

3.4.2?sublime Text

小巧的編碼工具，你可以把它當(dāng)作電腦中的記事本來使用，假如它并不能滿足你的需要，你可以另外給它添加各種插件，來擴(kuò)展它。優(yōu)點(diǎn)是體積小，打開速度快。

3.4.3?HBuilder

國內(nèi)優(yōu)秀的前端開發(fā)工具，代碼提示完善，編碼會(huì)很快，但體積比較大186M，sublimeText只有5M左右，并且在功能方面不如webstorm。

3.4.4??WebStorm

WebStorm是前端開發(fā)的必備利器，JavaScript開發(fā)的不二之選。代碼補(bǔ)全包含了所有流行的庫，比如JQuery, YUI, Prototype等，html和js的提示不在話下。

3.5?IDEA下創(chuàng)建靜態(tài)項(xiàng)目

3.5.1?新建項(xiàng)目

3.5.2?新建HTML頁面

4.?第一個(gè)HTML程序

HTML文件是普通的文本文件，只是文件擴(kuò)展名為：.html或者.htm或者.HTML或者.HTM。下面我們開始創(chuàng)建我們的第一個(gè)HTML程序。

<html>定義 HTML 文檔，這個(gè)元素我們?yōu)g覽器看到后就明白這是個(gè)HTML文檔了，所以你的其它元素要包裹在它里面，標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。

運(yùn)行

4.1?<head>標(biāo)簽

標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head>?中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。

下面這些標(biāo)簽可用在 head 部分：
<title>、<meta>、<link>、<script>、<style>。

應(yīng)該把?<head>?標(biāo)簽放在文檔的開始處，緊跟在?<html>?后面，并處于?<body>?標(biāo)簽之前。文檔的頭部經(jīng)常會(huì)包含一些?<meta>?標(biāo)簽，用來告訴瀏覽器關(guān)于文檔的附加信息。

4.2?<title>標(biāo)簽

1.可定義文檔的標(biāo)題。

2.它顯示在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。

3.當(dāng)把文檔加入用戶的收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔的默認(rèn)名稱。

4.title寫和你網(wǎng)頁相關(guān)的關(guān)鍵詞有利于SEO優(yōu)化。

4.3?<meta>標(biāo)簽

元素可提供有關(guān)頁面的元信息（meta-information），用來向?yàn)g覽器或搜索引擎描述頁面，比如文檔的描述和關(guān)鍵詞，它只可以放在head中，屬于元信息標(biāo)簽。

常見的meta有：

keywords(關(guān)鍵字)　keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么

?

description(網(wǎng)站內(nèi)容描述) description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

?服務(wù)器發(fā)送文件類型,在HTML5中被精簡(jiǎn)為了以下代碼：

4.4?<link>標(biāo)簽

link標(biāo)簽定義文檔與外部資源的關(guān)系，最常見的用途是鏈接樣式表。

<link rel="stylesheet" type="text/css" href="/html/csstest.css">

link標(biāo)簽我們?cè)趯W(xué)習(xí)第二章CSS的時(shí)候再細(xì)講。

4.5?<script>標(biāo)簽

標(biāo)簽用于定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。

通過src引入外部腳本

在script標(biāo)簽中寫腳本

4.6?<style>標(biāo)簽

style標(biāo)簽用于為 HTML 文檔定義樣式信息，在 style 中，您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔。

script標(biāo)簽我們?cè)趯W(xué)習(xí)第二章JavaScript的時(shí)候再細(xì)講。

<style>
????/* 需要執(zhí)行的代碼?*/
</style>

一個(gè)完整的網(wǎng)頁，分三部分：結(jié)構(gòu)、樣式、行為。而我們學(xué)習(xí)的html主要用來寫頁面的結(jié)構(gòu)，css用來寫頁面的樣式，javascript規(guī)定行為。

4.7?<body>標(biāo)簽

body 元素定義文檔的主體，所有用戶可直接看到的元素都在這里。

4.7.1?background屬性

background 規(guī)定文檔的背景圖像。

<body background="img/tly.jpg">
????<!--別的標(biāo)簽-->
</body>

4.7.2?bgcolor屬性

bgcolor規(guī)定文檔的背景顏色。

<body bgcolor="yellow">
????<!--別的標(biāo)簽-->
</body>

background和bgcolor是可以一起設(shè)置的，但它以background為準(zhǔn)，兩個(gè)都加上后刷新頁面，可以看到背景色。

4.8?<!-- 注釋 -->

注釋用于在源代碼中插入注釋，注釋不會(huì)顯示在瀏覽器中。這樣做有助于在以后的時(shí)間對(duì)代碼的編輯，當(dāng)編寫了大量代碼時(shí)尤其有用。

<body>
????<!--這是一段注釋，注釋不會(huì)在瀏覽器中顯示-->
????<p>這是一段普通的段落。</p>
</body>

單行注釋快捷鍵：Ctrl+/

多行注釋快捷鍵：Ctrl+Shift+/

5.?HTML基礎(chǔ)標(biāo)簽

?

5.1?<br>標(biāo)簽和<hr>標(biāo)簽

5.1.1?<br>標(biāo)簽

它是換行標(biāo)簽，也是自閉合標(biāo)簽（意味著它沒有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：<br></br>）。

示例：在這個(gè)段落中包含很多行，可以用<br>為段落分行。

5.1.2?<hr> 標(biāo)簽

在 HTML 頁面中創(chuàng)建一條水平線，可以在視覺上將文檔分隔成各個(gè)部分。

<hr>?標(biāo)簽可以設(shè)置align屬性、width屬性、size屬性，width屬性指定水平線的寬度，size屬性指定高度。

?

5.2?標(biāo)題標(biāo)簽

<h1> 到 <h6> 標(biāo)簽可定義標(biāo)題。

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

由于 h 元素?fù)碛写_切的語義，因此不要利用標(biāo)題標(biāo)簽來改變字體的大小。相反，我們應(yīng)當(dāng)使用層疊樣式表（CSS）來達(dá)到漂亮的顯示效果。

h標(biāo)簽擁有align屬性，它有如下幾個(gè)常用值

使用align屬性讓標(biāo)題居中：

5.3?段落標(biāo)簽

注意：瀏覽器會(huì)忽略了源代碼中的排版，省略了多余的空格和換行，只保留一個(gè)空格。

p元素也可以使用align屬性，align是通用屬性，塊元素都可以使用。

5.4?<pre>標(biāo)簽

被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。

<pre>?標(biāo)簽的一個(gè)常用應(yīng)用就是用來表示計(jì)算機(jī)的源碼。

5.5?格式標(biāo)簽

5.5.1?<b>標(biāo)簽

呈現(xiàn)粗體文本效果。它屬于字體樣式元素，并不反對(duì)使用這些標(biāo)簽，但是如果只是希望通過這些標(biāo)簽改變文本的樣式，建議使用樣式表。

<body>
????<p>這是普通文本<b>這是粗體文本</b>這是普通文本</p>
</body>

5.5.2??<del>標(biāo)簽??<s>

定義被刪除文本，用它包含的內(nèi)容會(huì)顯示一道中劃線。它屬于字體樣式元素，并不反對(duì)使用這些標(biāo)簽，但是如果只是希望通過這些標(biāo)簽改變文本的樣式，建議使用樣式表。

<body>
????<del>這是以一段被刪除的文本</del>
????<p>也可<del>嵌套</del>使用</p>
</body>

5.5.3?<em>標(biāo)簽

用它包裹的內(nèi)容是告訴瀏覽器要強(qiáng)調(diào)的內(nèi)容，用em包裹的這段文字用斜體來顯示。在文本中加入強(qiáng)調(diào)也需要有技巧，如果強(qiáng)調(diào)太多，有些重要的短語就會(huì)被漏掉；如果強(qiáng)調(diào)太少，就無法真正突出重要的部分。

<body>
????<p>我是一個(gè)<em>好人</em></p>
</body>

5.5.4?<i>標(biāo)簽

簽顯示斜體文本效果。它的顯示和em顯示的一樣，不過它對(duì)于瀏覽器來說沒有強(qiáng)調(diào)的意思，建議使用樣式表。

<body>
????<em>我想強(qiáng)調(diào)此處的文字</em>
????<i>雖然也是斜體字，但這里是i標(biāo)簽</i>
</body>

5.5.5?<strong>標(biāo)簽

和<em>?標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。<strong >?和?<em>，一個(gè)是斜體顯示，一個(gè)正常加粗顯示。

<body>
????<p>我是一個(gè) <strong>好人</strong></p>
</body>

5.5.6?<u> 標(biāo)簽

為文本添加下劃線，盡量避免為文本加下劃線。

<body>
????<u>我自帶下劃線</u>
</body>

5.5.7?<sup>標(biāo)簽和<sub> 標(biāo)簽

<sup> 標(biāo)簽：定義上標(biāo)文本。

<sub> 標(biāo)簽：定義下標(biāo)文本。

<body>
????<!--(a-b)2=a2-2ab+b2-->
????(a-b)²=a²-2ab+b²
????下標(biāo)測(cè)試_{這是下標(biāo)}
</body>

5.6?<img> 標(biāo)簽

向網(wǎng)頁中嵌入一幅圖像。<img> 標(biāo)簽有兩個(gè)必需的屬性：src 屬性 和 alt 屬性。

alt屬性：如果無法顯示圖像，瀏覽器將顯示替代文本。

src屬性：它的值是圖像文件的 URL，也就是引用該圖像的文件的的絕對(duì)路徑或相對(duì)路徑。

title屬性：鼠標(biāo)放上時(shí)顯示的提示文字。

width屬性：設(shè)置圖像的寬。如果只設(shè)置寬度屬性，則高度會(huì)等比例縮放。

height屬性：設(shè)置圖像的高。如果只設(shè)置高度屬性，則寬度會(huì)等比例縮放。

5.7?<a> 標(biāo)簽

<a>標(biāo)簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

<a>標(biāo)簽最重要的屬性是 href 屬性，它指向需要跳轉(zhuǎn)網(wǎng)頁的地址。

target屬性：規(guī)定在何處打開鏈接文檔。

name 屬性：屬性規(guī)定錨（anchor）的名稱。

【隨堂練習(xí)】

1、將圖像作為鏈接。

5.8?<span>標(biāo)簽和<div>標(biāo)簽

5.8.1?<span> 標(biāo)簽??

它用來組合文檔中的行內(nèi)元素，以便通過層疊樣式表（CSS）來格式化它們。
如果不對(duì) span 應(yīng)用樣式，那么 span 元素中的文本與其他文本不會(huì)任何視覺上的差異，<span>和<a>標(biāo)簽相比，它沒有任何的特殊含義。

<body>
????<span>這是span標(biāo)簽</span>
????這不是span標(biāo)簽
</body>

單純是就內(nèi)容來說，只加span標(biāo)簽和未加span標(biāo)簽兩者并沒差異，但加了它后寫樣式時(shí)選擇器更方便選取。

注意：<span>標(biāo)簽和我們前面學(xué)習(xí)的<h1>標(biāo)簽和<p>標(biāo)簽不同，<span>標(biāo)簽不是單獨(dú)占一行，對(duì)于不是獨(dú)占一行的元素，我們稱之為行內(nèi)元素。

5.8.2?<div>標(biāo)簽

可定義文檔中的分區(qū)或節(jié)，標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分，它可以作為元素的組織工具。<div>和<h1>和<p>標(biāo)簽相比，它沒有任何的特殊含義。

<body>
????<div>
????????<span>我是被div標(biāo)簽包裹的span標(biāo)簽</span>
????</div>
</body>

注意：<div>標(biāo)簽和我們前面學(xué)習(xí)的<h1>標(biāo)簽和<p>標(biāo)簽一樣，<div>標(biāo)簽單獨(dú)占一行，對(duì)于獨(dú)占一行的元素，我們稱之為塊元素。

5.9?列表

5.9.1?無序列表

無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記，無序列表沒有順序。

無序列表始于?<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>。

<body>
????<h1>知名手機(jī)廠商:</h1>
????<ul>
????????<li>華為</li>
????????<li>小米</li>
????????<li>三星</li>
????????<li>蘋果</li>
????</ul>
</body>

改變項(xiàng)目符號(hào)，在ul上加type屬性，值有以下4個(gè)可選擇

type="disc" 默認(rèn)黑色圓點(diǎn)

type="circle" 空心圓點(diǎn)

type="square" 方塊

type="none" 取消默認(rèn)樣式

<body>
????<h1>經(jīng)典電影系列:</h1>
????<ul type="square">
????????<li><a href="#">《警察故事》</a></li>
????????<li><a href="#">《速度與激情》</a></li>
????????<li><a href="#">《復(fù)仇者聯(lián)盟》</a></li>
????????<li><a href="#">《戰(zhàn)狼》</a>></li>
????</ul>
</body>

5.9.2?有序列表

有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記，有序列表是有順序的。

有序列表始于<ol>?標(biāo)簽，每個(gè)列表項(xiàng)始于?<li>?標(biāo)簽。

<body>
????<h1>2020年手機(jī)銷售排名:</h1>
????<ol>
????????<li>三星</li>
????????<li>蘋果</li>
????????<li>華為</li>
????????<li>小米</li>
????</ol>
</body>

無序列表可以換項(xiàng)目符號(hào)，有序列表也可以換類型，在ol標(biāo)簽中添加type屬性即可。

數(shù)字列表 默認(rèn)即是數(shù)字列表

字母列表 type="A" type="a"

羅馬字母列表 type="I" type="i"

<body>
????<h1>2020年手機(jī)銷售排名:</h1>
????<ol type="A">
????????<li>華為</li>
????????<li>三星</li>
????????<li>蘋果</li>
????????<li>小米</li>
????</ol>
</body>

6.?HTML表格標(biāo)簽

表格是一種組織整理數(shù)據(jù)的手段，在HTML當(dāng)中表格使用<table>?標(biāo)簽來定義。每個(gè)表格均有若干行（由<tr>?標(biāo)簽定義），每行被分割為若干單元格（由?<td>?標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

6.1?表格邊框?qū)傩?/strong>

如果不定義邊框?qū)傩?，表格將不顯示邊框，但是大多數(shù)時(shí)候，我們希望顯示邊框。

我們可以在在table標(biāo)簽中添加border屬性，border的屬性值可以直接位數(shù)字，省略單位像素（px）。

以上代碼在Chrome瀏覽器中顯示的效果為：

?

那么我們?cè)撛趺慈∠鹴able表格中的雙層邊框呢？我們可以把cellspacing的屬性的值設(shè)置為0。

cellspacing是表格里單元格之間的距離; cellpadding是表格里單元格內(nèi)的空白部分;

以上代碼在Chrome瀏覽器中顯示的效果為：

?

6.2?表格的表頭

表格的表頭使用?<th>?標(biāo)簽進(jìn)行定義。

大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：

以上代碼在Chrome瀏覽器中顯示的效果為：

?

6.3?表格的標(biāo)題

在<table>標(biāo)簽中添加<caption>標(biāo)簽。

6.4?表格跨行跨列

在<td>或<th>標(biāo)簽中添加colspan屬性實(shí)現(xiàn)跨列操作。

以上代碼在Chrome瀏覽器中顯示的效果為：

?

在<td>或<th>標(biāo)簽中添加rowspan屬性實(shí)現(xiàn)跨行操作。

以上代碼在Chrome瀏覽器中顯示的效果為：

?

7.?HTML表單標(biāo)簽

HTML 表單用于搜集不同類型的用戶輸入。

一個(gè)完整的表單包含三個(gè)基本組成部分：表單標(biāo)簽、表單域、表單按鈕。

7.1?表單標(biāo)簽集合

<!--

????????https://www.baidu.com/?uName=%E5%BC%A0%E4%B8%89&pwd=123456&gender=0&hobby=smoking&hobby=code

????????form標(biāo)簽：表單標(biāo)簽，為input、select、textarea標(biāo)簽的容器

????????????action屬性：指定提交數(shù)據(jù)的地址，請(qǐng)求地址

????????????method屬性：指定請(qǐng)求方式

1）get:會(huì)將參數(shù)信息在地址欄后面顯示出來;傳遞的數(shù)據(jù)大小有限只有幾十kb

2)post:會(huì)將參數(shù)隱藏傳遞;傳遞數(shù)據(jù)大小無上限

????????input標(biāo)簽：文本輸入框

????????????name屬性: 為當(dāng)前標(biāo)簽取一個(gè)名字，取值可以重復(fù)，名字可以包含數(shù)字、字母，不能以數(shù)字作為開頭

????????????value屬性：保存標(biāo)簽中定義或者輸入的值

????????????type屬性：指定文本輸入框的類型，取值有: text(文本輸入框)、password(密碼框)、radio(單選框)、checkbox(復(fù)選框)、file(文件上傳)、????hidden、submit、reset

????????????readonly屬性：只讀，用戶只能看，不能編輯，數(shù)據(jù)會(huì)提交給后臺(tái)

????????????disabled屬性: 禁用，灰色顯示，當(dāng)點(diǎn)擊登錄按鈕時(shí)，數(shù)據(jù)不會(huì)提交給后臺(tái)

????????????radio與checkbox具有: checked屬性，可以做默認(rèn)值選擇，取值與屬性名一樣

????????????file具有:multiple，代表多選，取值與屬性名一樣

????-->

7.2?表單標(biāo)簽

HTML 表單用于收集用戶輸入，表單使用<form>?標(biāo)簽創(chuàng)建。表單可包含文本字段、復(fù)選框、單選框、提交按鈕等等。

塊級(jí)標(biāo)簽:獨(dú)占一行很霸道。div、h1~h6、p

行級(jí)標(biāo)簽：一行順著寫，寫滿才換行。a、img、span

注意：<form>元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行。

<body>
????<form>
????????form elements
????</form>
</body>

7.2.1?form表單的屬性

action="url"：請(qǐng)求地址，指定form表單向何處發(fā)送數(shù)據(jù)。

name="login"：作用是給表單起名，為了便于我們操作。

enctype ="string"：規(guī)定在發(fā)送表單數(shù)據(jù)之前，如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。通常在使用文件上傳時(shí)，我們會(huì)enctype="multipart/form-data"，以二進(jìn)制傳輸。

method ="get/post"：指定表單以何種方式發(fā)送到指定的服務(wù)器程序，該屬性定義瀏覽器將表單中的數(shù)據(jù)提交給服務(wù)器處理程序的方式。關(guān)于method的取值，最常用的是get和post。默認(rèn)為get

Get請(qǐng)求：會(huì)將name屬性值作為key，value屬性值作為實(shí)際內(nèi)容，在地址欄后面顯示出來;傳送給后臺(tái)的數(shù)據(jù)最大只有幾十KB

Post請(qǐng)求:會(huì)將name屬性值作為key，value屬性值作為實(shí)際內(nèi)容，傳送數(shù)據(jù)給后臺(tái)時(shí)會(huì)隱藏?cái)?shù)據(jù);

傳遞的數(shù)據(jù)量無上限

7.3?表單域

要提交數(shù)據(jù)的表單域必須加name屬性。不然，該表單域的數(shù)據(jù)不會(huì)提交到服務(wù)器上。

7.3.1?<input>標(biāo)簽?

input用于收集用戶信息，根據(jù)不同的類型(type)顯示不同的形式。input是空標(biāo)簽，它沒有結(jié)束標(biāo)簽，在開始標(biāo)簽中結(jié)束。

<input>?元素根據(jù)不同的type屬性，可以變化為多種形態(tài)。

<input>?元素設(shè)置name屬性，用于網(wǎng)絡(luò)請(qǐng)求時(shí)提交對(duì)應(yīng)輸入的字段。

type="text" 文本框

定義單行的輸入字段，用戶可在其中輸入文本。它是一個(gè)單行文本框，input的默認(rèn)類型即是text類型。

<body>
????<form action="https://www.baidu.com">
????????用戶名：<input ?name="userName" type="text">
????</form>
</body>

type="password" 密碼框

類型為password時(shí)，它用于收集用戶輸入的密碼，在你輸入時(shí)，瀏覽器會(huì)把輸入的內(nèi)容以符號(hào)來代替。

<body>
????<form action="https://www.baidu.com">
????????密碼：<input ?name="passworld" type="password">
????</form>
</body>

?

文本框和密碼框都可以添加placeholder屬性，用于設(shè)置輸入字段預(yù)期值的提示信息。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

type="radio" 單選框

類型為radio時(shí)，用于定義單選按鈕，name屬性值相同的input單選框只能有一個(gè)被選中。

checked="checked"?設(shè)置默認(rèn)選中的單選框。
value="1"是提交到服務(wù)器時(shí)給后臺(tái)程序員們看的。

<body>
????<form action="https://www.baidu.com">
????????性別：男 <input name="sex" checked="checked" type="radio" value="1">
?????????????女 <input name="sex" type="radio" value="2">
????</form>
</body>

type="checkbox" 復(fù)選框

類型為checkbox時(shí)，用于定義復(fù)選按鈕，復(fù)選框允許用戶在一定數(shù)目的選擇中選取一個(gè)或多個(gè)選項(xiàng)。

<body>
????<form action="https://www.baidu.com">
????????興趣愛好：籃球 <input type="checkbox" name="like1" value="1" checked>
?????????????????足球 <input type="checkbox" name="like2" value="2">
?????????????????游泳 <input type="checkbox" name="like3" value="3">
?????????????????跑步 <input type="checkbox" name="like4" value="4">
????</form>
</body>

type="file" 文件上傳

類型為file時(shí)，默認(rèn)為單文件上傳。

multiple="multiple"?設(shè)置為多文件上傳。

<body>
????<form action="https://www.baidu.com">
????????<input type="file" name="file" multiple="multiple">
????</form>
</body>

type="hidden" 隱藏字段

隱藏字段對(duì)于用戶是不可見的。隱藏字段通常會(huì)存儲(chǔ)一個(gè)默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。

<body>
????<form action="https://www.baidu.com">
????????<input type="hidden" name="hidden" value="123">
????</form>
</body>

7.3.2?<select> 下拉列表

<select> 元素定義下拉列表，<option>元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)，通過添加 selected 屬性來定義預(yù)定義選項(xiàng)。

<body>
????<form action="https://www.baidu.com">
????????選擇您喜歡的水果：
????????<select name="select">
????????????<option value="apple">蘋果</option>
????????????<option value="banana">香蕉</option>
????????????<!--榴蓮設(shè)置為選中狀態(tài)-->
????????????<option selected value="durian">榴蓮</option>
????????</select>
????</form>
</body>

單選按鈕、復(fù)選框默認(rèn)選中用：checked屬性。

下拉列表使用：selected屬性。

使用size屬性設(shè)置下拉列表展開，使用multiple屬性設(shè)置多選。

<body>
????<form action="https://www.baidu.com">
????????<select name="select" size="4" multiple id="">
????????????<option value="1">重慶</option>
????????????<option value="2">武漢</option>
????????????<option value="3">北京</option>
????????????<option value="4">上海</option>
????????</select>
????????<input type="submit" value="提交">
????</form>
</body>

7.3.3?<textarea> 文本域

<textarea> 元素定義多行輸入字段（文本域）

cols：規(guī)定文本區(qū)內(nèi)的可見寬度。

rows：規(guī)定文本區(qū)內(nèi)的可見行數(shù)。

<body>
????<form action="https://www.baidu.com">
????????<textarea name="text" cols="50" rows="10"></textarea>
????</form>
</body>

文本域可以添加placeholder屬性，用于設(shè)置輸入字段預(yù)期值的提示信息。

7.4?表單按鈕

type="reset" 重置按鈕

重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。

value="重置"設(shè)置重置按鈕上顯示的文字。

<body>
????<form action="https://www.baidu.com">
????????用戶名：<input name="userName" type="text">
????????性別：男 <input name="sex" checked="checked" type="radio" value="1">
????????女 <input name="sex" type="radio" value="2">
????????<input type="reset" value="重置">
????</form>
</body>

type="submit" 提交按鈕

type="submit" 定義提交按鈕。提交按鈕用于向服務(wù)器發(fā)送表單數(shù)據(jù)，數(shù)據(jù)會(huì)發(fā)送到表單的 action 屬性中指定的頁面。

value="提交"設(shè)置提交按鈕上顯示的文字。

type="button" 普通按鈕

button類型的只是一個(gè)普通的按鈕，而submit有一個(gè)提交的作用，在沒有加js代碼的情況下，button只是個(gè)裝飾。

<body>
????<form action="https://www.baidu.com">
????????<input type="button" value="普通按鈕">
????</form>
</body>

type="image" 提交按鈕

image類型的input也是具有一個(gè)提交的作用，不同的是可以指定一幅圖片來作為按鈕，不提倡使用image，因?yàn)樗袝r(shí)候會(huì)提交兩次。

<body>
????<form action="https://www.baidu.com">
????????<input type="image" src="img/bg.jpg">
????</form>
</body>

8.?框架和實(shí)體字符

8.1?frameset框架集

frameset標(biāo)簽可定義一個(gè)框架集，在同一個(gè)瀏覽器窗口中被用來組織多個(gè)窗口（框架），每個(gè)窗口（框架）存有獨(dú)立的HTML文檔。在使用frameset時(shí)，不可以同時(shí)存在body標(biāo)簽，它和body標(biāo)簽是同級(jí)的。

在HTML5當(dāng)中，為了推進(jìn)新的web前端開發(fā)模式，frameset布局將不再被推薦，但是使用它做為企業(yè)后臺(tái)界面開發(fā)的還是非常多。

框架結(jié)構(gòu)標(biāo)簽（<frameset>）

l?框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架

l?每個(gè) frameset 定義了一系列行或列

l?rows/cols的值規(guī)定了每行或每列占據(jù)屏幕的面積

8.1.1?框架標(biāo)簽（frame）

frame 標(biāo)簽定義了放置在每個(gè)框架中的 HTML 文檔。

noresize="noresize"?規(guī)定無法調(diào)整框架的大小。

frameborder="no/yes"?規(guī)定是否顯示框架周圍的邊框，同時(shí)屬性值采用0和1也可以。

scrolling="no/yes"?規(guī)定是否在框架中顯示滾動(dòng)條，作用于frame。

【實(shí)例一】

展示效果為：

?

【實(shí)例二】

展示效果為：

【實(shí)例三】

展示效果為：

8.2?內(nèi)聯(lián)框架

iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架），用于一個(gè)網(wǎng)頁中局域顯示另外網(wǎng)頁。
iframe是屬于內(nèi)聯(lián)框架，它是body的子級(jí)，和body是父子關(guān)系。
iframe作為一個(gè)普通元素放在body里，而frameset是代替了body元素。
scrolling="yes/no"?規(guī)定是否在框架中顯示滾動(dòng)條。

<iframe>標(biāo)簽屬性：

1.?width 可設(shè)置內(nèi)聯(lián)框架的寬

2.?height 可設(shè)置內(nèi)聯(lián)框架的高

3.?name 設(shè)置框架名稱

4.?src 設(shè)置頁面的路徑

<body>
????<iframe src="http://www.baidu.com" width="300px" height="300px"></iframe>
</body>

8.3?字符實(shí)體

HTML 中的預(yù)留字符必須被替換為字符實(shí)體，在 HTML 中，某些字符是預(yù)留的。

在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。

如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。

?9.?HTML課后作業(yè)

9.1?實(shí)現(xiàn)小猴相冊(cè)布局<center>

9.2?實(shí)現(xiàn)用戶注冊(cè)表布局

9.3?實(shí)現(xiàn)學(xué)生信息表布局

9.4?實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的布局

更多干貨我們下期再說！

下期會(huì)分享

第四章節(jié)

HTML_CSS_JavaScript

第三章節(jié)

相關(guān)知識(shí)~

下期見！

標(biāo)簽：