360se html,360前端星计划学习-HTML + CSS

￡神魔★判官ぃ 2022-10-07 07:55 164阅读 0赞

浏览器

渲染引擎

JavaScript引擎

Trident

JScript

Edge

EdgeHTML

Chakra

Safari

Webkit

Nitro

Chrome

Blink

FireFox

Gecko

SpiderMonkey

Opera

Prasto -> blink

Carakan -> V8

壳浏览器

360浏览器

UC浏览器

QQ浏览器

搜狗浏览器

HTML

HTML是什么

HyperText Markup Language

使用标签来描述页面的内容和结构

Doctype的作用

指定页面的使用标准和版本

决定使用哪种渲染模式

渲染模式

Quirks Mode (怪异模式)

Almost standard Mode (标准准模式)

Standard Mode (标准模式)

注意: 如果当我们不指定Doctype时，IE6、IE7会采用怪异模式渲染页面，IE8以标准模式渲染页面，firefox11也是以标准模式渲染页面。

![1460000009159531?w=1238&h=665][1460000009159531_w_1238_h_665]

HTML设计思想

兼容已有内容

避免不必要的复杂性

解决现实问题

优雅降级

尊重事实标准

HTML5变化

Doctype、meta

新增语义化标签

去除纯表示性的标签

WebStorage、canvas、video、audio、拖拽、离线

语法

标签不区分大小写、推荐小写

空标签可以不闭合

属性不必引号。推荐双引号

某些属性值可以省略，如required、readonly

图片

图片宽高

不指定高宽：原图大小显示

指定宽度：按比例缩放到指定宽度

指定高度：按比例缩放到指定高度

指定高宽：强制按照指定高宽显示

图片格式

jpg：照片

png：色彩较少时使用，png24可以半透明

gif：无法半透明，可以多帧做动画

WebP

注意: WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。更多...

语义化

提升代码的可读性、可维护性

搜索引擎的优化(利于SEO)

提升无障碍性

CSS

选择器

简单选择器

通配选择器 \*

标签选择器 p

id选择器 \#id

类选择器 .class

属性选择器

\[attr\]只使用属性名，但没有确定任何属性值;

\[attr="value"\]指定属性名，并指定了该属性的属性值;

\[attr~="value"\]指定属性名，并且具有属性值，此属性值是一个词列表以空格隔开，其中词列表中包含了一个value;

\[attr^="value"\]指定了属性名，并且有属性值，属性值以value开头;

\[attr$="value"\]指定了属性名，并且有属性值，而且属性值以value结尾;

\[attr\*="value"\]指定了属性名，并且有属性值，而且属值中包含value;

\[attr|="value"\]指定了属性名，并且属性值是value或者以“value-”开头的值;

伪类 (pseudo-classes)

基于 DOM 之外的信息去(比如根据用户和网页的交互状态)选择元素。

a:link \{ ... \} /\* 未访问过的链接 \*/

a:visited \{ ... \} /\* 已访问过的链接 \*/

a:hover \{ ... \} /\* 鼠标移到链接上的样式 \*/

a:active \{ ... \} /\* 鼠标在连接上按下时的样式 \*/

a:focus \{ ... \} /\* 获得焦点时的样式 \*/

选择器组合

直接组合

E\[foo="bar"\]

E.warning

E\#myid

\#myid.warning

.warning\[foo="bar"\]

后代组合

/\* 后代选择器 \*/

article p \{...\}

/\* 亲子选择器 \*/

article > p \{...\}

相邻兄弟

input\[type="check"\] + label \{...\}

通用兄弟

.active ~ li \{...\} /\* 选择所有兄弟 \*/

同时为一组选择器定义样式

