HTML-CSS

JQiueWebHTMLCSS大约 15 分钟...

浏览器是一个伟大的发明，将任何人连接到世界各种地方，让我们可以感受到来自全球的信息，且浏览器作为跨平台的应用，只需要打开浏览器就可以找到想要的信息

前端是连接用户的最后一层，用于和展示和用户之间交互，那么 Web 前端指的是运行在浏览器中的程序，常说的各种网站就是运行在浏览器上的程序

而网站是由各种网页组成的应用，网页则由 HTML，CSS，JavaScript 三剑客组成。HTML 负责网页的结构，CSS 负责网页的样式，JavaScript 负责网页的行为。它们是不同的技术，虽然各司其职，但有相互作用的部分

但近几年来，单页面应用的出现率水涨船高，单页应用和多页应用的区别很简单，就是一个 HTML 文件构成的应用，当需要更新页面时，移除部分内容，并新增一些内容进来，像画画的擦除一样，只在一张纸上作画

这种方式的好处是，页面的数据状态都会被保存，且对用户的体验更好，无需跳转到其他页面。但缺点也很明显，非常不利于 SEO，请求等待时间长，因为所有的东西都被塞到一个页面上

多页面应用相对来说，是由多个 HTML 文件构成的应用，更新页面时一般是跳转，只有少部分是替换元素。在跳转的时候对用户来说体验是肯定没有单页面应用好的，因为它需要加载另一个页面的资源，肯定没有单页面丝滑

Web 前端的未来趋势：

更加的移动优先
入口应用会小程序化
简化的 Web 设计

浏览器

网页都是通过浏览器进行渲染的，不同的浏览器实现的标准不同，就导致同样的代码渲染出来的效果不一样。浏览器发展至今已经经历无数竞争和淘汰，现在常见的主流浏览器有：

IE - 濒临淘汰，由于部分 PC 应用需要借助 IE 内核，因此被 Windows 一直保留至今
Firefox - 火狐是 Mozilla 开发的一款开源浏览器，支持大部分标准
Safari - 苹果公司开发的，只能在苹果设备上使用
Opera - 不是一款开源浏览器，有点市场份额
Google Chrome - 如今最多人使用的一款浏览器，大部分开发者都在使用
Edge - 和 Google Chrome 同款内核，微软开发，替代 Google Chrome 的绝佳选择，被内置 Windows 10

浏览器最重要的部分是内核，像国内诸如：360，搜狗，百度，UC，猎豹等浏览器都是套皮浏览器，浏览器内核又分为两种：渲染引擎和 JS 引擎

渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

Trident - IE/old Edge
Webkit - Safari
Chromium/Blink/webkit - chrome/new Edge
Gecko - Firefox
blink/Webkit/Presto - Opera

JavaScript 引擎则是解析 JavaScript 语言并执行

JScript（IE3.0-IE8.0）/Chakra（IE9+） - IE/Edge
JSCore/Nitro - Safari
V8 - Google Chrome/Edge
SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-） - FireFox
Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-） - Opera

提示

SpiderMonkey 是第一款 JS 引擎，JavaScript 之父 Brendan Eich 在网景的时候写的

HTML

HTML 是 Hypertext Markup Language 的英文缩写，即超文本标记语言，它是一种标记语言而非编程语言，超文本的意思就是不仅仅是文字，还可以包含图片，链接，音乐，甚至程序等非文字元素，HTML 文件的后缀名是 .html，在以前可能是.htm，这是因为操作系统的后缀名长度有限制

这是 HTML 的发展史：

1993 年由互联网工程小组发布 HTML1.0
1995 年发布 HTML2.0
1996 年发布 HTML3.2，W3C 推荐标准
1997 年发布 HTML4.0，W3C 推荐标准
1999 年发布 HTML4.01，W3C 推荐标准
2008 年 HTML5 草案公布，现在还在完善中
2014 年 10 月 29 日，HTML5 正式发布

网页由三部分组成：

标记（markup）：对文本内容进行描述
文本内容（text content）：纯文本内容
对其他文件的引用（reference）：引用音频，视频，图像，以及样式和 JavaScript 文件

这些成分都由纯文本内容组成，因此可以保存为文本文件，然后在任意平台用浏览器运行，这说明 HTML 是非常容易创建的

一个 HTML 文档由四个基本部分组成：

<!DOCTYPE html>：此声明必须位于的第一行，这是为了在不同的浏览器中尽可能得到一致的表现，但它不是 HTML 标签，不区分大小写，且说明这是一个 HTML5 页面
<html>：是所有 HTML 元素的根元素，页面的其他内容都会包裹于此元素之内
<head>：提供一些与浏览器解析或者搜索引擎抓取等相关的信息，这些信息不会直接暴露给浏览者，除了<title>标签规定的标题（它规定了网页的标题）
<body>：网页的主体部分，浏览者所能看到的页面都是它提供的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
  </head>
  <body></body>
