1、Doctype 是什么,有什么作用?标准模式与兼容模式各有什么区别?
概念:DOCTYPE
是用来声明文档类型和 DTD (DocType Declaration)规范的。任何一个标准的HTML页面,第一行一定是一个以<!DOCTYPE ……>
开头的语句。它不是一个 HTML 标签,处于 html 标签之前。DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用:告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
标准模式与兼容模式区别:标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
在 HTML4.01 中<!doctype>声明指向一个 DTD,由于 HTML4.01 基于 SGML,所以 DTD 指定了标记规则以保证浏览器正确渲染内容 HTML5 不基于 SGML,所以不用指定 DTD。
补充:
HTML4.01这个版本是IE6开始兼容的。HTML5是IE9开始兼容的。如今,手机、移动端的网页,就可以使用HTML5了,因为其兼容性更高。
HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下图)。
总结:
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
2、HTML、XHTML、HTML5的区别
- HTML(HyperText Markup Language) 是超文本标记语言,负责描述文档语义的语言,属于 SGML。
- XHTML (Extensible Hypertext Markup Language)是可扩展超文本标记语言,属于 XML,是 HTML 进行 XML 严格化的结果。
- HTML5 不属于SGML,也不属于 XML(HTML5有自己独立的一套规范),比 XHTML 宽松。
3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
定义:CSS 规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认的 display 值,如 div 的 display 默认值为“block”,则为“块级”元素;span 默认 display 属性值为“inline”,是“行内”元素。
- 行内元素有:a b span img input select strong(强调的语气)
- 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
- 空元素:
- 常见: br hr img input link meta
- 不常见: area base col command embed keygen param source track wbr
不同浏览器(版本)、HTML4(5)、CSS2 等实际略有差异 参考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
4、HTML 全局属性
全局属性是所有 HTML 元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用。
页面导入样式时,使用 link 和@import 有什么区别?
- link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义 RSS, 定义 rel 连接属性等作用;而@import 是 CSS 提供的,只能用于加载 CSS;
- 页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会等到页面被加载完再加载;
- import 是 CSS2.1 提出的,只在 IE5 以上才能被识别,而 link 是 XHTML 标签,无兼容问题;
- link 支持使用 js 控制 DOM 去改变样式,而@import 不支持;
浏览器内核的理解?
浏览器主要分成两部分:渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。
渲染引擎(浏览器内核):负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后渲染到用户的屏幕上。渲染引擎是浏览器兼容性问题出现的根本原因。
JS 引擎:解析和执行 javascript 来实现逻辑和控制 DOM 进行交互。浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时会逐行解释每一句源码(转换为机器语言),然后由计算机去执行。所以 JavaScript 语言归为脚本语言,会逐行解释执行。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,浏览器内核就倾向于只指渲染引擎。
主流浏览器机器内核:
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360 极速浏览器、百度浏览器 |
firefox | Gecko | |
Safari | webkit | 从 Safari 推出之时起,它的渲染引擎就是 Webkit,一提到 webkit,首先想到的便是 chrome,Webkit 的鼻祖其实是 Safari。 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink 内核。二次开发 |
Opera | blink | Opera 内核原为:Presto,现在跟随 chrome 用 blink 内核。 |
HTML5 变化
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等。
新的语义化元素
1、H5中新增的语义标签
<section>
表示区块<article>
表示文章。如文章、评论、帖子、博客<header>
表示页眉<footer>
表示页脚<nav>
表示导航<aside>
表示侧边栏。如文章的侧栏<mark>
表示标记 (用得少)<progress>
表示进度 (用得少)<time>
表示日期
本质上新语义标签与<div>
、<span>
没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav">
相当于<nav>
。
2、移除的元素
- 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
- 对可用性产生负面影响的元素:frame,frameset,noframes;
表单增强
email
只能输入email格式。自动带有验证功能。tel
手机号码。url
只能输入url格式。number
只能输入数字。search
搜索框range
滑动条color
拾色器time
时间date
日期datetime
时间日期month
月份week
星期
上面的部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
新 API
离线 (applicationCache )
音视频 (audio, vidio)
图形 (canvans)
实时通信(websoket)
本地存储(本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除)
设备能力(地图定位,手机摇一摇)
支持 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 声明\新增的结构元素\功能元素
对 HTML 语义化的理解?
- 用正确的标签做正确的事情。
- html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
- 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
- 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO;
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
- cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
- sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
- 存储大小:
- cookie 数据大小不能超过 4k。
- sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
- 有效期(生命周期):
- localStorage: 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
- sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
- cookie: 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
- 共享
- sessionStorage 不能共享,localStorage 在同源文档之间共享,cookie 在同源且符合 path 规则的文档之间共享
HTML5 的 form 如何关闭自动补全功能?
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
如何实现浏览器内多个标签页之间的通信? (阿里)
- WebSocket、SharedWorker;
- 也可以调用 localstorge、cookies 等本地存储方式;
localstorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个storage
事件,
我们通过监听事件,控制它的值来进行页面信息通信;
注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;
webSocket 如何兼容低浏览器?(阿里)
- Adobe Flash Socket 、
- ActiveX HTMLFile (IE) 、
- 基于 multipart 编码发送 XHR 、
- 基于长轮询的 XHR
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
cache manifest
缓存清单文件
缓存清单文件中列出了浏览器应缓存,以供离线访问的资源。推荐使用 .appcache
作为后缀名,另外还要添加MIME类型。
缓存清单文件里的内容怎样写:
(1)顶行写CACHE MANIFEST。
(2)CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等。
(3)NETWORK: 换行 指定需要在线访问的资源,可使用通配符(也就是:不需要缓存的、必须在网络下面才能访问的资源)。
(4)FALLBACK: 换行 当被缓存的文件找不到时的备用资源(当访问不到某个资源时,自动由另外一个资源替换)。
格式举例1:
格式举例2:
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
缓存清单文件怎么用:
(1)例如我们创建一个名为 demo.appcache
的文件。例如:
demo.appcache:
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://img.smyhvae.com/2016040101.jpg
(2)在需要应用缓存在页面的根元素(html)里,添加属性manifest=”demo.appcache”。路径要保证正确。例如:
<!DOCTYPE html>
<html manifest="01.appcache">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>
浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?
- 在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问 app,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
- 离线的情况下,浏览器就直接使用离线存储的资源。
在离线状态时,操作 window.applicationCache 进行需求实现。
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?
- title 属性没有明确意义只表示是个标题,H1 则表示层次明确的标题,对页面信息的抓取也有很大的影响;
- strong 是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:strong 会重读,而 b 是展示强调内容。
- i 内容展示为斜体是样式标签,em 表示强调的文本,是语义化标签;效果都是斜体
Physical Style Elements – 自然样式标签
b, i, u, s, pre
Semantic Style Elements – 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
哪些元素可以自闭合?
- 表单元素 input
- img
- br, hr
- meta, link
HTML 和 DOM 的关系
- HTML 只是一个字符串
- DOM 由 HTML 解析而来
- JS 可以维护 DOM
property 和 attribute 的区别
例如一个 input 标签 <input value="3" />
它的 attribute 是 3 但如果使用input.value = 4
或 直接修改值为 4,这时再去 getAttribute 得到的还是”3”
form 作用
- 直接提交表单
- 使用 submit / reset 按钮
- 便于浏览器保存表单
- 第三方库(比如 jQuery)可以整体获取值
- 第三方库可以进行表单验证
所以,如果我们是通过 Ajax 提交表单数据,也建议加上 form。
html 中 title 属性和 alt 属性的区别?
<img src="#" alt="alt信息" />
当图片不输出信息的时候,会显示 alt 信息 鼠标放上去没有信息,当图片正常读取,不会出现 alt 信息。
<img src="#" alt="alt信息" title="title信息" />
- 当图片不输出信息的时候,会显示 alt 信息 鼠标放上去会出现 title 信息;
- 当图片正常输出的时候,不会出现 alt 信息,鼠标放上去会出现 title 信息。
- 除了纯装饰图片外都必须设置有意义的值,搜索引擎会分析。
另外还有一些关于 title 属性的知识:
- title 属性可以用在除了 base,basefont,head,html,meta,param,script 和 title 之外的所有标签。
- title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
- title 属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。
为什么我们要弃用 table 标签?
table 的缺点在于服务器把代码加载到本地服务器的过程中,本来是加载一行执行一行,但是 table 标签是里面的东西全都下载完之后才会显示出来,那么如果图片很多的话就会导致网页一直加载不出来,除非所有的图片和内容都加载完。如果要等到所有的图片全都加载完之后才显示出来的话那也太慢了,所以 table 标签现在我们基本放弃使用了。
head 元素
html5 的比较完整的骨架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
head 子元素大概分为三类,分别是:
- 描述网页基本信息的
- 指向渲染网页需要其他文件链接的
- 各大厂商根据自己需要定制的
网页基本信息
一个网页,首先得有个标题,就跟人有名字一样。除此之外,还可以根据实际需要补充一些基本信息。
- 文档标题(浏览器标签中显示的文本):
深入了解 head 元素 - 编码格式: 如果你的页面出现乱码,那一般就是编码格式不对
- 视窗设置:
- 搜索引擎优化相关内容:
- IE 浏览器版本渲染设置:
其他文件链接
- CSS 文件:
- JavaScript 文件:<script src=“script.js”>
但是为了让页面的样子更早的让用户看到,一般把 JS 文件放到 body 的底部
厂商定制
同样分享页面到 QQ 的聊天窗口,有些页面直接就是一个链接,但是有些页面有标题,图片,还有文字介绍。为什么区别这么明显呢?其实就是看有没有设置下面这三个内容
<meta itemprop="name" content="这是分享的标题" />
<meta
itemprop="image"
content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png"
/>
<meta name="description" itemprop="description" content="这是要分享的内容" />
细化补充:
面试题:
- 问:网页的head标签里面,表示的是页面的配置,有什么配置?
- 答:字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下:
<title>
:指定整个网页的标题,在浏览器最上方显示。<base>
:为页面上的所有链接规定默认地址或默认目标。<meta>
:提供有关页面的基本信息<body>
:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。<link>
:定义文档与外部资源的关系。
meta 标签:
meta表示“元”。“元”配置,就是表示基本的配置项目。
常见的几种 meta 标签如下:
(1)字符集 charset:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta标签中的charset
定义,charset就是charactor set(即“字符集”),即网页的编码方式。
字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
上面这行代码非常关键, 是必须要写的代码,否则可能导致乱码。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”,我们在下一段会详细介绍。
(2)视口 viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
:表示视口宽度等于屏幕宽度。
viewport 这个知识点,初学者还比较难理解,以后学 Web 移动端的时候会用到。
(3)定义“关键词”:
举例如下:
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。
(4)定义“页面描述”:
meta除了可以设置字符集,还可以设置关键字和页面描述。
只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化)。
设置页面描述的举例:
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
效果如下:
上面的几种<meta>
标签都不用记,但是另外还有一个<meta>
标签是需要记住的:
<meta http-equiv="refresh" content="3;http://www.baidu.com">
上面这个标签的意思是说,3秒之后,自动跳转到百度页面。
title 标签:
用于设置网页标题:
<title>网页的标题</title>
title标签也是有助于SEO搜索引擎优化的。
base标签:
<base href="/">
base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。
iframe 有那些缺点?
- iframe 会阻塞主页面的 Onload 事件;
- 搜索引擎的检索程序无法解读这种页面,不利于 SEO;
- iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe,最好是通过 javascript
动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。
Label 的作用是什么?是怎么用的?
label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
页面可见性(Page Visibility API) 可以有哪些用途?
- 通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等;
- 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放;
如何在页面上实现一个圆形的可点击区域?
- map+area 或者 svg
- border-radius
- 纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
实现不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
移动端项目需要注意的 4 个问题
meta 中设置 viewport
阻止用户手滑放大或缩小页面,需要在 index.html 中添加 meta 元素,设置 viewport。
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
CSS 样式统一问题
我们需要重置页面样式,因为在不同的手机浏览器上,默认的 css 样式不是统一的。 解决方法:使用 reset.css 重置所有元素的默认样式
一像素边框问题
有的手机分辨率比较高,是 2 倍屏或 3 倍屏,手机上的浏览器就会把 CSS 中的 1 像素值展示为 2 个或 3 个物理宽度 解决方法: 添加一个 border.css 库,将利用scroll 缩放的原理将边框重置。当我们需要使用一像素边框时只需要在标签上添加对应类名,如设置底部一像素边框就在标签上加入”border-bottom”的 class 名
300 毫秒点击延迟问题
在移动端开发中,某些机型上使用 click 事件会延迟 300ms 才执行,这样影响了用户体验。 解决方法: 引入fastclick.js。