搜尋

首頁 >web前端 >html教學 >html的基礎 理論

html的基礎 理論

不言
不言原創
2018-04-02 15:19:492606瀏覽

這篇文章跟大家分享的是關於html基礎理論知識，內容很不錯，有興趣的朋友可以看一下

HTML

語義化

  • HTML標籤的語意化是指：透過使用包含語意的標籤（如h1-h6）恰當地表示文件結構

  • css命名的語意化是指：為html標籤加入有意義的class

  • 為什麼需要語意化：

    • 去掉樣式後頁面呈現清晰的結構

    • 盲人使用讀屏器更好地閱讀

    • 搜尋引擎更好地理解頁面，有利於收錄

    • 便團隊專案的可持續運作及維護

#簡述一下你對HTML語義化的理解？

  • 用正確的標籤做正確的事。

  • html語意化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;

  • 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;

  • 搜尋引擎的爬蟲也依賴HTML標記來確定上下文和各個關鍵字的權重，利於SEO;

  • 讓閱讀原始程式碼的人對網站更容易將網站分塊，便於閱讀維護理解

Doctype作用？標準模式與相容模式各有什麼區別?

  • <!DOCTYPE>宣告位於位元於HTML文件中的第一行，處於<html> 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。 DOCTYPE不存在或格式不正確會導致文件以相容模式呈現

  • 標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止網站無法工作

HTML5 為什麼只需要寫？

  • HTML5 不是基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）

  • 而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件類型

##行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 行內元素有：

    a b span img input select strong（強調的語氣）

    • ##區塊級元素有：
  • p ul ol li dl dt dd h1 h2 h3 h4…p

    • 常見的空元素:

頁面匯入樣式時，使用link和@import有什麼差別？

  • link

    屬於XHTML標籤，除了載入CSS外，還能用來定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用來載入CSS

    • 頁面被載入的時，
  • link

    會同時被載入，而@import引用的CSS會等到頁面被載入完再載入

  • import

    是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題

#介紹你對瀏覽器核心的理解？

    主要分成兩部分：渲染引擎​​(
  • layout engineer

    或Rendering Engine)和JS引擎

    • 渲染引擎：負責取得網頁的內容（HTML、XML、圖片等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網頁內容的應用程式都需要內核

    • JS引擎則：解析並執行javascript來實現網頁的動態效果

    • 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎

#常見的瀏覽器核心有哪些？

  • Trident

    核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。 [又稱MSHTML]

  • Gecko

    核心：Netscape6以上版本，FF,MozillaSuite/SeaMonkey等

  • Presto核心：Opera7以上。 [Opera核心原為：Presto，現為：Blink;]

  • ##Webkit核心： Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

  • HTML5 現在已經不是SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加

    • 繪畫canvas

    • 用於媒介回放的video 和audio 元素

    • 本地離線儲存localStorage 長期儲存數據，瀏覽器關閉後資料不遺失

    • sessionStorage 的資料在瀏覽器關閉後自動刪除

    • 語意化更好的內容元素，例如article、footer 、header、nav、section

    • 表單控件，calendar、date、time、email、url、search

    • 新的技術 webworker,websocket , Geolocation

  • 移除的元素：

    • 純表現的元素：basefont，big，center，font, s，strike，tt，u

    • 對可用性有負面影響的元素：frame，frameset，noframes

    #支援HTML5新標籤：

      • IE8/IE7/IE6支援透過document.createElement方法產生的標籤

      • 可以利用這個特性讓這些瀏覽器支援HTML5新標籤

      • 瀏覽器支援新標籤後，還需要新增標籤預設的樣式

    當然也可以直接使用成熟的框架、例如html5shim

  • <!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->
    #如何區分HTML5：DOCTYPE聲明新增的結構元素功能元素

#HTML5的離線儲存怎麼使用，運作原理能不能解釋一下？

    當使用者沒有與網際網路連線時，可以正常存取網站或應用，在使用者與網際網路連線時，更新使用者機器上的快取檔案

    • 原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，透過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在離線狀態下時，瀏覽器會透過被離線儲存的資料進行頁面展示

    • 如何使用：

    • ##頁頭像下面一樣加入一個manifest的屬性；

    • 在cache.manifest檔的寫離線儲存的資源

    • 在離線狀態時，操作window.applicationCache進行需求實作

    • CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
    瀏覽器是怎麼對HTML5的離線儲存資源進行管理與載入的呢？

線上的情況下，瀏覽器發現html頭有manifest屬性，它會要求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過app且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest文件，如果檔案沒有改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。

  • 離線的情況下，瀏覽器就會直接使用離線儲存的資源。

    • 請描述 cookies，sessionStorage 和 localStorage 的差別？

cookie是網站為了標示使用者身分而儲存在使用者本地端（Client Side）上的資料（通常經過加密）

  • cookie資料總是會在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞

    • #sessionStorage
  • 和

    localStorage不會自動把資料發給伺服器，只在本地保存

    儲存大小：

    • ##cookie
      資料大小不能超過4k

    • sessionStorage
      • 和
    • localStorage

      雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大##有期時間：

  • localStorage
    • 儲存持久數據，瀏覽器關閉後資料不遺失除非主動刪除資料

    • sessionStorage

       資料在目前瀏覽器視窗關閉後自動刪除

    • cookie  设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有那些缺点？

  • iframe会阻塞主页面的Onload事件

  • 搜索引擎的检索程序无法解读这种页面，不利于SEO

  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的？

  • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

HTML5的form如何关闭自动完成功能？

  • 给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)

  • WebSocket、SharedWorker

  • 也可以调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)

  • Adobe Flash Socket 、

  • ActiveX HTMLFile (IE) 、

  • 基于 multipart 编码发送 XHR 、

  • 基于长轮询的 XHR

