HTML的幾個注意點

時間 2019-11-19

標籤 html 幾個注意欄目 HTML 简体版

原文原文鏈接

1、HTML

1.HTML5有哪些新特性？新增的標籤有哪些？

　　新特性：css

語義標籤——語義化標籤使得頁面的內容結構化，見名知義
加強型表單——擁有多個新的表單 Input 輸入類型。這些新特性提供了更好的輸入控制和驗證（包括取色器控件、日期時間控件等）
視頻和音頻——HTML5 提供了播放音頻文件的標準，即便用 <audio> 、<video>元素
Canvas繪圖——標籤只是圖形容器，必須使用腳原本繪製圖形
SVG繪圖——SVG是指可伸縮的矢量圖形
地理定位——HTML5 Geolocation（地理定位）用於定位用戶的位置
拖放API——拖放是一種常見的特性，即抓取對象之後拖到另外一個位置
Web Worker——web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行
Web Storage——對本地離線存儲有更好的支持，提供了兩種在客戶端存儲數據的新方法：localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲
WebSocket——是HTML5開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議，實現了更有效的服務器推送技術。

　　新增標籤：html

多媒體：<audio>、<video>、<source>爲媒介元素定義媒介資源、<embed>、<track>外部文本軌道[有字幕的視頻]
新表單元素：<datalist>、<output>、<keygen>、<color>、<date>、<datetime>、<email>......
新文檔節段和綱要：<header>頁面頭部、<section>章節、<aside>側邊欄、<article>文檔內容、<footer>頁面底部

2.HTML5語義化的好處？

易於用戶閱讀，提升了用戶體驗，好比：title、alt用於解釋名詞和圖片信息，樣式丟失的時候能讓頁面呈現清晰的結構。
有利於SEO，搜索引擎根據標籤來肯定上下文和各個關鍵字的權重，和搜索引擎簡歷良好的關係，有利於爬蟲抓取更多的有效信息（爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重）
方便其餘設備解析，如屏幕閱讀器、盲人閱讀器、移動設備，根據語義渲染網頁
有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關係更和諧，若是遵循W3C標準的團隊都遵循這個標準，能夠減小差別化，有利於規範

3.瀏覽器標準模式和怪異模式？

　　在標準模式頁面按照HTML,CSS的定義渲染，而在怪異模式就是瀏覽器爲了兼容很早以前針對舊版本瀏覽器設計，並未嚴格遵循W3C標準而產生的一種頁面渲染模式。瀏覽器基於頁面中文件類型描述的存在以決定採用哪一種渲染模式，若是存在一個完整的DOCTYPE則瀏覽器將會採用標準模式，若是缺失就會採用怪異模式。如下是幾點區別：html5

盒模型：

　　在怪異模式下，盒模型爲IE盒模型　　　　　　　　　　　　　　　　　　　　　　　　　　而在W3C標準的盒模型中爲jquery

圖片元素的垂直對齊方式：

對於inline元素和table-cell元素，標準模式下vertical-align屬性默認取值爲baseline，在怪異模式下，table單元格中的圖片的vertical-align屬性默認取值爲bottom，所以在圖片底部會有及像素的空間。web

<table>元素中的字體：

　　CSS中，對於font的屬性都是能夠繼承的，怪異模式下，對於table元素，字體的某些元素將不會從body等其餘封裝元素中繼承獲得，特別是font-size屬性。bootstrap

內聯元素的尺寸：

　　標準模式下，non-replaced inline元素沒法自定義大小，怪異模式下，定義這些元素的width，height屬性能夠影響這些元素顯示的尺寸。瀏覽器

元素的百分比高度：

　　a：CSS中對於元素的百分比高度規定以下：百分比爲元素包含塊的高度，不可爲負值，若是包含塊的高度沒有顯示給出，該值等同於auto，因此百分比的高度必須在父元素有高度聲明的狀況下使用。服務器

　　b：當一個元素使用百分比高度時，標準模式下，高度取決於內容變化，怪異模式下，百分比高度被正確應用。session

元素溢出的處理：

　　標準模式下，overflow取默認值visible，在怪異模式下，該溢出會被當作擴展box來對待，即元素的大小由其內容決定，溢出不會裁減，元素框自動調整，包含溢出內容。異步

4.CSS\JS引入的位置通常在哪裏？爲何？

　　要解釋放置位置就要依據網站加載的整個完整過程：

首先瀏覽器從服務器接收到html代碼，而後開始解析html
構建DOM樹（根據html代碼自頂向下進行構建），而且在同時構建渲染樹
遇到js文件加載執行，將阻塞DOM樹的構建；遇到css文件，將阻塞渲染樹的構建

script標籤中的defer屬性：構建DOM樹的過程和js文件的加載異步（並行）進行，可是js文件執行須要在DOM樹構建完成以後
script標籤中的async屬性：構建DOM樹、渲染樹的過程和js文件的加載和執行異步（並行）進行

綜上所述，script標籤最好放在</body>標籤的前面，由於放在全部body中的標籤後面就不會出現網頁加載時出現空白的狀況，能夠持續的給用戶提供視覺反饋，同時在有些狀況下，會下降錯誤的發生。而css標籤應該放在<head></head>標籤之間，由於若是放在</body>標籤的前面，那麼當DOM樹構建完成了，渲染樹才構建，那麼當渲染樹構建完成，瀏覽器不得再也不從新渲染整個頁面，這樣形成了資源的浪費。效率也不高。若是放在<head></head>之間，瀏覽器邊構建邊渲染，效率要高的多。

　　下面是BS標準模板：

<!DOCTYPE html>
<html>
  <head>
     <!--網頁頁面字符集-->
    <meta charset="utf-8">
 
    <!--讓IE使用最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <!--針對移動設備,網站顯示寬度等於設備屏幕顯示寬度,內容縮放比例爲1:1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!--將下面的 <meta> 標籤加入到頁面中，可讓部分國產瀏覽器默認採用高速模式渲染頁面：-->
    <meta name="renderer" content="webkit">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 
    <title>Bootstrap Basic Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--下面這一大塊的註釋是說:"爲了讓IE9如下的瀏覽器支持響應式和HTML5標籤.須要引入下面兩個JS文件"-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
    <!-- 英:jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--中:必須在JS文件引入以前引入JQ文件,這裏src引用的是本地.線上建議使用CDN引用)
    <script src="js/jquery-2.1.3.min.js"></script>
 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>