當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)

發(fā)布時(shí)間：2024/3/13 HTML 57 豆豆

生活随笔收集整理的這篇文章主要介紹了第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?一：Web入門

? ? 1:web文件命名

? ??在文件名中應(yīng)使用連字符(-)。搜索引擎把連字符當(dāng)作一個(gè)詞的分隔符，但不會(huì)以這種方式處理下劃線。

? ? 養(yǎng)成在文件夾和文件名中使用小寫，并且使用短橫線而不是空格來分隔的習(xí)慣。

? ? 2:居中圖像

img {display: block;margin: 0 auto; }

二：HTML

? ?head

? ? 1:許多<meta>?元素包含了name?和?content?特性:

name?特性指定了meta 元素的類型; 說明該元素包含了什么類型的信息。
content?指定了實(shí)際的元數(shù)據(jù)內(nèi)容。

? ? 2:為文檔設(shè)定主語言：

? ?超鏈接

? ? 1:URL可以指向HTML文件、文本文件、圖像、文本文檔、視頻和音頻文件以及可以在網(wǎng)絡(luò)上保存的任何其他內(nèi)容。如果瀏覽器不知道如何顯示或處理文件，它會(huì)詢問您是否要打開文件（需要選擇合適的本地應(yīng)用來打開或處理文件）或下載文件（以后處理它）。

? ? 2:塊級鏈接

? ? 將塊狀元素放在a標(biāo)簽之間，例如：img，即可實(shí)現(xiàn)一個(gè)塊狀鏈接。

? ? 3:錨點(diǎn)

? ??超鏈接可以鏈接到html文檔的特定部分（被稱為文檔片段），而不僅僅是文件的頂部。

? ?1）必須首先分配一個(gè)屬性給目標(biāo)元素，作為錨點(diǎn)

? ?2）然后在a標(biāo)簽的鏈接末尾，加上 #目標(biāo)id ?即可實(shí)現(xiàn)在點(diǎn)擊超鏈接時(shí)，直接跳轉(zhuǎn)到目標(biāo)位置而不僅僅是打開網(wǎng)頁。

? ? 4:鏈接到規(guī)范寫法

? ? 1）在鏈接文本中包含關(guān)鍵詞以有效地描述與之相關(guān)的信息。

? ? 2）不要重復(fù)URL作為鏈接文本的一部分；不要在鏈接文本中說“l(fā)ink”或“l(fā)inks to”，看起來很傻；鏈接標(biāo)簽盡可能短；

? ? 3）站內(nèi)跳轉(zhuǎn)使用相對鏈接；站外跳轉(zhuǎn)使用絕對鏈接；

? ? 4）鏈接到非html資源時(shí)留下清晰的指示，當(dāng)鏈接到一個(gè)需要下載的資源（如PDF或Word文檔）或流媒體（如視頻或音頻）或有另一個(gè)潛在的意想不到的效果（打開一個(gè)彈出窗口，或加載Flash電影），你應(yīng)該添加明確的提示。

? ? 5）當(dāng)您鏈接到要下載的資源而不是在瀏覽器中打開時(shí)，您可以使用下載屬性來提供一個(gè)默認(rèn)的保存文件名。

? ? 6）電子郵件鏈接：點(diǎn)擊一個(gè)鏈接或按鈕時(shí)，打開一個(gè)新的電子郵件發(fā)送信息而不是連接到一個(gè)資源或頁面。

? ? ? ? ?語法；使用<a>元素和mailto：URL。

<a href="mailto:郵箱">Send email to here</a>

? ? ? ? ?任何標(biāo)準(zhǔn)的郵件頭字段可以被添加到郵件鏈接的URL。其中最常用的是主題(subject)、抄送(cc)和主體(body)，只需按照郵件傳輸時(shí)的URL格式即可。

? ? ? ? ?應(yīng)用：自動(dòng)發(fā)送、抄送郵件的實(shí)現(xiàn)。動(dòng)態(tài)拼接URL，使用鍵值對傳遞郵件的內(nèi)容、發(fā)送地址等信息。

? ? 高級文本排版

? ? 1:描述列表

? ??這種列表的目的是標(biāo)記一組項(xiàng)目及其相關(guān)描述，例如術(shù)語和定義，或者是問題和答案等。

<dl><dt>項(xiàng)</dt><dd>描述</dd> </dl>

? ? 引用

? ? 1:塊引用

