Java开发需要知道的HTML知识
概述
HTML(HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。
HTML 可復雜、可簡單，一切取決于開發者。它由一系列的元素組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。 一對標簽可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體，改變字號，等等
一個元素
元素的主要部分有：
塊級元素
塊級元素在頁面中以塊的形式展現 —— 相對于其前面的內容它會出現在新的一行，其后的內容也會被擠到下一行展現。塊級元素通常用于展示頁面上結構化的內容，例如段落、列表、導航菜單、頁腳等等。一個以block形式展現的塊級元素不會被嵌套進內聯元素中，但可以嵌套在其它塊級元素中。
<p>第四</p><p>第五</p><p>第六</p>
效果：
屬性
一個屬性必須包含如下內容：
- 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>?
?
空白
代碼中包含的空格是沒有必要的；下面的兩個代碼片段是等價的：
<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內容（如果腳本加載某個不存在的元素，瀏覽器會報錯）。
標題和段落
?
在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屬性（也稱為目標），它將包含您希望鏈接指向的網址。
- 使用title屬性添加支持信息
?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>元素。這有助于降低風險，但并不一定會消除風險。
SQL注入
SQL 注入是一種試圖在目標web站點使用的數據庫上執行操作的攻擊類型。這通常包括發送一個SQL請求，希望服務器能夠執行它（通常發生在應用服務器試圖存儲由用戶發送的數據時）。這實際上是攻擊網站的主要途徑之一。?
其后果可能是可怕的，從數據丟失到通過使用特權升級控制整個網站基礎設施的攻擊。這是一個非常嚴重的威脅，您永遠不應該存儲用戶發送的數據，而不執行一些清理工作(例如，在php/mysql基礎設施上使用mysql_real_escape_string()
HTTP數據頭注入和電子郵件注入
這種類型的攻擊出現在當您的應用程序基于表單上用戶的數據輸入構建HTTP頭部或電子郵件時。這些不會直接損害您的服務器或影響您的用戶，但它們會引發一個更深入的問題，例如會話劫持或網絡釣魚攻擊。
這些攻擊大多是無聲的，并且可以將您的服務器變成僵尸。
偏執:永遠不要相信你的用戶
那么，你如何應對這些威脅呢?這是一個遠遠超出本指南的主題，不過有一些規則需要牢記。最重要的原則是:永遠不要相信你的用戶，包括你自己；即使是一個值得信賴的用戶也可能被劫持。
所有到達服務器的數據都必須經過檢查和消毒。總是這樣。沒有例外。
- 遠離有潛在危險的字符轉義。應該如何謹慎使用的特定字符取決于所使用的數據的上下文和所使用的服務器平臺，但是所有的服務器端語言都有相應的功能。
- 限制輸入的數據量，只允許有必要的數據。
- 沙箱上傳文件(將它們存儲在不同的服務器上，只允許通過不同的子域訪問文件，或者通過完全不同的域名訪問文件更好)。
總結
以上是生活随笔為你收集整理的Java开发需要知道的HTML知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： node.js调试 BY：色拉油啊油
- 下一篇： layui table勾选框的修改_La