牛客html刷题笔记1

最新推荐文章于 2023-05-04 16:45:54 发布

JIAY_WX

最新推荐文章于 2023-05-04 16:45:54 发布

阅读量277

点赞数 1

分类专栏： HTML 文章标签：前端 css css3

本文链接：https://blog.csdn.net/JIAY_WX/article/details/125219362

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注：博客内容为个人学习笔记，参考并总结了其他博客,参考借鉴博客过多，就不一一放链接，侵权删。

1.浏览器内核

负责对网页语言的解释和渲染，所谓浏览器内核也就是浏览器采用的渲染引擎，渲染引擎决定了浏览器如何显示页面内容及页面格式信息。

内核分类：

Trident ：IE浏览器，360 安全浏览器

webkit ：safari，搜狗

Blink：Chrome

2.块级元素，行内元素区别

块级元素：<div>,<p>,<h1>~<h6>,<ul>,<ol>,<dl>,<li>,<dd>,<table>,<hr>,<blockquote>段落缩进前后5个字符,<address>,<menu>,<pre>,<header>,<section>,<aside>,<footer>,<form>表单，<marquee>滚动文本

块级元素特点：

块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素

行内元素：<span>,<img>,<a>,<label>,<input>,<abbr>,<em>斜体,<big>,<cite>,<i>,<q>,<textarea>多行文本,<select>下拉列表,<small>,<sub>下标,<sup>上标,<strong>加粗,<u>,<button>,<br>,<b>加粗

行内元素特点：

和相邻的行内元素在一行
高度和宽度无效，但在水平方向上padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或则其他的行内元素（a标签除外)

行内块级元素：<img/>,<input/>,<td/>

行内块级元素特点：

和相邻的行内元素在一行上，但是中间会有空白间隙
默认的宽度就是本身内容宽度
高度，行高，外边距和内边距可以设置

显示模式的转换：

块转行内：display-inline

行内转块：display：block

块，行内元素转换为行内块：display:inline-block

3.HTML input元素种类

传统类型：

text 　　定义单行的输入字段，用户可在其中输入文本

　　password 定义密码字段。该字段中的字符被掩码

　　file 　　　定义输入字段和 "浏览"按钮，供文件上传

　　radio　　定义单选按钮

　　checkbox 定义复选框

　　hidden 　定义隐藏的输入字段

　　button 　　定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）

　　image 　　定义图像形式的提交按钮

　　reset 　　定义重置按钮。重置按钮会清除表单中的所有数据

submit 　定义提交按钮。提交按钮会把表单数据发送到服务器

新增类型：

color 　　　　　　定义调色板
　　tel 　　　　　　定义包含电话号码的输入域
　　email 　　　　　定义包含email地址的输入域
　　url 　　　　　　定义包含URL地址的输入域
　　search 　　　　　定义搜索域
　　number 　　　　定义包含数值的输入域
　　range 　　　　定义包含一定范围内数字值的输入域
　　date 　　　　　　定义选取日、月、年的输入域
　　month 　　　　定义选取月、年的输入域
　　week 　　　　　　定义选取周、年的输入域
　　time 　　　　定义选取月、年的输入域
　　datetime 　　　定义选取时间、日月、年的输入域(UTC时间)
　　 datatime-local 　定义选取时间、日月、年的输入域(本地时间)

4.HTML元素显示优先级

显示优先级的意思是哪个元素显示在上面，哪个显示在下面

1.帧元素，表单元素，非表单元素

优先级：帧元素>表单元素>非表单元素

帧元素：frameset

表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

非表单元素包括：a，div, table, span等。

2.有窗口元素、无窗口元素
html元素根据其显示分成两类：有窗口元素（Windowed Element）以及无窗口元素（Windowless Element）。

优先级：有窗口元素 > 无窗口元素

有窗口元素包括：select元素，object元素，插件，以及frames元素等等。

无窗口元素包括：大部分html元素都是无窗口元素，如链接和TABLE标记。

3.浏览器类型与显示优先级
按照浏览器类型比较，HTML元素的显示次序也有所不同，总结如下：
（1） Netscape/Mozilla
在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
（2）Netscape/Mozilla
在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
（3）Opera
在最新的Opera（7.10*）浏览器中，包括SELECT在内的所有表单元素根据z-index属性或它们在HTML页面中的出现次序来确定显示优先级。但是，最新的Opera浏览器不将IFRAME作为无窗口元素显示，IFRAME被看做有窗口元素，在显示次序上要比所有无窗口元素优先。

4.CSS的z－index属性

我们知道，CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时，z-index值较大的元素将覆盖z-index值较小的元素。

但z-index属性值不是万能的。如前所述，有窗口的元素总是显示在无窗口元素的前面，z-index属性值只有在同一类元素之间才起决定作用。形象地说，有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上，两类元素分别自成体系，它们的z-index属性也只相对于同一画布上的其他元素起作用。

5.重排重绘区别

1.页面生成的过程

HTML解析器将HTML解析成DOM树

CSS解析器将CSS解析成CSSOM树

渲染（生成布局flow,浏览器在屏幕上“画”出渲染树中所有的节点+将布局绘制（paint）在屏幕上，显示整个页面）（渲染是最耗时的）

2.重排

概念：当DOM的变化影响了元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置。

发生重排的情况：

页面初始渲染，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素的位置
改变元素的尺寸，如边距，填充，边框，宽度高度等
改变元素内容，如文字数量，图片大小等
改变元素字体大小
改变浏览器窗口尺寸，如resize事件发生时
激活CSS伪类
设置style属性的值，因为通过设置style属性改变节点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth，offsetHeight，除此之外，当我们调用getComputedStyle方法，或则IE里的currentStyle时，也会触发重排，原理是一样的，都是为了求一个即时性和准确性
引起重排的属性和方法