</html>

标签，元素，属性，值

元素由开始标签、内容和结束标签组成，开始标签是放在一对尖括号中的元素名字以及可能包含的属性，结束标签是放在一对尖括号中的斜杠加标签的名字，元素中包含的文本内容是网页中最基本的成分

<tagname>内容</tagname>

还有一些元素是空元素，即不包含文本也不包含其他元素，看起来像开始标签和结束标签的结合，斜杠是可选的

元素之间有嵌套和并列关系，必须是正确的嵌套

属性包含了元素的额外信息，在 HTML5 中属性值的引号是可选的，但建议加上

HTML 中的属性为元素提供附加的信息，不会被展示。在 HTML5 中新增了全局属性的概念，所谓全局属性，是指可以对任何元素都可以使用的属性

class：规定元素的类名
id：规定元素的唯一 id
title：规定元素的额外信息
style：规定元素的行内样式
lang：规定元素内容的语言
data-*：给予元素存储自定义属性的能力
tabindex：指示元素是否可以聚焦
draggable：允许拖拽元素
hidden：隐藏元素
contenteditable：元素的内容是否可以被编辑

空格折叠现象

在 HTML 中，会将文本内容中连续的空格/换行看成一个空格，但是标签“内壁”和文字之间的空格会被忽略

字符实体

想要实现多个空格，就必须用到字符实体，这有点像传统编程语言中的转义

字符实体实现多个空格

<div>Hello     World</div>
<div>Hello&nbsp;&nbsp;&nbsp;&nbsp;world</div>

提示

 是最常用的空格，也就是按下 space 键产生的空格。该空格占据的宽度会受字体影响，在inline-block元素中可能会有一些不好的行为，但在两端布局中又是不可少的。实际上还有其他的空格，比如&ensp;、&emsp;、 。其中&ensp;占据的宽度正好是 1/2 的中文宽度，&emsp;占据的宽度正好是 1 中文宽度，都受字体影响较少

还有一种常见的情况是要显示的字符是 HTML 语法结构的组成部分，比如大于号(>)，小于号(<)

关键字冲突

<div><div>是很重要的标签</div>
<div>&lt;div&gt;是很重要的标签</div>

浏览器并不会正确解析<div><div>是很重要的标签</div>，这是因为解析时会将标签进行配对，再加上一些容错机制，导致没有显示，当把<，>分别用字符实体<,>转义表示，字符实体的作用又一次得到体现

这是一些部分字符实体：

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
¢	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

注释

HTML 中的注释语法如下：

<!-- 注释内容 -->

语义化

顾名思义，语义化就是让标签具有一定的语言含义，HTML 的目的是实现页面的布局，即便不遵照语义化原则对于浏览器渲染基本没有影响。但是语义化布局更具有优势，以至于 HTML5 标准新增大量语义化标签。在 HTML5 之前，语义化布局虽然没有当前灵活，但是语义化布局的观念已经被广为接受，且用于实践

尽量做到语义化布局，而不是使用无语义的标签
但是不要误以为<div>或者<span>等无语义话标签已经失去意义，在单纯作为容器的场景下十分有用
如果需要对文本进行强调，那么建议使用<strong>或者<em>，而不是使用<b>或者<i>
<input>标签对应的说明文本尽量使用<label>标签
如果使用<table>表格，那么尽量发挥表格相关元素的对应作用，比如<th>、<thead>或者<tfoot>

CSS

CSS 是一门样式表语言，即不是标记语言，也不是编程语言，仅仅使用 HTML 编写的网页奇丑无比，需要 CSS 来帮助美化，也就是说 CSS 决定了元素的样式如何被渲染的问题

这是 CSS 的发展史：

1994 年 CSS 第一次诞生
1996 年 W3C 发布 CSS1
1998 年 W3C 发布 CSS2 和 CSS2.1，是浏览器支持最多的版本
2011 年 W3C 发布 CSS3，逐渐被各大浏览器所支持

使用方式

内嵌样式（行内样式）
内部样式（内联样式）
外部样式（外联样式）

在元素内部使用，通过全局属性style直接将 CSS 代码写到元素身上，不需要选择器，维护性较低，不推荐使用

<div style="color:red;">内嵌样式</div>

在<head>中定义<style>，将样式代码写入<style>中，需要选择器语法，维护性较高

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>内部样式</div>
  </body>
</html>

将样式代码写到一个独立的.css文件中，使用<link>引入，文档和样式文件相分离，维护性最好，最推荐使用的方式

