Java开发需要知道的HTML知识
概述
HTML(HyperText Markup Language) 不是一門編程語(yǔ)言，而是一種用來(lái)告知瀏覽器如何組織頁(yè)面的標(biāo)記語(yǔ)言。
HTML 可復(fù)雜、可簡(jiǎn)單，一切取決于開(kāi)發(fā)者。它由一系列的元素組成，這些元素可以用來(lái)包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。 一對(duì)標(biāo)簽可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號(hào)，等等
一個(gè)元素
元素的主要部分有：
塊級(jí)元素
塊級(jí)元素在頁(yè)面中以塊的形式展現(xiàn) —— 相對(duì)于其前面的內(nèi)容它會(huì)出現(xiàn)在新的一行，其后的內(nèi)容也會(huì)被擠到下一行展現(xiàn)。塊級(jí)元素通常用于展示頁(yè)面上結(jié)構(gòu)化的內(nèi)容，例如段落、列表、導(dǎo)航菜單、頁(yè)腳等等。一個(gè)以block形式展現(xiàn)的塊級(jí)元素不會(huì)被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級(jí)元素中。
<p>第四</p><p>第五</p><p>第六</p>
效果：
屬性
一個(gè)屬性必須包含如下內(nèi)容：
- href: 這個(gè)屬性聲明超鏈接的web地址，當(dāng)這個(gè)鏈接被點(diǎn)擊瀏覽器會(huì)跳轉(zhuǎn)至href聲明的web地址。例如：href="***/"。
- title: 標(biāo)題title屬性為超鏈接聲明額外的信息，比如你將鏈接至那個(gè)頁(yè)面。例如：title="***"。當(dāng)鼠標(biāo)懸浮時(shí)，將出現(xiàn)一個(gè)工具提示。
- target: 目標(biāo)target屬性用于指定鏈接如何呈現(xiàn)出來(lái)。例如，target="_blank"將在新標(biāo)簽頁(yè)中顯示鏈接。如果你希望在目前標(biāo)簽頁(yè)顯示鏈接，只需忽略這個(gè)屬性。
布爾
有時(shí)你會(huì)看到?jīng)]有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。
<!-- 使用disabled屬性來(lái)防止終端用戶輸入文本到輸入框中 --> <input type="text" disabled><!-- 下面這個(gè)輸入框沒(méi)有disabled屬性，所以用戶可以向其中輸入 --> <input type="text">單引號(hào)或者雙引號(hào)？
在目前為止，本章內(nèi)容所有的屬性都是由雙引號(hào)來(lái)包裹。也許在一些HTML中，你以前也見(jiàn)過(guò)單引號(hào)。這只是風(fēng)格的問(wèn)題，你可以從中選擇一個(gè)你喜歡的。以下兩種情況都可以：
<a href="http://www.example.com">示例站點(diǎn)鏈接</a><a href='http://www.example.com'>示例站點(diǎn)鏈接</a>但你應(yīng)該注意單引號(hào)和雙引號(hào)不能在一個(gè)屬性值里面混用。下面的語(yǔ)法是錯(cuò)誤的：
<a href="http://www.example.com'>示例站點(diǎn)鏈接</a>HTML結(jié)構(gòu)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>我的測(cè)試站點(diǎn)</title></head><body><p>這是我的頁(yè)面</p></body> </html>?
?
空白
代碼中包含的空格是沒(méi)有必要的；下面的兩個(gè)代碼片段是等價(jià)的：
<p>狗 狗 很 呆 萌。</p><p>狗 狗 很呆 萌。</p>渲染這些代碼的時(shí)候，HTML解釋器會(huì)將連續(xù)出現(xiàn)的空白字符減少為一個(gè)單獨(dú)的空格符。
那么為什么我們會(huì)使用那么多的空白呢? 可讀性 —— 如果你的代碼被很好地進(jìn)行格式化，那么就很容易理解你的代碼。
?
特殊字符
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
?
注釋
為了將一段HTML中的內(nèi)容置為注釋，你需要將其用特殊的記號(hào)<!--和-->包括起來(lái)， 比如：
<p>我在注釋外！</p><!-- <p>我在注釋內(nèi)！</p> -->頭部
HTML 頭部是包含在<head>?元素里面的內(nèi)容。不像 <body>元素的內(nèi)容會(huì)顯示在瀏覽器中，head 里面的內(nèi)容不會(huì)在瀏覽器中顯示，它的作用是包含一些頁(yè)面的元數(shù)據(jù)。
元數(shù)據(jù)
元數(shù)據(jù)就是描述數(shù)據(jù)的數(shù)據(jù)，而HTML有一個(gè)“官方的”方式來(lái)為一個(gè)文檔添加元數(shù)據(jù)——??<meta>?。有很多不同種類的?<meta>?可以被包含進(jìn)你的頁(yè)面的<head>元素，比如。
指定字符的編碼
<meta charset="utf-8">這個(gè)元素簡(jiǎn)單的指定了文檔的字符編碼 —— 在這個(gè)文檔中被允許使用的字符集。?utf-8?是一個(gè)通用的字符集，它包含了任何人類語(yǔ)言中的大部分的字符。
添加作者和描述
- name?指定了meta 元素的類型； 說(shuō)明該元素包含了什么類型的信息。
- content?指定了實(shí)際的元數(shù)據(jù)內(nèi)容。
CSS和JavaScript
如今，幾乎你使用的所有網(wǎng)站都會(huì)使用css讓網(wǎng)頁(yè)更加炫酷，使用js讓網(wǎng)頁(yè)有交互功能，比如視頻播放器，地圖，游戲以及更多功能。這些應(yīng)用在網(wǎng)頁(yè)中很常見(jiàn)，它們分別使用<link>元素以及?<script>?元素。
-
?<link>元素經(jīng)常位于文檔的頭部。這個(gè)link元素有2個(gè)屬性，rel="stylesheet"表明這是文檔的樣式表，而 href包含了樣式表文件的路徑：
<link rel="stylesheet" href="my-css-file.css"> -
<script>部分沒(méi)必要非要放在文檔頭部；實(shí)際上，把它放在文檔的尾部（在?</body>標(biāo)簽之前）是一個(gè)更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了HTML內(nèi)容（如果腳本加載某個(gè)不存在的元素，瀏覽器會(huì)報(bào)錯(cuò)）。
標(biāo)題和段落
?
在HTML中，每個(gè)段落是通過(guò)<p>元素標(biāo)簽進(jìn)行定義的, 比如下面這樣：
<p>我是一個(gè)段落，千真萬(wàn)確。</p>每個(gè)標(biāo)題（Heading）是通過(guò)“標(biāo)題標(biāo)簽”進(jìn)行定義的：
<h1>我是文章的標(biāo)題</h1>這里有六個(gè)標(biāo)題元素標(biāo)簽 ——?<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個(gè)元素代表文檔中不同級(jí)別的內(nèi)容;?<h1>?表示主標(biāo)題（the main heading），<h2>?表示二級(jí)子標(biāo)題（subheadings），<h3>?表示三級(jí)子標(biāo)題（sub-subheadings），等等。
列表
<ol><li>先用蛋白一個(gè)、鹽半茶匙及淀粉兩大匙攪拌均勻，調(diào)成“腌料”，雞胸肉切成約一厘米見(jiàn)方的碎丁并用“腌料”攪拌均勻，腌漬半小時(shí)。</li><li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻，調(diào)成“綜合調(diào)味料”。</li><li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內(nèi)，用大火快炸半分鐘，炸到變色之后，撈出來(lái)瀝干油汁備用。</li><li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調(diào)味料”繼續(xù)快炒。<ul><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li><li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li></ul></li> </ol>標(biāo)記
<i>?被用來(lái)傳達(dá)傳統(tǒng)上用斜體表達(dá)的意義：外國(guó)文字，分類名稱，技術(shù)術(shù)語(yǔ)，一種思想……
<b>?被用來(lái)傳達(dá)傳統(tǒng)上用粗體表達(dá)的意義：關(guān)鍵字，產(chǎn)品名稱，引導(dǎo)句……
<u>?被用來(lái)傳達(dá)傳統(tǒng)上用下劃線表達(dá)的意義：專有名詞，拼寫錯(cuò)誤……
<strong>強(qiáng)調(diào)重要的詞
超鏈接
- 通過(guò)將文本轉(zhuǎn)換為<a>元素內(nèi)的鏈接來(lái)創(chuàng)建基本鏈接，?給它一個(gè)href屬性（也稱為目標(biāo)），它將包含您希望鏈接指向的網(wǎng)址。
- 使用title屬性添加支持信息
?I'm creating a link to?百度.
- 塊級(jí)鏈接
可以將一些內(nèi)容轉(zhuǎn)換為鏈接，甚至是塊級(jí)元素。例如你想要將一個(gè)圖像轉(zhuǎn)換為鏈接，你只需把圖像元素放到<a></a>標(biāo)簽中間。
- 文檔片段
超鏈接除了可以鏈接到文檔外，也可以鏈接到HTML文檔的特定部分（被稱為文檔片段）。要做到這一點(diǎn)，你必須首先給要鏈接到的元素分配一個(gè)id屬性。例如，如果你想鏈接到一個(gè)特定的標(biāo)題，可以這樣做：
<h2 id="Mailing_address">Mailing address</h2>然后鏈接到那個(gè)特定的id，可以在URL的結(jié)尾使用一個(gè)哈希符號(hào)（#）指向它，例如：
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>你甚至可以在同一份文檔下，通過(guò)鏈接文檔片段，來(lái)鏈接到同一份文檔的另一部分：
<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>增加學(xué)生</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>后臺(tái)：
//post@RequestMapping(path = "/student",method = RequestMethod.POST)@ResponseBodypublic String saveStudent(String name,int age){System.out.println(name);System.out.println(age);return "success";}大部分用來(lái)定義表單小部件的元素都有一些他們自己的屬性。然而，在所有表單元素中都有一組通用屬性，它們可以對(duì)這些小部件進(jìn)行控制。下面是這些通用屬性的列表:
?
| autofocus | (false) | 這個(gè)布爾屬性允許您指定當(dāng)頁(yè)面加載時(shí)元素應(yīng)該自動(dòng)具有輸入焦點(diǎn)，除非用戶覆蓋它，例如通過(guò)鍵入不同的控件。文檔中只有一個(gè)與表單相關(guān)的元素可以指定這個(gè)屬性。 |
| disabled | (false) | 這個(gè)布爾屬性表示用戶不能與元素交互。如果沒(méi)有指定這個(gè)屬性，元素將從包含它的元素繼承設(shè)置，例如<fieldset>;如果沒(méi)有包含在設(shè)定了disabled屬性的元素里，那么這個(gè)元素就是可用的。 |
| form | ? | 小部件與之相關(guān)聯(lián)的表單元素。屬性值必需是同個(gè)文檔中的<form>?元素的?id屬性。理論上，它允許您在<form>元素之外設(shè)置一個(gè)表單小部件。然而，在實(shí)踐中，沒(méi)有任何支持該特性的瀏覽器。 |
| name | ? | 元素的名稱;這是跟表單數(shù)據(jù)一起提交的。 |
| value | ? | 元素的初始值。 |
密碼框
通過(guò)設(shè)置type屬性值為password來(lái)設(shè)置該類型框：
<input type="password" id="pwd" name="pwd">?
搜索框
通過(guò)設(shè)置 type屬性值為?search?來(lái)設(shè)置該類型框：
<input type="search" id="search" name="search">電話號(hào)碼欄：
通過(guò) type屬性的?tel?值設(shè)置該類型框：
<input type="tel" id="tel" name="tel">URL 欄
通過(guò)type屬性的url?值設(shè)置該類型框：
<input type="url" id="url" name="url">?多行文本框
多行文本框?qū)Ｖ甘褂?lt;textarea>元素，而不是使用<input>元素。
<textarea cols="30" rows="10"></textarea>按鈕
在HTML表單中，有三種按鈕：
Submit
將表單數(shù)據(jù)發(fā)送到服務(wù)器。對(duì)于<button>元素, 省略?type?屬性?(或是一個(gè)無(wú)效的?type?值) 的結(jié)果就是一個(gè)提交按鈕.
Reset
將所有表單小部件重新設(shè)置為它們的默認(rèn)值。
Anonymous
沒(méi)有自動(dòng)生效的按鈕，但是可以使用JavaScript代碼進(jìn)行定制。
?
每次向服務(wù)器發(fā)送數(shù)據(jù)時(shí)，都需要考慮安全性。到目前為止，HTML表單是最常見(jiàn)的攻擊路徑(可能發(fā)生攻擊的地方)。這些問(wèn)題從來(lái)都不是來(lái)自HTML表單本身，它們來(lái)自于服務(wù)器如何處理數(shù)據(jù)。
根據(jù)你所做的事情，你會(huì)遇到一些非常有名的安全問(wèn)題：
XSS 和 CSRF
跨站腳本(XSS)和跨站點(diǎn)請(qǐng)求偽造(CSRF)是常見(jiàn)的攻擊類型，它們發(fā)生在當(dāng)您將用戶發(fā)送的數(shù)據(jù)顯示給這個(gè)用戶或另一個(gè)用戶時(shí)。
XSS允許攻擊者將客戶端腳本注入到其他用戶查看的Web頁(yè)面中。攻擊者可以使用跨站點(diǎn)腳本攻擊的漏洞來(lái)繞過(guò)諸如同源策略之類的訪問(wèn)控制。這些攻擊的影響可能從一個(gè)小麻煩到一個(gè)重大的安全風(fēng)險(xiǎn)。
CSRF攻擊類似于XSS攻擊，因?yàn)樗鼈円韵嗤姆绞介_(kāi)始攻擊——向Web頁(yè)面中注入客戶端腳本——但它們的目標(biāo)是不同的。CSRF攻擊者試圖將權(quán)限升級(jí)到特權(quán)用戶(比如站點(diǎn)管理員)的級(jí)別，以執(zhí)行他們不應(yīng)該執(zhí)行的操作(例如，將數(shù)據(jù)發(fā)送給一個(gè)不受信任的用戶)。
XSS攻擊利用用戶對(duì)web站點(diǎn)的信任，而CSRF攻擊則利用網(wǎng)站對(duì)其用戶的信任。
為了防止這些攻擊，您應(yīng)該始終檢查用戶發(fā)送給服務(wù)器的數(shù)據(jù)(如果需要顯示)，盡量不要顯示用戶提供的HTML內(nèi)容。相反，您應(yīng)該對(duì)用戶提供的數(shù)據(jù)進(jìn)行處理，這樣您就不會(huì)逐字地顯示它。當(dāng)今市場(chǎng)上幾乎所有的框架都實(shí)現(xiàn)了一個(gè)最小的過(guò)濾器，它可以從任何用戶發(fā)送的數(shù)據(jù)中刪除HTML<script>、<iframe>?和<object>元素。這有助于降低風(fēng)險(xiǎn)，但并不一定會(huì)消除風(fēng)險(xiǎn)。
SQL注入
SQL 注入是一種試圖在目標(biāo)web站點(diǎn)使用的數(shù)據(jù)庫(kù)上執(zhí)行操作的攻擊類型。這通常包括發(fā)送一個(gè)SQL請(qǐng)求，希望服務(wù)器能夠執(zhí)行它（通常發(fā)生在應(yīng)用服務(wù)器試圖存儲(chǔ)由用戶發(fā)送的數(shù)據(jù)時(shí)）。這實(shí)際上是攻擊網(wǎng)站的主要途徑之一。?
其后果可能是可怕的，從數(shù)據(jù)丟失到通過(guò)使用特權(quán)升級(jí)控制整個(gè)網(wǎng)站基礎(chǔ)設(shè)施的攻擊。這是一個(gè)非常嚴(yán)重的威脅，您永遠(yuǎn)不應(yīng)該存儲(chǔ)用戶發(fā)送的數(shù)據(jù)，而不執(zhí)行一些清理工作(例如，在php/mysql基礎(chǔ)設(shè)施上使用mysql_real_escape_string()
HTTP數(shù)據(jù)頭注入和電子郵件注入
這種類型的攻擊出現(xiàn)在當(dāng)您的應(yīng)用程序基于表單上用戶的數(shù)據(jù)輸入構(gòu)建HTTP頭部或電子郵件時(shí)。這些不會(huì)直接損害您的服務(wù)器或影響您的用戶，但它們會(huì)引發(fā)一個(gè)更深入的問(wèn)題，例如會(huì)話劫持或網(wǎng)絡(luò)釣魚(yú)攻擊。
這些攻擊大多是無(wú)聲的，并且可以將您的服務(wù)器變成僵尸。
偏執(zhí):永遠(yuǎn)不要相信你的用戶
那么，你如何應(yīng)對(duì)這些威脅呢?這是一個(gè)遠(yuǎn)遠(yuǎn)超出本指南的主題，不過(guò)有一些規(guī)則需要牢記。最重要的原則是:永遠(yuǎn)不要相信你的用戶，包括你自己；即使是一個(gè)值得信賴的用戶也可能被劫持。
所有到達(dá)服務(wù)器的數(shù)據(jù)都必須經(jīng)過(guò)檢查和消毒。總是這樣。沒(méi)有例外。
- 遠(yuǎn)離有潛在危險(xiǎn)的字符轉(zhuǎn)義。應(yīng)該如何謹(jǐn)慎使用的特定字符取決于所使用的數(shù)據(jù)的上下文和所使用的服務(wù)器平臺(tái)，但是所有的服務(wù)器端語(yǔ)言都有相應(yīng)的功能。
- 限制輸入的數(shù)據(jù)量，只允許有必要的數(shù)據(jù)。
- 沙箱上傳文件(將它們存儲(chǔ)在不同的服務(wù)器上，只允許通過(guò)不同的子域訪問(wèn)文件，或者通過(guò)完全不同的域名訪問(wèn)文件更好)。
總結(jié)
以上是生活随笔為你收集整理的Java开发需要知道的HTML知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： node.js调试 BY：色拉油啊油
- 下一篇： 2017年html5行业报告,云适配发布