语义化标签了解

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

# 渐进增强与优雅降级的理解及区别

渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
两者区别
1、广义：
其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级
2、狭义：
渐进增强一般说的是使用 CSS3 技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现 html 标签的语义，以便在 js/css 的加载失败 / 被禁用时，也不影响用户的相应功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 例子 */
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

# 常见的兼容性问题

  1. 不同浏览器的标签默认的 margin 和 padding 不一样。*
  2. IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。hack：display:inline; 将其转化为行内属性。
  3. 设置较小高度标签（一般小于 10px），在 IE6，IE7 中高度超出自己设置高度。hack：给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度。
  4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  5. 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序：L-V-H-A (love hate): a:link {} a:visited {} a:hover {} a:active {}

# 浏览器模式

  • 怪异模式：页面以一种比较宽松的向后兼容的非标准行为
  • 接近标准模式：只有少数的怪异模式
  • 标准模式：由 HTML 和 CSS 的规范描述行为
    <!DOCTYPE html>  唯一的作用是启用标准模式

# 标签的区别

  • strong：加重语气，b: 简单加粗，浏览器搜索引擎更侧重 strong 标签
  • title：无明确意义，只表示标题；h1：层次明确的标题，对页面信息的抓取有很大的影响
  • i 内容展示为斜体，em 表示强调文本

# 导入 CSS 文件方式及区别

  • 内联方式
  • 嵌入方式
  • 外链方式 link
    • link 是 html 标签，而 @import 是 css 的
    • 页面被加载时， link 会同时被加载，而 @import 引用的 css 会等到页面被加载完再加载
    • link 的权重高于 @import 的权重
  • import 导入方式
    • 该方式是 CSS 属性，只能加载 CSS

# script 标签中 defer 和 async 的区别

  • <script> : 浏览器会立即并执行相应的脚本，不会等待后续加载的文档元素，只要读取到就会开始加载、执行，这种情况就阻塞了后续文档的加载
  • <script defer> ：异步加载外部的 js 脚本文件，不会阻塞页面的解析；多个带 defer 属性的标签，按照加载顺序执行；加载后续文档的过程和 js 脚本的加载是并行进行的即异步的 (此时仅加载不执行)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前？？？
  • <script async> ：异步加载外部的 js 脚本文件，不会阻塞页面的解析；多个带 async 属性的标签，不能保证加载的顺序；表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的即异步执行；
ONE A DAY
#HTML基础
语义化标签了解
http://example.com/2018/11/06/2002_HTML/
作者
XGG
发布于
2018年11月6日
更新于
2023年6月3日
许可协议