當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/3/13 HTML 54 豆豆

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

?一：Web入門

? ? 1:web文件命名

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

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

? ? 2:居中圖像

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

二：HTML

? ?head

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

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

? ? 2:為文檔設定主語言：

? ?超鏈接

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

? ? 2:塊級鏈接

? ? 將塊狀元素放在a標簽之間，例如：img，即可實現一個塊狀鏈接。

? ? 3:錨點

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

? ?1）必須首先分配一個屬性給目標元素，作為錨點

? ?2）然后在a標簽的鏈接末尾，加上 #目標id ?即可實現在點擊超鏈接時，直接跳轉到目標位置而不僅僅是打開網頁。

? ? 4:鏈接到規范寫法

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

? ? 2）不要重復URL作為鏈接文本的一部分；不要在鏈接文本中說“link”或“links to”，看起來很傻；鏈接標簽盡可能短；

? ? 3）站內跳轉使用相對鏈接；站外跳轉使用絕對鏈接；

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

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

? ? 6）電子郵件鏈接：點擊一個鏈接或按鈕時，打開一個新的電子郵件發送信息而不是連接到一個資源或頁面。

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

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

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

? ? ? ? ?應用：自動發送、抄送郵件的實現。動態拼接URL，使用鍵值對傳遞郵件的內容、發送地址等信息。

? ? 高級文本排版

? ? 1:描述列表

? ??這種列表的目的是標記一組項目及其相關描述，例如術語和定義，或者是問題和答案等。

? ? 引用

? ? 1:塊引用

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

? ??瀏覽器在渲染塊引用時默認會增加縮進，作為引用的一個指示符。

? ? 2:行內引用

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

? ? 3:縮略語

? ??<abbr>——它常被用來包裹一個縮略語或縮寫，并且提供縮寫的解釋（包含在title屬性中），當光標移動到項目上時會出現title內容作為提示。

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

? ? 結構化網站

? ? 1:文檔的基本部分

? ??

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

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

? ??

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

? ? 1）<span>?是一個行內無語義元素，你應該僅僅當無法找到更好的語義元素包含內容時使用，或者不想增加特定的含義。

? ? 2）<div>?是一個塊級無語義元素，你應該僅僅當找不到更好的塊級元素時使用，或者不想增加特定的意義。

警告: Div用起來非常便利以至于很容易被濫用。因為它們不攜帶語義值，所以會讓你的HTML代碼變的混亂。要小心的使用它們，只有當沒有更好的語義解決方案才能使用，而且要盡可能把它的使用量降到最低，否則，當你升級和維護你的文檔時會非常困難。

? ? HTML調試

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

? ? 2:借助標準驗證平臺：Markup Validation Service

? ?HTML圖片

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

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

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

? ??如果你實在需要改變圖片的尺寸，你應該使用CSS而不是HTML。

? ??

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

? ??使用 HTML5 的?<figure>?和?<figcaption>?元素：為圖片提供一個語義容器，在標題和圖片之間建立清晰的關聯。

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

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

? ? 3使用img還是background-image

? ? 如果圖像對您的內容里有意義，則應使用HTML圖像。如果圖像純粹是裝飾，則應使用CSS背景圖片。

? ?HTML音視頻

? ? 1:video

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

? ? 2：audio

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

? ?HTML嵌入技術

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

? ? 2:安全隱患

? ??單擊劫持是一種常見的iframe攻擊，黑客將隱藏的iframe嵌入到您的文檔中（或將您的文檔嵌入到他們自己的惡意網站），并使用它來捕獲用戶的交互。這是誤導用戶或竊取敏感數據的常見方式。

? ? 3:防范

? ??使用 HTTPS來打開iframe的內容：HTTPS減少了遠程內容在傳輸過程中被篡改的機會；HTTPS防止嵌入式內容訪問您的父文檔中的內容；

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

? ? 配置CSP指令：CSP代表內容安全策略，它提供一組HTTP標頭（由web服務器發送時與元數據一起發送的元數據），旨在提高HTML文檔的安全性。

? HTML矢量圖? ?

? ? 1:位圖與矢量圖

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

? ? 2:SVG

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

? ? 3:使用SVG

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

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

? ? 1:使用不同的尺寸

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

? ? 3:不同設備上，顯示經過不同程度裁剪過的內容(藝術方向)

? ? 4:HTML自適應圖片與css自適應圖片的區別

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

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

? HTML表單基礎

? ? 1:使用label來為input添加標簽

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

? ??

? ? 2:input與textarea的默認值

? ??<input/>?標簽是一個空元素，這意味著它不需要關閉標簽，使用value?屬性指定默認值。

? ??<textarea></textarea>只需在元素的開始和結束標記之間放置默認值即可。

? ? 3:button

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

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

? ? 4:提交數據

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

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

? ? 5:嚴格禁止在一個表單內嵌套另一個表單。嵌套會使表單的行為不可預知。

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

? ??

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

? ??<fieldset>元素用于創建具有相同目的的小部件組的方式，可以在<fieldset>標簽后加上一個?<legend>元素來給<fieldset>進行描述備注。

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

? ? 9:input標簽

? ? 1）善用input標簽的type屬性！

? ? ? ? input標簽的type屬性已經指明了該輸入域的內容類型，自帶格式校驗！

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