body, h1, h2, h3, h4, h5, h6, ul, ol, li \{

margin: 0;

padding: 0;

\[type="checkbox"\], \[type="radio"\] \{

box-sizing: border-box;

padding: 0;

选择器优先级根据特异度判断(Specificity)

选择器

内联?

id个数

(伪)类个数

标签个数

特异度

\#nav .list li a:link

0122

.hd ul.links a

0022

哪条声明起作用？

找出匹配到的该属性所有声明

根据规则来源，优先级从低到高：

浏览器预设

用户设置

网页样式

同一来源中，按照特异度排序，越特殊优先级越高

特异度一样时，按照样式书写顺序，后面的优先级高

有 !important 时的变化

找出匹配到的该属性所有声明

根据规则来源, 优先级从低到高：

浏览器预设

用户设置

网页样式

含 !important 的网页样式

含 !important 的用户设置样式

同一来源中，按照特异度排序，越特殊优先级越高

特异度一样时，按照样式书写顺序，后面的优先级高

css文本样式可继承

font-family

使用逗号分隔的字体族名称

初始值由浏览器设置决定，可继承

字体匹配算法

浏览器先获取一个系统字体列表

对于元素中每一个字符，使用 font-family 属性及其它属性进行匹配，如果能匹配就暂定该字体

如果步骤2没有匹配上，选择下一个可选的 font-family 执行步骤2

如果匹配到一个字体，但是字体中没有该字符，继续对下一个可选的 font-family 执行步骤2

如果没有匹配到字体，使用浏览器默认字体。

font-family 使用

英文字体放在中文字体前面

最后总是添加通用字体族

font-size

定义文字的大小，可使用px、百分比、em等做单位

取值

相对值 larger | smaller

长度

百分数，相对于父元素计算值

初始值为 medium(由浏览器设置决定，一般16px)，可继承

长度单位em

一般是相对于元素 font-size 的计算值的

用在 font-size 属性上时，是相对于父元素的 font-size 计算值

font-style

定义文字以斜体还是正常方式显示

取值：normal | italic | oblique

初始值为 normal，可继承

font-weight

定义文字的粗细程度

取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900

初始值为 normal，可继承

line-height

元素所属的 line box 所占高度

初始值为normal(具体值由浏览器决定)，可继承

取值： | |

段落文字一般取值1.4～1.8

line-height:26px; 表示行高为26个像素

line-heigth:120%;表示行高为当前字体大小的120%

line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12，行高还是父元素的行高)

line-height:2.6;表示行高为当前字体大小的2.6倍

不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;他的行高为28px;子元素尺寸为12px，不需要再定义行高，他默认的行高为24px。(例如：子元素12px，他的行高是24,不会继承父元素的28)

text-align

定义文本在容器内的对齐方式

取值：left | right | center | justify

初始值由 HTML 的 dir 属性决定，可继承

letter-spacing

指定字符之间的间距

取值：normal |

初始值为 normal，可继承

word-spacing

指定单词之间的间距

取值：normal |

初始值为 normal，可继承

text-indent

指定文本缩进

取值：normal | |

初始值为 0，可继承

text-decoration

定义了文本的一些装饰效果，比如下划线、删除线等

初始值为none，可继承

其它值：underline | line-through | overline

white-space

指定空白符如何处理

取值：normal | nowrap | pre

word-break

指定是否允许在单词中间换行

取值： normal | break-all | keep-all

box model

width的值为百分比时，参考的是父元素盒子的width;

height的值为百分比时，参考的是父元素盒子的height;

padding的值为百分比时，参考的是父元素的width;

margin的值为百分比时，参考的是父元素的width;

块级元素(Block-level Elements)

会被格式化成块状的元素

例如 p、div、section 等

将 display 设置为 block、list-item、table 使元素变为块级

行级元素(Inline-level Elements)

不会为其内容生成块级框

让其内容分布在多行中

display 设置为 inline、inline-block、inline-table 使元素变为行级

margin：行级盒的 margin-top 和 margin-bottom 不会产生效果

padding：行级盒的 padding-top 和 padding-top 不影响行布局

块级盒子中的子盒子的生成

块级盒子中可以包含多个子块级盒子

可以包含多个行级盒子

不在行级元素里面的文字，会生成匿名行级盒。比如:

Some*Text*

块级盒子中不能同时包含块级和行级盒子。遇到这种情况时，会生成匿名块级盒来包含行级盒。比如:

# 标题 #

2016-12-12

行级盒子内的子盒子的生成

行级盒子内可以包含行级盒子

行级盒子包含一个块级盒子时，会被块级盒子拆成两个行级盒子，这两个盒子又分别被匿名块级盒包含

定位模式

常规流(Normal Flow)

浮动(Float)

绝对定位(Absolute Positioning)

常规流

除根元素、浮动元素和绝对定位元素外，其它元素都在常规流之内(in-flow)

而根元素、 浮动和绝对定位的元素会脱离常规流(out of flow)

常规流中的盒子，属于块级格式化上下文或行级格式化上下文

块级格式化上下文 (Block Formatting Context)

盒子在容器(包含块)内从上到下一个接一个地放置

两个兄弟盒之间的竖直距离由 margin 属性决定

同一个 BFC 内垂直 margin 会合并

盒子的左外边缘挨着容器(包含块)的左边

块级格式化上下文(BFC) 的特性:

BFC 内的浮动不会影响到BFC外部的元素

BFC 的高度会包含其内的浮动元素

BFC 不会和浮动元素重叠

BFC 可以通过 overflow:hidden 等方法创建

BFC 的创建:

浮动框

绝对定位框

非块级的块容器(inline-block)

overflow 属性非 visible 的块框

BFC的作用:

清除浮动

防止 margin 折叠

双栏布局

行级格式化上下文 (Inline Formatting Context)

盒子一个接一个水平放置

盒之间的水平 margin，border和padding 都有效

同一行的盒子所在的矩形区域叫行盒(Line box)

当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒里

行盒内的水平分布由'text-align'属性决定

如果一个行级块无法分割(单词、inline-block)，该元素会被作为一个整体决定分布在哪一个行盒

浮动(float)

浮动元素从常规流中脱离，被漂浮在容器(包含块)左边或右边

浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒

浮动元素不会影响其后面的流内块级盒

但是浮动元素后面的行级盒子会变短以避开浮动元素

position

static，非定位，默认值

relative，相对定位(相对自己)

absolute，绝对定位，相对非 static 祖先元素定位

fixed，相对于视口绝对定位

relative

在常规流里面布局

相对于自己本应该在的位置进行偏移

使用 top、left、bottom、right 设置偏移长度

流内其它元素当它没有偏移一样布局

absolute

脱离正常流

相对于最近的非 static 祖先的 padding box 定位

不会对流内元素布局造成影响

可以有 margin，但不会折叠

fixed

相对于 Viewport 定位

不会随页面滚动发生位置变化

z-index 堆叠层次

为定位元素指定其在 z 轴的上下等级

用一个整数表示，数值越大，越靠近用户

初始值为 auto，可以为负数、0、正数

注意: z-index大的不一定在上面，要考虑到层叠上下文

关于层叠上下文

堆叠上下文的生成

Root 元素

z-index 值不为 auto 的定位元素

设置了某些 CSS3 属性的元素，比如 opacity、transform、animation 等

绘制顺序

在每一个堆叠上下文中，从下到上：

形成该上下文的元素的 border 和 background

z-index 为负值的子堆叠上下文

常规流内的块级元素非浮动子元素

非定位的浮动元素

常规流内非定位行级元素

z-index 为 0 的子元素或子堆叠上下文

z-index 为正数的子堆叠上下文

[1460000009159531_w_1238_h_665]: https://segmentfault.com/img/remote/1460000009159531?w=1238&h=665

360se html,360前端星计划学习-HTML + CSS

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css图片360°自动旋转

相关不怕你不来，就怕你不学—360前端星计划

相关前端星计划优秀笔记[HTML&CSS]

相关前端学习笔记——HTML与CSS

相关 360se html,360前端星计划学习-HTML + CSS

相关 360度全景视频html,360度全景视频是怎么拍摄出来的?

相关 360企业安全前端面试

相关 css-制作360Logo

相关 css360度无限循环

相关 html 模拟百度和模拟360