? ??如果一個(gè)塊級內(nèi)容（一個(gè)段落、多個(gè)段落、一個(gè)列表等）從其他地方被引用，你應(yīng)該把它用<blockquote>元素包裹起來表示，并且在cite屬性里用URL來指向引用的資源。

? ??瀏覽器在渲染塊引用時(shí)默認(rèn)會(huì)增加縮進(jìn)，作為引用的一個(gè)指示符。

? ? 2:行內(nèi)引用

? ??使用<q>元素，在cite屬性里用URL來指向引用的資源。

? ? 3:縮略語

? ??<abbr>——它常被用來包裹一個(gè)縮略語或縮寫，并且提供縮寫的解釋（包含在title屬性中），當(dāng)光標(biāo)移動(dòng)到項(xiàng)目上時(shí)會(huì)出現(xiàn)title內(nèi)容作為提示。

? ??還有另一個(gè)元素<acronym>，它基本上與<abbr>相同，專門用于首字母縮略詞而不是縮略語。然而，這已經(jīng)被廢棄了 - 它在瀏覽器的支持中不如<abbr>，并且具有類似的功能，所以沒有意義。只需使用<abbr>。

? ? 結(jié)構(gòu)化網(wǎng)站

? ? 1:文檔的基本部分

? ??

? ? 2:語義化的HTML布局元素?

<main>?每一個(gè)頁面上只能使用一次<main>，直接把它放到<body>中。
<article>?閉合一塊與自身相關(guān)的內(nèi)容，這塊內(nèi)容能夠解釋它自身而不是頁面上其他的內(nèi)容（例如一篇單獨(dú)的博客）。
<section>?近似于<article>，但是它更多的是伴隨著由一個(gè)單獨(dú)功能構(gòu)成的頁面（例如一個(gè)小型的地圖，或者是一組文章的標(biāo)題和摘要）。它被認(rèn)為最好的實(shí)際應(yīng)用是用標(biāo)題作為每一部分（section）的開頭；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，這要取決于內(nèi)容。
<aside>?包含的內(nèi)容并不與主要內(nèi)容有直接的聯(lián)系，但是它可以提供額外的不直接有聯(lián)系的信息（術(shù)語表?xiàng)l目，作者簡介，相關(guān)鏈接等等），在屏幕的右側(cè)邊欄。
<header>?展現(xiàn)了一系列的介紹性內(nèi)容。如果它是<body>?的子元素,它就定義了網(wǎng)站的全局頁眉。但是如果它是?<article>?或<section>?的子元素，它就定義了這些部分的特定的頁眉(不要把這些與titles and headings混淆)。
<nav>?包含了頁面主要的導(dǎo)航功能。
<footer>?包含了頁面的頁腳部分。

? ??

? ? 3:沒有語義化的布局元素

? ? 1）<span>?是一個(gè)行內(nèi)無語義元素，你應(yīng)該僅僅當(dāng)無法找到更好的語義元素包含內(nèi)容時(shí)使用，或者不想增加特定的含義。

? ? 2）<div>?是一個(gè)塊級無語義元素，你應(yīng)該僅僅當(dāng)找不到更好的塊級元素時(shí)使用，或者不想增加特定的意義。

警告: Div用起來非常便利以至于很容易被濫用。因?yàn)樗鼈儾粩y帶語義值，所以會(huì)讓你的HTML代碼變的混亂。要小心的使用它們，只有當(dāng)沒有更好的語義解決方案才能使用，而且要盡可能把它的使用量降到最低，否則，當(dāng)你升級和維護(hù)你的文檔時(shí)會(huì)非常困難。

? ? HTML調(diào)試

? ? 1:瀏覽器的開發(fā)者工具、審查元素

? ? 2:借助標(biāo)準(zhǔn)驗(yàn)證平臺(tái)：Markup Validation Service

? ?HTML圖片

? ? 1:圖片元素的替換性

? ??像<img>和<video>這樣的元素有時(shí)被稱之為替換元素，因?yàn)檫@樣的元素的內(nèi)容和尺寸由外部資源（像是一個(gè)圖片或視頻文件）所定義，而不是元素自身。

? ??不應(yīng)該使用HTML屬性來改變圖片的大小。如果你把尺寸設(shè)定的太大，最終圖片看起來會(huì)模糊；如果太小，會(huì)在下載遠(yuǎn)遠(yuǎn)大于你需要的圖片時(shí)浪費(fèi)帶寬。如果你沒有保持正確的寬高比，圖片可能看起來會(huì)扭曲。在把圖片放到你的網(wǎng)站頁面之前，你應(yīng)該使用圖形編輯器使圖片的尺寸正確。

