關於HTML 筆記篇

阿新 • • 發佈：2018-12-14

學習目標:

瞭解常用瀏覽器
掌握WEB標準
理解標籤語義化
掌握常用的排版標籤
掌握常用的文字格式化影象連結等標籤
掌握三種列表標籤
掌握表格標籤
掌握表格標籤
掌握表單標籤

typora-copy-images-to: media

自我介紹

前端基礎 html +css 基礎班 html 2 +css 7天 9 天傳統佈局 + 3天 html 5 +css3 基礎

就業班 js 移動web php + 專案 15 node vue 框架微信 … 大前端

HTML 第一天目標

能夠寫出基本的頁面（裡面包含圖片、各種標籤和連結）

開發工具

我們主要用的開發工具有 chrome 、 sublime 、 photoshop

瀏覽器（顯示）

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

檢視瀏覽器佔有的市場份額（知曉）

檢視網站： http://tongji.baidu.com/data/browser

這些工具你認識幾個？

sublime（書寫）

普通青年 Dreamweaver

文藝青年 sublime

高手和傻子用記事本

其實。。。。

Photoshop(協助)

1498465020015

PS 工具是我們使用頻率比較高的軟體之一，我們學習PS目的不是為了設計海報做電商和UI的，而是要求：

熟練的切圖
能和網站美工美眉有共同話題。。。。。

認識網頁

網頁主要由文字、影象和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音訊、視訊以及Flash等。

思考：  網頁是如何形成的呢?

常見瀏覽器核心介紹

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

瀏覽器核心（理解）

瀏覽器核心又可以分成兩部分：渲染引擎(layout 
 engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的相容性和效能。核心的種類很多，如加上沒什麼人使用的非商業的免費核心，可能會有10多種，但是常見的瀏覽器核心可以分這四種：Trident、Gecko、Blink、Webkit。

（1）Trident(IE核心)

國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 “相容模式”。

代表： IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。

Window10 釋出後，IE 將其內建瀏覽器命名為 Edge，Edge 最顯著的特點就是新核心 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 核心)： Mozilla FireFox(火狐瀏覽器) 採用該核心，Gecko 的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。可惜這幾年已經沒落了，比如開啟速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

（3） webkit(Safari)

Safari 是蘋果公司開發的瀏覽器，所用瀏覽器核心的名稱是大名鼎鼎的 WebKit。

現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所裡面了。

代表瀏覽器：傲遊瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 預設瀏覽器，

（4） Chromium/Blink(chrome)

在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。

大部分國產瀏覽器最新版都採用Blink核心。二次開發

（5） Presto(Opera)

Presto（已經廢棄）是挪威產瀏覽器 opera 的 “前任” 核心，為何說是 “前任”，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

瞭解一點：

移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。

Android手機而言，使用率最高的就是Webkit核心，大部分國產瀏覽器宣稱的自己的核心，基本上也是屬於webkit二次開發。

iOS以及WP7平臺上，由於系統原因，系統大部分自帶瀏覽器核心，一般是Safari或者IE核心Trident的

Web標準（重點）

通過以上瀏覽器的核心不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。

問：  哪個語言再全國基本都可以聽得懂？

Web 標準的好處

1、讓Web的發展前景更廣闊
2、內容能被更廣泛的裝置訪問
3、更容易被搜尋引擎搜尋
4、降低網站流量費用
5、使網站更易於維護
6、提高頁面瀏覽速度

Web 標準構成

Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。

主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

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

理想狀態我們的原始碼： .HTML .css .js

直觀感受：

總結WEB標準：

結構標準：決定你是否有個好天然身體

表現標準：決定你是否打扮的美麗外觀

行為標準：決定你是否有吸引人的行為

課堂一練：

1.關於WEB標準下列說法正確的是:

A html決定頁面的行為，css決定頁面的樣式，js決定頁面的結構

B html決定頁面的樣式，css決定頁面的結構，js決定頁面的行為

C html決定頁面的結構，css決定頁面的樣式，js決定頁面的行為

D 以上都不正確

2 web 標準裡邊規定三層分離不包括哪部分

A．HTML

B．CSS

C．JavaScript

D．PHP

3.關於WEB標準下列說法正確的是

A．html相當於人的動作行為，CSS相當於人的穿著打扮，javascript相當於人的骨架結構；

B．html相當於人的骨架結構，CSS相當於人的穿著打扮，javascript相當於人的動作行為；

C．html相當於人的穿著打扮，CSS相當於人的骨架結構，javascript相當於人的動作行為；

