HTML查漏補缺

時間 2019-12-04

標籤 html 補缺欄目 HTML 简体版

原文原文鏈接

HTML規範

HTML規範文檔
H4時代被規定爲錯誤的行爲，在H5時代全都被合理化了，好比標籤不區分大小寫、只有開始標籤沒有結束標籤、屬性值不帶引號等等錯誤，H5所有容許它們存在

遺漏的標籤知識

<title>標籤定義文檔的標題，它是 head 部分中惟一必需的元素
<address>標籤html
- 該標籤訂義文檔或文章的做者/擁有者的聯繫信息
- 不該該用於描述通信地址，除非它是聯繫信息的一部分
- 這個元素不能包含除了聯繫信息以外的任何信息，好比出版日期（這應該包含在<time>元素中）。
應該使用 <h1> - <h6> 來表示標題，使用<em> 標籤來表示強調的文本，應該使用 <strong> 標籤來表示重要文本，應該使用 <mark> 標籤來表示標註的/突出顯示的文本。
<base>標籤web
- 該標籤用於指定一個文檔中包含的全部相對URL的基本URL
- 一般狀況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對URL中缺乏的部分，使用 <base> 標籤後，瀏覽器將再也不使用當前文檔的 URL，而使用<base>標籤中指定的基本 URL 來解析全部的相對URL，包括 <a>、<img>、<link>、<form> 標籤中的 URL
- 在一個文檔中，最多能使用一個 <base> 元素
- 通常把 <base> 標籤排在 head 元素中第一個元素的位置，這樣 head 中其餘元素就能夠利用 <base>元素中的信息了
<bod>標籤編程
- 該標籤用於覆蓋當前文本的朝向，它使得字符按給定的方向排列
<button>標籤與<input type="button">json
- 若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容；因此爲了不提交不一樣的值，在 HTML 表單中最好使用 input 元素來建立按鈕
- 使用button元素與使用 input 元素建立的按鈕之間的不一樣之處在於：在<button> 與 <button/>之間，能夠放置內容，好比文本或圖像
- 使用 input 元素來建立按鈕請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其餘瀏覽器中（包括 W3C 規範）的默認值是 "submit"。
<caption >標籤瀏覽器
- 該標籤訂義表格標題，必須緊隨 table 標籤以後。
- 只能對每一個表格定義一個標題，一般這個標題會被居中於表格之上
<cite> 標籤服務器
- 一般表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題
- 它可使你或者其餘人從文檔中自動摘錄參考書目，它可以自動整理引用表格，並把它們做爲腳註或者獨立的文檔來顯示（固然須要經過寫相應的程序來處理）
- 該標籤體現了語義化的便利
<details>標籤和<summary> 標籤網絡
- <summary> 標籤爲 details 定義標題
- 標題是可見的，用戶點擊標題時，會顯示出 details
<meter>標籤app
- 該標籤訂義已知範圍或分數值內的標量測量，好比說表示3/10
- 注意表示進度不該該用該標籤而是<process>標籤
<figure> 標籤與<figcaption> 標籤異步
- <figure>標籤規定獨立的流內容（圖像、圖表、照片、代碼等等），figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。
- <figcaption> 標籤訂義 figure 元素的標題，<figcaption> 標籤應該被置於figure元素的第一個或最後一個子元素的位置
<template>標籤編程語言
- 該標籤能夠定義html片斷，可是不會被渲染
- 能夠經過js來將片斷顯示到頁面上
<table>標籤
- 單元格默認平分table的寬度, table決定了整個表格的寬度
- 不設置單元格寬高時，寬高由內容撐開;
- 只設置高度時，內容撐開寬度，當寬度不可再變時，將會撐開高度;
- 只設置寬度時，內容只撐開高度;
- 當寬高均設置時，內容能夠只撐開表格高度，而不能撐開寬度
- table裏面的單元格的寬度會轉換成百分比，當單元格寬度和超過table的寬度是不會溢出的，而是會撐開高度
<link>標籤
- 定義文檔與外部資源的關係
- rel = stylesheet，連接外部樣式表
- rel = dns-prefetch，dns預解析（異步）
- rel = prefetch，預加載圖片等（異步）
- rel = prerender，預渲染（異步）
- rel = icon，定義title圖標
- rel = alternate，定義文檔的替代版本（好比打印頁、翻譯或鏡像），可作RSS。
- ........見W3C

課後小驗證

