阿里三面居然被問到HTML?? 我:那就不好意思了...

語言: CN / TW / HK

  

阿里二面被問到HTML? 我:那就不好意思了

直接乾貨搞起!

目錄

一. 認識WEB

瀏覽器的分類和核心

圖解web標準

二.什麼是HTML

HTML文件基本結構

HTML文件基本結構示例

檔案型別描述(DOCTYPE)

根標籤(html)

元資料(meta)

網頁標題(title)

主題部分(body)

三.標籤的分類

單標籤/雙標籤

塊級元素/內聯元素

內聯元素定義

塊級元素有哪些

內聯元素有哪些

四. HTML基礎

文件型別

頁面語言lang

字符集

標籤語義化

錨點定位

base 標籤

特殊符號

 五.面試乾貨知識點

html元素佈局分類有哪些?

html中b標籤和strong標籤的區別?

減少dom數量的辦法?

一次性給你大量dom如何優化?

如何禁用a標籤預設事件且禁用後如何實現跳轉?

什麼是SEO?

前端如何進行seo優化?

什麼是meta標籤及其常用屬性?

script的async與defer區別?

preload,prefetch,dns-prefetch?

什麼是Html語義化及語義化的優點?


一. 認識WEB

網頁主要由文字、影象和超連結等元素構成。當然,除了這些元素,網頁中還可以包含音訊、視訊以及Flash等

瀏覽器的分類和核心

五大常見瀏覽器介紹:

  1. IE (edge)(Trident) 👉 (blink)
  2. 火狐(firefox)(Gecko)
  3. 谷歌(chrome)(blink)
  4. 蘋果(safari)(webkit)
  5. 歐朋(Opera)(blink 早期:presto )

瀏覽器的核心相當於汽車的發動機,是最核心的存在,它負責將程式碼轉換成使用者眼中的介面

圖解web標準

  • 新增入了JS


 

二.什麼是HTML

HTML是Hyper Text Markup Language(超文字標記語言)的簡寫,是一種標記語言,而不是一種程式語言,是網頁製作所必備的。超文字,本質也是文字。

自HTML3.2之後,由W3C推薦標準,定義了多種型別的元素(div,p...)和眾多型別的屬性值(id,name...)。

HTML文件基本結構

HTML基本結構圖

 

HTML文件基本結構示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello World</div>
</body>
</html> +wx:machinegunjoe666 免費領取資料

檔案型別描述(DOCTYPE)

為了說明文件使用的超文字標記語言標準,所有超文字標記語言文件應該以“檔案型別宣告”(外語全稱加縮寫)開頭,引用一個檔案型別描述或者必要情況下自定義一個檔案型別描述。舉例來說: html5:

<!DOCTYPE HTML>

html4:

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

根標籤(html)

html文件的最高節點標籤。

元資料(meta)

  • 元資料(Metadata)是資料的資料資訊。
  • 標籤提供了 HTML 文件的元資料。元資料不會顯示在客戶端,但是會被瀏覽器解析。
  • META元素通常用於指定網頁的描述,關鍵詞,檔案的最後修改時間,作者及其他元資料。
  • 元資料可以被使用瀏覽器(如何顯示內容或重新載入頁面),搜尋引擎(關鍵詞),或其他 Web 服務呼叫。

網頁標題(title)

title是網頁的標題元素包含在head中例如:<title>百度一下你就知道</title>在網頁上方的標籤中顯示:百度一下你就知道,相當於一個關鍵字搜尋引擎可以通過關鍵字查詢到此頁面。

主題部分(body)

body元素是網頁的主體部分,網頁的內容都寫在裡面,包括文字,影象,表單,音訊,視訊等其他內容。

我們編寫網頁的頭部在head裡編寫,主體是在body內編寫。在head裡面可編寫的內容大多是固定的,而在主體中的標籤卻是繁多且靈活組合使用的。

帶5標識的,是HTML5新增的標籤: HTML標籤

 

三.標籤的分類

如此多的標籤,看得眼花繚亂,可以適當的將它們分分類。例如單標籤/雙標籤,塊級元素/內聯元素,或者根據功能分類。

單標籤/雙標籤

單標籤:

<br><hr><img><input><param><meta><link>

雙標籤: 除去以上的單標籤都是雙標籤

塊級元素/內聯元素

塊級元素定義

  • 總是在新行上開始;
  • 高度,行高以及外邊距和內邊距都可控制;
  • 寬度預設是它的容器的100%,除非設定一個寬度。
  • 它可以容納內聯元素和其他塊元素

內聯元素定義

  • 和其他元素都在一行上;
  • 高,行高及外邊距和內邊距不可改變;
  • 寬度就是它的文字或圖片的寬度,不可改變
  • 內聯元素只能容納文字或者其他內聯元素

塊級元素有哪些

 <address>//定義地址 
 <caption>//定義表格標題 
 <dd>    //定義列表中定義條目 
 <div>     //定義文件中的分割槽或節 
 <dl>    //定義列表 
 <dt>     //定義列表中的專案 
 <fieldset> //定義一個框架集 
 <form> //建立 HTML 表單 
 <h1>    //定義最大的標題
 <h2>    // 定義副標題
 <h3>     //定義標題
 <h4>     //定義標題
 <h5>     //定義標題
 <h6>     //定義最小的標題
 <hr>     //建立一條水平線
 <legend>    //元素為 fieldset 元素定義標題
 <li>     //標籤定義列表專案
 <noframes>    //為那些不支援框架的瀏覽器顯示文字,於 frameset 元素內部
 <noscript>    //定義在指令碼未被執行時的替代內容
 <ol>     //定義有序列表
 <ul>    //定義無序列表
 <p>     //標籤定義段落
 <pre>     //定義預格式化的文字
 <table>     //標籤定義 HTML 表格
 <tbody>     //標籤表格主體(正文)
 <td>    //表格中的標準單元格
 <tfoot>     //定義表格的頁尾(腳註或表注)
 <th>    //定義表頭單元格
 <thead>    //標籤定義表格的表頭
 <tr>     //定義表格中的行

內聯元素有哪些

 <a>     //標籤可定義錨 
 <abbr>     //表示一個縮寫形式 
 <acronym>     //定義只取首字母縮寫 
 <b>     //字型加粗 
 <bdo>     //可覆蓋預設的文字方向 
 <big>     //大號字型加粗 
 <br>     //換行 
 <cite>     //引用進行定義 
 <code>    // 定義計算機程式碼文字
 <dfn>     //定義一個定義專案
 <em>     //定義為強調的內容
 <i>     //斜體文字效果
 <img>     //向網頁中嵌入一幅影象
 <input>     //輸入框
 <kbd>     //定義鍵盤文字
 <label>     //標籤為 input 元素定義標註(標記)
 <q>     //定義短的引用
 <samp>     //定義樣本文字
 <select> // 建立單選或多選選單
 <small>     //呈現小號字型效果
 <span>     //組合文件中的行內元素
 <strong> //加粗
 <sub>     //定義下標文字
 <sup>     //定義上標文字
 <textarea>     //多行的文字輸入控制元件
 <tt>     //打字機或者等寬的文字效果
 <var>    // 定義變數

根據塊級元素/內聯元素分類的話,還有一些元素根據內容才能判斷元素型別,例如:

<button>     //按鈕
<del>    // 定義文件中已被刪除的文字
<iframe>     //建立包含另外一個文件的內聯框架(即行內框架)
<ins>     //標籤定義已經被插入文件中的文字
<map>     //客戶端影象對映(即熱區)
<object>     //object物件
<script>     //客戶端指令碼

我們可以通過css的display屬性對塊級元素、行內元素進行轉換,也可以設定行內塊元素。

行內塊元素

1、和其他元素都在一行上; 2、元素的高度、寬度、行高以及頂和底邊距都可設定

四. HTML基礎

文件型別<!DOCTYPE>

作用: 宣告位於文件中的最前面的位置,處於 <html> 標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。

頁面語言lang

<html lang="en">  指定html 語言種類

最常見的2個:

  1. en定義語言為英語
  2. zh-CN定義語言為中文

字符集

<meta charset="UTF-8" />

utf-8是目前最常用的字符集編碼方式,常用的字符集編碼方式還有gbkgb2312

  • gb2312 簡單中文 包括6763個漢字 GUO BIAO
  • BIG5 繁體中文 港澳臺等用
  • GBK包含全部中文字元 是GB2312的擴充套件,加入對繁體字的支援,相容GB2312
  • UTF-8則基本包含全世界所有國家需要用到的字元
  • 這句程式碼非常關鍵, 是必須要寫的,否則可能引起亂碼的情況

作用: 這句話是讓 html 檔案是以 UTF-8 編碼儲存的, 瀏覽器根據編碼去解碼對應的html內容

標籤語義化

  • 一個需求可以用不同的標籤來完成,那麼這之間有什麼區別呢?
  • 一個是標籤語義強,起強調作用。一個是沒有語義,沒有強調作用 語義好的網頁更受SEO的喜歡,在搜尋引擎裡面的排名會更靠前

SEO優化 ===> 在輸入關鍵字的時候,搜尋引擎會羅列很多很多的網頁出來,而使用者基本習慣都是點前面的網頁,不會去點後面的網頁,所以如果網頁在搜尋引擎中的排名更加靠前,那麼自然而然會帶來更多的使用者點選訪問。

如何優化(瞭解):

1.花錢買關鍵字  見效快,花錢多
2.讓頁面更加規範,語義更加明確(在合適的地方使用合適的標籤)

作用: 根據標籤的語義,在合適的地方給一個最為合理的標籤,讓結構更清晰。

錨點定位

通過建立錨點連結,使用者能夠快速定位到目標內容。

建立錨點連結分為兩步:

<!--1.使用<a href="#id名">連結文字</a>點選,錨點到對應的位置 -->
<a href="#two"> 點選進行錨點跳轉  </a>

<!-- 2.使用相應的id名標註跳轉目標的位置 -->
<h3 id="two">錨點目標</h3> 

base 標籤

<base target="_blank" />

**總結: **

  1. base 可以設定整體連結的開啟狀態
  2. base 寫到 <head> </head> 之間
  3. 把所有的連線 都預設新增 target="_blank"

特殊符號

一些特殊的符號,我們再html 裡面很難或者不方便直接使用,我們此時可以使用下面的替代程式碼

顯示結果 描述 實體名稱
  空格 &nbsp;
< 小於號 &lt;
> 大於號 &gt;
× 乘號 &times;
¥ 元(yen) &yen;
© 版權(copyright) &copy;
商標 &trade;
® 註冊商標 &reg;

 五.面試乾貨知識點

html元素佈局分類有哪些?

  • 內聯元素(display:inline):無法設定寬高,元素大小由內容大小決定,不會自動換行,從左到右排列,內部不能巢狀塊級元素
  • 塊級元素(display:block):會自動換行,寬度預設父元素的寬度,高度預設內容高度
  • 內聯塊級元素(display:inline-block):可以設定寬高,排列方式從左向右

html中b標籤和strong標籤的區別?

  • b:為了加粗而加粗
  • strong:為了標明重點加粗 (盲人使用閱讀裝置strong會重讀,b不會)

減少dom數量的辦法?

  • 使用偽元素替代dom元素解決方案,比如清除浮動,樣式實現等。
  • 不濫用dom標籤,結構合理。
  • 按需載入,減少不必要的渲染。

一次性給你大量dom如何優化?

  • 快取dom物件,比如迴圈插入大量dom物件,將父dom在迴圈外獲取,迴圈內插入。
  • 使用document.createDocumentFragement建立文件碎片節點或者建立一個不在dom樹上的節點,將大量dom一次性更新進入該節點,然後批量替換或插入dom中。
  • 將連續的appendChild替換成使用innerHtml,避免多次對dom造成影響(ps:appendChild向父元素最後一個子節點插入元素,innerHtml直接替換父元素下所有元素,appendChild新增的元素如果是頁面上已有的元素,執行完原元素會被銷燬。)

如何禁用a標籤預設事件且禁用後如何實現跳轉?

  • 禁用a標籤預設事件

    • a標籤的href屬性設定為href="javascript:;"||href="javascript:void(0);",通過執行空js程式碼,阻止跳轉
    • 在a標籤點選事件上使用e.preventDefault()window.event.returnValue=false,後者相容ie,以此阻止dom元素預設行為
  • 實現跳轉

    • 點選事件 使用location.href = url 進行跳轉。

什麼是SEO?

搜尋引擎後臺有個非常龐大的資料庫,資料庫儲存海量關鍵詞,每個關鍵詞對應多個網址。這些資料由蜘蛛每天在網際網路中收集獲取,從一個連結爬行到另一個連結,對當前網頁進行提煉關鍵詞,之後將關鍵詞與對應網站儲存在資料庫中,而當我們使用搜索引擎時,搜尋引擎肯定會將與搜尋詞與資料庫中存在的關鍵詞對比,匹配程度越高的關鍵詞對應的網站越是優先展示在前面。
而seo(seach engine optimization)就是在此基礎上,對當前網站進行優化,改進網站對應關鍵詞在搜尋引擎中的排名,獲取更多的曝光程度。

前端如何進行seo優化?

前端進行seo優化無非是期望通過對網頁的處理,使得爬蟲對當前網站提取出的關鍵詞更加貼切,提高網站關鍵詞在搜尋引擎中的排名。

  • 合理控制網站首頁連結數量,連結足夠多蜘蛛才能爬取內頁,提高網站收錄數量,但也不能太多,過多無意義連結不僅影響使用者體驗也會降低網站首頁權重
  • 控制網站結構層次在三層以內,讓蜘蛛跳轉三次就能到到達網站任何一個內頁,這意味著層次低越容易被蜘蛛收錄,如果層次太多蜘蛛可能就不願意繼爬取
  • 導航儘量使用文字的方式,如果是圖片也必須加入alt與title屬性,告訴搜尋引擎導航的定位
  • 利用佈局,將重要的的html放在前面,便於蜘蛛的優先爬取
  • 控制頁面大小,提高頁面載入速度,如果頁面載入速度很慢,蜘蛛就會離開
  • 頁面的<meta keywords>keywords><meta description>儘量強調重點關鍵詞,不要重複過分堆砌
  • 正文標題使用h1標籤,h1標籤自帶權重,蜘蛛認為它最重要
  • 使用strong標籤em標籤而不是b標籤,因為strong與em目的就是標明重點而加粗,在搜尋引擎能夠得到高度重視
  • 重要內容不要使用js輸出,蜘蛛不會讀取js輸出,可以採用服務端渲染的辦法將中藥內容直接呈現在當前html中。
  • 蜘蛛只抓取get請求頁面,不抓去post請求頁面,合理控制頁面請求方式
  • 外部連結需要加上el = nofollow屬性,告訴蜘蛛不要去爬取,因為爬取外鏈可能蜘蛛就不回來了。
  • 不要使用iframe框架,蜘蛛一般不會讀取其內容

什麼是meta標籤及其常用屬性?

meta標籤位於html的head區域,它描述了當前網頁的各種資訊,比如頁面的說明,關鍵字,修改日企等。對於使用者它是不可見的,它服務於瀏覽器,搜尋引擎及其他網路服務。

  • charset:定義文件字元編碼
  • content:定義name屬性或者http-equiv屬性相關元資訊
  • name:將content屬性關聯到一個名稱
  • http-equiv:將content屬性關聯到http頭部
// 當前網頁字元編碼utf-8
<meta charset="utf-8"/>
// 當前網頁關鍵字,seo優化會用到
<meta name="keywords" content="便於seo優化"/>
// 描述當前網頁幹什麼的
<meta name="description" content="當前網頁說明"/>
// 宣告網頁字元編碼
<meta name="content-Type" content="text/html"/>
+wx:machinegunjoe免費領取資料

script的async與defer區別?