/* style.css*/
div {
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css"/>
  </head>
  <body>
    <div>外部样式</div>
  </body>
</html>

还有一种通过@import语法引入 CSS 的方式，它是 CSS 提供的语法规则，只能引用 CSS，从兼容性上来看不如<link>，<link>不仅仅只能引入 CSS。@import引入的 CSS 只会在页面加载完后进行加载，网速太慢可以看到样式未应用的问题，且@import不能够被 JavaScript 所操作，所以慎用

div {
  color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      @import('./style.css');
    </style>
  </head>
  <body>
    <div>@import 引入</div>
  </body>
</html>

所以，更推荐外部样式表，一个外部 CSS 文件可以被很多网页共用，并且可以提高网页的加载速度。如果一个网页引用了一个 CSS 文件，这个文件多半在缓存区，因为它会被浏览器缓存

CSS 加载会堵塞网页吗？

CSS 加载不会堵塞 DOM 解析，但是会堵塞 DOM 渲染，这是因为会等待 CSS 加载完成，然后按照最终的样式去渲染 DOM，并且 CSS 还会堵塞后面的 JavaScript 脚本执行

语法

行内样式中的语法就是k: v形式，以;分开

<tag style="属性1:值1;属性2:值2;..."></tag>

而内部和外部中的 CSS 语法构成比较简单，主要有以下两个部分组成：

选择器
规则集

选择器用于匹配对应的元素，选择器的种类众多，且可以组合使用，具体定义匹配元素的样式，由具体的声明构成，声明与声明之间用;分隔，每一条声明由 CSS 属性和对应的属性值构成

选择器 {
  属性名: 属性值;
  属性名: 属性值;
  ...
}

除此之外，CSS 中也支持注释语法，但不能嵌套另一个注释

/* 注释内容 */

三大特性

CSS 三大特性决定着元素的属性是如何生效的：

层叠性
继承性
优先性

层叠性是 CSS 处理冲突的一种能力，在同一个 CSS 样式规则中重复使用了某个属性，或不同的选择器选中后都使用了某个属性，才会发生层叠性，优先级较高的就会生效，CSS 全称就是层叠性样式表，由此可见一般

层叠性

<p class="example">层叠性</p>

p {
  color: red;
}
.example {
  color: blue;
}

部分父元素的属性会被后代所继承，但不是所有的属性都会被继承，以color/font-/text-/line-/list-/cursor开头的属性会被继承，更好的利用继承性可以提高效率

提示

<a>标签中的下划线和颜色都不会继承，<h>标签的文字大小也不会继承

当多个选择器选中同一个标签，并且设置相同的属性时，如何层叠就由优先级来确定：

直接选中 - 如果是间接选中，谁离目标近就听谁的
相同选择器 - 如果都是直接选中，并且都是同类型选择器，谁写在后面就听谁的
不同选择器 - 如果都是直接选中，并且不是同类型的选择器，则会按照选择器的优先级来层叠

一般情况下：!important > ID > 类/属性/伪类 > 标签/伪元素 > 通配符 > 继承 > 浏览器默认

!important

!important用于提升直接选中选择器中的某个属性的优先级，提升为最高，只能用于直接选中

!important

<p class="example">优先级</p>

p {
  color: red !important; 
}
.example {
  color: blue;
}

权重问题

当多个选择器混合在一起使用时，必须通过权重的计算来判断优先级：

ID 选择器多的优先级高，如果 ID 选择器相同则看类选择器的个数
类选择器多的优先级高，如果类名选择器相同则看标签选择器的个数
以此类推...
如果都一样，则按照优先级第二条处理

注意

只有直接选中的元素才需要进行权重计算，间接选中的不算

媒体相关的样式表

这种样式表可以用于指定的设备媒体类型，当处于某种设备类型时应用该样式表，常见的媒体类型有：

screen：默认值，可见的屏幕媒体
print：打印机
projection：投影
speech：阅读器
braile：盲文
embossed：盲文印刷
handheld：手持设备
tty：打字机
tv：电视类型
all：所有输出设备

目前使用最广的就是 all、screen、print

有两种用法：

使用link元素的media属性指定类型

<link src="index.css" media="screen">
<link src="index.css" media="print">

样式规则中使用@media指定类型

@media screen {
  /* ... */
}
@media print {
  /* ... */
}

结合 CSS3 中引入的媒体查询就可以形成非常强悍的用法，通过这些技术可以根据设备的属性来应用不同的样式

网页也具有关键词和页面描述，也是非常重要的 SEO 手段，通常使用 meta 标签来设置

<!-- 关键词 -->
<meta name="Keywords" content="">
<!-- 网页描述 -->
<meta name="DeScription" content="">

参考资料

whatwg
W3C
MDN
CSS 权威指南
CSS 网站布局实录
精通 CSS
超越 CSS：Web 设计艺术精髓
CSS 揭秘
CSS 禅意花园
图解 CSS3
Web 界面设计
CSS 世界
设计心理学
Can I use

你认为这篇文章怎么样？

昵称

邮箱

网址

按正序
按倒序
按热度