HTML是什麼，HTML5是什麼
- HTML是超文本標記語言（Hyper Text Markup Language）
- 是用來描述網頁的一種標記語言，而不是編程語言；標記語言是一套標記標籤
- 與XML的區別：HTML的設計宗旨是顯示數據，而XML的設計宗旨是傳輸數據；HTML的標籤是預約義的，而XML的標籤是使用者本身定義的
- HTML5是最新的 HTML 標準，擁有新的元素，更豐富的內容，更強大的適配性
HTML元素標籤、屬性都是什麼概念？
- HTML元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼，開始標籤與結束標籤之間的內容是HTML元素的元素內容
- HTML元素標籤就是指一個HTML元素的開始標籤和結束標籤，瀏覽器不會直接顯示標籤，可是會使用這些標籤來解釋頁面的內容
- HTML元素屬性提供了有關HTML元素的更多的信息，好比圖片的URL，元素的類名等
文檔類型是什麼概念，起什麼做用？
- Web 世界中存在許多不一樣的文檔。只有瞭解文檔的類型，瀏覽器才能正確地顯示文檔。
- HTML文檔中使用<!DOCTYPE>聲明幫助瀏覽器正確地顯示網頁，<!DOCTYPE>聲明告訴了瀏覽器當前的HTML文檔是用什麼HTML版本編寫的，這樣瀏覽器才能徹底正確地顯示出 HTML 頁面
- <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前，且要注意它不屬於HTML標籤
- 在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於標準通用標記語言（SGML）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容
- HTML5 不基於 SGML，因此不須要引用 DTD
meta標籤都用來作什麼的？
- 提供有關頁面的元信息，經常使用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何佈局或重載頁面），搜索引擎和其它網絡服務。
- charset屬性規定文檔的編碼方式，建議爲UTF-8
- content屬性定義與 http-equiv 或 name 屬性相關的元信息
- http-equiv屬性把對應的 content 屬性關聯到 HTTP 頭部。
```
* `content-type`：用於指定內容類型，默認爲`text/html`
* `refresh`: 設置文檔多久刷新一次
* `default-style`：指定首選的樣式表
```
- name屬性把對應的 content 屬性關聯到一個名詞。
```
* `author`
* `description`
* `generator`
* `keywords`
* `viewport`：控制頁面的尺寸和比例，以便響應式
```
- meta標籤是可擴展的，各瀏覽器產商能夠本身定義一些特定的內容
```
*  `http-equiv = "X-UA-Compatible" content = "IE = edge"`：爲 `IE8` 指定不一樣的頁面渲染模式
* `name = "format-detection" content="telphone = no"`：關閉`iOS`電話號碼自動識別
* `name = "renderer" content = "webkit"`：`360`瀏覽器指定內核
```
Web語義化是什麼，是爲了解決什麼問題
- Web語義化簡單的說就是在編寫HTML文檔時，選擇合適的標籤將內容自己進行合理的描述，而不去管它的樣式，使頁面有良好的結構，頁面元素有含義；同時對於類名、id名稱也要命名的可以描述內容；從而可以讓人和機器都容易理解（提高可讀性、可維護性）
- Web語義化在方便開發人員閱讀代碼同時也有利於讓機器（搜索引擎，爬蟲）讀懂文檔內容，從而利用機器來對索引好的內容做各類處理和挖掘，好比SEO（搜索引擎優化）
- Web語義化在拋開CSS的狀況下，頁面也能呈現出清晰的結構
- Web語義化能夠方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以更合適的方式來渲染網頁（提升無障礙性）
- Web語義化有利於SEO
連接是什麼概念，對應什麼標籤？
- 指從一個網頁指向一個目標的鏈接關係
- 對應<a>標籤，<link>標籤，<script>標籤，<area>標籤

表單標籤都有哪些，對應着什麼功能，都有哪些屬性

標籤	功能
form	表示了文檔中的一個區域，這個區域包含有交互控制元件，用來向web服務器提交信息
fieldset	將表單內的相關元素分組
fieldset	爲 fieldset 元素定義標題
button	表示一個可點擊的按鈕，能夠用在表單或文檔其它須要使用簡單標準按鈕的地方
input	用於爲基於Web的表單建立交互式控件，以便接受來自用戶的數據
textarea	表示一個多行純文本編輯控件
option	用於定義在<select>, <optgroup> 或<datalist> 元素中包含的項。<option> 能夠在彈出窗口和 html 文檔中的其餘項目列表中表示菜單項
optgroup	會建立包含在一個 <select> 元素中的一組選項
select	是一種表單控件，可建立選項菜單。菜單內的選項爲<option> , 能夠由 <optgroup> 元素分組。選項能夠被用戶預先選擇。
datalist	與input元素結合來定義選項列表，包含了一組<option>元素,這些元素表示input的合法值
meter	用來顯示已知範圍的標量值或者分數值
process	用來顯示一項任務的完成進度
output	表示計算或用戶操做的結果
label	表示用戶界面中項目的標題

ol, ul, dl, dd, dt等這些標籤都適合用在什麼地方，舉個例子
- ol爲有序列表，適用於有順序的列表，好比說排行榜
- ul爲無序列表，適用於不在乎順序的列表，好比說菜單
- dl爲定義列表，dt是定義列表的標題，dd是定義列表的具體描述，好比說術語解釋表
如何提高無障礙性
- 爲 img 提供 alt 屬性
- noscript
- input 和 label 對應
- 圖形驗證碼與語音驗證碼
- 文字和背景有足夠對比度
- 鍵盤可操做
- 語義化
JSON-LD
- JavaScript Object Notation for Linked Data
- 是一種基於JSON表示和傳輸互聯數據（Linked Data）的方法
- 結構化數據就是按必定的結構產生的一系列描述你網站內容的信息，它能幫助搜索引擎的爬蟲更好地瞭解你網頁中所要展示的內容，並在搜索結果中有更豐富得展示，而非千篇一概的連接，即提升搜索排名，美化搜索結果。它還可以被其餘一些應用所讀取使用，好比：Gmail, Facebook, Twitter 等，甚至還能夠是 Siri，可穿戴設備，或是車載導航系統。
- JSON-LD與互聯數據(Linked Data)
- 示例
```
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "name": "John Doe",
      "jobTitle": "Graduate research assistant",
      "affiliation": "University of Dreams",
      "additionalName": "Johnny",
      "url": "http://www.example.com",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "1234 Peach Drive",
        "addressLocality": "Wonderland",
        "addressRegion": "Georgia"
      }
    }
</script>
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。