瀏覽器在解析html時遇到script標籤會停止解析,先去下載執行js檔案,再繼續解析,所以如果該標籤至於html前面會影響html解析給使用者帶來不好體驗,而async與defer就是處理這個事情。

  • defer:defer載入完成時會等到dom解析完畢執行 (當dom載入完會執行DOMContentLoaded事件,defer標籤未載入或未執行完,將推遲該事件執行,直到defer標籤載入執行完才會觸發該事件 ),這就相當於將script標籤放在html文件底部,且defer按原本script標籤出現順序執行
  • async:async載入完畢立即執行,所以js執行順序與標籤出現順訓很有可能不一樣(js建立的指令碼預設都是以async載入的)
  • ps:
    • 二者都是使得script標籤非同步載入,載入時不阻塞dom解析
    • 且對內聯js指令碼不起作用(<script>var a = 1</script>
    • 指令碼內不可是用document.write
    • 二者都會阻塞onload事件(onload意味著所有依賴資源載入完成執行)
    • defer阻塞DOMContentLoaded事件,async不阻塞(DOMContentLoaded:當dom資源下載解析完執行該事件,此時css圖片等資源可能未載入完成)
    • defer與async同時出現,async優先順序更高,除非瀏覽器不相容async,則以defer為準。

preload,prefetch,dns-prefetch?

  • preload:顧名思義預載入資源<link rel='preload' as='script' src = 'main.js' onload="_load()"/>,提升了你所需要資源載入優先順序,提前載入你所需要的資源,該方式不會阻塞DOMContentLoaded與onload事件,但是該方式不管你是否是用都會預先載入資源,使用該資源需要手動指定,一般我們使用preload方案為先頭部預載入資源,在window.onload事件中去使用,在預載入字型時需要設定crossorigin,使用匿名跨域模式,否則字型檔案會被載入兩次(當你期望不影響當前頁面效能去載入某個指令碼資源時preload+window.onload是最優方案)

  • prefetch:顧名思義預先獲取資源, <link rel="prefetch" href="main.jpg">使用該方式可以利用瀏覽器空閒時間去獲取將來可能用的上的資源快取起來,當我們用到該資源可以直接從快取獲取,不需要傳送請求。他將下載優先順序降到最低。(可以這麼說,prefetch專注於未來的資源,preload專注於當前資源)

  • dns-prefetch:顧名思義預先進行dns解析,dns解析需要耗時,所以我們當前頁面如果可能跳轉到別的網站可以使用dns-prefetch<link ref="dns-prefetch" href="xxx.com."/>,這將在瀏覽器空閒時解析該網站的dns,當我們前往該網站時就不需要在進行dns解析。

  • preconnect:顧名思義預先連結,dns-prefetch是提前dns解析,而preconnect則是提前完成與某個網站的連線,包括dns解析,tls協商,tcp握手,與dns-prefetch進行優化區別是一般我們知道使用者可能一定會使用的某個連結可以使用preconnect,其他不確定的可以dns-prefetch,否則全部進行preconnect,不管用不用得到反而得不償失。

什麼是Html語義化及語義化的優點?

h5出現後,新增了很多語義化標籤,比如header,footer,nav,article等,能夠清楚的向瀏覽器或者開發者解釋當前內容的意義。

  • 便於開發者閱讀程式碼,清晰程式碼結構
  • 利於Seo蜘蛛爬取資料時對資料的理解

最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。

我是一名滲透測試工程師,為了感謝讀者們,我想把我收藏的一些CTF奪旗賽乾貨貢獻給大家,回饋每一個讀者,希望能幫到你們。

乾貨主要有:

①1000+CTF歷屆題庫(主流和經典的應該都有了)

②CTF技術文件(最全中文版)

③專案原始碼(四五十個有趣且經典的練手專案及原始碼)

④ CTF大賽、web安全、滲透測試方面的視訊(適合小白學習)

⑤ 網路安全學習路線圖(告別不入流的學習)

⑥ CTF/滲透測試工具映象檔案大全

⑦ 2021密碼學/隱身術/PWN技術手冊大全

各位朋友們可以關注+評論一波 然後掃描下方  備註:開源中國  即可免費獲取全部資料