? ??如果你實(shí)在需要改變圖片的尺寸，你應(yīng)該使用CSS而不是HTML。

? ??

? ? 2:為圖片搭配說明文字的方式來解說圖片

? ??使用 HTML5 的?<figure>?和?<figcaption>?元素：為圖片提供一個(gè)語義容器，在標(biāo)題和圖片之間建立清晰的關(guān)聯(lián)。

<figure><img src="images/xxx.jpg"alt="替換文本"><figcaption>描述性文字</figcaption> </figure>

? ??<figure>?可以是幾張圖片、一段代碼、音視頻、方程、表格或別的。

? ? 3使用img還是background-image

? ? 如果圖像對您的內(nèi)容里有意義，則應(yīng)使用HTML圖像。如果圖像純粹是裝飾，則應(yīng)使用CSS背景圖片。

? ?HTML音視頻

? ? 1:video

<video controls width="400" height="400"autoplay //自動(dòng)播放loop//循環(huán)播放muted//靜音preload="none"//緩沖poster="poster.png">//這個(gè)屬性指向了一個(gè)圖像的URL，這個(gè)圖像會(huì)在視頻播放前顯示。通常用于粗略的預(yù)覽或者廣告<source src="rabbit320.mp4" type="video/mp4">//優(yōu)先播放mp4<source src="rabbit320.webm" type="video/webm">//如果第一個(gè)格式不支持，則播放此格式<p>如果上面格式都不支持，則顯示替換文本</p><track kind="subtitles" src="subtitles_en.vtt" srclang="en">//音軌文本：subtitle(翻譯字幕)\captions(同步翻譯對白)\timed descriptions(將文字轉(zhuǎn)換為音頻，用于服務(wù)那些有視覺障礙的人) </video>

? ? 2：audio

<audio controls ><source src="viper.mp3" type="audio/mp3">>//首選格式<source src="viper.ogg" type="audio/ogg">//備用格式<p>如果上面格式都不支持，則顯示替換文本</p> </audio>

? ?HTML嵌入技術(shù)

? ? 1:<iframe>元素旨在允許您將其他Web文檔嵌入到當(dāng)前文檔中

? ? 2:安全隱患

? ??單擊劫持是一種常見的iframe攻擊，黑客將隱藏的iframe嵌入到您的文檔中（或?qū)⒛奈臋n嵌入到他們自己的惡意網(wǎng)站），并使用它來捕獲用戶的交互。這是誤導(dǎo)用戶或竊取敏感數(shù)據(jù)的常見方式。

? ? 3:防范

? ??使用 HTTPS來打開iframe的內(nèi)容：HTTPS減少了遠(yuǎn)程內(nèi)容在傳輸過程中被篡改的機(jī)會(huì)；HTTPS防止嵌入式內(nèi)容訪問您的父文檔中的內(nèi)容；

? ??始終使用sandbox屬性：只給嵌入式內(nèi)容工作所需的權(quán)限，使用沒有參數(shù)的sandbox屬性來強(qiáng)制執(zhí)行所有可用的限制。重要的一點(diǎn)是，你永遠(yuǎn)不應(yīng)該同時(shí)添加allow-scripts和allow-same-origin到你的sandbox屬性中-在這種情況下，嵌入的內(nèi)容可以繞過，從執(zhí)行腳本停止網(wǎng)站同源安全策略，并使用JavaScript來關(guān)閉完全沙盒。

? ? 配置CSP指令：CSP代表內(nèi)容安全策略，它提供一組HTTP標(biāo)頭（由web服務(wù)器發(fā)送時(shí)與元數(shù)據(jù)一起發(fā)送的元數(shù)據(jù)），旨在提高HTML文檔的安全性。

? HTML矢量圖? ?

? ? 1:位圖與矢量圖

位圖使用像素網(wǎng)格來定義：一個(gè)位圖文件精確包含了每個(gè)像素的位置和它的色彩信息。流行的位圖格式包括?Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
矢量圖使用算法來定義：一個(gè)矢量圖文件包含了圖形和路徑的定義，電腦可以根據(jù)這些定義計(jì)算出當(dāng)它們在屏幕上渲染時(shí)應(yīng)該呈現(xiàn)的樣子。??

? ? 2:SVG

? ??SVG?是用于描述矢量圖像的XML語言。

? ? 3:使用SVG

