HTML+CSS知识分享

HTML+CSS | 2020-04-28 01:16:58 134次 1次

背景介绍

1984年,世界上没有浏览器,也没有万网,有人提出能否将电脑进行联网,实现资源的共享,Tim Berners-Lee1990年发明了第一个网页浏览器WorldWideWeb(WWW万维网),此浏览器后改名为Nexus,HTML也因此诞生。后来四位芬兰大学生于1991年编写的Erwise是第一个普遍可用的使用GUI的网页浏览器,并于1992年发布。1993年,马克·安德森发布Mosaic——“世界上最流行的浏览器”,进一步推动了浏览器的创新,这使得万维网更易于使用。安德森的浏览器引发了1990年代的互联网热潮。安德森是NCSA中Mosaic团队的领导者,他不久后辞职并成e79fa5e98193e58685e5aeb931333431353262立了自己的公司——Netscape,发布了受Mosaic影响的Netscape Navigator。Netscape Navigator很快便成为世界上最流行的浏览器,市占率一度达到90%。再往后就是我们熟悉的浏览器大战(IE、Mozilla、Safari、Chrome),到目前为止Chrome是最受欢迎的浏览器。

1993年ITEF(因特网工作小组)发布了一个草案,那时没有HTML的官方文档,各种标签(Tag)也很混乱,这个草案HTML tags可以算是HTML的第一个版本1.0。

1994年,Tim Berners-Lee创建了非盈利性的 W3C(world wild web consortium万维网联盟),并邀请了当时的155家互联网巨头(如Microsoft、IBM、APPLE等公司),致力使得WWW有一套更加标准化的协议,能够让资源按照这套标准的协议进行处理与共享。那个时候W3C的根本目的就是为了维护互联网的对等性,为了让它保持最起码的秩序。


HTML(Hyper Text Markup Language

一、基础标签

1:<!DOCTYPE>:定义文档类型

<!-- 本文档为 HTML 5 文档 -->
<!DOCTYPE html>
<!-- 本文档为 HTML 4.01 文档 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!-- 本文档为 XHTML 1.0 文档 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2:<html>:定义一个 HTML 文档

3:<title>:为文档定义一个标题

4:<body>:定义文档的主体

5:<meta>:页面的元信息

6:<link>:引入css

7:<script>:引入js

8:<style>:在head中嵌入css代码块


二、单/双标签

1、br换行符标签
2、hr水平线标签
3、img图片标签
4、input文本输入框标签
5:meta页面的元信息
6:link引入css
非常见
<area> <base> <col> <command> <embed> <keygen><param> <source> <track> <wbr>

除了上述单标签外,其他均为双标签

<div></div>...

三、块级(块状)元素

块状元素代表性的就是div,其他如p、ul、li、ol、dd、dt、address、dir、table、dl、fieldset、form、menu、noframe、h1-h6、hr、pre等等,都可以用div来实现。

元素特征:

  • 能够识别宽高
    margin和padding的上下左右均对其有效
    可以自动换行
    多个块状元素标签写在一起,默认排列方式为从上至下

四、内联(行内)元素

常见的有b/strong、br、cite、em、font、i、img、input、label、select、span、sub、sup、textarea

元素特征:

  • 设置宽高无效
    对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
    不会自动进行换行

五、行内块元素

设置display: inline-block;

元素特征:

  • 可以设置宽高
    默认排列方式为从左到右
    不会自动进行换行

行内元素和块元素都可以通过css控制相互转换,具体开发中可根据场景进行标签选择。


六、HTML5

video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源

语义化标签:
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header


CSS(Cascading Style Sheets

一、术语和概念

    1)术语

1.属性 属性对应的是平常我们书面或交谈时对 CSS 的中文称谓。例如,这块的高度,背景色等。

2. “值”大多与数字挂钩

3.关键字 顾名思义,关键字指的是 CSS 里面很关键的单词,transparent、 solid、inherit等就是典型的关键字,其中 inherit 也称作“泛 关键字”,所谓泛关键字,就是“所有 CSS 属性都可以使用的关 键字”的意思。 

4.变量 CSS 中目前可以称为变量的比较有限,CSS3 中的 currentColor 就 是变量,(less、sass中可定义变量,原理与这里不是一回事)

5.长度单位 CSS 中的单位有时间单位(如 s、ms),还有角度单位(如 deg、rad 等),但最常见的自 然还是长度单位(如 px、em 等)。

      •相对长度单位又分为相对字体长度单位和相对视区长度单位。 

     • 相对字体长度单位,如 em 和 ex,还有 CSS3 新世界的 rem 和 ch(字符 0 的宽度)。

     • 相对视区长度单位,如 vh、vw、vmin 和 vmax。 

     • 绝对长度单位:最常见的就是 px,还有 pt、cm、mm、pc 等了解一下就可以。

6.功能符 值以函数的形式指定(就是被括号括起来的那种),主要用来表示颜色(rgba 和 hsla)、 背景图片地址(url)、元素属性值、计算(calc)和过渡效果等,如 rgba(0,0,0,.5)、 url('css-world.png')、attr('href')和 scale(-1)。 

7.属性值 属性冒号后面的所有内容统一称为属性值。例如,1px solid rgb(0,0,0)就可以称为 属性值,它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如,z-index:1 的 1 也是属性值。 

8.声明 属性名加上属性值就是声明,例如:color: transparent; 

9.声明块 声明块是花括号({})包裹的一系列声明,例如: {   height: 99px;   color: transparent; } 

10.规则或规则集 出现了选择器,而且后面还跟着声明块 .vocabulary {   height: 99px;   color: transparent; } 

11.选择器 选择器是用来瞄准目标元素的东西,例如,上面的.vocabulary 就是一个选择器。 

        • 类选择器:指以“.”这个点号开头的选择器(权重10)

        • ID 选择器:“#”打头,ID 一般指向唯一元素(权重100)

        • 属性选择器:指含有[]的选择器,形如[title]{}、[title= "css-world"]{}、 [title~="css-world"]{}、[title^= "css-world"]{}和[title$="css- world"]{}等。(权重10)

        • 伪类选择器:一般指前面有个英文冒号(:)的选择器,如:first-child 或:last- child 等。(权重10)

        • 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter、::before 和::after。 (权重1)

        • 标签选择器:如p\div\span。 (权重1)        

12.关系选择器 关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格、>、~,还 有+等。 

       • 后代选择器:选择所有合乎规则的后代元素。空格连接。 

        • 相邻后代选择器:仅仅选择合乎规则的儿子元素,孙子、重孙元素忽略,因此又称“子 选择器”。>连接

        • 兄弟选择器:选择当前元素后面的所有合乎规则的兄弟元素。~连接。适用于 IE7 以上 版本。 

        • 相邻兄弟选择器:仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。适用于 IE7 以上版本。

13.@规则 以@字符开始的一些规则,像@media、@font-face、@page 或者@support。

    2)盒子模型

    Margin(外边距) 清除边框外的区域,外边距是透明的。

    Border(边框) 围绕在内边距和内容外的边框。

    Padding(内边距) 清除内容周围的区域,内边距是透明的。

    Content(内容) 盒子的内容,显示文本和图像。