D．html相當於人的骨架結構，CSS相當於人的動作行為，javascript相當於人的穿著打扮；

HTML 初識

一般先學習HTML+CSS，這裡我們先定一個小目標，先學HTML,後學習CSS。

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言”。是用來描述網頁的一種語言。

所謂超文字，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連線。

<h1> 我是一個大標題 </h1>

注意：體會文字標籤語言幾個詞語

HTML 指的是超文字標記語言 (**H**yper **T**ext **M**arkup **L**anguage)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)

總結： HTML 作用就是用標記標籤來描述網頁，把網頁內容在瀏覽器中展示出來。

用文字來描述網頁標籤

HTML骨架格式

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言語法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

課堂練習1：書寫我們的第一個HTML 頁面！

新建一個demo 的 TXT 檔案。
裡面寫入剛才的HTML 骨架。月薪過萬你我之間黑馬洗練一飛沖天
把字尾名改為 .HTML。
右擊–谷歌瀏覽器開啟。

~~~
1 HTML標籤：

作用所有HTML中標籤的一個根節點。最大的標籤根標籤

2 head標籤：文件的頭部

文件的頭部描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。

注意在head標籤中我們必須要設定的標籤是title

3.title標籤：文件的標題

作用：讓頁面擁有一個屬於自己的標題。

4.body標籤：文件的主體以後我們的頁面內容基本都是放到body裡面的

body 元素包含文件的所有內容（比如文字、超連結、影象、表格和列表等等。）
~~~

為了便於記憶，我們請出剛才要辭職回家養豬的二師兄來幫忙，我稱之為豬八戒記憶法

HTML標籤分類

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標籤，如上面提到的 <HTML>、<head>、<body>都是HTML骨架結構標籤。所謂標籤就是放在“< >” 標籤符中表示某個功能的編碼命令，也稱為HTML標籤或 HTML元素

1.雙標籤

~html
<標籤名> 內容

HTML標籤關係

標籤的相互關係就分為兩種：

1.巢狀關係

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

2.並列關係

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

倡議：如果兩個標籤之間的關係是巢狀關係，子元素最好縮排一個tab鍵的身位。如果是並列關係，最好上下對齊。

課堂一練

請問下列哪個標籤是錯誤的？

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

B  <strong><div></div></strong>

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

D  <body><div></div></body>

sublime 一些常用快捷鍵點我檢視

~
再頁面中輸入以下2個單詞
1. html: 5
2. !
在sublime裡面然後按下tab鍵盤即可生成HTML骨架
~

文件型別

~html

~

同學你用啥手機？你咋回答？

這句話就是告訴我們使用哪個html版本？我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴使用者和瀏覽器我們使用的版本號。

標籤位於文件的最前面，用於向瀏覽器說明當前文件使用哪種 HTML 或 XHTML 標準規範，必需在開頭處使用標籤為所有的XHTML文件指定XHTML版本和型別，只有這樣瀏覽器才能按指定的文件型別進行解析。

注意：一些老網站可能用的還是老版本的文件型別比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文件型別相容很好(向下相容的原則)，所以大家放心的使用HTML5的文件型別就好了。

字符集

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

gb2312 簡單中文包括6763個漢字

BIG5 繁體中文港澳臺等用

GBK包含全部中文字元是GB2312的擴充套件，加入對繁體字的支援，相容GB2312

UTF-8則包含全世界所有國家需要用到的字元

記住一點，以後我們統統使用UTF-8 字符集, 這樣就避免出現字符集不統一而引起亂碼的情況了。

HTML標籤的語義化

白話：所謂標籤語義化，就是指標籤的含義。

為什麼要有語義化標籤

方便程式碼的閱讀和維護
同時讓瀏覽器或是網路爬蟲可以很好地解析，從而更好分析其中的內容
使用語義化標籤會具有更好地搜尋引擎優化

核心：合適的地方給一個最為合理的標籤。

語義是否良好：當我們去掉CSS之後，網頁結構依然組織有序，並且有良好的可讀性。

白話，一眼看去，就知道那個是重點，結構是什麼，知道每塊的內容是幹啥的。

遵循的原則：先確定語義的HTML ，再選合適的CSS。

HTML常用標籤

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標籤，認識標籤就可以了。不會再給結構標籤指定樣式了。

HTML標籤有很多，這裡我們學習最為常用的，後面有些較少用的，我們可以查下手冊就可以了。

排版標籤

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

標題標籤 (熟記)

