主流浏览器私有内核属性css前缀：

  • mozilla内核、Gecko内核(firefox, flock等)   -moz；
  • webkit内核(safari, chrome等)              -webkit；
  •        opera内核(opera浏览器)                     -o；
  •        trident内核(ie浏览器)                          -ms。

 可以获得焦点的HTML元素：

  • 带有contenteditable：true|false 规定元素文本是否可编辑；
  • 带有tabindex：0 | -1 | x属性：
    0：tab键可获取焦点；
    -1：tab键不可获取焦点；
    x：x>0，x越小获取焦点优先级越高；
  • input元素
  • 带有href的a标签

生成BFC的几种方式：

  • float不为none
  • position不为static或relative
  • display为inline-block、table-cell、table-caption、flex、inline-flex
  • overflow不为visibility

带有缓存 manifest 的 HTML 文档（用于离线浏览）

manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。
HTML5 引入了应用程序缓存，即意味着 Web 应用程序可以被缓存，然后在无互联网连接的时候进行访问。

应用程序缓存使得应用程序有三个优点：

  1. 离线浏览 – 用户可以在离线时使用应用程序
  2. 快速 – 缓存的资源可以更快地加载
  3. 减少服务器加载 – 浏览器只从服务器上下载已更新/已更改的资源

html5中可以省略结束标记的元素有

  • dd
  • dt
  • li
  • p
  • optgroup
  • option
  • rt
  • rp
  • thread
  • tfoot
  • tr
  • td
  • th

HTML5新增的标签和属性：

  • header
  • footer
  • nav
  • article
  • section
  • aside
  • datalist
  • audio
  • video
  • embed
  • input属性（search date month week email  number color range  tel等）

HTML5新增规范有：

  • sessionStorage
  • localStorage
  • webSocket

HTML5新增的type属性有：

  • color：用于指定颜色的控件。
  • date：用于输入日期的控件（年，月，日，不包括时间）。
  • month：用于输入年月的控件，不带时区。
  • week：用于输入一个由星期-年组成的日期，日期不包括时区
  • time：用于输入不含时区的时间控件。
  • datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
  • datetime-local：用于输入日期时间控件，不包含时区。
  • email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
  • number: 用于应该包含数值的输入域。只能输入数字
  • range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
  • search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
  • url：用于编辑URL的字段。

响应式布局屏幕尺寸标准：

超小屏幕（手机） 小屏幕（平板）
中等屏幕（桌面）
大屏幕（桌面）
<768px
>=768
>=992
>=1200
.col-xs-
.col-sm-
.col-md-
.col-lg-

 

特殊的标签p和a

p不能嵌套块 a不能嵌套a。

p是块元素，但是其不能包含除了它本身之外的任何块元素；

a是内联元素，但是它可以包含除了它本身外的任意块元素。

JSON和XML之间的区别：

  1. JSON是JavaScript Object Notation；XML是可扩展标记语言。
  2. JSON是基于JavaScript语言；XML源自SGML。
  3. JSON是一种表示对象的方式；XML是一种标记语言，使用标记结构来表示数据项。
  4. JSON不提供对命名空间的任何支持；XML支持名称空间。
  5. JSON支持数组；XML不支持数组。
  6. XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读。
  7. JSON不使用结束标记；XML有开始和结束标签。
  8. JSON的安全性较低；XML比JSON更安全。
  9. JSON不支持注释；XML支持注释。
  10. JSON仅支持UTF-8编码；XML支持各种编码。

HTML和XML的关系：

  • HTML-Hyper Text Markup Language超文本标记语言，被设计用来显示数据，核心在于数据的外观。HTML文档==网页
  • XML-EXtensible Markup Language可扩展标记语言，被设计用于结构化、传输和存储数据，核心在于数据的内容。XML文档==纯文本
  • 你可以选择在web应用程序中，使用XML传输数据，使用HTML格式化并显示数据。它们不是相似竞争互相替代的关系，它们互相合作和互补。
  • 所以从设计理念上看，HTML和XML的关系，就像Java和Javascript、雷锋和雷峰塔的关系-即相互独立，基本没啥关系。