? ? 10：select標簽

? ? 1）默認選中項：使用selected屬性在所需的<option>元素上設置選擇框的默認值。

? ? 2）選項分組：<option>元素也可以嵌套在<optgroup>元素中，以創建視覺相關的選項組。

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

? ? 11:單選按鈕

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

? ??

? ? 12:高級input部件

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

? ??

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

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

如果當前值位于該范圍的優先部分，則該條是綠色的。
如果當前值位于該范圍的平均部分，則該條是黃色的。
如果當前值處于最糟糕的范圍，則該條是紅色的。

? ? 14:表單數據提交

? ? 1）action的URL

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

? ? 另一方面，如果表單是在安全頁面上托管的，但是您指定了一個不安全的HTTP URL，它帶有action屬性，所有的瀏覽器都會在每次嘗試發送數據時向用戶顯示一個安全警告，因為數據不會被加密。

? ? 2）method

如果您需要發送一個密碼(或其他敏感數據)，永遠不要使用GET方法否則數據會在URL欄中顯示，這將非常不安全。

如果您需要發送大量的數據，那么POST方法是首選的，因為一些瀏覽器限制了URL的大小。此外，許多服務器限制它們接受的URL的長度。

? ? 3）發送文件

? ??由于HTTP是一種文本協議，所以處理文件等二進制數據有特殊的要求。

? ??如果你想要發送文件，你需要額外的三個步驟：

將method屬性設置為POST，因為文件內容不能放入URL參數中。
將enctype的值設置為multipart/form-data，因為數據將被分成多個部分，每個文件分別對應一個文件以及表單正文中包含的文本數據(如果文本也輸入到表單中)。
包含一個或多個File picker小部件，允許用戶選擇將要上傳的文件。

? ??

? ? 15:Web安全

? ? 1）web安全策略

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

? ??同源策略：同源是指 ?域名，協議，端口相同。執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的，即檢查是否同源，如果非同源，那么在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。

? ? 2）XSS 、CSRF、SSRF

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

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

? 【XSS攻擊利用用戶對web站點的信任，而CSRF攻擊則利用網站為其用戶提供的信任。】

? ?服務器端請求偽造(SSRF)：由攻擊者構造形成由服務器端發起請求的一個安全漏洞。SSRF攻擊的目標是從外網無法訪問的內部系統(正是因為它是由服務端發起的，所以它能夠請求到與它相連而與外網隔離的內部系統)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?SSRF形成的原因大都是由于服務端提供了從其他服務器應用獲取數據的功能且沒有對目標地址做過濾與限制。

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

? ? 3）SQL 注入

? ??試圖在目標web站點使用的數據庫上執行操作的攻擊類型。

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

? ??基于表單上用戶的數據輸入構建HTTP頭部或電子郵件時，就會出現這種類型的攻擊。

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

? ? 所有到達服務器的數據都必須經過檢查和消毒。

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

? ? 16:表單數據校驗

? ? 1）客戶端校驗

JavaScript?校驗，這是可以完全自定義的實現方式；
HTML5?內置的校驗，這不需要 JavaScript ，而且性能更好，但是不能自定義校驗過程。

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

? ? 3）使用H5的表單數據校驗屬性

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

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

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

? ? 4）使用H5內建的校驗API

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

? ??

checkValidity()	如果元素的值不存在驗證問題，返回?true，否則返回?false。如果元素驗證失敗，此方法會觸發invalid事件。
setCustomValidity(message)	為元素添加一個自定義的錯誤消息；如果設置了自定義錯誤消息，則該元素被認為是無效的，并顯示指定的錯誤。這允許你使用 JavaScript 代碼來建立驗證失敗，而不是用標準約束驗證 API 所提供的。在報告問題時，將向用戶顯示自定義消息。如果參數為空，則清空自定義錯誤。

? ? 5）使用偽類進行校驗反饋

? ? 當一個元素校驗通過時：

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

? ? 如果一個元素未校驗通過：

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

? ??

? ? 17:基于原生部件實現自定義的風格

? ? 1）設計：要改造哪種部件、有哪些狀態、各個狀態分別是什么效果

? ? 2）創建：定義語義化的html元素

? ? 3）改造：通過css實現各個狀態下的樣式

? ? 4）生動：通過js使部件添加更多響應與特性

? ? 18:使用js發送表單數據——Ajax

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

? ??使用?FormData?對象來構建用于傳輸的表單數據，然后通過ajax發送數據。

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

? ? 2）發送文件

? ??使用了FileReader?API來訪問二進制數據；調用append方法將你需要發送的File對象或者Blob對象添加到formData；然后發送這個請求。

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

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

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

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

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

? ??通過同時支持多種瀏覽器來構建優秀內容：如果一個瀏覽器不能理解高級特性，那么就執行后面的替代方案。

? ? ?

三：理解Web語義化

? ? ?1:語義化

? ??就是讓機器(搜索引擎)可以讀懂內容。

? ? 2:如何語義化

? ? 使用最恰當的標簽來描述內容，而不是無腦的堆砌div和span。

? ??

轉載于:https://www.cnblogs.com/ygj0930/p/9536849.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： springboot+vue校园新闻网站
下一篇： Android 外置 SD 卡写入权限问