單詞縮寫： head 頭部. 標題 title 文件標題

為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即

、

和

~
標題標籤語義：作為標題使用，並且依據重要性遞減
~

其基本語法格式如下：

<hn>   標題文字   </hn>

注意： h1 標籤因為重要，儘量少用，不要動不動就向你扔了一個h1。一般h1 都是給logo使用，或者頁面中最重要標題資訊。

    傳智播客學前端，
　　前端學院四十班。
　　新班強哥講臺站，
　　又帶新顏技術鑽。
　　標題一共六級選，
　　具體效果重新整理見。
　　        ------強哥

段落標籤( 熟記)

單詞縮寫： paragraph 段落 [ˈpærəgræf] 無須記這個單詞

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

~~~html

文字內容

~~~

是HTML文件中最常見的標籤，預設情況下，文字在一個段落中會根據瀏覽器視窗的大小自動換行。

水平線標籤(認識)

單詞縮寫： horizontal 橫線 [ˌhɔrəˈzɑntl] 同上

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

就是建立橫跨網頁水平線的標籤。其基本語法格式如下：

<hr />是單標籤

在網頁中顯示預設樣式的水平線。

課堂練習2：新聞頁面

換行標籤(熟記)

單詞縮寫： break 打斷 ,換行

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

<br />

這時如果還像在word中直接敲回車鍵換行就不起作用了。

課堂一練

關於標籤下列說法正確的是

(A) P1是段落標籤

(B) H1 是標題標籤

(D) Br 是一條直線

2 關於標籤下列說法不正確的是

(A) H標籤有6個等級分別是

和

(B) h1到h6 文字從小到大

(D) P是段落標籤會給文字加上段落的語義

div span標籤(重點)

div span 是沒有語義的是我們網頁佈局主要的2個盒子 css+div

div 就是 division 的縮寫分割，分割槽的意思其實有很多div 來組合網頁。

span, 跨度，跨距；範圍

語法格式：

~~~html

這是頭部今日價格 ~~~

文字格式化標籤(熟記)

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

b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈

標籤屬性

屬性就是特性比如手機的顏色手機的尺寸，總結就是手機的。。

手機的顏色是黑色手機的尺寸是 8寸

水平線的長度是 200

圖片的寬度是 300 鍵值對

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

<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>

在上面的語法中，

1.標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。

2.屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。

3.任何標籤的屬性都有預設值，省略該屬性則取預設值。

採取鍵值對的格式 key=”value” 的格式

比如:

<hr width="400" />

屬性是寬度

值是 400

提倡：儘量不使用樣式屬性。

影象標籤img (重點)

單詞縮寫： image 影象

HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示影象就需要使用影象標籤，接下來將詳細介紹影象標籤以及和他相關的屬性。其基本語法格式如下：

該語法中src屬性用於指定影象檔案的路徑和檔名，他是img標籤的必需屬性。

<img src="影象URL" />

當網頁顯示圖片時,滑鼠滑上圖片顯示文字描述是以下哪個屬性**

(A) 設定alt屬性

(B) 設定title屬性

(D) 設定src 屬性

2 在HTML中，使用標籤插入影象，下列選項關於的src屬性說法正確的是

(A) 用來設定圖片的格式

(B) 用來設定圖片的所在位置

(D) 用來設定圖片是否能正確顯示

連結標籤(重點)

單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋錨, 鐵錨的

在HTML中建立超連結非常簡單，只需用標籤環繞需要被連結的物件即可，其基本語法格式如下：

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

href：用於指定連結目標的url地址，當為標籤應用href屬性時，它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文字引用

target：用於指定連結頁面的開啟方式，其取值有_self和_blank兩種，其中_self為預設值，_blank為在新視窗中開啟方式。

注意：

1.外部連結需要新增 http:// www.baidu.com

2.內部連結直接連結內部頁面名稱即可比如 < a href=”index.html”> 首頁

3.如果當時沒有確定連結目標時，通常將連結標籤的href屬性值定義為“#”(即href=”#”)，表示該連結暫時為一個空連結。

4.不僅可以建立文字超連結，在網頁中各種網頁元素，如影象、表格、音訊、視訊等都可以新增超連結。

錨點定位（難點）

通過建立錨點連結，使用者能夠快速定位到目標內容。
建立錨點連結分為兩步：

~~~html
1.使用“a href=”#id名>“連結文字”建立連結文字（被點選的）

2.使用相應的id名標註跳轉目標的位置。

第2集

~~~

base 標籤基本的

