html牛客刷题笔记-3

隐藏用户y

已于 2022-09-17 17:12:46 修改

阅读量206

点赞数

分类专栏：前端入门文章标签： html 前端

于 2022-09-16 15:46:26 首次发布

本文链接：https://blog.csdn.net/weixin_55355282/article/details/126889867

版权

前端入门专栏收录该内容

42 篇文章 0 订阅

订阅专栏

元数据内容

Metadata元素意指那些定义文档元数据信息的元素 — 其作用包括：影响文档中其它节点的展现与行为、定义文档与其它外部资源之间的关系等。以下元素属于Metadata：

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

link和import的区别

link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件

!importent > 行内 > id > class > 标签 > * > inherit

块级元素：块级大多为结构性标记

<center>...</center> 地址文字

<h1>...</h1> 标题一级

<h2>...</h2> 标题二级

<h3>...</h3> 标题三级

<h4>...</h4> 标题四级

<h5>...</h5> 标题五级

<h6>...</h6> 标题六级

<hr> 水平分割线

<p>...</p> 段落

<pre>...</pre> 预格式化

<blockquote>...</blockquote> 段落缩进前后5个字符

<marquee>...</marquee> 滚动文本

<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<dl>...</dl> 定义列表

<table>...</table> 表格

<form>...</form> 表单

行内元素：行内大多为描述性标记

<a>...</a> 链接

<br> 换行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img > 图片

<sup>...</sup> 上标

<sub>...</sub> 下标

<i>...</i> 斜体

<em>...</em> 斜体

<del>...</del> 删除线

<u>...</u> 下划线

<input>...</input> 文本框

<textarea>...</textarea> 多行文本

<select>...</select> 下拉列表

·块级元素

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

·行内元素

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

鼠标移入onmouseover，移出onmouseout

在js里面添加的属性名使用驼峰法，在css里面使用连接线。

没有text-color这个属性，文字颜色统一用color.再加上CSS就近原则

DHTML 是一种使 HTML 页面具有动态特性的艺术，对大多数人来说，DHTML 意味着 HTML、CSS 和 JavaScript 的组合。

下列说法错误的是：

正确答案: C

A.在 Blink 和 WebKit 的浏览器中，某个元素具有 3D 或透视变换（perspective transform）的 CSS 属性，会让浏览器创建单独的图层。

B.我们平常会使用 left 和 top 属性来修改元素的位置，但 left 和 top 会触发重布局，取而代之的更好方法是使用 translate，这个不会触发重布局。

C.移动端要想动画性能流畅，应该使用 3D 硬件加速，因此最好给页面中的元素尽量添加 translate3d 或者 translateZ(0) 来触发 3D 硬件加速。

D.解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。

1.浏览器在渲染一个页面时，会将页面分为很多个图层，每个图层上有多个节点，在渲染dom时，经历以下过程:

DOM分割图层 ------ 图层节点样式重计算(Recalculate style) ----- 为每个节点生成图形和位置 (Layout，回流/重排/重布局) ----- 将节点绘制并填充到图层中(Paint Setup和Paint, 重绘) ------ 图层作为纹理上传到CPU处理 ------ 结合多个图层到页面上生成最终屏幕图像(图层重组)

2.触发创建单独图层

①3D或透视变换(perspective transform) CSS属性

②opacity做css动画或使用一个动画webkit变换的元素

③z-index在复合层上面渲染的元素

④拥有3D上下文或加速2D上下文的<canvas>节点

⑤使用加速视频解码的<video>节点

故transform和opacity改变的仅是图层的结合不会触发回流和重绘：

opactity是GPU在绘画时简单的降低了之前已经画好的纹理的alpha值来达到效果，故不会触发回流和重绘

transform可以修改节点位置、旋转、大小等，使用left和top会触发重布局，修改时代价很大，故取而代之使用translate会提高性能

translate可以让浏览器创建图层，可以消除在动画开始之前的图层创建时间，使得动画尽快开始，不会随着抗锯齿而导出突变，但是创建过多的图层会导致崩溃所以要结合实际情况考虑，节制！

3.触发回流属性(修改节点大小和位置):

盒子模型相关属性、定位属性及浮动、节点内部文本结构(大小、排列方式)属性

4.触发重绘属性(节点内部渲染效果):

color、border-style、border-radius、visibility、text-decoration、background相关、outline相关、box-shadow

5.关于动画:

JS动画:

缺点：JS在浏览器的主线程中运行，其中还有很多需要运行的JS、样式计算、布局、绘制对其进行干扰，会导致线程堵塞(掉帧)

优点: 动画可控制

CSS动画:

缺点：缺乏对动画的控制

优点: 优化性能好，在主线程之外运行(丝滑)

<tr> table row, <th> table head, <td> tabel body

<dl> 定义列表（definition list），<dt>定义列表中的项目（即术语部分（definition term））。<dd> 定义列表中定义条目的定义部分（definition definition）。

DOM tree的根节点是document

A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。

B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。

C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。

D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。

而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行