欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

前端知识点梳理（二）

发布时间：2023/12/10 HTML 43 豆豆
生活随笔 收集整理的这篇文章主要介绍了 前端知识点梳理（二） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.内核

  • 浏览器内核（Rendering Engine）最初分为：渲染引擎（layout engineer）或（Rendering Engine）和js引擎；后来 JS 引擎越来越独立，内核就倾向于单指渲染引擎。
  • 浏览器=shell+内核
    Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。

    • 发展历程：①Netscape王者（Gecko内核;开源）→ ②蝗虫IE(伴随操作系统，Trident) → ③烈士（网景）遗孤Mozilla （Gecko）→ ④苹果Safari （WebKit）→ ⑤后起之秀-谷歌Chrome（Bink/Chromium）→ ⑥1+1>2，双核时代 UC浏览器（WebKit+Trident）

    为什么有些用户宁愿浏览器双开，也不愿意用国产的双核浏览器呢？

    可能存在以下原因：
    1.chrome的界面设计甩双核浏览器好几条街。
    2.chrome功能上更加安全可靠，双核浏览器感觉会打折扣。
    3.chrome有ie tab插件（插件会有Cookies丢失、假死现象），可以实现内核切换，没必要用双核。
    4.用ie的场景不多了，网银和各大电商都已支持chrome了。
    5.双核浏览器是一条死路，随着web标准的推广，ie内核也会越来越靠近标准。
    6.国产双核浏览器的花里胡哨的自带插件各种弹窗广告和自作聪明的复杂设计、无用功能、过度吹嘘开始让人生厌。
    7.极客、技术发烧友的使用习惯和普通网友有本质区别。
    8.国产的外壳，商业目的远大于技术目的，第一目的是赚钱，而不是做一个好产品。


    浏览器内核历史

    2. !Doctype

    !Doctype
    浏览器模式
    文档模式

    2.1 严格模式和混杂模式

    所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
    1)当采用严格模式，任意浏览器效果相同；
    2)当采用怪异模式，因浏览器而异；
    3)采用哪种模式？取决于DTD声明

    HTML 4.01：严格模式、过渡模式、框架模式

  • 严格模式：不包括展示性的和弃用的元素（比如font），不允许框架集（Framesets）
  • 过渡模式：只不允许框架集（Framesets）
  • 框架模式：都ok

    • 2.2 document.compatMode

    document.compatMode，可以用来判断当前页面采用的渲染方式。下面官方文档的说明：

    • BackCompat：标准兼容模式关闭。
    • CSS1Compat：标准兼容模式开启。
  • 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
  • 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。

    • 2.3 用IE调试怪异模式

    以上要用IE调，在chrome里我没有看到不同模式的差别
    是否可以理解成：怪异模式在IE不同的文档模式中菜体现出区别？
    是否可以理解成：怪异模式指的就是IE5？
    深刻总结：
    重要！
    怪异模式（Quirks Mode）对 HTML 页面的影响
    IE“浏览器模式”和“文档模式”的渲染测试
    只有IE浏览器中才会有“浏览器模式”和“文档模式”
    IE下页面样式错乱，其他浏览器正常

  • 严格模式的div渲染大小不同（更大）：因为IE盒模型=内容+padding+border，当宽度设置为500，同时又有padding和border，那么内容的宽度便小于500；而严格模式下，按W3C标准盒模型，绘制出的div，内容宽度=500，再加上padding和border， 实际渲染大小 > IE5 ；
  • 严格模式：图片底端3px空白(IE5的vertical-align是bottom 而严格模式是baseline) ；
  • 严格模式：table中的font属性会继承于body的样式（斜体、颜色、加粗、字体都会）；而怪异模式下，只继承字体 ；
  • 怪异模式下，行内元素（除了img，input，textarea，select，object）可以设置宽高！想象一下一个< span>标签内无内容，但可以设置宽高，像div一样显示出来；
  • 百分比的高度必须在父元素有声明高度时使用
    这点在以上分享的文章里分明是睁眼说瞎话，我在IE5-11中调出了不同的效果：
  • 怪异模式子元素溢出：父元素也跟随子元素调整高度

    • css：

    table.a {height: 300px;background-color: pink;}div.b {background-color: orange;width: 300px;height: 90%;display: block;}div.c {width: 200px;height: 200px;background-color: blue;}

    html：

    <body><table class="a"><tr><td><div class="b"><div class="c"></div></div></td></tr></table> </body>

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    2.4 css hack

    不同浏览器，或同一浏览器的不同版本，会导致生成的页面效果不一样。CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

    史上最全的CSS hack方式一览

    hack 英[hæk]
    v. 砍; 劈; 猛踢; 非法侵入(他人计算机系统);

    3 网页相关

    3.1 meta标签的属性

    常用meta整理

    三个维度：
    1） SEO优化：name属性 - description / keywords
    2） 移动设备：name属性 - viewport

    name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0 或者user-scalable=no”
    用户将不能放大/缩小网页来看到全部的内容

    3） 网页相关： charset、http-equiv - Content-Type属性

    <meta charset='utf-8' /> （声明编码）
    • http-equiv
    • content
      content 属性始终要和 name 属性或 http-equiv 属性一起使用。

    优先使用 IE 最新版本和 Chrome

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 关于X-UA-Compatible --> <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

    3.2 响应式布局

    （不同设备）
    需要通过练习，改造项目代码来加深理解。
    用CSS实现响应式布局
    响应式布局

    3.3 自适应布局

    （某块固定，其余自适应）
    自适应布局
    （这个晚点看看）
    这可能是史上最全的CSS自适应布局总结### 3.4 提高网页加载速度

    3.4 字符编码方式

    关于几种编码详解（Unicode，UTF-8，GB系列）

    历史：

    如何才能区别 Unicode 和 ASCII ？计算机怎么知道三个字节表示一个符号，而不是分别表示三个符号呢？ → UTF-8的出现（Unicode 是一个符号集，规定了符号的二进制代码，UTF-8规定了这个二进制代码应该如何存储。）
    UTF-8 是 Unicode 的实现方式之一。

    大神这篇必须要转：
    字符编码笔记：ASCII，Unicode 和 UTF-8

    3.5 页面性能优化

    3.5.1 CDN托管（京东配送服务）

    教你如何使用免费的CDN服务

    当您访问托管在CDN上的网站时，网络将使用离您地理位置最近的服务器智能地向您提供内容。

    3.5.2 利用多个域名来存储网站资源

    利用多个域名来存储网站资源

    3.5.3 图片懒加载

    存储图片真实src，当距离↓，替换
    图片懒加载实现及其原理

    web前端页面性能优化（提升页面加载速度）

    3.弃用元素

    htm5新特性新增与弃用元素1
    htm5新特性新增与弃用元素2

    4.框架

    4.1 iframe 行内（html5支持）

    Web前端之iframe详解
    关注使用iframe的缺点
    优点:

  • 程序调入静态页面比较方便;
  • 页面和程序分离;

    • 缺点：

  • iframe有不好之处：样式/脚本需要额外链入，会增加请求。
    另外用js防盗链只防得了小偷，防不了大盗。
  • iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你
    的网站即使做的在好,也排不到好的名次!
    如果是动态网页，用include还好点！
    但是必须要去除他的标签！
  • 框架结构有时会让人感到迷惑，特别是在多个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经特别有限的页面空间外，还会分散访问者的留心力。访问者遇到这种站点往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么站点的其他部分也许更不值得阅读。
  • 链接导航疑问。运用框架结构时，你必须保证正确配置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去。
  • 调用外部页面,需要额外调用css,给页面带来额外的请求次数;

    • 4.2 frameset框架集（多个框架frame）（html5废弃）

  • frameset使用时要将body删除，使用frameset代替body；
  • frame和frameset组合使用，且frame没有结束标签；
  • frameset可以嵌套使用；
  • html5废弃使用frameset、frame、noframes，他们的使用破坏了可使用性和可访问性；
    HTML框架（frameset框架集和iframe内嵌框架）

    • 框架的优点

    • 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
    • 方便制作导航栏

    框架的缺点

    • 会产生很多页面，不容易管理
    • 不容易打印
    • 浏览器的后退按钮无效
    • 代码复杂,无法被一些搜索引擎索引到
    • 多数小型的移动设备（PDA 手机）无法完全显示框架
    • 多框架的页面会增加服务器的http请求
      由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃

    4.3 相关：window的onload事件

    window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

    window常见事件onload

    网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:
    （1) 将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。
    （2）通过window.onload来执行脚本代码。

    解释以上

    5. table布局

    5.1 table布局案例

  • html中使用table元素
    html页面布局之table布局
  • display: table| table-cell | table-row
    配合 居中对齐
    text-align: center;
    vertical-align: middle;
    table布局指南

    • 5.2 优缺点

    Table布局的优缺点
    table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

    6. 了解渐进增强和优雅降级

    出发点是针对高/低版本浏览器

    6.1 渐进增强和优雅降级之间有什么不同

    渐进增强和优雅降级之间有什么不同

    6.2 前缀css3

    当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。

  • 渲染为每个角都是30像素宽10像素高的圆弧：
    • -webkit-border-radius: 30px 10px;
  • 左上和右下角为30像素圆弧，左下角和右上是10像素圆弧：
    • border-radius: 30px 10px;

    将无前缀的css写后面！
    需警惕CSS3属性的书写顺序

    表示xx浏览器的私有属性：

    1、-moz代表firefox浏览器私有属性2、-ms代表ie浏览器私有属性3、-webkit代表-webkit内核浏览器 常见浏览器有-safari、chrome

    7. 微格式

    什么是微格式？在前端构建中应该考虑微格式吗？


    8. normalize.css 初始化样式

    css样式初始化 normalize
    normalize.css中文版

    9. link和@import的区别

    link和@import的区别

    10.

    总结

    以上是生活随笔为你收集整理的前端知识点梳理（二）的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。