整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Keygen 對(duì)象
Keygen 對(duì)象代表著HTML form表單的 keygen 字段。
該對(duì)象提供了一個(gè)安全的方式來(lái)驗(yàn)證用戶。
當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器。
在 HTML 文檔中的每個(gè) <keygen> 標(biāo)簽都能創(chuàng)建一個(gè) Keygen 對(duì)象。
你可以通過(guò)form 表單的elements[]數(shù)組來(lái)搜索 keygen 字段，或者使用 document.getElementById()。
Keygen 對(duì)象屬性
=HTML5新增屬性。
| 屬性 | 描述 |
|---|---|
| autofocus | 設(shè)置或者返回頁(yè)面加載時(shí)是否自動(dòng)獲得焦點(diǎn)。 |
| challenge | 設(shè)置或者返回keygen字段的challenge屬性值。 |
| disabled | 設(shè)置或者返回是否用 keytag 字段。 |
| form | 返回包含該 keygen 字段的表單。 |
| keytype | 設(shè)置或者返回keygen字段的keytype屬性值。 |
| name | 設(shè)置或者返回keygen字段name屬性的值。 |
| type | 返回keygen字段是哪種表單元素類型。 |
標(biāo)準(zhǔn)屬性和事件
keygen 對(duì)象同樣支持標(biāo)準(zhǔn) 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
tmlSanitizer用法
HtmlSanitizer用于從可能導(dǎo)致XSS攻擊的結(jié)構(gòu)中清除HTML片段和文檔。它使用AngleSharp來(lái)解析、操作和呈現(xiàn)HTML和CSS。
因?yàn)镠tmlSanitizer基于強(qiáng)大的HTML解析器，它還可以保護(hù)您免受蓄意或意外的“標(biāo)記中毒”，即一個(gè)片段中的無(wú)效HTML可能會(huì)損壞整個(gè)文檔，導(dǎo)致布局或樣式損壞。
為了方便不同的用例，HtmlSanitizer可以在幾個(gè)級(jí)別進(jìn)行自定義：
安裝HtmlSanitizer NuGet包。然后：
using Ganss.Xss;
//創(chuàng)建HtmlSanitizer實(shí)例
var sanitizer=new HtmlSanitizer();
//配置允許的標(biāo)簽、屬性等
sanitizer.AllowedTags.Add("a");
//清理html內(nèi)容
string htmlContent="<script>document.write('xss')</script><a href=''>你好</a><a href='#'>測(cè)試</a>";
var sanitizerHtml=sanitizer.Sanitize(htmlContent,"http://www.baidu.com");
//打印清洗后的html內(nèi)容
Console.WriteLine(sanitizerHtml);a, abbr, acronym, address, area, article, aside, b, bdi, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dir, div, dl, dt, em, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, img, input, ins, kbd, keygen, label, legend, li, main, map, mark, menu, menuitem, meter, nav, ol, optgroup, option, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, wbrabbr, accept-charset, accept, accesskey, action, align, alt, autocomplete, autosave, axis, bgcolor, border, cellpadding, cellspacing, challenge, char, charoff, charset, checked, cite, clear, color, cols, colspan, compact, contenteditable, coords, datetime, dir, disabled, draggable, dropzone, enctype, for, frame, headers, height, high, href, hreflang, hspace, ismap, keytype, label, lang, list, longdesc, low, max, maxlength, media, method, min, multiple, name, nohref, noshade, novalidate, nowrap, open, optimum, pattern, placeholder, prompt, pubdate, radiogroup, readonly, rel, required, rev, reversed, rows, rowspan, rules, scope, selected, shape, size, span, spellcheck, src, start, step, style, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, wrap注意：為了防止類劫持和干擾要集成已清理片段的類，默認(rèn)情況下不允許使用class屬性。可以按如下方式添加：
var sanitizer=new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");
var sanitized=sanitizer.Sanitize(html);align-content, align-items, align-self, all, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, backface-visibility, background, background-attachment, background-blend-mode, background-clip, background-color, background-image, background-origin, background-position, background-position-x, background-position-y, background-repeat, background-repeat-x, background-repeat-y, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-style, border-bottom-width, border-collapse, border-color, border-image, border-image-outset, border-image-repeat, border-image-slice, border-image-source, border-image-width, border-left, border-left-color, border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-style, border-top-width, border-width, bottom, box-decoration-break, box-shadow, box-sizing, break-after, break-before, break-inside, caption-side, caret-color, clear, clip, color, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns, content, counter-increment, counter-reset, cursor, direction, display, empty-cells, filter, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, float, font, font-family, font-feature-settings, font-kerning, font-language-override, font-size, font-size-adjust, font-stretch, font-style, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, gap, grid, grid-area, grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-column, grid-column-end, grid-column-gap, grid-column-start, grid-gap, grid-row, grid-row-end, grid-row-gap, grid-row-start, grid-template, grid-template-areas, grid-template-columns, grid-template-rows, hanging-punctuation, height, hyphens, image-rendering, isolation, justify-content, left, letter-spacing, line-break, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, mask, mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, mask-size, mask-type, max-height, max-width, min-height, min-width, mix-blend-mode, object-fit, object-position, opacity, order, orphans, outline, outline-color, outline-offset, outline-style, outline-width, overflow, overflow-wrap, overflow-x, overflow-y, padding, padding-bottom, padding-left, padding-right, padding-top, page-break-after, page-break-before, page-break-inside, perspective, perspective-origin, pointer-events, position, quotes, resize, right, row-gap, scroll-behavior, tab-size, table-layout, text-align, text-align-last, text-combine-upright, text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style, text-indent, text-justify, text-orientation, text-overflow, text-shadow, text-transform, text-underline-position, top, transform, transform-origin, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, unicode-bidi, user-select, vertical-align, visibility, white-space, widows, width, word-break, word-spacing, word-wrap, writing-mode, z-indexnamespace, stylestyle指的是@media等其他at規(guī)則中的樣式聲明。在允許其他類型的at規(guī)則的同時(shí)不允許@namespace可能會(huì)導(dǎo)致錯(cuò)誤。@font face和@viewport中的屬性聲明不會(huì)被清除。
注意：默認(rèn)情況下不允許使用樣式標(biāo)記。
http，https
注意：默認(rèn)情況下允許協(xié)議相關(guān)URL（例如//app）（其他相關(guān)URL也是如此）。
要允許mailto:鏈接：
sanitizer.AllowedSchemes.Add("mailto");action, background, dynsrc, href, lowsrc, srcSanitize() 和SanitizeDocument()方法是線程安全的，即您可以在不同線程的單個(gè)共享實(shí)例上使用這些方法，前提是您不同時(shí)設(shè)置實(shí)例或靜態(tài)屬性。一個(gè)典型的用例是從一個(gè)線程準(zhǔn)備一次HtmlSanitizer實(shí)例（即設(shè)置所需的屬性，如AllowedTags等），然后從多個(gè)線程調(diào)用Sanitize()/SaniitizeDocument()。
請(qǐng)注意，由于輸入由AngleSharp的HTML解析器解析，然后呈現(xiàn)出來(lái)，因此即使沒(méi)有刪除任何元素或?qū)傩裕膊荒芷谕谋緝?nèi)容與輸入時(shí)完全相同。示例：
另一方面，盡管解析器修復(fù)了一些損壞的HTML，但輸出可能仍然包含無(wú)效的HTML。示例：
JavaScript、CSS 相比，HTML 經(jīng)過(guò)三十多年的發(fā)展，似乎逐漸走進(jìn)無(wú)人問(wèn)津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發(fā)者的你編寫了一個(gè)HTML塊而沒(méi)有意識(shí)到可能編碼得并不理想?
為什么
HTML一直處于無(wú)人問(wèn)津的角落，因?yàn)镴avaScript和CSS總是吸引人們的注意力。
請(qǐng)?jiān)谀X海里先保留這種印象，因?yàn)槲乙靡恍┖?jiǎn)單的技巧來(lái)發(fā)揮作用，讓HTML再次回到人們視野的中心。
以下是創(chuàng)建一目了然、可維護(hù)和可擴(kuò)展的代碼的一些方法，其很好的應(yīng)用了HTML5的語(yǔ)義標(biāo)記元素，并將在支持的瀏覽器中正確呈現(xiàn)。
其緣由就不贅述了，讓我們來(lái)看看具體是什么吧。
文檔類型
在index.html的頂部位置，請(qǐng)確保聲明了DOCTYPE。這將在所有瀏覽器中激活標(biāo)準(zhǔn)模式，并告知瀏覽器該如何編譯文檔。請(qǐng)記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應(yīng)用了框架，這已預(yù)先寫好。如果沒(méi)有，我強(qiáng)烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關(guān)于其他文檔類型的信息嗎?點(diǎn)擊這里查看參考文件：https://html.com/tags/doctype/。
可選標(biāo)簽
有些標(biāo)簽在HTML5中是可選的，主要是因?yàn)樵厥请[式呈現(xiàn)的。信不信由你，你可以省略<html>標(biāo)簽，而頁(yè)面呈現(xiàn)得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個(gè)有效的HTML，但在某些情況下就不能這樣做了。例如標(biāo)簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無(wú)效的，因?yàn)樽⑨屛挥?lt;thml>標(biāo)簽之外，解析樹發(fā)生了更改。
結(jié)束標(biāo)簽
應(yīng)始終記得結(jié)束標(biāo)簽，否則某些瀏覽器在呈現(xiàn)頁(yè)面時(shí)會(huì)出現(xiàn)問(wèn)題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會(huì)詳細(xì)介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標(biāo)簽，但也有一些特例，如下。
自閉合標(biāo)簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠(yuǎn)不能有自閉合標(biāo)簽。
<title />上面顯然是無(wú)效的。
字符集
預(yù)先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無(wú)效的，標(biāo)題無(wú)法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語(yǔ)言
不忽略可選標(biāo)簽的另一個(gè)原因是在使用屬性時(shí)。在這種情況下，我們應(yīng)該定義web頁(yè)面的語(yǔ)言，這對(duì)于可訪問(wèn)性和搜索非常重要。
<html lang="fr-CA">
...
</html>標(biāo)題
永遠(yuǎn)不要忽略標(biāo)題標(biāo)簽，否則可訪問(wèn)性太差了。我個(gè)人就永遠(yuǎn)不會(huì)使用這樣的網(wǎng)站,因?yàn)槲覄偞蜷_它即刻在20多個(gè)頁(yè)面后就找不到了(瀏覽器選項(xiàng)卡不會(huì)有任何顯示)。
base標(biāo)簽
這是一個(gè)非常有用的標(biāo)簽，應(yīng)該謹(jǐn)慎使用。它將設(shè)置應(yīng)用程序的基本URL。一旦設(shè)置好，所有鏈接都將相對(duì)于這個(gè)基本URL，這可能會(huì)導(dǎo)致一些不必要的行為:
<base href="http://www.example.com/" />通過(guò)以上設(shè)置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者h(yuǎn)ref="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個(gè)meta標(biāo)簽非常有用，盡管嚴(yán)格來(lái)說(shuō)它不是最佳寫法。但在搜索引擎時(shí)，這是超級(jí)有用的。
<meta name="description" content="HTML best practices">這有一個(gè)帖子“搜索引擎優(yōu)化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語(yǔ)義標(biāo)簽
雖然可以使用div創(chuàng)建UX工程師的線框，但這并不意味著必須這樣做。語(yǔ)義HTML為頁(yè)面提供了意義，而不單純是內(nèi)容顯示。像p、section、h{1-6}、main、nav等標(biāo)簽都是語(yǔ)義標(biāo)簽。如果使用p標(biāo)簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語(yǔ)義HTML超出了本文的范圍。但是我們應(yīng)該進(jìn)行檢查，就好比寫作所用的筆，而我們有鼠標(biāo)。
hr不應(yīng)該用于格式化
<hr>不是格式化元素，所以不要用它來(lái)格式化內(nèi)容。在HTML5中，這個(gè)標(biāo)簽代表了內(nèi)容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>使用title屬性時(shí)要小心
title屬性是一個(gè)功能強(qiáng)大的工具，它可以幫助闡明頁(yè)面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規(guī)范道:
目前不鼓勵(lì)依賴title屬性，因?yàn)楹芏嘤脩舸聿话凑找?guī)范的訪問(wèn)方式來(lái)暴露該屬性（例如，使用鼠標(biāo)等設(shè)備來(lái)喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機(jī)或平板電腦）。
請(qǐng)閱讀有關(guān)如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號(hào)或雙引號(hào)
我見過(guò)的許多代碼庫(kù)，他們的標(biāo)記中混合了這兩種形式。這并不好，特別是當(dāng)你使用一個(gè)依賴于單引號(hào)的框架時(shí)，比如php，當(dāng)你在一個(gè)句子中使用單引號(hào)時(shí)，就像我現(xiàn)在做的一樣。另一個(gè)原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當(dāng)涉及到屬性的布爾值時(shí)，建議省略，因?yàn)樗鼈儾惶砑尤魏沃担€會(huì)增加標(biāo)記的權(quán)重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標(biāo)簽添加type屬性。某些服務(wù)(如W3C的標(biāo)記驗(yàn)證工具)還會(huì)出現(xiàn)驗(yàn)證錯(cuò)誤。
驗(yàn)證標(biāo)記
可以使用W3C的標(biāo)記驗(yàn)證等服務(wù)以確保有效的標(biāo)記。
拒絕內(nèi)聯(lián)樣式
HTML中寫的是內(nèi)容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內(nèi)聯(lián)樣式，這將有利于開發(fā)人員和瀏覽器理解你的標(biāo)記。
總結(jié)
這些只是編寫標(biāo)簽時(shí)要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強(qiáng)烈建議你重復(fù)閱讀。
《GitHub HTML最佳實(shí)踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優(yōu)雅的標(biāo)簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來(lái)源出處。
【END】
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
