构成:结构层、表示层、行为层
分别是:HTML、CSS、JavaScript
作用:HTML 实现页面结构,CSS 完成页面的表现与风格,JavaScript 实现一些客户端的功能与业务。
html5 有新增了哪些元素废弃了哪些元素
Html5 新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责 web 上下文结构的定义
section:在 web 页面应用中,该元素也可以用于区域的章节描述。
header:页面主体上的头部,header 元素往往在一对 body 元素中。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成 web 页面区域的划分,确保内容的有效分割。
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素,dt 用于表示说话者,而 dd 用来表示说话内容。
行内语义性元素主要完成 web 页面具体内容的引用和描述,是丰富内容展示的基础。
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其 max、min、step 等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
a、IE: trident 内核
b、Firefox:gecko 内核
c、Safari:webkit 内核
d、Opera: 以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
e、Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发)
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
(1) 行内元素
(2) 块元素 (block element)
(3) 空元素 (在 HTML[1] 元素中,没有内容的 HTML 元素被称为空元素)
// 换行
WebGL(全写 Web Graphics Library)是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂 3D 结构的网站页面,甚至可以用来设计 3D 网页游戏等等。
WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题:
第一,它通过 HTML 脚本本身实现 Web 交互式三维动画的制作,无需任何浏览器插件支持;
第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的 OpenGL 接口实现的。
通俗说 WebGL 中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂,我们经常会使用一些三方的库,如 three.js 等,这些库多数用于 HTML5 游戏开发。
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie 都是在浏览器端存储的数据,其中 sessionStorage 的概念很特别,引入了一个 "浏览器窗口" 的概念。sessionStorage 是在同源的同窗口(或 tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage 即被销毁。同时 "独立" 打开的不同窗口,即使是同一页面,sessionStorage 对象也是不同的
cookies 会发送到服务器端。其余两个不会。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个,但 IE7 似乎也允许每个域名 50 个 cookie。Firefox 每个域名 cookie 限制为 50 个。Opera 每个域名 cookie 限制为 30 个。Firefox 和 Safari 允许 cookie 多达 4097 个字节,包括名(name)、值(value)和等号。Opera 许 cookie 多达 4096 个字节,包括:名(name)、值(value)和等号。Internet Explorer 允许 cookie 多达 4095 个字节,包括:名(name)、值(value)和等号。
区别:
- Cookie
+ 每个域名存储量比较小(各浏览器不同,大致 4K)
+ 所有域名的存储量有限制(各浏览器不同,大致 4K)
+ 有个数限制(各浏览器不同)
+ 会随请求发送到服务器
- LocalStorage
+ 永久存储
+ 单个域名存储量比较大(推荐 5MB,各浏览器不同)
+ 总体数量无限制
- SessionStorage
+ 只在 Session 内有效
+ 存储量更大(推荐没有限制,但是实际上各浏览器也不同)
SVG 可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG 是 W3C("World Wide Web ConSortium" 即 "国际互联网标准组织") 在 2000 年 8 月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG 严格遵从 XML 语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
特点:
(1) 任意放缩
用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。
(2) 文本独立
SVG 图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。
(3) 较小文件
总体来讲,SVG 文件比那些 GIF 和 JPEG 格式的文件要小很多,因而下载也很快。
(4) 超强显示效果
SVG 图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。
(5) 超级颜色控制
SVG 图像提供一个 1600 万种颜色的调色板,支持 ICC 颜色描述文件标准、RGB、线 X 填充、渐变和蒙版。
(6) 交互 X 和智能化。SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题,另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持:
Internet Explorer9,火狐,谷歌 Chrome,Opera 和 Safari 都支持 SVG。
IE8 和早期版本都需要一个插件 - 如 Adobe SVG 浏览器,这是免费提供的。
在 "标准模式"(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在 "怪异模式"(Quirks Mode) 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个完整的 `DOCTYPE` 则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。
(1)盒模型:
在怪异模式下,盒模型为 IE 盒模型而非标准模式下的 W3C 盒模型:在 IE 盒模型中,
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。
(2)图片元素的垂直对齐方式:
对于 `inline` 元素和 `table-cell` 元素,在 IE Standards Mode 下 vertical-align 属性默认取值为 `baseline`。而当 `inline` 元素的内容只有图片时,如 `table` 的单元格 `table-cell`。在 IE Quirks Mode 下,`table` 单元格中的图片的 `vertical-align` 属性默认为 `bottom`,因此,在图片底部会有几像素的空间。
(3)`<table>` 元素中的字体:
CSS 中,描述 `font` 的属性有 `font-family`,`font-size`,`font-style`,`font-weigh`, 上述属性都是可以继承的。而在 IE Quirks Mode 下,对于 `table` 元素,字体的某些属性将不会从 `body` 或其他封闭元素继承到 `table` 中,特别是 `font-size` 属性。
(4) 内联元素的尺寸:
在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的 `width` 和 `height` 属性,能够影响该元素显示的大小尺寸。
(5) 元素的百分比高度:
CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于 "auto"(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。
当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。
(6) 元素溢出的处理:
在 IE Standard Mode 下,`overflow` 取默认值 `visible`,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展 `box` 来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。
另可参考阅读:<https://www.cs.tut.fi/~jkorpela/quirks-mode.html>
`data-` 为前端开发者提供自定义的属性,这些属性集可以通过对象的 `dataset` 属性获取,不支持该属性的浏览器可以通过 `getAttribute` 方法获取:
`<div data-author="david"data-time="2011-06-20"data-comment-num="10">...</div>`
需要注意的是,`data-` 之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。并不是所有的浏览器都支持.`dataset` 属性,测试的浏览器中只有 Chrome 和 Opera 支持。
即:当没有合适的属性和元素时,自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
主要分成两部分:渲染引擎 (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的分支)]
*iframe 会阻塞主页面的 Onload 事件;
* 搜索引擎的检索程序无法解读这种页面,不利于 SEO;
*iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe,最好是通过 javascript
动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。
WebSocket、SharedWorker;
也可以调用 localstorge、cookies 等本地存储方式;
localstorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
我们通过监听事件,控制它的值来进行页面信息通信;
注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;
a、map+area 或者 svg
b、border-radius
c、纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
title 属性没有明确意义只表示是个标题,H1 则表示层次明确的标题,对页面信息的抓取也有很大的影响;
strong 是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:<strong> 会重读,而 <B> 是展示强调内容。
i 内容展示为斜体,em 表示强调的文本;
- <div style="height:1px;overflow:hidden;background:red">
- </div>
从 IE6 开始,引入了 Standards 模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟,所以 IE5 等之前的浏览器对 CSS 的支持很差, IE6 将对 CSS 提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果 IE6 支持 CSS 则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6 也是类似这样做的,它将 DTD 当成了这个 "参数",因为以前的页面大家都不会去写 DTD,所以 IE6 就假定 如果写了 DTD,就意味着这个页面将采用对 CSS 支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是 Quirks 模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型:在 W3C 标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在 Quirks 模式下,IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽:在 Standards 模式下,给等行内元素设置 wdith 和 height 都不会生效,而在 quirks 模式下,则会生效。
设置百分比的高度:在 standards 模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中:使用 margin:0 auto 在 standards 模式下可以使元素水平居中,但在 quirks 模式下却会失效。
(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)
canvas 是 HTML5 中新增一个 HTML5 标签与操作 canvas 的 javascript API,它可以实现在网页中完成动态的 2D 与 3D 图像技术。<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。
canvas 可以完成动画、游戏、图表、图像处理等原来需要 Flash 完成的一些功能。
B/S 架构的系统多使用 HTTP 协议,HTTP 协议的特点:
1 无状态协议
2 用于通过 Internet 发送请求消息和响应消息
3 使用端口接收和发送消息,默认为 80 端口
底层通信还是使用 Socket 完成。
HTTP 协议决定了服务器与客户端之间的连接方式,无法直接实现消息推送(F5 已坏), 一些变相的解决办法:
双向通信与消息推送
轮询:客户端定时向服务器发送 Ajax 请求,服务器接到请求后马上返回响应信息并关闭连接。 优点:后端程序编写比较容易。 缺点:请求中有大半是无用,浪费带宽和服务器资源。 实例:适于小型应用。
长轮询:客户端向服务器发送 Ajax 请求,服务器接到请求后 hold 住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。 优点:在无消息的情况下不会频繁的请求,耗费资小。 缺点:服务器 hold 连接会消耗资源,返回数据顺序无保证,难于管理维护。 Comet 异步的 ashx,实例:WebQQ、Hi 网页版、Facebook IM。
长连接:在页面里嵌入一个隐蔵 iframe,将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求,服务器端就能源源不断地往客户端输入数据。 优点:消息即时到达,不发无用请求;管理起来也相对便。 缺点:服务器维护一个长连接会增加开销。 实例:Gmail 聊天
Flash Socket:在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信,JavaScript 在收到服务器端传送的信息后控制页面的显示。 优点:实现真正的即时通信,而不是伪即时。 缺点:客户端必须安装 Flash 插件;非 HTTP 协议,无法自动穿越防火墙。 实例:网络互动游戏。
Websocket:
WebSocket 是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。
特点:
a、事件驱动
b、异步
c、使用 ws 或者 wss 协议的客户端 socket
d、能够实现真正意义上的推送功能
缺点:少部分浏览器不支持,浏览器支持的程度与方式有区别。
的
- <img>
和
- title
有什么区别
- alt
Alt 用于图片无法加载时显示
Title 为该属性提供信息,通常当鼠标滑动到元素上的时候显示
来源: