HTML 語法簡要總結

TML基本語法

認識網頁

網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及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。
行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是

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

HTML 初識

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

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

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

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

注意：體會文本標簽語言幾個詞語

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

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

用文字來描述網頁標簽

HTML骨架格式

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

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

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</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.雙標簽

<標簽名> 內容 </標簽名>

該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。

比如 <body>我是文字  </body>

2.單標簽

<標簽名 />

單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。

比如  <br />

HTML標簽關系

標簽的相互關系就分為兩種：

1.嵌套關系

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

2.并列關系

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

倡議：如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位。如果是并列關系，最好上下對齊。

文檔類型<!DOCTYPE>

<!DOCTYPE html>

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

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

<!DOCTYPE> 標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用<!DOCTYPE>標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。

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

字符集

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

gb2312 簡單中文包括6763個漢字

BIG5 繁體中文港澳臺等用

GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312

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

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

HTML標簽的語義化

白話：所謂標簽語義化，就是指標簽的含義，使用做合適的標簽做做合適的事，比如標題用 h 標簽而不是 div 標簽。

為什么要有語義化標簽

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

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

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

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

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

HTML常用標簽

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

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

排版標簽

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

標題標簽 (熟記)

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

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

標題標簽語義：  作為標題使用，并且依據重要性遞減

其基本語法格式如下：

<hn>   標題文本   </hn>

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

段落標簽( 熟記)

單詞縮寫： paragraph 段落

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

<p>  文本內容  </p>

是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。

水平線標簽(認識)

單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上

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

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

<hr />是單標簽

在網頁中顯示默認樣式的水平線。

換行標簽(熟記)

單詞縮寫： break 打斷 ,換行

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

<br />

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

div span標簽(重點)

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

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

span, 跨度，跨距；范圍

語法格式：

<div> 這是頭部 </div>    <span>今日價格</span>

文本格式化標簽(熟記)

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

標簽屬性

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

手機的顏色是黑色手機的尺寸是 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" />

鏈接標簽(重點)

單詞縮寫： 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.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點定位（難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本（被點擊的）
  <a href="#two">   

2.使用相應的id名標注跳轉目標的位置。
  <h3 id="two">第2集</h3>

base 標簽基本的

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

把所有的連接都默認添加 target="_blank"

特殊字符標簽（理解）

注釋標簽

在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”

列表標簽

無序列表 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 一致。

自定義列表（理解）

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

<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(會使用)

創建表格

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

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

在上面的語法中包含三對HTML標簽，分別為 <table></table>、<tr></tr>、<td></td>，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體地解釋

1.table用于定義一個表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

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

表格屬性

三參為0
即：border cellpadding cellspacing 為 0

表頭標簽

表頭單元格一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。

表格結構

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

<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></select>中至少應包含一對<option></option>。
在option 中定義selected =" selected "時，當前項即為默認選中項。

表單域

在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

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

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。
method
用于設置表單數據的提交方式，其取值為get或post。
name
用于指定表單的名稱，以區分同一個頁面中的多個表單。

表標簽

在html中列表分為無序列表、有序列表和自定義列表（項目列表）。接下來就看看他們有什么不同吧！

作用：如果說table標簽是用來顯示數據的，那么列表標簽就是用來進行html頁面布局的。

無序列表

語法：

<ul>
	<li></li>  
</ul>

<ul></ul>標簽中只能且必須嵌套<li></li>標簽。li標簽之間沒有先后順序，是并列存在的。li標簽里可以容納文本、數據、圖片、超鏈接等內容。跟table一樣，列表標簽也自帶樣式屬性，但為了代碼統一，我們還是會使用css來設置。

代碼示例：

<h2>無序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

運行界面：

有序列表

語法：

<ol>
 	<li></li> 
 </ol>

<ol></ol>標簽里面只能嵌套<li></li>標簽，在這里li標簽是有順序的。

代碼示例：

<h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

運行界面：

自定義列表

語法：

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<dl></dl>標簽：定義列表

<dt></dt>標簽：列表標題

<dd></dd>標簽：列表內容

一個dd標簽是對dt標簽標題的說明。這兩個標簽中可以包含任何標簽。

代碼示例：

<h2>自定義列表：</h2>
    <!-- dl：外層標簽  dt：項目標題  dd：項目內容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

運行界面：

表單標簽

作用：收集用戶信息。一般用在注冊界面等。

組成：一個完整的表單中包含表單域（整個填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個部分。

表單域

表單域：是一個包含表單元素的區域。