<img srcset="equilateral.svg" src="equilateral.png" alt="triangle with equal sides" >//支持svg的瀏覽器將加載SVG - 較舊的瀏覽器將加載PNG

? 自適應(yīng)的圖片：一種可以在不同的屏幕尺寸和分辨率的設(shè)備上都能良好工作以及其他特性的圖片

? ? 1:使用不同的尺寸

? ? 2:相同尺寸，使用不同的分辨率

? ? 3:不同設(shè)備上，顯示經(jīng)過不同程度裁剪過的內(nèi)容(藝術(shù)方向)

? ? 4:HTML自適應(yīng)圖片與css自適應(yīng)圖片的區(qū)別

? ? 當(dāng)瀏覽器開始加載一個(gè)頁面, 它會(huì)先下載 (預(yù)加載) 任意的圖片，這是發(fā)生在主解析器開始加載和解析頁面的 CSS 和 JavaScript 之前的。

? ??你不能先加載好?<img>?元素后, 再用?JavaScript 檢測視圖的寬度，如果覺得大小不合適，就動(dòng)態(tài)地加載小的圖片替換已經(jīng)加載好的圖片，這樣的話, 原始的圖像已經(jīng)被加載了, 然后你也加載了小的圖像,這是很糟糕的做法。

? HTML表單基礎(chǔ)

? ? 1:使用label來為input添加標(biāo)簽

? ? 正確設(shè)置標(biāo)簽的另一個(gè)好處是可以在所有瀏覽器中單擊標(biāo)簽來激活相應(yīng)的小部件：點(diǎn)擊標(biāo)簽改變可用性；獲取焦點(diǎn)；彈出下拉列表；適當(dāng)放大或高亮顯示等。

? ??

? ? 2:input與textarea的默認(rèn)值

? ??<input/>?標(biāo)簽是一個(gè)空元素，這意味著它不需要關(guān)閉標(biāo)簽，使用value?屬性指定默認(rèn)值。

? ??<textarea></textarea>只需在元素的開始和結(jié)束標(biāo)記之間放置默認(rèn)值即可。

? ? 3:button

? ??<button>元素也接受一個(gè)?type屬性，它接受三個(gè)值中的一個(gè):submit,?reset或者?button。

? ??使用相應(yīng)類型的?<input>元素來生成一個(gè)按鈕，如?<input type="submit">：<input>元素只允許純文本作為其標(biāo)簽，而<button>元素允許設(shè)置文本、圖片等。

? ? 4:提交數(shù)據(jù)

? ?1）<form>?元素將定義如何通過action?屬性和?method屬性來發(fā)送數(shù)據(jù)的位置和方式。?

? ?2）還需要為我們的數(shù)據(jù)提供一個(gè)名稱：需要在每個(gè)表單小部件上使用?name?屬性來收集特定的數(shù)據(jù)。

? ? 5:嚴(yán)格禁止在一個(gè)表單內(nèi)嵌套另一個(gè)表單。嵌套會(huì)使表單的行為不可預(yù)知。

? ? 6:不建議在<form>元素之外使用表單小部件，跨瀏覽器對這個(gè)特性的實(shí)現(xiàn)還不足以使用。

? ??

? ? 7:使用<fieldset> 和?<legend> 元素分組管理表單字段

? ??<fieldset>元素用于創(chuàng)建具有相同目的的小部件組的方式，可以在<fieldset>標(biāo)簽后加上一個(gè)?<legend>元素來給<fieldset>進(jìn)行描述備注。

<form><fieldset><legend>描述</legend><p><input type="radio" name="size" id="size_1" value="small"><label for="size_1">Small</label></p><p><input type="radio" name="size" id="size_2" value="medium"><label for="size_2">Medium</label></p><p><input type="radio" name="size" id="size_3" value="large"><label for="size_3">Large</label></p></fieldset> </form>

? ? 8: 表單原生部件的通用屬性

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

? ? 9:input標(biāo)簽

? ? 1）善用input標(biāo)簽的type屬性！

? ? ? ? input標(biāo)簽的type屬性已經(jīng)指明了該輸入域的內(nèi)容類型，自帶格式校驗(yàn)！

? ? ? ? 最常見的：電話輸入域、email輸入、url輸入等等。

? ? 10：select標(biāo)簽

? ? 1）默認(rèn)選中項(xiàng)：使用selected屬性在所需的<option>元素上設(shè)置選擇框的默認(rèn)值。

? ? 2）選項(xiàng)分組：<option>元素也可以嵌套在<optgroup>元素中，以創(chuàng)建視覺相關(guān)的選項(xiàng)組。

