「前端早讀君010」重學前端day1: HTML基礎

時間 2019-11-21

標籤前端 day1 day html 基礎欄目 HTML 简体版

原文原文鏈接

前言

鑑於平時業務代碼寫多了，筆者對前端的一些基礎知識都開始生疏。有鑑於此，加上又到了一年一度的春招時間，在接下來的一段時間內筆者將對整個前端體系的知識進行一些梳理，同時會附帶上相關基礎知識中常見的面試題。在筆者複習的同時也但願能給準備春招的前端同窗們提供一點點資料，共勉。html

基本的HTML結構

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

如代碼所現，通常來說，一段基礎的HTML結構主要由兩大部分組成前端

head
body

head主要存放的是頁面的相關信息，好比場景的title標籤，meta信息標籤、style樣式等。html5

body顧名思義就是身體主軀幹的意思，頁面所呈現的素材內容，就是存放在body裏面，咱們見到的頁面內容，都來自body。面試

代碼解讀

<!doctype html>

html5頭部的第一句是文檔聲明，該聲明的做用是告訴瀏覽器用什麼文檔標準解析HTML文檔，DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。目前咱們見到的大部分頁面都是HTML5標準文檔。
HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；瀏覽器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

HTML4.01基於SGML, 因此須要對DTD進行引用，其開頭的第一行是一個獨立的文檔聲明，才能告知瀏覽器文檔所使用的文檔類型。網站

(SGML：SGML是國際上定義電子文檔和內容描述的標準，你們瞭解便可)ui

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

此段代碼表示的是HTML的視窗大小，在響應式開發和移動開發中，這個代碼很重要，viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，上訴代碼就限定了網頁在不一樣端下的大小與縮放，具體的含義以下：spa

width:可視區域的寬度，值可爲數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放

你們看到這麼多參數不用擔憂，通常來說只須要了解便可，用到再查，無須死記硬背。scala

標準模式（嚴格模式）與兼容模式（混雜模式）

上文說到瀏覽器解析HTML有兼容模式與標準模式兩種模式，那它們是什麼呢，有什麼區別？code

標準模式：瀏覽器用瀏覽器支持得最高標準解析HTML和運行JS
兼容模式：在未聲明DOCTYPE的狀況下，爲了保證頁面能正常工做，瀏覽器以寬鬆向後兼容的模式運行該網站，防止老式站點沒法工做。

閉合標籤和自閉合標籤

對於大部分HTML標籤而言，他們都是成對出現的，譬如

<div></div>
<span></span>

可是也有部分標籤不是成對出現的，稱之爲自閉合標籤，譬如

<img />
<br />

咱們能夠看到他們後面本身帶了/結尾，可是在HTML5標準處理之後，更建議不寫/，以下

<img>
<br>

標籤語義化

一個網頁，作出來以後不單單是給人看的，同時也要讓機器（爬蟲）可以讀懂上面的信息。這個時候就涉及到標籤的語義化。若是把每一個HTML標籤比做一個容器，那麼你書寫的內容就是你要存放到容器中的物品。舉個例子，在平常生活中，咱們都知道鞋子就放在鞋櫃裏面，洗髮水放在洗髮水瓶裏面，洗潔精放在洗潔精瓶子裏面。咱們根據瓶子就知道瓶子裏面裝的是什麼。

同理，對於HTML而言，HTML的標籤也是具備容器含義的，譬如footer標籤顧名思義就是尾部標籤，存放內容的結尾塊，header標籤表示頭部。合理地使用HTML標籤能讓機器更容易讀懂你的頁面信息。