HTML的基本語法

TML:超文本標記語言(超文本的意思就是我們可以給文本使用超鏈接實現頁面的跳轉，標記語言就是<>里面寫的)

標記語言不是編程語言(編程語言有一定的邏輯性)

語法：

1.html文檔后綴名: .html 或者.htm都可以沒有區別

2.標簽分為：

1.圍堵標簽：有開始標簽和結束標簽。如<html></html>

2.自閉和標簽：開始標簽和結束標簽在一起。如<br/>

3.標簽可以嵌套：

需要正確嵌套，不能你中有我，我中有你

錯誤示范：<a><b></a></b>

正確示范:<a><b></b></a>

4.在開始標簽中可以定義屬性。屬性是由鍵值對構成的，值需要用引號(單雙都可以)引起來。

5.html的標簽不區分大小寫，但是建議使用小寫。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
	<h1>武漢加油</h1><br/>
	<h1>中國加油</h1><br/>
	<font color='red'>隨緣</font><br/>
	<font color='green'>何日暴富</font>
	
</body>
</html>

章先介紹一些HTML最基礎的考點，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎問題的回答，很多同學反而因組織不好語言而給面試官留下不好的印象。本章節我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現在寫HTML代碼第一行通常是 !<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）

DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。

面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）

文檔的解析模式目前主要有 *兩種（注意：還有一種“準標準模式”只在IE8瀏覽器里，目前主流瀏覽器已無需考慮）：

怪異模式（quirks mode）：此種模式會模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE，瀏覽器默認會以這種模式解析文檔。
標準模式（standards mode）：瀏覽器使用W3C的標準解析渲染頁面。

面試官：如何快速檢查頁面的解析模式？（發散題）

HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：

如果文檔處于“混雜模式”，則該屬性值為 BackCompat
如果文檔處于“標準模式”或者“準標準模式(almost standards mode)”，則該屬性為 CSS1Compat

const mode = document.compatMode; // 頁面的解析模式
if (mode === "BackCompat") {
  // 渲染模式為混雜模式
}

1.2 HTML的語義化

面試官：什么是HTML語義化，語義化的作用是什么？（基礎題）

語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義；比如<p>標簽就代表段落，<article>代表正文內容等等。語義化的作用有兩點：

開發者友好：使用語義類標簽增強代碼的可讀性，開發者也能夠清晰地看出網頁的結構，易維護；
機器友好：帶有語義的標簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網頁骨架或文章提綱，SEO友好。

面試官：你平時有哪些語義化的建議或最佳實踐？（發散題）

根據語義化的優點，對于富文本內容類的網站（如門戶、新聞網站），語義化利于SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對于一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。

1.3 HTML5新增內容考察

面試官：你知道HTML5有哪些新增的東西嗎？（基礎題）

HTML5新增的內容確實不少，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：

新的文檔解析順序：不再基于 *SGML；
全面支持CSS3：
加了一些語義化元素：<header>、<mainer>、<footer>、<section>、<nav>等
刪了一些樣式類元素：<font>、<big>、<center> 等
表單能力加強：<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）
新的屬性：ping（用于a與area）、charset（用于meta）、async（用于script）等
定位能力：navigator.geolocation
多媒體支持：<video>（視頻）、<audio>（音頻）等
2D/3D 制圖支持：支持svg、canvas繪圖和動畫等
新的緩存策略：Localstorage、SessionStorage、IndexedDB等
新的網絡協議：WebSocket
新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

SGML 即Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文檔的元語言。
HTML 是基于SGML 的超鏈接語言，可以用于創建Web頁面。在DTD 內部定義了標簽的規則，DTD就是使用SGML 語言創建的。
HTML5不是基于SGML 語言的，因此不需要DTD ，它是一種全新的標記語言，有自己的解析規則，HTML5的語法規則與之前版本有很大的差別，可以稱的上是一種全新的語言

1.4 meta標簽

面試官：介紹一下<meta>標簽的用途（基礎題）

meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的元信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name

面試官：移動端適配的viewpoint，能否手寫一下？（拓展題）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的區別

面試官：介紹一下src和href的區別（基礎題）

src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如JS腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，所以一般JS腳本會放在底部而不是頭部。
href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理

1.6 img標簽的srcset

面試官：介紹一下<img>標簽的srcset和sizes屬性的作用（基礎題）

可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源

srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會：

查看設備寬度
檢查 sizes 列表中哪個媒體條件是第一個為真
查看給予該媒體查詢的槽大小
加載 srcset 列表中引用的最接近所選的槽大小的圖像
srcset提供了根據屏幕條件選取圖片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script標簽的defer和async

面試官：介紹一下<script>標簽的defer和async的作用（基礎題）

defer：瀏覽器指示腳本在文檔被解析后執行，<script>被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行
async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于<script>有先后依賴關系的情況，并不適用
如下圖：藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析