二、CSS属性

动画
@keyframes    规定动画
animation     执行规定的动画 并传入一些规则

背景
background

边框和轮廓
border
Outline

盒(框)Box
overflow
颜色
color
尺寸
width
height
min-height/min-height
max-height/max-width
可伸缩框属性(弹性布局,这里后续单独出一篇文章详细介绍)
display:box;
display:flex;
display: Grid
字体
font
内容生成
content
列表
list-style
多列
column-count
外边距
margin
内边距
padding
定位
position
父元素设置 position: relative 相对定位(默认找到浏览器窗口)
子元素设置 position: absolute 绝对定位
fixed为固定定位 相对于浏览器窗口
static 无定位
打印
page-break-after
page-break-before
表格
border-collapse
border-spacing
文本
line-height
text-align
text-wrap
2D/3D 转换
transform
过渡 动画
transition

内容分页媒体(Content for Paged Media)
bookmark-label
--开发中基本用不到--

(具体请参考https://www.w3school.com.cn/cssref/index.asp#animation


浏览器渲染

一、浏览器组成

1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分

2. 浏览器引擎 - 用来查询及操作渲染引擎的接口

3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台通用接口,底层使用操作系统的用户接口。

6. JS解释器 - 用来解释执行JS代码。

7. 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

、渲染引擎与js引擎

      【渲染引擎】

• IE浏览器内核:Trident内核,也是俗称的IE内核;

• Firefox浏览器内核:Gecko内核,俗称Firefox内核;

• Safari浏览器内核:Webkit内核;

• Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;

• Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;

【js引擎

• 老版本IE使用Jscript引擎,IE9之后使用Chakra引擎,edge浏览器仍然使用Chakra引擎

• firefox使用monkey系列引擎

• safari使用的SquirrelFish系列引擎

• Opera使用Carakan引擎

• chrome使用V8引擎。nodeJs其实就是封装了V8引擎

、渲染过程

1)浏览器将获取的HTML文档解析成DOM树

    解码:将网络上接收到的经过编码的字节流,解码成Unicode字符

    分词:按照一定的切词规则,将Unicode字符流切成一个个的词语(Tokens)

    解析:根据词语的语义,创建相应的节点(Node)

    建树:将节点关联到一起,创建DOM树、Render树和RenderLayer

2)处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)

    每个CSS文件都会被分析成StyleSheet对象,每个对象都包括CSS规则,CSS规则包括对应的选择器和声明对象以及其他对象

    和第一步html解析过程可并发产生。

3) 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象

    浏览器会先从DOM树的根节点开始遍历每个可见节点,然后对每个可见节点找到适配的CSS样式规则并应用。Render Tree和DOM Tree不完全对应,比如 display: none的元素不在Render Tree中, visibility: hidden的元素在Render Tree中

4) 布局layout

渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素。局阶段会从渲染树的根节点开始遍历,由于渲染树的每个节点都是一个Render Object对象,包含宽高,位置,背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置,布局阶段的输出就是我们常说的盒子模型,它会精确地捕获每个元素在屏幕内的确切位置与大小。float元素,absoulte元素,fixed元素会发生位置偏移,我们常说的脱离文档流,其实就是脱离Render Tree

5) 绘制painting

在绘制阶段,浏览器会遍历渲染树,调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

、回流/重绘

HTML默认是流式布局的,但CSS和JS会打破这种布局,改变DOM的外观样式以及大小和位置。因此我们就需要知道两个概念:

  ① reflow(回流):当浏览器发现某个部分发生了变化从而影响了布局,这个时候就需要倒回去重新渲染,大家称这个回退的过程叫 reflow。

  常见的reflow是一些会影响页面布局的操作,诸如Tab,隐藏等。reflow 会从 html 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置,以确认是渲染树的一部分发生变化还是整个渲染树。reflow几乎是无法避免的,因为只要用户进行交互操作,就势必会发生页面的一部分的重新渲染,且通常我们也无法预估浏览器到底会reflow哪一部分的代码,因为他们会相互影响。

  ② repaint(重绘): repaint则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸和位置没有发生改变。

需要注意的是,display:none 会触发 reflow,而visibility: hidden属性则并不算是不可见属性,它的语义是隐藏元素,但元素仍然占据着布局空间,它会被渲染成一个空框,这在我们上面有提到过。所以 visibility:hidden 只会触发 repaint,因为没有发生位置变化。

我们不能避免reflow,但还是能通过一些操作来减少回流:

  ① 用transform做形变和位移

  ② 通过绝对位移来脱离当前层叠上下文,形成新的Render Layer

有些情况下,比如修改了元素的样式,浏览器并不会立刻reflow 或 repaint 一次,而是会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。但是在有些情况下,比如 resize 窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。

、阻塞渲染

1)css阻塞

css的加载并不会导致html解析和渲染的停止,但是会影响到js脚本的执行。因为js脚本不仅可以读取修改到dom,也可以读取修改到cssom。故在js脚本执行前,browser必须保证到css文件完全加载并解析完成,即cssom树完全构建好。这就导致了js执行的延迟,也因此导致html解析和渲染延迟。

. css加载不会阻塞DOM树的解析

. css加载会阻塞DOM树(render树)的渲染

. css加载会阻塞后面js语句的执行

所以css阻塞js执行,从而阻塞渲染。

2)js阻塞

js脚本加载会导致html解析、渲染停止,直到js脚本加载执行完毕才继续,所以习惯将js脚本放于页面最下端。对于js阻塞,有两种解决方法:

defer(延迟执行)

即脚本加载不会导致解析停止,等到document全部解析完毕后,defer-script也加载完毕后,再执行所有的defer-script代码,再触发Domcontentloaded

async(异步执行)

与defer的区别是async会在加载完成后就执行,但是不会影响解析和渲染。但是会阻塞load事件,所以async-script会可能在DOMcontentloaded触发前或后执行,但是一定会在load事件前触发。


规范/优化

一、html布局

1)css文件应当在 head 标签中,js文件在 body 结束前,尽量减少阻塞(无法避免)。

2)文档编码类型规定

3)布局按照不同区块语义化命名,使用适合的标签渲染适合的结构(如:h2用来渲染标题)

4)尽量用 transform 来做形变和位移,或者脱离文档流,分层渲染

5)避免使用Table布局、减少 div 使用

6)减少 js 直接操作 dom

7)标签一定要闭合(浏览器做了容错处理)

8)结构分明,区块注释以 start 开始,以 end 标记结束

9)减少 img 使用,尽量使用 css 来实现效果(包括动画)

10)结构的显隐性使用 css 属性名称来控制,避免重复添加元素、移除元素(控制其他样式也是如此)

<div class="show"></div> //隐藏时  添加hide类名 注意下方样式或覆盖上方样式,与class=""中顺序无关
.show{
  display: block
}
.hide{
  display: none
}


二、css书写

1)命名需要规范,语义化(破折号间隔,驼峰命名不推荐,因为css对大小写不敏感

2)避免内联样式和行内样式使用,但是首屏渲染推荐内联使用(减少首屏渲染时间)

3)使用异步css加载,首屏渲染后其他css文件可使用异步方式加载

4)使用雪碧图

5)减少 important的使用

6)不使用@import(影响浏览器并行下载)

7)属性书写顺序,减少浏览器reflow(回流)

1.定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index
2.自身属性:width  height  padding  border  margin   background
3.文字样式:font-family   font-size   font-style   font-weight   font-varient   color   
4.文本属性:text-align  vertical-align text-wrap text-transform text-indent text-decoration   letter-spacing    word-spacing    white-space   text-overflow
5.css3中新增属性:content   box-shadow   border-radius  transform 等

总结

界面的设计搭建,看似简单,实则类似写文章,只有不断的打磨,才能写出更完美精简的代码。良好的html+css设计,会直接减少js书写复杂度,切图仔,也要骨灰级!


1人赞

分享到: