整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML常考知識點

          HTML常考知識點

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

          1.1 DOCTYPE的作用

          面試官:我們現在寫HTML代碼第一行通常是 !<DOCTYPE HTML>,請介紹一下DOCTYPE的作用(基礎題)

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

          面試官:瀏覽器解析文檔有哪幾種解析模式呢?(拓展題)

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

          1. 怪異模式(quirks mode):此種模式會模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE,瀏覽器默認會以這種模式解析文檔。
          2. 標準模式(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標簽由namecontent兩個屬性來定義,來描述一個HTML網頁文檔的元信息,例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等,除了一些http標準規定了一些name作為大家使用的共識,開發者也可以自定義name

          面試官:移動端適配的viewpoint,能否手寫一下?(拓展題)

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

          1.5 src和href的區別

          面試官:介紹一下srchref的區別(基礎題)

          • src是指向外部資源的位置,指向的內容會嵌入到文檔中當前標簽所在的位置,在請求src資源時會將其指向的資源下載并應用到文檔內,如JS腳本,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執行完畢,所以一般JS腳本會放在底部而不是頭部。

          • href是指向網絡資源所在位置(的超鏈接),用來建立和當前元素或文檔之間的連接,當瀏覽器識別到它他指向的文件時,就會并行下載資源,不會停止對當前文檔的處理

          1.6 img標簽的srcset

          面試官:介紹一下<img>標簽的srcsetsizes屬性的作用(基礎題)

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

          • 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>標簽的deferasync的作用(基礎題)

          • 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 發布!

          由于HTML5前端開發的火熱和一些IT巨頭公司對HTML5前端開發人員的需求旺盛,讓越來越多的人轉入前端。前端開發領域是IT技術語言領域唯一一個男女老少都可以快速入門并快速提升興趣的領域,今天我就來聊聊HTML5前端到底該怎么學~

          HTML5前端主要分為三個階段,下面主要說說這三個階段需要學習的知識點以及可達成的學習效果。

          第一階段、前端頁面重構

          配套視頻:

          2019千鋒Web前端初識與職業發展https://pan.baidu.com/s/1B_3-7k3b2019千鋒Web前端教程-Web前端從入門到精通(新手必看)(連載) https://pan.baidu.com/s/1IiL0feDPp_4bsUZr0foKjgr5Ycix1cwDAkRQ

          第二階段、JavaScript高級程序設計+PC端全棧開發

          配套視頻:HTML5中級教程-Javascript程序設計及PC全棧項目開發

          第三階段、Node.js后端開發+混合開發(Hybrid,RN)+Angular前端框架+大數據可視化

          配套視頻:HTML5高級教程-移動端WebApp及混合APP開發

          以上就是HTML5需要學習的全部內容。HTML5需要學習的知識點還是很多的,沒有基礎想自學好HTML5的話是學不好的。可以去全面的培訓一下。推薦千鋒,全程面授模式教學,真實項目實戰。可以先去實地免費試聽兩周,再決定。

          以上配套視頻可私信領取或自行在千鋒重慶官網下載。

          節主要簡單講解canvas、svg、地理定位和新語義元素

          HTML 5 Canvas

          canvas 元素用于在網頁上繪制圖形。HTML5 的 canvas 元素使JavaScript 在網頁上繪制圖像。畫布是一個矩形區域,您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

          <canvas id="myCanvas" width="200" height="100"></canvas>

          canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成:

          <script type="text/javascript">

          var c=document.getElementById("myCanvas");

          var cxt=c.getContext("2d");返回一個用于在畫布上繪圖的環境,目前僅支持2d,

          cxt.fillStyle="#FF0000";//染成紅色

          cxt.fillRect(0,0,150,75);//fillRect 方法規定了形狀、位置和尺寸

          </script>


          主站蜘蛛池模板: 国产日本一区二区三区| 亚洲制服中文字幕第一区| 乱人伦一区二区三区| 国产成人精品一区二三区 | 综合一区自拍亚洲综合图区| 国产精品视频无圣光一区| 国产精品成人一区无码| 99精品国产一区二区三区| 亚洲一区二区影院| 日韩三级一区二区| 国产亚洲无线码一区二区| 2018高清国产一区二区三区 | 久久久无码精品国产一区| 91一区二区三区四区五区| 能在线观看的一区二区三区| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 亚洲国产欧美日韩精品一区二区三区 | 国产精品成人一区二区三区| 国偷自产Av一区二区三区吞精| 亚洲一区二区在线免费观看| 精品国产乱码一区二区三区| 亚洲日韩国产一区二区三区| 亚洲一区中文字幕在线电影网| 国产伦精品一区二区三区视频金莲| 久久精品一区二区免费看| 日本一区二区三区在线看| 日韩AV无码久久一区二区| 韩日午夜在线资源一区二区| 国精产品一区一区三区免费视频 | 大帝AV在线一区二区三区| 最新欧美精品一区二区三区| 亚洲国产精品自在线一区二区| 国产一区二区三区免费| 高清国产精品人妻一区二区| 国产亚洲福利精品一区| 国产一区二区电影| 国产精品区一区二区三在线播放 | 精品福利一区二区三| 国产一区二区在线视频| 无码人妻视频一区二区三区 | 午夜在线视频一区二区三区 |