前端面试总结:HTML相关

1.Doctype作用?标准模式与兼容模式各有什么区别?

Doctype 是html的格式声明,位于HTML文档的第一行,处于<html>标签之前,告诉浏览器的解析器,这个html文件要用什么文档标准解析,如果没有写Doctype声明,或者写错了,浏览器会按照兼容模式进行解析。
标准模式:排版和js运作模式都以该浏览器支持的最高标准运行
兼容模式:模拟老式浏览器的模式进行解析,宽松向后的方式显示。

严格模式需要用 "use strict",而混杂模式则不需要
严格模式对语法要求更加严格,对代码的书写要求更加规范
严格模式下:
变量声明必须要用 var
数字不能以0开头
不能修改系统自带的左值,如 this
函数evil()内部声明的变量有作用域

2.HTML5 为什么只需要写 <!DOCTYPE HTML>?

因为HTML5 不基于 SGML,所以不需要对 DTD 进行引用,但是需要用Doctype告诉浏览器需要按照什么标准进行解析。
而HTML4.01 是基于SGML,所以需要对 DTD 进行引用,才能告诉浏览器该文档所使用的文档标准。
标准通用置标语言(Standard Generalized Markup Language,SGML)
即语法定义、文件类型定义(简称DTD--Definition Type Document)和文件实例。

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

css规范规定,每个元素都有默认display属性,以确定该元素的类型
行内 inline :span i u s b a img input select...
块元素 block : div ul ol lo dl dd dt h1~h6 p
常见的空元素 void: br hr img input link meta;
鲜为人知的空元素:base command Keygen source track

4.页面导入样式时,使用link和@import有什么区别?

link属于XHTML标签,除了加载CSS外,还能用于定义RSS,rel连接属性。
@import 是css提供的,只能识别css格式的文件。
页面加载时,link会同时被加载,而@import引用的css则需要等到页面加载完后再加载。
import是css2.1提出的,ie5以上才能被兼容。而link是XHTML标签 不存在兼容性问题;

5.介绍一下你对浏览器内核的理解?

浏览器内核:主要分为渲染引擎和js引擎
渲染引擎:负责获取网页的内容(HTML 、XML 、图像等),整理信息(加入css),计算显示方式等
js引擎:解析和执行js代码,实现网页动态效果。
现在的内核一般指渲染引擎;
常见的浏览器内核:
Trident内核:IE、360、搜狗等等
Gecko内核:Netscape6以上
Presto内核:Opera7及以上;
Webkit内核:Safari,Chrome等;

6.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

html5 新特性 :HTML5已经不是SGML的子集了,主要是关于图像,位置,储存,多任务等功能的添加。
绘画 canvas;
媒体标签 video 、audio
本地离线存储 localStorage 长期储存数据,浏览器关闭后不丢失,sessionStorage 浏览器关闭后自动删除。
新的语义化标签,如:header article section aside footer nav 等
表单控件 date、time、email、url、search等
新技术 webworker、websocket、Geolocation
移除的元素 basefont、big、center、font、s、u等
frame、frameset、noframes

支持HTML5新标签
可以用创建元素的方式创建新标签
document.createElement
也可以使用html5shim;

如何区分HTML5?
Doctype声明、新增的结构元素、功能元素
添加了新的属性:translate animation

7.html语义化:

用正确的标签做正确的事。
使html结构更加清晰,便于浏览器、搜索引擎解析;
便于阅读;
便于维护;
便于网络爬虫计算权重,利于SEO;

8.HTML5离线存储

用户在没有连网时,可以正常的访问站点或者应用,连网后更新缓存。
原理:基于一个新建的.appcache文件的缓存机制,通过这个文件上的解析清单离线存储资源,这些资源被当做cookie一样存储下来,离线状态是浏览器会解析这些缓存。
使用:
1.在页面头部加入一个manifest属性;
2.在cache.manifest文件编写离线存储资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3.在离线状态时,操作window.applicationCache进行需求实现。
详细的使用请参考:

浏览器怎么对HTML5的离线存储资源进行管理和加载?
在线时,浏览器发现html头部有manifest属性,就会请求manifest文件,如果是第一次访问,则下载文件进行离线存储,如果不是第一次则比较文件内容,相同则不操作,不同则重新下载。
离线时,浏览器直接使用离线存储的资源。

9.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

cookie是网站为了标识用户身份而储存在本地终端(Client Side)上的数据(通常会加密)。
cookie数据始终在同源的http请求中携带,会在浏览器和服务器中来回传递;

什么是Cookies(“小甜饼”)呢?简单来说,Cookies就是服务器暂时存放在你的电脑里的资料(.txt格式的文本文件),好让服务器用来辨认你的计算机。当你在浏览网站的时候,Web服务器会先送一小小资料放在你的计算机上,Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站,Web服务器会先看看有没有它上次留下的Cookies资料,有的话,就会依据Cookie里的内容来判断使用者,送出特定的网页内容给你。

sessionStorage和localStorage的数据则仅仅保存在本地,不会主动发给服务器。

存储大小:
cookie数据不能超过4k
sessionStorage和localStorage虽然也有限制,但比cookie大得多,能达到5M

保存期限:
localStorage 永久保存,除非手动删掉,浏览器关闭也不影响。
sessionStorage 数据在浏览器关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,浏览器关闭也不影响。

10.iframe有那些缺点?

iframe会阻塞主页面的onload事件
搜索引擎的检索程序无法解读这种页面,不利于SEO(搜索引擎优化);
iframe和主页面共享连接池,而浏览器对相同域的连接都有限制,所以会影响页面的并行加载。

使用iframe最好通过JavaScript动态给iframe添加src属性,可以绕开上述问题。

11.Label的作用是什么?是怎么用的?(label:标注)

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

//第一种用法,label标签中添加for = ‘表单的id’
<label for="Name">Number:</label>
  <input type=“text“ name="Name" id="Name"/>

//第二种用法,直接包裹表单控件
  <label>Date:<input type="text" name="B"/></label>

12.HTML5的form如何关闭自动完成功能?

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

13.网页验证是干嘛的,是为了解决什么安全问题

网页验证是区分用户是计算机还是人的公共安全自动程序。
可以防止恶意破解密码,刷票,论坛灌水;
能有效防止黑客对某一指定注册用户使用程序暴力破解的方式不断进行登录尝试。

14.title与h1的区别,b与strong的区别、i与em的区别?

title属性没有明确的意义,只表示是个标题
h1则表示层次明确的标题;
b加粗字体,但是没有语义,strong有语气加强的意思,使用阅读器自动播放时会加重语气。
i为斜体,没有语义,em斜体表示强调文本。

自然样式标签:b、i、u、s、pre
语义样式标签:strong、em、ins、del、code

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容