? ? 3）多選：將multiple屬性添加到<select>元素，您可以允許用戶通過操作系統(tǒng)提供的默認(rèn)機(jī)制來選擇幾個(gè)值。

? ? 11:單選按鈕

? ? 1）幾個(gè)單選按鈕可以連接在一起。如果它們的name屬性共享相同的值，那么它們將被認(rèn)為屬于同一組的按鈕。同一組中只有一個(gè)按鈕可以同時(shí)被選；這意味著當(dāng)其中一個(gè)被選中時(shí)，所有其他的都將自動(dòng)未選中。

? ??

? ? 12:高級input部件

? ? 通過type屬性即可使用各種高級部件！例如：數(shù)字、滑塊、日期選擇器、本地時(shí)間、年月日星期、拾色器、文件上傳、隱藏內(nèi)容、進(jìn)度條等。

? ??

? ? 13：儀表盤(米尺)部件（在Internet Explorer中沒有支持，但是其他瀏覽器支持它）

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>? ?

如果當(dāng)前值位于該范圍的優(yōu)先部分，則該條是綠色的。
如果當(dāng)前值位于該范圍的平均部分，則該條是黃色的。
如果當(dāng)前值處于最糟糕的范圍，則該條是紅色的。

? ? 14:表單數(shù)據(jù)提交

? ? 1）action的URL

? ??可以指定使用HTTPS(安全HTTP)協(xié)議的URL。當(dāng)這樣做時(shí)，數(shù)據(jù)將與請求的其余部分一起加密，即使表單本身是托管在使用HTTP訪問的不安全頁面上。

? ? 另一方面，如果表單是在安全頁面上托管的，但是您指定了一個(gè)不安全的HTTP URL，它帶有action屬性，所有的瀏覽器都會(huì)在每次嘗試發(fā)送數(shù)據(jù)時(shí)向用戶顯示一個(gè)安全警告，因?yàn)閿?shù)據(jù)不會(huì)被加密。

? ? 2）method

如果您需要發(fā)送一個(gè)密碼(或其他敏感數(shù)據(jù))，永遠(yuǎn)不要使用GET方法否則數(shù)據(jù)會(huì)在URL欄中顯示，這將非常不安全。

如果您需要發(fā)送大量的數(shù)據(jù)，那么POST方法是首選的，因?yàn)橐恍g覽器限制了URL的大小。此外，許多服務(wù)器限制它們接受的URL的長度。

? ? 3）發(fā)送文件

? ??由于HTTP是一種文本協(xié)議，所以處理文件等二進(jìn)制數(shù)據(jù)有特殊的要求。

? ??如果你想要發(fā)送文件，你需要額外的三個(gè)步驟：

將method屬性設(shè)置為POST，因?yàn)槲募?nèi)容不能放入U(xiǎn)RL參數(shù)中。
將enctype的值設(shè)置為multipart/form-data，因?yàn)?strong>數(shù)據(jù)將被分成多個(gè)部分，每個(gè)文件分別對應(yīng)一個(gè)文件以及表單正文中包含的文本數(shù)據(jù)(如果文本也輸入到表單中)。
包含一個(gè)或多個(gè)File picker小部件，允許用戶選擇將要上傳的文件。

? ??

? ? 15:Web安全

? ? 1）web安全策略

? ? 內(nèi)容安全策略(CSP):白名單的機(jī)制對網(wǎng)站加載或執(zhí)行的資源起作用，通過 HTTP 頭信息或者 meta 元素定義網(wǎng)站只接受我們指定的請求資源。

? ??同源策略：同源是指 ?域名，協(xié)議，端口相同。執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁面的，即檢查是否同源，如果非同源，那么在請求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問。

? ? 2）XSS 、CSRF、SSRF

? ??跨站腳本攻擊(XSS)：XSS允許攻擊者將客戶端腳本注入到其他用戶查看的Web頁面中。攻擊者可以使用跨站點(diǎn)腳本攻擊的漏洞來繞過諸如同源策略之類的訪問控制。

