欢迎访问雷泽体育中国历史网!

HTML常考知识点

时间:2021-11-12 01:25作者:雷泽体育

本文摘要:本章先先容一些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)”,则该属性为 CSS1Compatconst 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......拓展:什么是SGMLSGML 即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 公布!。


本文关键词:HTML,常考,知识点,雷泽体育,本章,先先,容,一些,HTML,最

本文来源:雷泽体育-www.flybeauty.cn