HTML

DOCTYPE

DOCTYPE 是一种标准通用标记语言(SGML)的文档类型声明,目的是告诉浏览器的解析器要使用什么样的文档类型定义(DTD)来解析文档。目前浏览器的文档解析类型有三种:

  • Quirks mode(怪异模式):在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。如果没有声明DOCTYPE,默认就是这个模式。
  • Almost standards mode(接近标准模式):只有少数的怪异行为被实现。
  • Standard mode(标准模式):浏览器使用 W3C 的标准解析渲染页面。

<!DOCTYPE>声明必须是 HTML 文档的第一行,位于 html 标签之前。HTML5只规定了一种格式<!DOCTYPE html>

meta标签

meta 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

meta标签提供四个属性:

  • name:名称/值对中的名称。author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。
  • http-equiv:没有name时,会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部。
  • content:名称/值对中的值,可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用。
  • schema:用于指定要用来翻译属性值的方案

name 中有一个重要的属性值:viewport,用于适配移动端,进行响应式开发。

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
key mean example
width 视口的宽度 width=device-width 指缩放为 100% 时以 CSS 像素计量的屏幕宽度
initial-scale 初始化缩放比例 initial-scale=1.0 初始化不进行缩放
maximum-scale 用户最大缩放比例 maximum-scale=1.0 不允许用户缩放

语义化

  • 用正确的标签做正确的事情。
  • HTML 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  • 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于 HTML 标记确定上下文和各个关键字的权重,利于 SEO ;
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

常见的浏览器内核

浏览器 内核 备注
IE Trident 国内浏览器如猎豹安全、360极速浏览器、百度浏览器等也在使用 Trident 内核
Firefox Gecko 近几年逐渐没落
Safari Webkit 从Safari推出之时起,它的渲染引擎就是Webkit
Chrome Chromium/Blink Chromium 是谷歌的一款开源项目,而Chrome 是 Chromium 的稳定版。在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核二次开发
Opera Blink 刚开始使用Presto,后来跟随谷歌使用Blink

对浏览器内核的理解

浏览器内核主要分成两部分:渲染引擎和 JS 引擎。渲染引擎:将代码转换成页面,负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)、以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。JS 引擎:解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分得很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

HTML5有增加了哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?

新特性:

  • 用于绘画的 canvas 元素;
  • 用于媒体播放的 video 和 audio 元素;
  • 对本地离线存储有更好的支持,localStorage 长期存储数据,浏览器关闭后数据不丢失,sessionStorage 的数据在浏览器关闭后自动删除;
  • 语意化更好的内容元素,比如 header、nav、section、article、footer;
  • 新的表单控件:calendar、date、time、email、url、search;
  • 新的技术 webworker、websocket、Geolocation。

移除了:

  • 纯表现的元素:basefont、big、center、font、s、strike、tt、u;
  • 对可用性产生负面影响的元素:frame、frameset、noframes。

处理兼容性问题:
IE8/IE7/IE6支持 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式。

HTML5哪些标签可以做SEO优化?

title、meta、header、footer、nav、article、aside。

src和href的区别

  • src 是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求 src 资源时会将其指向的资源下载并应用到文档内,如 js 脚本,img 图片和 iframe 等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,所以一般 js 脚本会放在底部而不是头部。
  • href 是指网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

渐进增强和优雅降级

  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能,达到更好的用户体验。
  • 优雅降级:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。

async和defer的区别

详见async和defer

描述一下 cookie、sessionStorage和localStorage的区别

详见本地存储

如何实现浏览器内多个标签页之间的通信?

  • 使用 localStorage: localStorage.setItem(key,value)、 localStorage.getItem(key)
  • websocket协议
  • webworker

详见多个标签页之间的通信

Donate
  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2020-2021 苏御
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信