? ?跨站請求偽造(CSRF）：CSRF攻擊類似于XSS攻擊，向Web頁面中注入客戶端腳本。但它們的目標(biāo)是不同的，CSRF攻擊者試圖升級到特權(quán)用戶(比如站點(diǎn)管理員)的權(quán)限，以執(zhí)行他們不應(yīng)該執(zhí)行的操作。

? 【XSS攻擊利用用戶對web站點(diǎn)的信任，而CSRF攻擊則利用網(wǎng)站為其用戶提供的信任。】

? ?服務(wù)器端請求偽造(SSRF)：由攻擊者構(gòu)造形成由服務(wù)器端發(fā)起請求的一個(gè)安全漏洞。SSRF攻擊的目標(biāo)是從外網(wǎng)無法訪問的內(nèi)部系統(tǒng)(正是因?yàn)樗怯煞?wù)端發(fā)起的，所以它能夠請求到與它相連而與外網(wǎng)隔離的內(nèi)部系統(tǒng))。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?SSRF形成的原因大都是由于服務(wù)端提供了從其他服務(wù)器應(yīng)用獲取數(shù)據(jù)的功能且沒有對目標(biāo)地址做過濾與限制。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如何防御：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.過濾返回信息，驗(yàn)證遠(yuǎn)程服務(wù)器對請求的響應(yīng)。如果web應(yīng)用是去獲取某一種類型的文件。那么在把返回結(jié)果展示給用戶之前先驗(yàn)證返回的信息是否符合標(biāo)準(zhǔn)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.統(tǒng)一錯(cuò)誤信息，避免用戶可以根據(jù)錯(cuò)誤信息來判斷遠(yuǎn)程服務(wù)器的端口狀態(tài)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.限制請求的端口為http常用的端口，比如，80，443，8080，8090
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4.黑名單內(nèi)網(wǎng)ip。避免應(yīng)用被用來獲取內(nèi)網(wǎng)數(shù)據(jù)，攻擊內(nèi)網(wǎng)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?5.禁用不需要的協(xié)議。僅僅允許http和https請求。可以防止類似于file://, gopher://, ftp://等引起的問題。

? ? 3）SQL 注入

? ??試圖在目標(biāo)web站點(diǎn)使用的數(shù)據(jù)庫上執(zhí)行操作的攻擊類型。

? ? 4）HTTP頭注入和電子郵件注入

? ??基于表單上用戶的數(shù)據(jù)輸入構(gòu)建HTTP頭部或電子郵件時(shí)，就會(huì)出現(xiàn)這種類型的攻擊。

? ? 5）表單安全原則：永遠(yuǎn)不要相信你的用戶

? ? 所有到達(dá)服務(wù)器的數(shù)據(jù)都必須經(jīng)過檢查和消毒。

有潛在危險(xiǎn)的字符轉(zhuǎn)義。
限制輸入的數(shù)據(jù)量，只允許有必要的數(shù)據(jù)。
沙箱上傳文件(將它們存儲(chǔ)在不同的服務(wù)器上，只允許通過不同的子域訪問文件，或者通過完全不同的域名訪問文件更好)。

? ? 16:表單數(shù)據(jù)校驗(yàn)

? ? 1）客戶端校驗(yàn)

JavaScript?校驗(yàn)，這是可以完全自定義的實(shí)現(xiàn)方式；
HTML5?內(nèi)置的校驗(yàn)，這不需要 JavaScript ，而且性能更好，但是不能自定義校驗(yàn)過程。

? ? 2）服務(wù)器端校驗(yàn)則是發(fā)生在瀏覽器提交數(shù)據(jù)并被服務(wù)器端程序接收之后 ——?通常服務(wù)器端校驗(yàn)都是發(fā)生在將數(shù)據(jù)寫入數(shù)據(jù)庫之前，如果數(shù)據(jù)有錯(cuò)誤，則會(huì)直接從服務(wù)器端返回錯(cuò)誤消息，并且告訴瀏覽器端發(fā)生錯(cuò)誤的具體位置和原因。

? ? 3）使用H5的表單數(shù)據(jù)校驗(yàn)屬性

? ? ? ? 1.最簡單的HTML5驗(yàn)證功能是?required屬性 — 如果要使輸入成為必需的，則可以使用此屬性標(biāo)記元素。

? ? ? ? 2.?使用pattern?屬性-它們是理想的表單驗(yàn)證器 (以及 JavaScript 中其它許多的用途)，通過正則表達(dá)式校驗(yàn)輸入。

? ? ? ? 3.限制輸入長度-所有文本框 (<input>?或?<textarea>) 可以強(qiáng)制使用minlength?和?maxlength?屬性. 如果值小于該字段?minlength?的值或大于?maxlength?值則無效.

? ? 4）使用H5內(nèi)建的校驗(yàn)API

