元数据内容
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
块级元素:块级大多为结构性标记
<address>...</adderss>
<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> 表单
<div>...</div>
行内元素:行内大多为描述性标记
<span>...</span>
<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
<a href="#" οnmοuseοver="this.style.fontSize='30px'">注册</a>
在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才行