<form>標簽用于定義表單域，實現用戶信息的收集和傳遞。

作用：將其區域范圍內的信息收集并傳送給服務器。

語法：

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

注：action：url地址，指定接收并處理表單數據的服務器程序的url地址。

method：用于設置表單數據的提交方式。

method=”get”：提交數據時，地址欄可查看到數據。數據量少且安全級別不高時使用。

method=”post”：提交數據時，地址欄數據是加密的。

name：表單域的名稱。用于區分同一頁面下的不同表單域。

表單控件

1.input輸入表單元素：

語法：<input type=””>，依據type屬性值不同區分不同控件。

文本框：<input type=”text”>。單行輸入字段，默認寬度20個字符。輸入的文字可見。

密碼框：<input type=”password”>。輸入內容默認不可見。

單選框：<input type=”radio”>，默認情況下選中后無法取消。

注：為實現多選一狀態，需要將所有的單選框控件具有同一個name名。

復選框：<input type=”checkbox”>，選中后可以更改可以取消。

提交按鈕：<input type=”submit”>，默認按鈕中的提示文字是提交，可以通過value值進行更改內容。點擊提交按鈕后會把表單數據發送到服務器。

重置按鈕：<input type=”reset”>，默認按鈕中的提示文字是重置，可以通過value值進行更改內容。點擊后會清楚表單中的所有數據。

普通按鈕：<input type=”button”>

文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。

label標簽：標注標簽，配合input控件一起使用

作用：綁定表單控件，擴大點擊范圍。

當點擊label標簽的內容時，系統會自動選中該表單控件。

代碼示例：

<h1>label標簽</h1>
    <form>
        <label for="text">用戶名：</label>
        <input type="text" name="用戶名" id="text"><br>
        <label for="password">密碼：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>

運行界面：

Input控件屬性：

name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。

value：用戶自定義，提示input元素的內容值。給后臺的提示。在文本框控件中會顯示該內容，單選框和復選框則顯示不出來。

checked：默認選中狀態。主要用于單選按鈕和復選按鈕中。

maxlength：正整數，規定輸入字段中的字符最大長度。

input代碼示例：

<h2>表單標簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注冊">
        <input type="reset" value="清空"><br>
        <!-- 后期結合js搭配使用 -->
        <!-- 按鈕選框在默認情況下是沒有文字內容的，需要添加value值設置文字內容 -->
        <input type="button" value="獲取短信驗證碼"><br>
        上傳頭像：<input type="file">
    </form>

運行界面：

2.select下拉表單元素：

使用場景：地址選擇、職業分類、學校分類等。

select標簽：定義下拉列表。

語法：

<select>
	<option></option>  
</select>

代碼示例：

<h1>下拉表單</h1>
    <form>
        <label for="adress">籍貫：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
        </select>
    </form>

運行界面：

3.textrea文本域表單控件

使用場景：留言、介紹、評論等。

語法：

<textrea rows=”” cols=””>文本內容</textrea>

跟文本框控件不同，它是多行文本輸入框，可以自行設定行數以及一行容納多少字數。

rows=“每行可輸入的字符數”，

cols=“顯示的行數”。

這兩個樣式屬性實際開發中大多使用css就可以改變操作。

代碼示例：

<h1>文本域表單元素</h1>
    <form action="">
        <label for="textrea">今日反饋：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
    </form>

運行界面：

關于HTML基礎內容就學習到這里了，明天練習一個綜合案例。對了，現在跟學的是黑馬前端的pink老師發布的基礎視頻，明天做的案例按照老師講解的案例去做。

lt;h2 id="title1">什么是HTML</h2>

HTML其實是HyperText Markup Language的縮寫, 超文本標記語言

<h2 id="title2">HTML的作用</h2>

1.首先利用記事本保存了一個標題和兩段描述, 然后修改純文本文件的擴展名為.html, 然后再利用瀏覽器打開

鄭伊健
鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1] 1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑借在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑借《古惑仔》主題曲《友情歲月》獲得十大中文金曲獎。1996年至1997年連續兩次獲得”臺灣十大偶像”獎。

2.打開之后發現顯示的格式不對, 不對的原因是因為在純文本文件中所有文字都是同級別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標題, 哪些文字是段落...., 所以導致了顯示的格式不正確
正是因為如此, 所以HTML應用而生. HTML就只有一個作用, 它是專門用來描述文本的語義的. 也就是說我們可以利用HTML來告訴瀏覽器哪些是標題, 哪些是段落.

這些用于描述其它文本語義的文本, 我們稱之為標簽. 并且這些用于描述文本語義的標簽將來在瀏覽器中是不會被顯示出來的
所以正是因為HTML的這些標簽是專門用來描述其它文本語義的, 并且在瀏覽器中不會被顯示出來, 所以我們稱這些文本為"超文本", 而這些文本又叫做標簽, 所以HTML被稱之為"超文本標記語言"

<h1>鄭伊健</h1><p>鄭伊健，1967年10月4日出生于中國香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無線電視，因拍攝“陽光檸檬茶”廣告而入行，拜羅文為師。[1] </p><p>1991年加盟BMG唱片公司以歌手身份出道。1995年開始，憑借在《古惑仔》系列電影中飾演陳浩南一角走紅。1996年憑借《古惑仔》主題曲《友情歲月》獲得十大中文金曲獎。1996年至1997年連續兩次獲得”臺灣十大偶像”獎。</p>

注意事項:

雖然我們利用H1標簽描述一段文本之后, 這段文本在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標簽修改了被描述的那段文本的樣式. 但是一定要記住, HTML只有一個作用, 它是專門用來給文本添加語義的, 而不是用來修改文本的樣式的

H1標簽它的作用是什么?

錯誤: H1標簽可以用來修改文字的大小, 并且還可以將文字加粗
正確: H1標簽的作用是用來告訴瀏覽器, 哪些文字是標題. 也就是H1標簽是專門用于給指定的文字添加標題語義的

<h2 id="title3">HTML發展史</h2>

<h3 id="title4">IETF簡介</h3>

IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是"互聯網工程任務組"
IETF負責定義并管理因特網技術的所有方面。包括用于數據傳輸的IP協議、讓域名與IP地址匹配的域名系統（DNS）、用于發送郵件的簡單郵件傳輸協議（SMTP）等

W3C是英文World Wide Web Consortium的縮寫，翻譯過來就是W3C理事會或萬維網聯盟, W3C是全球互聯網最具權威的技術標準化組織.
W3C于1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者Tim Berners-Lee
W3C負責web方面標準的制定，像HTML、XHTML、CSS、XML的標準就是由W3C來定制的。

Tim Berners-Lee（蒂姆·伯納斯-李），萬維網之父、html設計者、w3c創始人
百度百科

<h2 id="title7">網頁的固定格式</h2>

1.編寫網頁和寫信一樣都有一套規范和要求, 這套規范和要求中規定了寫信的固定格式
2.寫信基本結構

敬愛的江哥:
 您好!
 正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
 此致
敬禮!
 你的朋友 伊健
 2066年6月6日

3.編寫網頁的步驟:
3.1.新建一個文本文檔
3.2.利用記事本打開
3.3.編寫THML代碼
3.4.保存并且修改純文本文檔的擴展名為.html
3.5.利用瀏覽器打開編寫好的文件
4.網頁基本結構:

<html>
 <head>
 <title></title>
 </head>
 <body>
 </body></html>

5.通過觀察我們發現, HTML基本結構中所有的標簽都是成對出現的, 這些成對出現的標簽中有一個帶/有一個不帶/, 那么這些不帶/的標簽我們稱之為開始標簽, 這些帶/的我們稱之為結束標簽

<h3 id="title8">html標簽</h3>

作用:

用于告訴瀏覽器這是一個網頁, 也就是說告訴瀏覽器我是一個HTML文檔

注意點:

其它所有的標簽都必須寫在html標簽里面, 也就是寫在html開始標簽和結束標簽中間

<h3 id="title9">head標簽</h3>

作用:

指定網站的標題 / 指定網站的小圖片
添加網站的SEO相關的信息(指定網站的關鍵字/指定網站的描述信息)
外掛一些外部的css/js文件
添加一些瀏覽器適配相關的內容

用于給網站添加一些配置信息
例如:

注意點:

一般情況下, 寫在head標簽內部的內容都不會顯示給用戶查看, 也就是說一般情況下寫在head標簽內部的內容我們都看不到

<h3 id="title12">title標簽</h3>

作用:

專門用于指定網站的標題, 并且這個指定的標題將來還會作為用戶保存網站的默認標題

注意點:

title標簽必須寫在head標簽里面

<h3 id="title10">body標簽</h3>

作用:

專門用于定義HTML文檔中需要顯示給用戶查看的內容(文字/圖片/音頻/視頻)

注意點:

