前端學習總結——HTML

時間 2021-01-12

標籤 html 面試 canvas 瀏覽器緩存 ide oop 佈局 post 網站欄目 HTML 简体版

原文原文鏈接

近期在找工做參加面試，想總結一下學過的東西，也會持續更新遇到的新問題、盲點。html

什麼是HTML?
- 超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)，由尖括號包圍特定的標籤名組成的標籤，標籤指定了文字、圖片、連接、表格等，構建網站網頁邏輯結構。
什麼是元素，什麼是屬性，常見的塊級元素、內聯塊級元素和內聯元素都有哪些？
- 元素：兩個角括號中間的部分，從開始標籤到結束標籤之間的全部代碼
- 屬性：給元素定義一些它自己帶有的屬性，能夠是樣式、資源連接、名稱等
- 塊級元素block element：能夠定義寬高，在瀏覽器中默認自動換行。包括：div、p、h1-h六、ul、ol、li、address、dl、dt、dd、table、form、fieldset 等；
- 內聯塊級元素inline-block element：能夠定義寬高，可是默認不換行。包括：img、input、select、textarea、iframe 等；
- 內聯元素inline element：也叫行間元素，行內元素，沒有寬高，默認不換行。包括：span、a、strong、em、ins、del、sub、sup 等。
如何理解HTML語義化？
- 主要有兩方面：文本內容的語義化：例如用<header></header>定義頭部、<main></main>定義文檔主要內容、<footer></footer>定義文檔底部，文檔內容的結構十分清晰；標籤代碼的語義化：諸如用<strong></strong>來定義加粗的內容，而儘可能不使用容易混淆的<b></b>儘管效果都是給內容加粗顯示。
- 使用語義化標籤的好處是：
  - 可訪問性：當文檔樣式不起做用時，結構清晰，用戶閱讀理解更容易；
  - 可檢索性：SEO搜索引擎根據標籤來肯定上下文各個關鍵字的權重；
  - 可維護性：網頁結構更清晰，開發人員更容易理解，提高代碼的可讀性，提升代碼可維護性；
  - 盲人閱讀器根據語義渲染網頁，方便設備解析

meta標籤：<meta>元素表示那些不能由其它HTML元相關元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數據信息。元數據（Metadata）含有頁面的相關信息，包括樣式、腳本及數據，能幫助一些軟件（例如搜索引擎、瀏覽器等等）更好地運用和渲染頁面。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>XX購物-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！</title>
    <mate name="description" content="XX購物-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務,爲您提供愉悅的網上購物體驗!" />
    <mate name="keywords" content="網上購物，網上商城，手機，筆記本，電腦，MP3，CD，VCD，DV，相繼，數碼，配件，手錶，存儲卡，XX購物" />
</head>

- charset屬性：設置編碼字符集，避免亂碼，經常使用「utf-8」，Unicode標準，俗稱「萬國碼」，涵蓋了世界上的全部字符、標點和符號。
- 屬性：name=「viewpoint」，viewpoint一般指視窗、視口。瀏覽器用來顯示網頁的那部分區域，移動端視口概念相對複雜，又分爲佈局視口、視覺視口、理想視口。
- 屬性：name=「keywords」 content=「……」，網頁關鍵字，100字符左右，提供網站名稱、分類信息等，搜索引擎也會按照keywords的信息優先展現。
- 屬性：name=「description」 content=「……」，描述信息， 80-120 漢字，綜合title + keywords的信息描述。搜索引擎認知的優先級：title > description > keywords（<head>標籤裏面的三大件）。
- content="width=device-width, height=device-height, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"，分別是：設備寬度、設備高度、應用程序啓動時縮放的尺度（會給一個浮點值）、用戶能夠縮放的最小值、用戶能夠縮放的最大值、用戶是否能夠用手勢來縮放整個應用程序使尺寸改變。

HTML5有哪些改變？

- 簡化HTML聲明的方式，<!DOCTYPE html>
- 增長了JavaScript的API：地理定位、離線存儲、應用緩存、拖放
- 增長告終構化標籤header、footer、section、nav、aside
- 增長了音視頻標籤（進度條、控制條），video、audio（目前網站在去flash化）
  - autoplay布爾屬性，控制視頻立刻自動播放，不會停下來等待數據載入結束
  - controls提供用戶控制，控制視頻播放、暫停、恢復、音量、跨幀
  - loop布爾屬性，視頻結束自動回到開始位置
  - track表示字幕
  - poster表示封面
- 畫布canvas：

const ctx = canvas。getContext（‘2d’）； // 獲取它的2d上下文
ctx.fillStyle = 'green'; // 設置筆刷填充色
ctx.fillRect(10, 10, 100, 100); // 利用畫筆範圍，畫矩形

相關標籤/搜索

每日一句

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