页面可见性（Page Visibility API） 可以有哪些用途？

  • 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;

  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

  • map+area或者svg

  • border-radius

  • 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<p style="height:1px;overflow:hidden;background:red"></p>

网页验证码是干嘛的，是为了解决什么安全问题

  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

title与h1的区别、b与strong的区别、i与em的区别？

  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响

  • strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容

  • i内容展示为斜体，em表示强调的文本

页面导入样式时，使用 link 和 @import 有什么区别？

  • link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS

  • 页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载

  • @import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

  • 浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎

  • 渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机

  • JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互

  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

  • Blink内核：新版 Chrome、新版 Opera

  • Webkit内核：Safari、原Chrome

  • Gecko内核：FireFox、Netscape6及以上版本

  • Trident内核（又称MSHTML内核）：IE、国产浏览器

  • Presto内核：原Opera7及以上

HTML5有哪些新特性？

  • 新增選擇器document.querySelector、document.querySelectorAll

  • 拖曳釋放(Drag and drop) API

  • #媒體播放的video 和audio

  • 本機儲存localStorage 和sessionStorage

  • 離線應用程式manifest

  • #桌面通知Notifications

  • 語意化標籤article、footer、header、nav、section

  • 增強表單控制項calendar、date、time 、email、url、search

  • 地理位置Geolocation

  • #多任務webworker

  • 全雙工通訊協定websocket

  • 歷史管理history

  • 跨域資源共用(CORS) Access-Control-Allow-Origin

  • #頁面可見性改變事件visibilitychange

  • 跨視窗通訊PostMessage

  • Form Data 物件

  • #繪畫canvas

HTML5移除了那些元素？

  • 純粹表現的元素：basefont、big、center、font、s、strike、tt、u

  • 對可用性產生負面影響的元素：frame、frameset、noframes

#如何處理HTML5新標籤的瀏覽器相容問題？

  • 透過document.createElement 建立新標籤

  • 使用墊片html5shiv.js

如何區分HTML 和HTML5？

  • DOCTYPE宣告、新增的結構元件、功能元素

#HTML5的離線儲存工作原理能不能解釋一下，怎麼使用？

  • HTML5的離線儲存原理：

    • #使用者線上時，儲存更新使用者機器上的快取檔案；當使用者離線時，可以正常存取離線儲存問網站或應用內容

  • #HTML5的離線儲存使用：

    • #在文件的html 標籤設定manifest 屬性，如manifest="/offline.appcache"

    • 在專案中新建manifest 文件，manifest 檔案的命名建議：xxx.appcache

    • 在web 伺服器設定正確的MIME-type，即text/cache-manifest

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的？

  • 線上的情況下，瀏覽器發現html 標籤有manifest 屬性，它會要求manifest 檔案

  • 如果是第一次訪問app，那麼瀏覽器就會根據manifest 文件的內容下載相應的資源並且進行離線存儲

  • 如果已經訪問過app且資源已經離線存儲了，瀏覽器會對比新的manifest 檔案與舊的manifest 文件，如果檔案沒有改變，就不做任何操作。如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存

  • 離線的情況下，瀏覽器就會直接使用離線儲存的資源。

iframe 有那些優點和缺點？

  • 優點：

    • # 用來載入速度較慢的內容（如廣告）

    • #可以讓腳本可以並行下載

    • 可以實作跨子網域通訊

  • ##缺點：

    • iframe 會阻塞主頁面的onload 事件

    • #無法被一些搜尋引擎索識別

    • 會產生很多頁面，不容易管理

label 的作用是什麼？怎麼使用的？

  • label標籤來定義表單控制項的關係：

    • 當使用者選擇label標籤時，瀏覽器會自動將焦點轉到和label標籤相關的表單控制項上

  • 使用方法1：

    • < ;label for="mobile">Number:

  • 使用方法2：

    • #

#如何實作瀏覽器內多個標籤頁之間的通訊？

  • iframe + contentWindow

  • #postMessage

    • ##SharedWorker(Web Worker API)

    • storage 事件(localStorge API)

    • #WebSocket

    • ##webSocket 如何相容於低瀏覽器？

  • Adobe Flash Socket

  • ActiveX HTMLFile (IE)

  • 基於multipart 編碼傳送XHR

  • 基於長輪詢的XHR

頁面可見性（Page Visibility API） 可以有哪些用途？

  • 在頁面被切換到其他後台進程的時候，自動暫停音樂或影片的播放

  • 當使用者瀏覽其他頁面，暫停網站首頁幻燈自動播放

  • 完成登陸後，無刷新自動同步其他頁面的登入狀態

##title 與h1的區別、b 與strong 的區別、i 與em 的區別？

  • title 表示是整個頁面標題，h1 則表示層次明確的標題，對頁面資訊的抓取有很大的影響

  • strong 標示重點內容，有語氣加強的意義，使用閱讀裝置閱讀網路時，strong 會重讀，而b

##是展示強調內容

    i 內容顯示為斜體，em 表示強調的文字

    • 自然樣式標籤：b, i, u, s, pre

    • 語意樣式標籤：strong, em, ins, del, code

    • 應該準確使用語意樣式標籤, 但不能濫用。如果無法確定時，首選使用自然樣式標籤

    • 相關推薦：

#幾個HTML基礎知識點

在前端中的html基礎知識

html基礎圖像知識詳解

#

以上是html的基礎 理論的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 firefox css chrome safari html webkit xhtml for select date Cookie xml Calendar void class map JS number 对象 事件 history 选择器 border canvas input ul li 算法 http websocket 搜索引擎 Access SEO
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：基於 HTML5 Canvas 實現的文字動畫特效下一篇：基於 HTML5 Canvas 實現的文字動畫特效

相關文章

看更多