个人博客

常见html概念 ​

对于Web标准及W3C的理解 ​

web标准 简单来说页面可分为结构、表现、行为三层模型。

W3C是一个制定各种标准的非营利性组织，也叫万维网联盟，其制定的标准包括HTML、CSS、ECMAScript等，web标准的制定有很多好处，如：

  • 可以统一开发流程，统一使用标准化开发工具，方便多人协作
  • 降低学习成本，只需要学习标准就行，否则就要学习各个浏览器厂商的标准
  • 跨平台，方便迁移不同设备
  • 降低代码维护成本

构成页面的三层模型 ​

  • 结构层：由HTML超文本标记语言创建，即页面中的各种标签；
  • 表示层：由CSS创建，也称为层叠样式表，作用是确定结构层的显示样式；
  • 行为层：由JavaScript和DOM确定，表示网页内容与用户之间的交互

DOCTYPE 与 ​

DOCTYPE：HTML的文档声明，告诉浏览器使用哪一个HTML版本标准来解析文档。在浏览器发展的过程中HTML出现过很多版本，不同版本之间格式略有差异，如果没有DOCTYPE，大部分浏览器会开启最大兼容模式来解析网页，也就是 怪异模式，此时不仅会降低解析效率，还可能产生未知bug，所以文档声明是必须的，DOCTYPE对大小写不敏感，但规范一般采用大写；

是HTML5的DOCTYPE文档声明，它不是HTML标签，是一条浏览器指令，告诉浏览器页面用的HTML标记的版本；

严格模式 与 混杂模式，标准模式 与 怪异模式 ​

  • 严格模式：以浏览器支持的最高标准运行
  • 混杂模式：页面以宽松向下兼容的模式显示，模拟老式浏览器的行为，DOCTYPE不存在或格式不正确，会导致混杂模式
  • 标准模式：指浏览器按照W3C标准解析执行代码
  • 怪异模式：使用浏览器自己的方式解析执行代码
  • 总结：浏览器解析时到底使用何种模式，与网页中的文档类型声明有关

H5和HTML5的区别 ​

  • H5是一个产品名称，包含最新的HTML5、CSS3、ES6等新技术来制作的应用
  • HTML5是一个技术名称，指的就是第五代HTML

标签属性title 与 alt 对比 ​

title属性：为设置该属性的元素提供建议性信息，鼠标悬浮时会显示title内容 alt属性：为图片未能正常显示时（屏幕阅读器）给予文字说明，长度小于100个英文字符

微格式 ​

微格式是建立在已有的、被广泛采用的标准基础上的一组简单的、开放的数据格式。 具体表现是把语义嵌入到HTML之中，给HTML标签增加一些属性，这些属性对信息的语义结构进行注释，有助于处理HTML文档的软件更好的理解HTML文档。当爬取web内容时，能够更准确的识别内容块的语义，微格式可以对网站进行SEO优化

SEO中的TDK ​

在SEO中，TDK指的就是title、description、keywords三个标签，分别是页面标题、描述、关键词

标签属性 src 与 href 对比 ​

  • 应用标签不同：src是source的缩写，常用于 script、img 标签；href是Hypertext Reference的缩写 超文本引用，常用于 link、a 标签
  • 作用结果不同：src 请求到的资源替换当前内容；href 用于文档和资源之间建立联系；
  • 浏览器解析的不同：src会暂停其他资源的处理，直到该资源加载、解析和执行完毕，会产生阻塞（没有async和defer时）；href将会并行加载请求资源，不会阻塞当前文档的处理

attribute 和 property 对比 ​

  • attribute是HTML标签上的特性，值为字符串；property是DOM元素中的属性，是JavaScript里的对象
  • attribute是DOM节点自带属性，例如html中常用的id、class、title、align等；property是这个DOM元素作为对象其附加的内容，例如childNodes、firstChild等

link标签 与 @import 对比 ​

  • link属于HTML标签；@import是css提供的
  • 页面被加载时，link会同时被加载；@import引用的css会等到页面被加载完再加载
  • link是XHTML标签，无兼容问题；@import只在IE5以上可识别
  • link方式的样式权重高于@import的权重

script标签中 defer 与 async 对比 ​

  • 解析html遇到script标签时，如果没有defer或async属性，浏览器会立即加载并执行script对应的脚本，此时会阻塞浏览器UI渲染线程
  • defer和async属性都是去异步加载外部JS脚本文件，不会阻塞页面的解析
  • defer和async的区别：
    • 执行顺序： 多个带async属性的标签，不能保证加载顺序；多个带defer属性的标签，按照加载顺序执行
    • 脚本是否并行执行：async属性表示后续文档的 加载和执行 与js脚本的 加载和执行 是并行进行的，即异步加载、异步执行；defer属性加载后续文档的过程和js脚本的加载（加载不执行）是并行进行的（异步），但defer加载的js脚本需要等到文档所有元素解析完成后才执行，DOMContentLoaded事件触发之前执行，即异步加载，延迟执行；
    • 总结：defer-异步加载 延迟执行 async-异步加载 异步执行