雖然說有時候你可能將內容寫到了別的地方在網頁中也能看到, 但是千萬不要這么干, 一定要將需要顯示的內容寫在body中
一對html標簽中(一個html開始標簽和一個html結束標簽)只能有一對body標簽
Q群：162542073

<h2 id="title11">head內部標簽</h2>

<h3 id="title13">meta標簽</h3>

1.為什么會有亂碼現象?

因為我們在編寫網頁的時候沒有指定字符集

2.如何解決亂碼現象?

在head標簽中添加<meta charset="GBK" />, 指定字符集

3.什么是字符集

字符集就是字符的集合, 也就是很多字符堆在一起. 其實字符集很像我們古代的"活字印刷術", 在活字印刷術中就是將很多刻有漢字的小章放到一個盒子中, 然后需要印刷文字的時候再去盒子中取這個小章出來用, 正是因為如此, 所以導致了亂碼問題
假設北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中存儲小章的順序不太一樣, 那么這個時候如果北方人和南方人都需要去取"李"字, 在南方人記憶中李字在第6個盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個盒子的第8行的第8列中(888). 那么此時如果讓一個南方人去北方人的盒子中取"李"字的小章, 必然找不到,, 所以就導致了亂碼問題
這個地方北方人的存儲小章的盒子和南方人存儲小章的盒子就對應網頁中指定的字符集, 在網頁中我們常見的字符集有兩個GBK/UTF-8, GBK就對應北方人存儲的盒子, UTF-8就對應南方人存儲的盒子
所以在網頁中指定字符集的意義就在于告訴瀏覽器我用的是哪個盒子, 你應該如何去查找才能找到對應的正確的內容

4.GBK(GB2312)和UTF-8區別

提交比較大

體積比較小

GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外文
UTF-8里面存儲的世界上所有的文字

5.那么在企業開發中我們應該使用GBK(GB2312)還是UTF-8呢?

如果你的網站僅僅包含中文, 那么推薦使用GB2312, 因為它的體積更小, 訪問速度更快
如果你的網站除了中文以外, 還包含了一些其它國家的語言 , 那么推薦使用UTF-8
懶人推薦: 不管三七二十一, 一律寫UTF-8即可

6.注意點:

在HTML文件中指定的字符集必須和保存這個文件的字符集一致, 否則還是會出現亂碼
所以僅僅指定字符集不一定能解決亂碼問題, 還需要保存文件的時候, 文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題

<h2 id="title14">HTML標簽</h2>

<h3 id="title15">HTML標簽分類</h3>

單標簽

只有開始標簽沒有結束標簽, 也就是由一個<>組成的

<meta charset="UTF-8" />

雙標簽

有開始標簽和結束標簽, 也就是由一個<>和一個</>組成的

<html></html>

<h3 id="title16">HTML標簽關系分類</h3>

并列關系(兄弟/平級)

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

嵌套關系(父子/上下級)

<head> <meta charset="UTF-8" />
 <title>百度一下,你就知道123</title></head>

<h2 id="title17">DTD文檔聲明</h2>

什么是DTD文檔聲明?

由于HTML有很多個版本的規范, 每個版本的規范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當前這個網頁是用哪一個版本的HTML規范來編寫的. 瀏覽器只要知道了我們是用哪一個版本的規范來編寫之后, 它就能夠正確的編譯/解析/渲染我們的網頁

DTD文檔聲明格式:

<!DOCTYPE html>

注意事項:

不寫也能運行
H5網頁里面用H4也能運行

<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前
<!DOCTYPE> 聲明不是 HTML 標簽
<!DOCTYPE> 聲明沒有結束標簽
<!DOCTYPE> 聲明對大小寫不敏感
這個聲明瀏覽器會看, 但是并不是完全依賴于這個聲明, 瀏覽器有一套自己的默認的處理機制

HTML5之前有2大種規范, 每種規范中又有3小種規范

大規范	小規范
HTML	Strict (嚴格的)
HTML	Transitional(過度的,普通的,寬松的)
HTML	Frameset(帶有框架的頁面)
XHTML	Strict (嚴格的)
XHTML	Transitional(過度的,普通的,寬松的)
XHTML	Frameset(帶有框架的頁面)

HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區別?

XHTML本身規定比如標簽必須小寫、必須嚴格閉合、必須使用引號引起屬性等等, 而HTML會更加松散沒有這么嚴格

Strict表示嚴格的, 這種模式里面的要求更為嚴格.這種嚴格主要體現在有一些標簽不能使用

