概述

HTML(HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。

HTML 可復雜、可簡單，一切取決于開發者。它由一系列的元素組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。一對標簽可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體，改變字號，等等

一個元素

元素的主要部分有：

開始標簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。表示元素從這里開始或者開始起作用 —— 在本例中即段落由此開始。
結束標簽（Closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結尾 —— 在本例中即段落在此結束。初學者常常會犯忘記包含結束標簽的錯誤，這可能會產生一些奇怪的結果。
內容（Content）：元素的內容，本例中就是所輸入的文本本身。
元素（Element）：開始標簽、結束標簽與內容相結合，便是一個完整的元素。

塊級元素

塊級元素在頁面中以塊的形式展現 —— 相對于其前面的內容它會出現在新的一行，其后的內容也會被擠到下一行展現。塊級元素通常用于展示頁面上結構化的內容，例如段落、列表、導航菜單、頁腳等等。一個以block形式展現的塊級元素不會被嵌套進內聯元素中，但可以嵌套在其它塊級元素中。

效果：

屬性

一個屬性必須包含如下內容：

在元素和屬性之間有個空格space (如果已經有一個或多個屬性，就與前一個屬性之間有一個空格.)
屬性后面緊跟著一個“=”符號.
有一個屬性值,由一對引號“ ”引起來.

href: 這個屬性聲明超鏈接的web地址，當這個鏈接被點擊瀏覽器會跳轉至href聲明的web地址。例如：href="***/"。
title: 標題title屬性為超鏈接聲明額外的信息，比如你將鏈接至那個頁面。例如：title="***"。當鼠標懸浮時，將出現一個工具提示。
target: 目標target屬性用于指定鏈接如何呈現出來。例如，target="_blank"將在新標簽頁中顯示鏈接。如果你希望在目前標簽頁顯示鏈接，只需忽略這個屬性。

布爾

有時你會看到沒有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。

<!-- 使用disabled屬性來防止終端用戶輸入文本到輸入框中 -->
<input type="text" disabled><!-- 下面這個輸入框沒有disabled屬性，所以用戶可以向其中輸入 -->
<input type="text">

單引號或者雙引號？

在目前為止，本章內容所有的屬性都是由雙引號來包裹。也許在一些HTML中，你以前也見過單引號。這只是風格的問題，你可以從中選擇一個你喜歡的。以下兩種情況都可以：

<a href="http://www.example.com">示例站點鏈接</a><a href='http://www.example.com'>示例站點鏈接</a>

但你應該注意單引號和雙引號不能在一個屬性值里面混用。下面的語法是錯誤的：

<a href="http://www.example.com'>示例站點鏈接</a>

HTML結構

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的測試站點</title></head><body><p>這是我的頁面</p></body>
</html>

<!DOCTYPE html>: 聲明文檔類型. 很久以前，早期的HTML(大約1991年2月)，文檔類型聲明類似于鏈接，規定了HTML頁面必須遵從的良好規則，能自動檢測錯誤和其他有用的東西。使用如下：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
然而現在沒有人再這樣寫，需要保證每一個東西都正常工作已成為歷史。你只需要知道<!DOCTYPE html>是最短的有效的文檔聲明。
<html></html>:?<html>元素。這個元素包裹了整個完整的頁面，是一個根元素。
<head></head>:?<head>元素. 這個元素是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。以后的章節能學到更多關于<head>元素的內容。
<meta charset="utf-8">: 這個元素設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文本內容。毫無疑問要使用它，并且它能在以后避免很多其他問題。
<title></title>: 設置頁面標題，出現在瀏覽器標簽上，當你標記/收藏頁面時它可用來描述頁面。
<body></body>:?<body>元素。包含了你訪問頁面時所有顯示在頁面上的內容，文本，圖片，音頻，游戲等等。

空白

代碼中包含的空格是沒有必要的；下面的兩個代碼片段是等價的：

<p>狗 狗 很 呆 萌。</p><p>狗 狗        很呆 萌。</p>

渲染這些代碼的時候，HTML解釋器會將連續出現的空白字符減少為一個單獨的空格符。

那么為什么我們會使用那么多的空白呢? 可讀性 —— 如果你的代碼被很好地進行格式化，那么就很容易理解你的代碼。

特殊字符

原義字符	等價字符引用
<	<
>	>
"	"
'	'
&	&

注釋

為了將一段HTML中的內容置為注釋，你需要將其用特殊的記號包括起來，比如：

<p>我在注釋外！</p><!-- <p>我在注釋內！</p> -->

頭部

HTML 頭部是包含在<head>?元素里面的內容。不像 <body>元素的內容會顯示在瀏覽器中，head 里面的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元數據。

元數據

元數據就是描述數據的數據，而HTML有一個“官方的”方式來為一個文檔添加元數據——??<meta>?。有很多不同種類的?<meta>?可以被包含進你的頁面的<head>元素，比如。

指定字符的編碼

<meta charset="utf-8">

這個元素簡單的指定了文檔的字符編碼 —— 在這個文檔中被允許使用的字符集。?utf-8?是一個通用的字符集，它包含了任何人類語言中的大部分的字符。

添加作者和描述

name?指定了meta 元素的類型；說明該元素包含了什么類型的信息。
content?指定了實際的元數據內容。

CSS和JavaScript

如今，幾乎你使用的所有網站都會使用css讓網頁更加炫酷，使用js讓網頁有交互功能，比如視頻播放器，地圖，游戲以及更多功能。這些應用在網頁中很常見，它們分別使用<link>元素以及?<script>?元素。

?<link>元素經常位于文檔的頭部。這個link元素有2個屬性，rel="stylesheet"表明這是文檔的樣式表，而 href包含了樣式表文件的路徑：
```
<link rel="stylesheet" href="my-css-file.css">
```
<script>部分沒必要非要放在文檔頭部；實際上，把它放在文檔的尾部（在?</body>標簽之前）是一個更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經解析了HTML內容（如果腳本加載某個不存在的元素，瀏覽器會報錯）。

<script src="my-js-file.js"></script>

標題和段落

在HTML中，每個段落是通過<p>元素標簽進行定義的, 比如下面這樣：

<p>我是一個段落，千真萬確。</p>

每個標題（Heading）是通過“標題標簽”進行定義的：

<h1>我是文章的標題</h1>

這里有六個標題元素標簽 ——?<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個元素代表文檔中不同級別的內容;?<h1>?表示主標題（the main heading），<h2>?表示二級子標題（subheadings），<h3>?表示三級子標題（sub-subheadings），等等。

列表

<ol><li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻，調成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時。</li><li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li><li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li><li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調味料”繼續快炒。<ul><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li><li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li></ul></li>
</ol>

標記

<i>?被用來傳達傳統上用斜體表達的意義：外國文字，分類名稱，技術術語，一種思想……
<b>?被用來傳達傳統上用粗體表達的意義：關鍵字，產品名稱，引導句……
<u>?被用來傳達傳統上用下劃線表達的意義：專有名詞，拼寫錯誤……

<strong>強調重要的詞

超鏈接

通過將文本轉換為<a>元素內的鏈接來創建基本鏈接，?給它一個href屬性（也稱為目標），它將包含您希望鏈接指向的網址。

<p>I'm creating a link to
<a href="https://www.***.com/">***</a>.
</p>

使用title屬性添加支持信息

<p>I'm creating a link to
<a href="https://www.baidu.com"title="這是百度">百度</a>.
</p>

?I'm creating a link to?百度.

塊級鏈接

可以將一些內容轉換為鏈接，甚至是塊級元素。例如你想要將一個圖像轉換為鏈接，你只需把圖像元素放到<a></a>標簽中間。

文檔片段

超鏈接除了可以鏈接到文檔外，也可以鏈接到HTML文檔的特定部分（被稱為文檔片段）。要做到這一點，你必須首先給要鏈接到的元素分配一個id屬性。例如，如果你想鏈接到一個特定的標題，可以這樣做：

<h2 id="Mailing_address">Mailing address</h2>

然后鏈接到那個特定的id，可以在URL的結尾使用一個哈希符號（#）指向它，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

你甚至可以在同一份文檔下，通過鏈接文檔片段，來鏈接到同一份文檔的另一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

表單?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>增加學生</title>
</head>
<body><form method="post" action="/community/alpha/student"><p>姓名：<input type="text" name="name"></p><p>年齡：<input type="text" name="age"></p><p><input type="submit" value="保存"></p></form>
</body>
</html>

后臺：

    //post@RequestMapping(path = "/student",method = RequestMethod.POST)@ResponseBodypublic String saveStudent(String name,int age){System.out.println(name);System.out.println(age);return "success";}

大部分用來定義表單小部件的元素都有一些他們自己的屬性。然而，在所有表單元素中都有一組通用屬性，它們可以對這些小部件進行控制。下面是這些通用屬性的列表:

屬性名稱	默認值	描述
`autofocus`	(false)	這個布爾屬性允許您指定當頁面加載時元素應該自動具有輸入焦點，除非用戶覆蓋它，例如通過鍵入不同的控件。文檔中只有一個與表單相關的元素可以指定這個屬性。
`disabled`	(false)	這個布爾屬性表示用戶不能與元素交互。如果沒有指定這個屬性，元素將從包含它的元素繼承設置，例如`<fieldset>`;如果沒有包含在設定了`disabled`屬性的元素里，那么這個元素就是可用的。
`form`	?	小部件與之相關聯的表單元素。屬性值必需是同個文檔中的`<form>`?元素的?`id`屬性。理論上，它允許您在`<form>`元素之外設置一個表單小部件。然而，在實踐中，沒有任何支持該特性的瀏覽器。
`name`	?	元素的名稱;這是跟表單數據一起提交的。
`value`	?	元素的初始值。

密碼框

通過設置type屬性值為password來設置該類型框：

<input type="password" id="pwd" name="pwd">

搜索框

通過設置 type屬性值為?search?來設置該類型框：

<input type="search" id="search" name="search">

電話號碼欄：

通過 type屬性的?tel?值設置該類型框：

<input type="tel" id="tel" name="tel">

URL 欄

通過type屬性的url?值設置該類型框：

<input type="url" id="url" name="url">

?多行文本框

多行文本框專指使用<textarea>元素，而不是使用<input>元素。

<textarea cols="30" rows="10"></textarea>

按鈕

在HTML表單中，有三種按鈕：

Submit

將表單數據發送到服務器。對于<button>元素, 省略?type?屬性?(或是一個無效的?type?值) 的結果就是一個提交按鈕.

Reset

將所有表單小部件重新設置為它們的默認值。

Anonymous

沒有自動生效的按鈕，但是可以使用JavaScript代碼進行定制。

每次向服務器發送數據時，都需要考慮安全性。到目前為止，HTML表單是最常見的攻擊路徑(可能發生攻擊的地方)。這些問題從來都不是來自HTML表單本身，它們來自于服務器如何處理數據。

根據你所做的事情，你會遇到一些非常有名的安全問題：

XSS 和 CSRF

跨站腳本(XSS)和跨站點請求偽造(CSRF)是常見的攻擊類型，它們發生在當您將用戶發送的數據顯示給這個用戶或另一個用戶時。

XSS允許攻擊者將客戶端腳本注入到其他用戶查看的Web頁面中。攻擊者可以使用跨站點腳本攻擊的漏洞來繞過諸如同源策略之類的訪問控制。這些攻擊的影響可能從一個小麻煩到一個重大的安全風險。

CSRF攻擊類似于XSS攻擊，因為它們以相同的方式開始攻擊——向Web頁面中注入客戶端腳本——但它們的目標是不同的。CSRF攻擊者試圖將權限升級到特權用戶(比如站點管理員)的級別，以執行他們不應該執行的操作(例如，將數據發送給一個不受信任的用戶)。

XSS攻擊利用用戶對web站點的信任，而CSRF攻擊則利用網站對其用戶的信任。

為了防止這些攻擊，您應該始終檢查用戶發送給服務器的數據(如果需要顯示)，盡量不要顯示用戶提供的HTML內容。相反，您應該對用戶提供的數據進行處理，這樣您就不會逐字地顯示它。當今市場上幾乎所有的框架都實現了一個最小的過濾器，它可以從任何用戶發送的數據中刪除HTML<script>、<iframe>?和<object>元素。這有助于降低風險，但并不一定會消除風險。