validationMessage	一個(gè)本地化消息，描述元素不滿足驗(yàn)證條件時(shí)（如果有的話）的文本信息。如果元素?zé)o需驗(yàn)證（willValidate?為?false），或元素的值滿足驗(yàn)證條件時(shí)，為空字符串。
validity	一個(gè)?ValidityState?對象，描述元素的驗(yàn)證狀態(tài)。
validity.customError	如果元素設(shè)置了自定義錯(cuò)誤，返回?true?；否則返回false。
validity.patternMismatch	如果元素的值不匹配所設(shè)置的正則表達(dá)式，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.rangeOverflow	如果元素的值高于所設(shè)置的最大值，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.rangeUnderflow	如果元素的值低于所設(shè)置的最小值，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.stepMismatch	如果元素的值不符合 step 屬性的規(guī)則，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.tooLong	如果元素的值超過所設(shè)置的最大長度，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.typeMismatch	如果元素的值出現(xiàn)語法錯(cuò)誤，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:invalid?CSS 偽類。
validity.valid	如果元素的值不存在驗(yàn)證問題，返回?true，否則返回?false。當(dāng)此屬性為?true?時(shí)，元素將命中??:valid?CSS 偽類，否則命中?:invalid?CSS 偽類。
validity.valueMissing	如果元素設(shè)置了 required 屬性且值為空，返回?true，否則返回?false。當(dāng)此屬性為 true 時(shí)，元素將命中 ?:invalid?CSS 偽類。
willValidate	如果元素在表單提交時(shí)將被驗(yàn)證，返回?true，否則返回?false。

? ??

checkValidity()

如果元素的值不存在驗(yàn)證問題，返回?true，否則返回?false。如果元素驗(yàn)證失敗，此方法會(huì)觸發(fā)invalid事件。

setCustomValidity(message)

為元素添加一個(gè)自定義的錯(cuò)誤消息；如果設(shè)置了自定義錯(cuò)誤消息，則該元素被認(rèn)為是無效的，并顯示指定的錯(cuò)誤。這允許你使用 JavaScript 代碼來建立驗(yàn)證失敗，而不是用標(biāo)準(zhǔn)約束驗(yàn)證 API 所提供的。在報(bào)告問題時(shí)，將向用戶顯示自定義消息。

如果參數(shù)為空，則清空自定義錯(cuò)誤。

? ? 5）使用偽類進(jìn)行校驗(yàn)反饋

? ? 當(dāng)一個(gè)元素校驗(yàn)通過時(shí)：

該元素將可以通過?CSS?偽類?:valid?進(jìn)行特殊的樣式化；
如果用戶嘗試提交表單，如果沒有其它的控制來阻止該操作（比如JavaScript即可阻止提交），那么該表單的數(shù)據(jù)會(huì)被提交。

? ? 如果一個(gè)元素未校驗(yàn)通過：

該元素將可以通過?CSS?偽類?:invalid?進(jìn)行樣式化；
如果用戶嘗試提交表單，瀏覽器會(huì)展示出錯(cuò)誤消息，并停止表單的提交。?

? ??

? ? 17:基于原生部件實(shí)現(xiàn)自定義的風(fēng)格

? ? 1）設(shè)計(jì)：要改造哪種部件、有哪些狀態(tài)、各個(gè)狀態(tài)分別是什么效果

? ? 2）創(chuàng)建：定義語義化的html元素

? ? 3）改造：通過css實(shí)現(xiàn)各個(gè)狀態(tài)下的樣式

? ? 4）生動(dòng)：通過js使部件添加更多響應(yīng)與特性

? ? 18:使用js發(fā)送表單數(shù)據(jù)——Ajax

? ? 1）使用 XMLHttpRequest 和 the FormData object（表單對象）

? ??使用?FormData?對象來構(gòu)建用于傳輸?shù)谋韱螖?shù)據(jù)，然后通過ajax發(fā)送數(shù)據(jù)。

? ? 【使用XMLHttpRequest會(huì)受到同源策略的影響】

? ? 2）發(fā)送文件

? ??使用了FileReader?API來訪問二進(jìn)制數(shù)據(jù)；調(diào)用append方法將你需要發(fā)送的File對象或者Blob對象添加到formData；然后發(fā)送這個(gè)請求。