例如font標簽/u標簽等
font標簽可以修改一個文本的字號、顏色、字體,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而font標簽是用于修改樣式的,所以在Strict中是不能使用font標簽
u標簽可以給一個文本加上下劃線,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u標簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標簽

Transitional表示普通的, 這種模式是沒有一些別的要求

例如可以使用font標簽、u標簽等
但是在企業開發中不會使用這些標簽,因為這違背了HTML的本質, 而是將這些標簽作為css的鉤子使用

Frameset表示框架, 在框架的頁面使用

后面學到框架/NodeJS 再做詳細了解

常見的DOCTYPE有如下幾種

HTML4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5:
<!DOCTYPE html>

有這么多規范我們學習過程中到底使用哪一種比較合適呢?

www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)

無論是HTML還是XHTML,過去企業級開發中用的比較多的大部分都是Transitional類型的文檔聲明
但是HTML5的時代已經到來,以上6中規范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
目前國內一線網站都更新到了HTML5的文檔聲明, 所以后續授課也是全程使用HTML5的文檔聲明

<h2 id="title18">HTML和XHTML、HTML5區別</h2>

在HTML的早期發展中，大部分標準都是所謂的retro-spec，即先有實現后有標準。在這種情況下，HTML標準不是很規范，瀏覽器也對HTML頁面中的錯誤相當寬容。這反過來又導致了HTML開發者寫出了大量含有錯誤的HTML頁面
html語言本身有一些缺陷（例如：內容和形式不能分離；標簽單一；數據不能復用等等），隨著xml的興起人們希望xml來彌補html的不足，但是目前有成千上萬的網頁都是用html編寫的，所以完全使用xml來替代html還為時過早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是實現從html向xml的過度
為了規范HTML，W3C結合XML制定了XHTML 1.0標準，這個標準沒有增加任何新的標簽，只是按照XML的要求來規范HTML，并定義了一個新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，如果頁面有HTML錯誤，就要顯示錯誤信息。但是由于已有的web頁面中已經有了大量的錯誤，很多開發者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標準之后增加了一個附錄C，允許開發者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發頁面
W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標準的頁面必須用新的MIME type來分發。于是這個標準并沒有很多人采用
有了XHTML的教訓，W3C在制定下一代HTML標準時（HTML5），就將向后兼容作為了一個很重要的原則。HTML5確實引入了許多新的特性，但是它最重要的一個特性是，不會break已有的網頁。你可以將任何已有的網頁的第一行改成<!DOCTYPE html>，它就成也一個HTML5頁面，并且可以照樣在瀏覽器里正常的展示。
簡而言之

HTML語法非常寬松容錯性強;
XHTML更為嚴格,它要求標簽必須小寫、必須嚴格閉合、標簽中的屬性必須使用引號引起等等;
HTML5是HTML的下一個版本所以除了非常寬松容錯性強以外,還增加許多新的特性

<h2 id="title19">.htm 和 .html擴展名區別</h2>

DOS操作系統（win95或win98）下只能支持長度為3的后綴名，所以是htm
但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的
所以htm是為了兼容過去的DOS命名格式存在的

更多內容微信訂閱號：網頁設計輕松學

在線咨詢

上一篇：當HTML頁面加載就觸發點擊a標簽
下一篇：HTML 編輯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 語法簡要總結

認識網頁

常見瀏覽器內核介紹

瀏覽器內核（理解）

Web標準（重點）

Web 標準的好處

Web 標準構成

HTML 初識

HTML骨架格式

HTML標簽分類

HTML標簽關系

文檔類型<!DOCTYPE>

字符集

HTML標簽的語義化

為什么要有語義化標簽

HTML常用標簽

排版標簽

標題標簽 (熟記)

段落標簽( 熟記)

水平線標簽(認識)

換行標簽(熟記)

div span標簽(重點)

文本格式化標簽(熟記)

標簽屬性

圖像標簽img (重點)

鏈接標簽(重點)

錨點定位 （難點）

base 標簽 基本的

特殊字符標簽 （理解）

注釋標簽

路徑(重點、難點)

相對路徑

列表標簽

無序列表 ul （重點）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會使用)

創建表格

表格屬性

表頭標簽

表格結構

表格標題

合并單元格

總結表格

表單標簽(掌握)

input 控件(重點)

label標簽(理解)

textarea控件(文本域)

下拉菜單

表單域

表標簽

表單標簽

您的項目需求

錨點定位（難點）

base 標簽基本的

特殊字符標簽（理解）