整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JavaScript、CSS 相比，HTML 經過三十多年的發展，似乎逐漸走進無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發者的你編寫了一個HTML塊而沒有意識到可能編碼得并不理想?
為什么
HTML一直處于無人問津的角落，因為JavaScript和CSS總是吸引人們的注意力。
請在腦海里先保留這種印象，因為我要用一些簡單的技巧來發揮作用，讓HTML再次回到人們視野的中心。
以下是創建一目了然、可維護和可擴展的代碼的一些方法，其很好的應用了HTML5的語義標記元素，并將在支持的瀏覽器中正確呈現。
其緣由就不贅述了，讓我們來看看具體是什么吧。
文檔類型
在index.html的頂部位置，請確保聲明了DOCTYPE。這將在所有瀏覽器中激活標準模式，并告知瀏覽器該如何編譯文檔。請記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應用了框架，這已預先寫好。如果沒有，我強烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關于其他文檔類型的信息嗎?點擊這里查看參考文件：https://html.com/tags/doctype/。
可選標簽
有些標簽在HTML5中是可選的，主要是因為元素是隱式呈現的。信不信由你，你可以省略<html>標簽，而頁面呈現得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個有效的HTML，但在某些情況下就不能這樣做了。例如標簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無效的，因為注釋位于<thml>標簽之外，解析樹發生了更改。
結束標簽
應始終記得結束標簽，否則某些瀏覽器在呈現頁面時會出現問題。出于可讀性和其他原因，建議保留這些內容，稍后我會詳細介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標簽，但也有一些特例，如下。
自閉合標簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠不能有自閉合標簽。
<title />上面顯然是無效的。
字符集
預先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無效的，標題無法正確呈現。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語言
不忽略可選標簽的另一個原因是在使用屬性時。在這種情況下，我們應該定義web頁面的語言，這對于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>標題
永遠不要忽略標題標簽，否則可訪問性太差了。我個人就永遠不會使用這樣的網站,因為我剛打開它即刻在20多個頁面后就找不到了(瀏覽器選項卡不會有任何顯示)。
base標簽
這是一個非常有用的標簽，應該謹慎使用。它將設置應用程序的基本URL。一旦設置好，所有鏈接都將相對于這個基本URL，這可能會導致一些不必要的行為:
<base href="http://www.example.com/" />通過以上設置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者href="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個meta標簽非常有用，盡管嚴格來說它不是最佳寫法。但在搜索引擎時，這是超級有用的。
<meta name="description" content="HTML best practices">這有一個帖子“搜索引擎優化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語義標簽
雖然可以使用div創建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內容顯示。像p、section、h{1-6}、main、nav等標簽都是語義標簽。如果使用p標簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應該進行檢查，就好比寫作所用的筆，而我們有鼠標。
hr不應該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內容。在HTML5中，這個標簽代表了內容的主題分離。正確的用法是這樣的:
<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屬性時要小心
title屬性是一個功能強大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規范道:
目前不鼓勵依賴title屬性，因為很多用戶代理不按照規范的訪問方式來暴露該屬性（例如，使用鼠標等設備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現代手機或平板電腦）。
請閱讀有關如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號或雙引號
我見過的許多代碼庫，他們的標記中混合了這兩種形式。這并不好，特別是當你使用一個依賴于單引號的框架時，比如php，當你在一個句子中使用單引號時，就像我現在做的一樣。另一個原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當涉及到屬性的布爾值時，建議省略，因為它們不添加任何值，還會增加標記的權重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標簽添加type屬性。某些服務(如W3C的標記驗證工具)還會出現驗證錯誤。
驗證標記
可以使用W3C的標記驗證等服務以確保有效的標記。
拒絕內聯樣式
HTML中寫的是內容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內聯樣式，這將有利于開發人員和瀏覽器理解你的標記。
總結
這些只是編寫標簽時要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強烈建議你重復閱讀。
《GitHub HTML最佳實踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優雅的標簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉載請注明來源出處。
【END】
今，作為一種強大的編程腳本語言，理想狀態下，可以實現我們網站中所有的動畫效果。今天就與大家分享如何用js實現網站中常見的返回頂部效果。
第一步：html dom部分
<div style="width: 50px;height: 10000px" class="box"></div>
<div id="top">返回頂部</div>
為了讓瀏覽器出現滾動條，我選擇先建一個大盒子，高度設置盡量大些，我選擇設置為10000px,這樣效果明顯些。然后在設置一個對象觸發返回頂部的事件，這里我也設置一個div盒子觸發。
第二部：css
body{
background: url(img/23.jpg);
}
.box{
background: url(img/d043ad4bd11373f03d5f747fa50f4bfbfaed04e9.jpg);
}
#top{
position: fixed;;
border:1px solid #ddd;
right: 10px;
bottom: 10px;
padding: 3px;
}
給對應的html文檔內容添加樣式，具體的參數可以自己調整。這里需要給觸發點擊事件的div設置固定定位。
第三步：js部分
js部分可謂是整個demol的核心部分，我們看到的動畫效果大都來自js。
<script>
window.onload=function() {
var oTop = document.getElementById("top");
oTop.onclick = function () {
var id = setInterval(function () {
var scrollTop;
if (document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}else{
scrollTop = document.body.scrollTop;
}
document.documentElement.scrollTop -= scrollTop / 10;
document.body.scrollTop -= scrollTop / 10;
if (scrollTop <= 0) {
clearInterval(id)
}
}, 20);
}
}
</script>
這里我們先獲取觸發點擊事件的div，當我點擊這個div時，觸發一個函數的方法。在函數方法內部，先聲明初始化變量scrollTop，if語句保證瀏覽器的的兼容性。只要瀏覽器的滾動條高度存在，當我觸發這個事件的時候，滾動條高度會一直減。直到0為止。設置定時器保證動畫的執行以及用戶的體驗。當瀏覽器的滾動條高度小于或者等于0的時候，關閉定時器。
這樣一個簡單的的用原生js寫出的返回頂部demol就寫完了。當然，從用戶體驗的角度，還可以改進優化。
我們在瀏覽一個網頁的時候，通常會遇到比較長的網頁，一直向下拉滾動條一直向下，而在最底部的位置通常會有一個一鍵返回到頂部
或者返回到哪里的按鈕，這個按鈕就是利用的 錨點鏈接 功能。
就兩個值：第一個就是錨點下在哪里？第二個就是點在哪里？
<body>
<!-- 2、跳轉的目標位置：點-->
<a id="test">這里是頂部</a>
<!-- 1、跳轉的按鈕：錨-->
<a href="#test">回到頂部</a>
</body>源代碼：↓
備注：如果手機上看格式錯亂，建議粘貼到電腦版編輯器里觀看。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