// 我們在頁面加載時(shí)初始化我們的腳本. window.addEventListener('load', function () {// 這些變量用于存儲(chǔ)表單數(shù)據(jù)var text = document.getElementById("i1");var file = {dom : document.getElementById("i2"),binary : null};// 使用 FileReader API 獲取文件內(nèi)容var reader = new FileReader();// 因?yàn)?FileReader 是異步的, 會(huì)在完成讀取文件時(shí)存儲(chǔ)結(jié)果reader.addEventListener("load", function () {file.binary = reader.result;});// 頁面加載時(shí), 如果一個(gè)文件已經(jīng)被選擇, 那么讀取該文件.if(file.dom.files[0]) {reader.readAsBinaryString(file.dom.files[0]);}// 如果沒有，一旦用戶選擇了它，就讀取文件。file.dom.addEventListener("change", function () {if(reader.readyState === FileReader.LOADING) {reader.abort();}reader.readAsBinaryString(file.dom.files[0]);});// 在我們的主函數(shù)中發(fā)送數(shù)據(jù)function sendData() {// 如果存在被選擇的文件，等待它讀取完成// 如果沒有, 延遲函數(shù)的執(zhí)行if(!file.binary && file.dom.files.length > 0) {setTimeout(sendData, 10);return;}// 要構(gòu)建我們的多部分表單數(shù)據(jù)請求,// 我們需要一個(gè)XMLHttpRequest 實(shí)例var XHR = new XMLHttpRequest();// 我們需要一個(gè)分隔符來定義請求的每一部分。var boundary = "blob";// 將我們的請求主體存儲(chǔ)于一個(gè)字符串中var data = "";// 所以，如果用戶已經(jīng)選擇了一個(gè)文件if (file.dom.files[0]) {// 在請求體中開始新的一部分data += "--" + boundary + "\r\n";// 把它描述成表單數(shù)據(jù)data += 'content-disposition: form-data; '// 定義表單數(shù)據(jù)的名稱+ 'name="' + file.dom.name + '"; '// 提供文件的真實(shí)名字+ 'filename="' + file.dom.files[0].name + '"\r\n';// 和文件的MIME類型data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';// 元數(shù)據(jù)和數(shù)據(jù)之間有一條空行。data += '\r\n';// 添加二進(jìn)制數(shù)據(jù)到請求體中data += file.binary + '\r\n';}// 文本數(shù)據(jù)是簡單的// 開始一個(gè)新的部分在請求體中data += "--" + boundary + "\r\n";// 說它是表單數(shù)據(jù)，并命名它data += 'content-disposition: form-data; name="' + text.name + '"\r\n';// 元數(shù)據(jù)和數(shù)據(jù)之間有一條空行。data += '\r\n';// 添加文本數(shù)據(jù)到請求體中data += text.value + "\r\n";// 一旦完成，關(guān)閉請求體data += "--" + boundary + "--";// 定義成功提交數(shù)據(jù)執(zhí)行的語句XHR.addEventListener('load', function(event) {alert('?！數(shù)據(jù)已發(fā)送且響應(yīng)已加載。');});// 定義發(fā)生錯(cuò)誤時(shí)做的事XHR.addEventListener('error', function(event) {alert('哎呀！出了問題。');});// 建立請求XHR.open('POST', 'https://example.com/cors.php');// 添加需要的HTTP報(bào)頭來處理多部分表單數(shù)據(jù)POST請求XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);// 最后，發(fā)送數(shù)據(jù)。XHR.send(data);}// 訪問表單…var form = document.getElementById("myForm");// ……接管提交事件form.addEventListener('submit', function (event) {event.preventDefault();sendData();}); }); 使用formData發(fā)送文件

? ? 19:舊瀏覽器的表單兼容性問題

? ? 1）在許多情況下，HTML表單是否支持CSS是最大的問題

? ? 只需要檢查你想用的元素或接口是否支持CSS即可。

? ? 2）優(yōu)雅地降級(Graceful degradation)是web開發(fā)者最好的朋友

? ??通過同時(shí)支持多種瀏覽器來構(gòu)建優(yōu)秀內(nèi)容：如果一個(gè)瀏覽器不能理解高級特性，那么就執(zhí)行后面的替代方案。

? ? ?

三：理解Web語義化

? ? ?1:語義化

? ??就是讓機(jī)器(搜索引擎)可以讀懂內(nèi)容。

? ? 2:如何語義化

? ? 使用最恰當(dāng)?shù)臉?biāo)簽來描述內(nèi)容，而不是無腦的堆砌div和span。

? ??

轉(zhuǎn)載于:https://www.cnblogs.com/ygj0930/p/9536849.html

總結(jié)

以上是生活随笔為你收集整理的第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： springboot+vue校园新闻网站
下一篇： JavaWeb之HTML标签