base 可以設定整體連結的開啟狀態

base 寫到之間

把所有的連線都預設新增 target=”_blank”

課堂一練

1在HTML中，關於a標籤說法不正確的是（）

(A) a標籤可以通過href屬性跳轉到另外一個頁面

(B) a標籤可以通過targer屬性設定在是否在新視窗中開啟

(D) a標籤可以通過href=”#”設定一個空連結

2如果想跳轉到當前頁面里名為show的錨點，下列寫法是正確的

A < a href=”.show”>跳轉

B < a href=”#show”>跳轉

C < a href=” show”>跳轉

D < a src=” #show”>跳轉

3如果想跳轉到同目錄下的名為success.html檔案里名為show的錨點，下列寫法是正確的

(A) < a href=”success.html#show”>跳轉

(B) < a href=”#show”>跳轉

特殊字元標籤（理解）

註釋標籤

在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。其基本語法格式如下：

    <!-- 註釋語句 -->   ctrl + /       或者 ctrl +shift + /

註釋內容不會顯示在瀏覽器視窗中，但是作為HTML文件內容的一部分，也會被下載到使用者的計算機上，檢視原始碼時就可以看到。

註釋重要性：

路徑(重點、難點)

實際工作中，通常新建一個資料夾專門用於存放影象檔案，這時再插入影象，就需要採用“路徑”的方式來指定影象檔案的位置。

路徑可以分為：相對路徑和絕對路徑

相對路徑

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

影象檔案和HTML檔案位於同一資料夾：只需輸入影象檔案的名稱即可，如<img src=”logo.gif” />。
影象檔案位於HTML檔案的下一級資料夾：輸入資料夾名和檔名，之間用“/”隔開，如<img src=”img/img01/logo.gif” />。
影象檔案位於HTML檔案的上一級資料夾：在檔名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src=”../logo.gif” />。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個檔案時，所使用的路徑都是一樣的

“D:\web\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”。

課堂一練

1.在下面結構中，哪種寫法可以在index頁面中有輸出img.gif

1512226080266

(A)

(B)

(C)

(D)

2在下面結構中，哪種寫法可以在index頁面中有輸出1.jpg

1512226099480

(A)

(B)

(C)

(D)

3在下面結構中哪種寫法可以在index頁面中有輸出img.gif

1512226121609

(A)

(B)

(C)

(D)

總結

每一天都有一個主題我們HTML第一天的主題就是 <認識標籤>

學HTML 之前覺得很神祕

等你學完之後忽然發現

總結今天的思路貫穿線：

列表標籤

什麼是列表？

把…製成表,以表顯示

容器裡面裝載著文字或圖表的一種形式，叫列表。

列表最大的特點就是整齊、整潔、有序

無序列表 ul （重點）

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

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

比如下面這些，新聞是沒有順序的，不用排隊，先到先得，後釋出先顯示。

腳下留心：

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

有序列表 ol （瞭解）

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

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

所有特性基本與ul 一致。

但是實際工作中，較少用 ol img src=”media/1.jpg” />

自定義列表（理解）

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

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

用的還可以：

表格 table(會使用)

存在即是合理的。表格的現在還是較為常用的一種標籤，但不是用來佈局，常見處理、顯示錶格式資料。

ps: 這些地方用表格，你會覺得生活還是那麼美好。。。。忍不住想說 PPAP i hava a pen

建立表格

在HTML網頁中，要想建立表格，就需要使用表格相關的標籤。建立表格的基本語法格式如下：

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

在上面的語法中包含三對HTML標籤，分別為 <table>

~~~
1.table用於定義一個表格。

2.tr 用於定義表格中的一行，必須巢狀在 table標籤中，在 table中包含幾對 tr，就有幾行表格。

3.td /td：用於定義表格中的單元格，必須巢狀在標籤中，一對中包含幾對，就表示該行中有多少列（或多少個單元格）。
~~~

注意：

1. <tr></tr>中只能巢狀<td></td>

2. <td></td>標籤，他就像一個容器，可以容納所有的元素

表格屬性

三參為0 border cellpadding cellspacing 為 0

表頭標籤

表頭單元格一般位於表格的第一行或第一列，其文字加粗居中，如下圖所示，即為設定了表頭的表格。設定表頭非常簡單，只需用表頭標籤<th>

表格結構（瞭解）

在使用表格進行佈局時，可以將表格劃分為頭部、主體和頁尾（頁尾因為有相容性問題，我們不在贅述），具體 如下所示：

<thead></thead>：用於定義表格的頭部。