表单form的enctype属性：

  • application/x-www-form-urlencoded 在发送前编码所有字符（默认）
  • multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
  • text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

Video/Audio的方法和事件：

  • 方法：load() play() pause()
  • 事件：play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发

关于闭包：

（1）概念
闭包是指有权访问另一个函数作用域中的变量的函数。
（2）特性
闭包只能取得包含函数中任何变量的最后一个值。
（3）创建方式
在一个函数内部创建另一个函数。
（4）原理
在一个函数内部中定义的函数会将包含函数（外部函数）的活动对象添加到其作用域中，直至解除对内部函数的应用，内部函数被销毁，外部函数的活动对象才会被销毁。
function closure(){
    var result=[];
    for (var i = 0; i < 4; i++) {
        result[i]=function(){
            console.log(i);
            return i;
        }
    };
    return result;
}
var result=closure();
for (var i = 0; i < 4; i++) {
    result[i]();
};
// 输出 4 4 4 4

HTML中的置换元素(替换元素)和非置换元素(不可替换元素)

“置换元素”又叫做“替换元素”，
它们所具有的特征为：在不使用css修饰时，元素的标签和属性也会影响元素的显示。

  • 比如<img> 标签，浏览器会根据src属性读取图片并显示，且图片大小会影响<img>标签大小。
  • 再比如，input标签的type属性会影响input的显示是输入还是选择。

常见的置换元素

  • img
  • input
  • textarea
  • select
  • object
  • iframe
  • canvas

https页面加载http资源的解决方法

1.使用相对协议

相对协议就是将URL的协议（http、https）去掉，只保留//及后面的内容。这样，在使用https的网站中，浏览器会通过https请求URL，否则就通过http发送请求。

2.使用iframe

使用 iframe 的方式引入 http 资源，比如在 https 里面播放优酷的视频，我们可以先在一个 http 的页面里播放优酷视频，然后将这个页面嵌入到 https 页面里就可以了。

3.使用资源协议自适配（js无法加载的情况）

比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。

在页面中引入：

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>

4.自动升级（资源被block掉了）

HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容)，不同浏览器对 Mixed Content 有不一样的处理规则。

HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。

在页面的header中加入：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
/*自动将http的不安全请求升级为https*/

5.使用相对URL

使用相对URL和使用相对协议有点类似，不同的是，相对协议只是省略了http和https协议头的部分，而相对url，也叫相对地址或相对路径，不仅可以省略协议头http和https，还可以省略双斜杠//，及后面的域名！

元数据内容（metadata content）

base、link、meta、noscript、template、style、script、title

空元素（empty element）

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 <audio> 元素嵌套在一个 <hr> 元素里。

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type=”text”></input> 的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素：

关于CSS的加载

  • css加载不会阻塞DOM树的解析
  • css加载会阻塞DOM树的渲染
  • css加载会阻塞后面js语句的执行

一个完整的网页加载流程：

  1. 解析HTML结构
  2. 加载外部脚本script和样式表文件link // 页面中的多个脚本文件采用同步的方式加载 会产生“线程等待”
  3. 解析并执行脚本代码
  4. 构建HTML DOM模型
  5. 加载图片等外部资源文件     //图片等文件以异步线程的方式加载 不会产生等待
  6. 页面加载完毕

浏览器的渲染流程：

  1. 解析HTML并构建DOM树
  2. 构建render树
  3. 布局render树
  4. 绘制render树

HTML5十大新特性总结

  • html5新特性之用于绘画的canvas/SVG
  • html5新特性之更加丰富强大的表单
  • html5新特性之用于媒介的video和audio元素
  • html5新特性之html5地理定位 Geolocation
  • html5新特性之html5拖放
  • html5新特性之html5 Web存储
  • html5新特性之html5应用程序缓存
  • html5新特性之html5 Web Workers
  • html5新特性之html5服务器发送事件
  • html5新特性之html5 WebSocket

 

版权声明：本文为WWW原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ligd2022/p/16991965.html