1.8 前端數據存儲的方式

面試官：前端有哪幾種數據存儲方式？（基礎題）

主要的存儲方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：

Cookie：在HTML5標準前本地儲存的主要方式
- 優點是兼容性好，請求頭自帶cookie方便可以和服務端進行交互
- 缺點是大小只有4k，請求頭攜帶cookie浪費流量，每個domain限制20個cookie，JS無法直接操作，需要自行封裝

LocalStorage：以鍵值對為標準的數據存儲方式
- 優點是操作方便，永久性儲存（除非手動刪除），大小為5M
- 缺點是兼容IE8+

SessionStorage：與localStorage基本類似，區別是**sessionStorage當頁面關閉后會被清理
- 優點是會話級隨存隨取，不占用本地空間，操作方便
- 缺點是不能在所有同源窗口中共享，是會話級別的儲存方式，兼容IE8+

IndexedDB：是被正式納入HTML5標準的數據庫儲存方案，它是NoSQL數據庫，用鍵值對進行儲存，可以進行快速讀取操作
- 優點是存儲量更大，非常適合web場景，同時支持JS進行操作，非常方便
- 缺點是兼容性IE8+

WebSQL：類似SQLite，是真正意義上的關系型數據庫，用sql進行操作
- 優點是關系型數據庫，適合大型的離線web應用
- 缺點是JS需要通過transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表 => 插入 => 刪除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg = '<p>數據表已創建，且插入了兩條數據，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML =  msg;
});

1.9 WebSocket考點

面試官：介紹一下webSocket的特點和作用（基礎題）

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。它允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送

本文由博客一文多發平臺 OpenWrite 發布！

0.1.2 Document類型

Document類型表示文檔，document對象是HTMLDocument的一個實例，document是window對象的一個屬性：

Document節點的特征：

nodeType=9
nodeName=”#document”
nodeValue=null
parentNode=null
ownerDocument=null

子節點可能是：DocumentType(<!DOCTYPE html>)、Element(html)、ProcessingInstruction或注釋

1、文檔的子節點

當HTML文檔結構如下時：

<html>
    <body>
    
    </body>
</html>

以下三種方式都可以表示html節點：

document.documentElement
document.childNodes[0]
document.firstChild

document.body可直接指向body元素

document.doctype可直接指向<!DOCTYPE>

IE8及以前版本，會將<!DOCTYPE>當作Comment節點，而document.doctype始終為null

IE9+與firefox，將作為文檔的第一個子節點，可通過document.firstChild和document.childNodes[0]和document.doctype來訪問。

在safari、Chrome和Opera中，用document.docType表示，但不在document.childNodes中。

2、文檔信息

以下為示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第10章</title>
</head>
<body>
    <div id="outer">
        <ul>
            <li id="li的id">1</li>
            <li name="myLi">2</li>
        </ul>
        <p>ul中的p</p>
    </div>
    <p id="test_p">abc</p>
    <script src="js/myjs.js"></script>
</body>
</html>

// document.title代表<title>中的文本，注意不是title節點
alert(document.title);      // 第10章
// 還可設置標題，源碼中還是原來的文本
document.title = "設置的新的title";
// 取得完整的URL
alert(document.URL);
// 取得域名
alert(document.domain);
// 取得來源頁面的URL
alert(document.referrer);

3、查找元素

// 獲取id="outer"的節點，id名字區分大小寫
var div = document.getElementById("outer");
// 根據標簽名獲得節點
var liNodes = document.getElementsByTagName("li");

注意上述兩者有差異，一個是Element，一個是Elements，多一個字母s

alert(liNodes.length);      // 節點數量
alert(liNodes[0].id);      // 顯示第0個節點的id屬性
alert(liNodes.item(0).id)   // 顯示第0個節點的id屬性
// 獲得name="myLi"的li元素
var myli = liNodes.namedItem("myLi");
var myli = liNodes['myLi']      // 此方法與上一行相同
// 顯示li的id值
alert(myli.id);     // li2
getElementsByName方法可返回給定name特性的所有元素

4、特殊集合

document.anchors	// 所有帶有name屬性的<a>元素
document.applets	// 所有<applet>元素
document.forms		// 所有<form>元素
document.images		// 所有<img>元素
document.links		// 所有帶有href屬性的<a>元素

6、文檔寫入

// 重寫頁面，頁面上只有Hello world!字樣
window.onload = function () {
    document.write("Hello world!");
}
// 運行到js代碼處時，向頁面中添加Hello world!字樣
document.write("Hello world!");

writeln()方法會在最后加上\n

open()和close()則是打開和關閉網頁的輸出流

在線咨詢

上一篇：python 模塊BeautifulSoup 從HTML或XML文件中提取數據
下一篇：HTML 符號

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商