必須位於<table></table> 標籤中，一般包含網頁的logo和導航等頭部資訊。


<tbody></tbody>：用於定義表格的主體。

位於<table></table>標籤中，一般包含網頁中除頭部和底部之外的其他內容。

表格標題

表格的標題： caption

定義和用法

caption 元素定義表格標題。

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

caption 標籤必須緊隨 table 標籤之後。

只存在表格裡面

您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

合併單元格(難點)

跨行合併：rowspan 跨列合併：colspan

合併單元格的思想：

將多個內容合併的時候，就會有多餘的東西，把它刪除。例如把 3個 td 合併成一個，那就多餘了2個，需要刪除。

公式：刪除的個數 = 合併的個數 - 1

合併的順序先上後下先左後右

先確定是跨行還是跨列合併
根據先上後下先左後右的原則找到目標單元格
刪除單元格刪除的個數 = 合併的個數 - 1

總結表格

表格提供了HTML 中定義表格式資料的方法。
表格中由行中的單元格組成。
表格中沒有列元素，列的個數取決於行的單元格個數。
表格不要糾結於外觀，那是CSS 的作用。

表格的學習要求：能手寫表格結構，並且能合併單元格。

表單標籤(掌握)

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

表單目的是為了收集使用者資訊。

在我們網頁中，我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成。

表單控制元件：

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

提示資訊：

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

表單域：

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

input 控制元件(重點)

input 輸入的意思

在上面的語法中，<input />標籤為單標籤，type屬性為其最基本的屬性型別，其取值有多種，用於指定不同的控制元件型別。除了type屬性之外，<input />標籤還可以定義很多其他的屬性，其常用屬性如下表所示。

type 說明了屬於那種表單

radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦

label標籤(理解)

label 標籤為 input 元素定義標註（標籤）。

table

作用：用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點

如何繫結元素呢？

for 屬性規定 label 與哪個表單元素繫結。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控制元件(文字域)

text 文字框只能寫一行文字呢

textarea 文字域

如果需要輸入大量的資訊，就需要用到<textarea></textarea>標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框，其基本語法格式如下：

<textarea cols="每行中的字元數" rows="顯示的行數">
  文字內容
</textarea>

下拉選單

使用select控制元件定義下拉選單的基本語法格式如下 select 選擇

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

注意：

<select>
在option 中定義selected =” selected “時，當前項即為預設選中項。

表單域

在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下：

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

常用屬性：

Action
在表單收集到資訊後，需要將資訊傳遞給伺服器進行處理，action屬性用於指定接收並處理表單資料的伺服器程式的url地址。
method
用於設定表單資料的提交方式，其取值為get或post。
name
用於指定表單的名稱，以區分同一個頁面中的多個表單。

注意：每個表單都應該有自己表單域。

查文件

經常查閱文件是一個非常好的學習習慣。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

關於HTML 筆記篇

typora-copy-images-to: media

自我介紹

HTML 第一天目標

開發工具

瀏覽器（顯示）

檢視瀏覽器佔有的市場份額（知曉）

sublime（書寫）

Photoshop(協助)

認識網頁

常見瀏覽器核心介紹

瀏覽器核心（理解）

Web標準（重點）

Web 標準的好處

Web 標準構成

課堂一練：

HTML 初識

HTML骨架格式

HTML標籤分類

HTML標籤關係

課堂一練

文件型別

字符集

HTML標籤的語義化

為什麼要有語義化標籤

HTML常用標籤

排版標籤

標題標籤 (熟記)

、

、

、

、

和

段落標籤( 熟記)

水平線標籤(認識)

換行標籤(熟記)

課堂一練

和

div span標籤(重點)

文字格式化標籤(熟記)

標籤屬性

影象標籤img (重點)

連結標籤(重點)

錨點定位 （難點）

第2集

base 標籤 基本的

課堂一練

特殊字元標籤 （理解）

註釋標籤

路徑(重點、難點)

相對路徑

絕對路徑

課堂一練

總結

列表標籤

無序列表 ul （重點）

有序列表 ol （瞭解）

自定義列表（理解）

表格 table(會使用)

建立表格

表格屬性

表頭標籤

表格結構（瞭解）

表格標題

合併單元格(難點)

總結表格

表單標籤(掌握)

input 控制元件(重點)

label標籤(理解)

textarea控制元件(文字域)

下拉選單

表單域

查文件

相關推薦

錨點定位（難點）

base 標籤基本的

特殊字元標籤（理解）