這篇文章跟大家分享的是關於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(強調的語氣)
屬於XHTML
標籤,除了載入CSS
外,還能用來定義RSS
,定義rel
連接屬性等作用;而@import
是CSS
提供的,只能用來載入CSS
會同時被載入,而@import
引用的CSS
會等到頁面被載入完再載入
是CSS2.1
提出的,只在IE5
以上才能被識別,而link
是XHTML
標籤,無相容問題
或Rendering Engine
)和JS
引擎
核心:IE,MaxThon,TT,The World,360
,搜狗瀏覽器等。 [又稱MSHTML]
核心:Netscape6
以上版本,FF,MozillaSuite/SeaMonkey
等
Presto
核心:Opera7
以上。 [Opera
核心原為:Presto,現為:Blink
;]
##Webkit核心:
Safari,Chrome等。 [
Chrome的
Blink(
WebKit的分支)]
html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
線上的情況下,瀏覽器發現html頭有manifest屬性,它會要求manifest文件,如果是第一次訪問app,那麼瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過app且資源已經離線儲存了,那麼瀏覽器就會使用離線的資源載入頁面,然後瀏覽器會對比新的manifest檔案與舊的manifest文件,如果檔案沒有改變,就不做任何操作,如果檔案改變了,那麼就會重新下載檔案中的資源並進行離線儲存。
cookie是網站為了標示使用者身分而儲存在使用者本地端(Client Side)上的資料(通常經過加密)
localStorage不會自動把資料發給伺服器,只在本地保存
雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大##有期時間:
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 有那些優點和缺點?
優點:
# 用來載入速度較慢的內容(如廣告)
#可以讓腳本可以並行下載
可以實作跨子網域通訊
label 的作用是什麼?怎麼使用的?
< ;label for="mobile">Number:
#
#如何實作瀏覽器內多個標籤頁之間的通訊?
Adobe Flash Socket
ActiveX HTMLFile (IE)
基於multipart 編碼傳送XHR
基於長輪詢的XHR
頁面可見性(Page Visibility API) 可以有哪些用途?
在頁面被切換到其他後台進程的時候,自動暫停音樂或影片的播放
當使用者瀏覽其他頁面,暫停網站首頁幻燈自動播放
完成登陸後,無刷新自動同步其他頁面的登入狀態
##title 與h1的區別、b 與strong 的區別、i 與em 的區別?
#
以上是html的基礎 理論的詳細內容。更多資訊請關注PHP中文網其他相關文章!