怺加冢穴-博客

 怺加冢穴-博客
0%

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

祝贺大家！经过了前面的学习，我们终于来到了实战部分，现在你可以初步搭建一个自己的网站了！

浏览器解析 CSS

在开始之前，我们有必要了解一下浏览器是怎么解析 CSS 的。

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

  • 浏览器载入 HTML 文件（比如从网络上获取）。
  • 将HTML文件转化成一个 DOM（Document Object Model），DOM是文件在计算机内存中的表现形式。
  • 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS ，所以这里对如何加载 JavaScript 不会展开叙述。
  • 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  • 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  • 网页展示在屏幕上（这一步被称为着色）。

上面看不太懂也没事，有个概念就可以，方便自己以后调试网站的时候更快地了解到问题。

浏览器如何对待错误的 CSS

如果浏览器在加载 CSS 的时候发现了一些错误，比方说属性拼写错误，或者选择器错误，会怎么做？

你也许猜到了：浏览器什么也不做，直接跳过去！就像这个 CSS：

1
2
3
4
5
6
7
8
9
p {
  font-weight: bold;
  colour: blue; /* color 属性的不规范拼写 */
  font-size: 200%;
}
fkccf {
  border: 1px solid black;
  background-color: lime;
}

在第一个例子，我们使用了不规范的拼写 colour （CSS 只支持美式英语），然后浏览器会直接忽略这个规则，跳过去，于是段落就变成了放大 200% 的粗体，用的默认颜色（一般是黑色）。

第二个例子，我们使用了错误的选择器。这导致这个规则被忽略，包括大括号里面跟着的那些规则。

注意，这里不会有报错，而是直接忽略，所以你不会从控制台或者调试窗口或者什么地方得到这个属性没有被渲染的消息，只能从最后元素的样式去判断。

如果你想对某些上古浏览器进行支持（比如某毒瘤 IE6），那么这种特性会比较有用。比方说某个浏览器是没有 calc 这个函数的，它就会使用上面的 500px，而正常浏览器则会正常解析下面的 calc，并且显示出来。

1
2
3
4
.box {
  width: 500px;
  width: calc(100% - 50px);
}

实战例子

现在，我们正式开始实战。

我们强烈建议你在计算机上进行实际操作，毕竟实操和看看是有很大区别的。我们此处的例子是从 MDN 的对应章节（MDN -> 学习 Web 开发 -> CSS -> CSS 第一步 -> 运用你的新知识，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge）里面摘出来的，你可以选择从那里直接复制代码，然后照着链接里面的说明进行操作。

现在你应该可以理解下面的 html 和 css，以及它们显示出来的样子。新建一个文件夹，在里面建立下面这两个文件，再在浏览器里面打开 index.html ，看看是不是显示出图片里面的样子。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Formatting a biography</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Jane Doe</h1>
    <div class="job-title">Web Developer</div>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
    </p>
    <h2>Contact information</h2>
    <ul>
      <li>Email:
        <a href="mailto:jane@example.com">jane@example.com</a>
      </li>
      <li>Web:
        <a href="http://example.com">http://example.com</a>
      </li>
      <li>Tel: 123 45678</li>
    </ul>
  </body>
</html>

styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
  background-color: #fff;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
  margin: 0;
}
h1 {
  color: #375e97;
  font-size: 2em;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border-bottom: 1px solid #375e97; /*下边框，从左到右三个依次是边框粗细大小，
  边框样式和颜色。比如要换成点线边框的样式就把 solid 换成 dotted*/
}
h2 {
  font-size: 1.5em;
}
.job-title {
  color: #999999;
  font-weight: bold;
}
a:link, a:visited {
  color: #fb6542;
}
a:hover {  /*鼠标悬停*/
  text-decoration: none; /*文本修饰: none*/
}

Original Look

现在你可以尝试对它进行一系列的操作，看看它会变成什么样子。比方说你可以这么做（不知道怎么做的往前翻，都讲过。这里是个练习，不提供示例代码）：

  • 使用 CSS 的颜色关键词 hotpink ，将一级标题设定为粉红色。
  • 使用 CSS 颜色关键词 purple ，为标题添加 10 像素宽的点线边距（注释里面有提到的）
  • 将二级标题设为斜体（font-style: italic）。
  • 用 #eeeeee 为联系人列表中的超链接添加背景颜色和一个 5 像素宽的紫色加粗边框 (border)。使用一些内边距 (padding) 属性，拉开正文与外边距的距离。
  • 当鼠标在某些 HTML 元素上悬停时增加动画 (推荐改变颜色和字体试试)。
  • 设置链接在鼠标悬停时变为绿色。

然后就会变成这样

After

结束了？

“好像内容是结束了？那我是不是可以自己搭建一个网站了？”

如果说是搭建一个初步的网站，那么的确是可以了。但是有的网站好像不是那么简单，比方说导航栏，侧栏，底栏这些，要怎么办？下面我们会举出更多例子。

在更下面我们会把更加综合地讲解一下 HTML 和 CSS 的合作的例子，给大家一些网站的例子去讲解。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

现在，你应该已经很了解什么是 CSS 了，对于 CSS 的各种细节也有了一定的把握。我们这一节要告诉你怎么完整地使用 CSS 。

其他添加 CSS 的方法

之前我们提到了另外两种方法的存在，现在也稍微提下。

内部 CSS

在 HTML 的 <head> 里面用 <style> </style> 来包裹你的 CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

在单文件的时候这个可能会比较方便，但是如果你的网站有很多 HTML ，一个个这么改过来不现实，所以看情况吧。

内联 CSS

在单文件的时候这个可能会比较方便，但是如果你的网站有很多
内联 CSS 直接添加在元素上面。比如这样子：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

非常不建议这么做，一个个改元素会成为你的噩梦的。偷懒一时爽，维护火葬场，切记切记。

层叠与继承

可能接下来的内容会偏向抽象一些，不过也是可以轻松理解的内容，对以后处理实际问题有很大帮助。

一个例子

在写一个项目的时候，我们总是不可避免地会遇到一些问题，比如下面这个例子。

现在有这样的一个元素：

1
<p class="special">What color am I?</p>

然后有这样的 CSS：

1
2
3
4
5
6
p {
  color: green;
}
p {
  color: yellow;
}

或者 CSS 是这样的：

1
2
3
4
5
6
.special {
  color: red;
}
p {
  color: blue;
}

请问它会变成什么样子？

我们立刻就会讲解这些细节。

层叠

CSS 元素的顺序很重要。浏览器在渲染 CSS 的时候，是从上到下进行解析的，同级的选择器指定的元素，如果样式发生了重复，就会使用后面的元素覆盖掉。就像涂颜料，前面都盖掉了，只有最后的才会看见。

刚刚那个例子的第一个，就是典型的层叠。所以自然颜色就变成了黄色。

优先级

那么第二个 CSS 要怎么处理呢，就要考虑优先级的问题了。

一般情况下面，越特殊的选择器，优先级就越高。在这里，.special 作为一个类名选择器，比 p 这样的元素选择器更加特殊，所以优先级更高。CSS 内置的优先级比较复杂，就不详细展开了。

当然以后这类问题实在不知道的话，可以自己直接在浏览器里面试一下。这也是常用的手段，比起看一些晦涩的文档，也不失为一种更好的选择。

继承

有时候，子元素会继承父元素的一部分属性。最典型就就是 font 系列。比方说你写了这样的 HTML 和 CSS：

1
<p> 我是一段文字，里面有<b>粗体</b>，<i>斜体</i>。 </p>
1
2
3
p {
  font-family: tahoma；/*这个是 Windows 默认字体*/
}

显然，里面的粗体和斜体都会和 <p> 中其他字有一样的字体。这样可以免掉很多麻烦。不过更加常用的方式就是直接给 <body> 设置这些属性，可以给包含在里面的全部内容继承。

有些属性是不会继承的，是否继承之类的问题都会在文档里面写明，用到的时候查下文档就好。

不想继承的话，一般是把这个属性覆盖了就好了，具体控制继承的方式，也可以看下文档。

盒模型

在 CSS 中，所有的元素都是套在盒子（box）里面的。盒子是渲染的基本单位，是处理元素的时候用到的。我们有时候有排版网页的需求，比方说放上一张图片，指定宽度高度，或者是一块一块地排上一些方格，比如写博客的时候一篇篇文章排下来之类的，都会用到盒子。

盒子分成两种，块级盒子 (block box) 和 内联盒子 (inline box) 。

让我们先开始了解盒模型。

盒模型

完整的 CSS 盒模型，是盒子里面套着盒子的，这些不断嵌套的盒子构成了 CSS 的基本框架。从里到外包含这些部分：

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

Box Model

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box, 也就是内容那个盒子。 padding 和 border 再加上设置的宽高才一起决定整个盒子的大小。比方说可以这样设置：

1
2
3
4
5
6
7
.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

这里最内层的 content box 是分别设置宽高的，而其他都指定宽度（相当于边框的粗细）。在页面中显示出来的是最内层和边框，别的相当于占着的空白。合起来在页面里面占的宽度是 350 + 25 + 25 + 5 + 5 = 410px，高度是 150 + 25 + 25 + 5 + 5 = 210px。

margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠。

Standard Box

其实更好的方法是使用相对大小来设置，比如设置百分数 50% 或者相对字体的大小 2em 之类。因为这样可以在多种尺寸的屏幕上面显示地正常一些。具体可以从相应式布局了解有关细节。通常， 1em 等于 16px。

块级盒子和内联盒子

这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:

一个被定义成块级的（block）盒子会表现出以下行为:

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用
  • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题( <h1>等)和段落(<p>)默认情况下都是块级的盒子。

如果一个盒子对外显示为内联（inline），那么它的行为如下:

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子 display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

盒子排版示例

现在我们看下一些关于 block box 的例子。

第一个例子是一个段落，我们给它设置了边框。因为它是一个块级元素，所以它被换了个行。
第二个例子是一个列表，它被设置了一个 display: flex，意思是里面的元素按照弹性布局，所以里面的各个 li 就会被从左到右排成一行。不过它本身仍然是一个块，和段落一样，最外面也是换了一个行的。
第三个例子是演示内联元素如何变成块级。里面有两个 元素。正常情况下是 inline，但是其中一个加了 block 类，设置属性 display: block，成了块级元素。

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p, ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}
.block, li {
  border: 2px solid blue;
  padding: .5em;
}
ul {
  display: flex;
  list-style: none;
}
.block {
  display: block;
}          
1
2
3
4
5
6
7
<p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>

我们可以看到 inline 元素在下面例子中的表现。 <span> 在第一段默认是内联元素所以不换行。
还有一个 <ul> 设置为 display: inline-flex，使得在一些flex元素外创建一个内联框，表现成内联。
最后设置两个段落为 display: inline。 inline flex 容器和段落在一行上而不是像块级元素一样换行。

Example2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p, ul {
  border: 2px solid rebeccapurple;
}
span, li {
  border: 2px solid blue;
}
ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
}
.inline {
  display: inline;
}
1
2
3
4
5
6
7
8
9
10
11
12
<p>
    I am a paragraph. Some of the
    <span>words</span> have been wrapped in a
    <span>span element</span>.
</p>     
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

在后面的内容中会遇到诸如弹性盒子布局的内容；现在需要记住的是， display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。

再谈属性和值

我们之前已经了解过，CSS 的声明是由属性和值组成的。格式是 属性: 值。

每个属性都有定义的值，对应特定的样式。

如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的 CSS 引擎完全忽略。

接下来就要再提一下属性，讲一些之前没有提到的内容。

一些重要属性

试试看这些属性吧，查找 MDN 的文档，并且试着使用它们。

  • font-size
  • width
  • background-color
  • color
  • border

函数

虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。函数由函数名和括号组成，括号内是函数的参数。比如我们之前提到的 color 里面的 rgba() 就是一个很典型的 CSS 函数。这里我们演示一下 calc() 函数。这个函数允许您在 CSS 中进行简单的计算，例如：

1
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
1
2
3
4
5
6
7
8
9
10
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

Calc

在上面的 calc() 示例中，我要求此框的宽度为包含块宽度的 90% ，减去 30 像素。这不是我可以提前计算的东西，只是在 CSS 中输入值，因为我不知道 90% 会是什么。MDN 上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。

还有 transform, background-image, color 这些也用了函数，可以看文档了解一下。

@规则

到目前为止，我们还没有遇到 @rules (读音 “at-rules”)。 这是一些特殊的规则，为 CSS 提供了一些关于如何表现的指导。 有些 @rules 规则很简单，只有规则名和值。例如，要将额外的样式表 (假定叫做 styles2.css ) 导入主 CSS 样式表，可以使用 @import:

1
@import 'styles2.css';

最常见的 @rules 之一是 @media ，它允许您使用 媒体查询 来应用 CSS。意思是仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)的时候才会用到这个规则。这样可以用来适应不同的设备（比如竖屏和横屏）。

在下面的 CSS 中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用 @media 创建样式表的一个部分，该部分仅适用于视口大于 30em 的浏览器。如果浏览器的宽度大于 30em，则背景色将为蓝色。

1
2
3
4
5
6
7
8
9
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

速记属性

有时候一个个指定属性是一件很烦的事情，现在我要设置一个 padding 的上下左右边距：

1
2
3
4
5
6
.box{
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
}

CSS 本就有些无聊，要是再加上这些杂七杂八的东西不会乱成一团就怪了。好在为了程序员们的眼睛和头发，有个叫做速记属性的东西。它可以使代码更整洁，也节约你的打字时间。上面的例子可以打成这样：

1
2
3
.box{
    padding: 10px 15px 15px 5px;
}

警告：虽然速记经常允许您忽略值，但它们会将不包含的任何值重置为它们的初始值。这确保使用了一组合理的值。但是，如果您期望速记只更改传入的值，这可能会使您感到困惑。

注释和空白

CSS 中的注释以 /* 开头，以 */ 结尾。注释内容不会被 CSS 渲染。

添加注释是一件有用的事情，这样做可以帮助您在过了几个月后回来修改或优化代码时了解它们是如何工作的，同时也便于其他人理解您的代码。有时候测试的时候也会把一些属性包在注释里面禁用掉，用来排除干扰，也就是常说的“注释掉”。

比如这就是典型的用法：

1
2
3
4
5
6
/*.special {
  color: red;
}*/
p {
  color: blue;
}

空白是指实际空格、制表符和换行。以与 HTML 相同的方式，浏览器往往忽略 CSS 中的大部分空白；许多空白只是为了提高可读性。

小结

本章内容有点多有点杂，在此稍微梳理一下。

应用 CSS 有三种方法。外部 CSS，内部 CSS， 内联 CSS。推荐使用的是外部 CSS，因为方便维护和复用。

如果多个选择器选中了同一个元素，这些选择器跟着的规则也发生冲突的话，CSS 将会根据优先级处理。通常是后面的覆盖前面的，特殊的覆盖一般的，最后显示出来网页的样子。

CSS 在渲染的时候使用盒模型，这个模型把元素看成是一个一个的盒子，将它们排布起来。盒子分成两种，一种是块级盒子，另一种是内联盒子。块级盒子通常会自带换行，并且拥有完整的边框。

属性除了普通的值，还可以有函数。函数通常指定一些比较复杂的逻辑。除了普通的属性之外，还有 @ 属性，用来进行一些特殊的操作。

空白和注释是让 CSS 提高可读性的重要方式。

结尾

现在你应该知道了 CSS 的一些工作原理，下面我们就进入实战部分吧。

练习

下面就是实战了，我也不想搞练习，就跳过吧。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

经过前一章，我们了解了 CSS 大抵是什么东西。现在就要正式用上 CSS 了。
在这篇文章中，我们将会拿一个简单的 HTML 文档做例子，并且在上边使用 CSS 样式，期待你能在此过程中学会更多有关 CSS 的实战性知识。

先从 HTML 开始

这里是一个平平无奇的 HTML： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开始学习CSS</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>并且还有一个 <a href="http://example.com">链接</a>.</p>
    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目 <em>三</em></li>
    </ul>
</body>
</html>

我们将会以这个为例子开始讲解 CSS。

嵌入 CSS

要想让 CSS 应用在 HTML 当中，就需要在其中嵌入 CSS。一共有三种方法可以嵌入 CSS：外部 CSS，内部 CSS，内联 CSS。目前我们最普遍的方式——外部 CSS 来进行演示。
在与之前所说的 HTML 的相同目录下创建一个文件，保存并命名为 styles.css 。然后在HTML 的 <head> 当中加入这一行: 

1
<link rel="stylesheet" href="styles.css">

这样就可以将 HTML 和 CSS 文件链接起来。属性 rel="stylesheet" 表示要链接的是 CSS 文件，href 指定了文件名称。一定要注意的是，这里用来指定文件名的是 href 标签，而不是 src，两者是有区别的。但是你可以把CSS文件放在其他地方，并调整指定的路径以匹配。
接下来就可以在 styles.css 文件里面指定样式了。前面已经讲过，我们通过指定元素选择器以及附加的规则来格式化 HTML 当中的元素。所以这里就直接开始了。
比如我们现在可以把下面的内容写进去： 

1
2
3
4
5
6
7
8
9
10
h1 {
  color: red;
}
p, li {
  color: green;
}
em {
  font-weight: bold;
  color: grey;
}

它把大标题设置成红色，把段落和列表里面的字设置成绿色，再把强调元素设置成灰色粗体。具体效果可以看下面的图片：

CSS Example 1

另外，如果之前已经在浏览器里面打开了 HTML 的话，修改之后要保存，然后在浏览器里面刷新才能看到变化。这里是怕大家忘了。

元素默认样式

对于每个 HTML ，如果没有 CSS 或者 CSS 没有指定的地方，浏览器都会采用默认样式进行渲染，比如那些标题都是粗体，链接是蓝色带下划线之类。
如果你不是很满意那些东西，可以用选择器选中它们，再指定一个规则去掉它。比如一个 ul 的 li 前面会带上一个点，现在我们可以去掉通过这个规则去掉它。 

1
2
3
li {
  list-style-type: none;
}

对其他元素的默认样式也可以采用类似的方式进行去除或者覆盖。

使用类名

到现在我们都是采用选择器来指定一个元素。但是如果想要对一些元素起作用，比如一些 <p> 变成红色，另一些 <p> 变成紫色，怎么办？
答案是使用类名（class）。你可以给 HTML 元素来指定类名，再让 CSS 选择器用类名进行选择。下面是一个例子：

1
2
3
4
5
<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

这里给项目二指定了一个 class="special" 。在 CSS 中选中它，需要在选择器开头加上一个英文句点（.），就像这样：

1
2
3
4
.special {
  color: orange;
  font-weight: bold;
}

把 special 类的元素设置成橙色粗体。一个类名可以在不止一中元素上面使用，比方说我们给一些 <p> 加上 class="special" 之后，这些 <p> 也会变成橙色粗体。是不是非常方便。
有时候你会看见这样的东西： 

1
2
3
4
li.special {
  color: orange;
  font-weight: bold;
}

这里就是指定所有类为 special 的 li 元素，不会影响其他的 special 类的元素。可以用来给某些特殊元素处理。

使用 ID

你也可以使用 ID 来选择指定的元素，使用 # 开头，类似类名选择器。例如有这么一个 HTML 片段：

1
<span id="identified">Here's a span with some text.</span>

要想选中它，就可以这么做：

1
2
3
#identified {
  background-color: DodgerBlue;
}

和类名不同的是，一个 ID 是只能给一个标签用的。

根据元素在文档中的位置确定样式

有时候希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以提供帮助，但现在我们只介绍几个选择器。比方说现在我们的文档中有两个 <em> 元素 ——一个在段落内，另一个在列表项内。如果只想选择嵌套在 <li> 元素内的 <em> 我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。CSS 长这样： 

1
2
3
li em {
  color: rebeccapurple;
}

现在，我们把包含在 <li> 当中的 <em> 变成了紫色，而其他地方的 <em> 都不```面的所有 <em> 起作用，这包括下面的例子：

1
<li>LALALA<span>LALAL<em>LSA</em>JFOIU</span>AWJFLIKAHSOIDafs </li>

如果你想要根据严格的父子关系来选择，可以采用子代选择器，这个符号是一个 >，写出来的选择器就是 li > em。这样就不会选出套在 <span> 里面的 <em> 了。

另外我们也可以让两个同级别元素排在一起的时候再选中，需要在两个选择器之间添加一个 + 号 (成为 相邻选择符) 。这里是一个例子：

1
2
3
h1 + p {
  font-size: 200%;
}

当 h1 和 p 相邻的时候，就把 p 的字体放大到 200% ( h1 不变)。

根据状态确定样式

我们平时在浏览网页的时候，把鼠标停在某个链接上面，那个链接就会变颜色。这是通过选中不同状态来进行的。当我们修改一个链接的样式时，我们需要选中 <a> 标签。这个标签有着不同的状态，比如说是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中等等。你可以使用 CSS 去选中这些不同的状态，然后分别进行修饰。比如说下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

1
2
3
4
5
6
a:link {
  color: pink;
}
a:visited {
  color: green;
}

你也可以改变链接被鼠标悬停的时候的样式，例如移除下划线：

1
2
3
a:hover {
  text-decoration: none;
}

将多种选择器混合使用

有时候你想去搞一些很复杂的功能，那就可能会需要混合使用多种选择器。
比如把包含和并列选择器一块用：

1
2
3
4
/* 选择在 <article> 中的 <p> 中的 <span>。 */
article p span { ... }
/* 选中排在一起的 <h1> <ul> 和 <p>。 */
h1 + ul + p { ... }

或者像这样把一堆选择器混在一起。

1
2
3
4
5
6
/*在 <body> 之内，紧接在 <h1> 后面的 <p> 元素的内部，类名为 special 。*/
body h1 + p .special {
  color: yellow;
  background-color: black;/*设置背景颜色*/
  padding: 5px;
}

这里 /* */ 包裹起来的内容是 CSS 注释，浏览器会自动忽略这些，写注释是给自己或者其他能看到这个 CSS 的人看的，记下一些比较复杂的东西，免得以后忘记了是吧。

总结

这里我们知道了怎么链接 CSS ，以及如何添加选择器来作用特定的元素。在教程的剩下部分，我们将继续这个话题。你现在已经可以在 MDN 文档中查找属性和值，并且根据这个给文本指定简单的样式。

在下一节中，我们将看到样式表的结构是什么样的。

练习

给下面的 HTML 添加以下的样式，需要写出什么规则？

1
2
3
4
5
6
7
8
9
</head>
<body>
    <h1>A poem</h1>
    <p>Roses are <span class="red">red</span></p>
    <p>Voilets are <span class="blue">blue</span></p>
    <p><strong>Unexpected '{'</strong></p>
    <p><span>On <strong>line 32</strong></span></p>
</body>
</html>

在 HTML 同目录下新建一个叫做 styles.css 的文件，你可以往里面写样式。

  • 把 h1 设置成蓝紫色(blueviolet)。
  • 把 “red” 设置成红色。
  • 把 “blue” 设置成蓝色。
  • 把 “line 32” 和 “Unexpected ‘{‘ “ 字体大小设置成 1.2em 。(后代选择器)
  • 把 “line 32” 设置成红色，但是不影响 “Unexpected ‘{‘ “ 。(子代选择器)
  • 把鼠标悬停在 “red” 字样上面的时候，文字颜色变成蓝色。(根据状态选择)
  • 把和 h1 相邻的第一个 p 的背景色设置成黄绿色(yellowgreen)。(相邻元素选择)

这些都是本章提到的内容，自己动手试试看，有利于掌握。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps 改编。

开始之前

好了，经过了前面的 HTML 学习，我们进入了下一个阶段。在这里，你终于不需要忍受那些白底黑字灰按钮的网页了！这里我们将会介绍 CSS（Cascading Style Sheets，层叠样式表），它用于设置和布置网页————例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。但是，这里我们不会太急，先介绍一点点东西，用来给大家提供一个开端。

大家在用 word 的时候，都是把字选择起来，调节字号，字体一类。在这样的操作中，样式和内容是连在一起的。但是 web 就不太一样，它把内容和样式分开了。基本的 HTML 只有一些主要内容，而样式几乎都是放在 CSS 里面的。这样的好处是维护方便，我们以后会提到。

浏览器在得到一个 HTML 之后，就会开始根据这个文档的结构进行渲染。根据各种标签和 CSS 来确定一个文字应该显示成什么样子，所以你在最终的网页上面看不到 <p> 这类的标签。在没有 CSS 的时候，浏览器会采用默认样式进行渲染。而 CSS 则会指定一个 HTML 里的东西应该怎么渲染（当然标记语言不只有 HTML， 还有 XML，SVG 这些，都可以用 CSS）。下面我们简单地讲下语法。至于怎么添加 CSS，我们会在下一章正式进行讲解。

CSS 语法

CSS 就是指定一种规则。听起来有点迷惑，不过我们举个例子就明白了。征文的时候，老师说，“标题用三号黑体，正文用小四号仿宋”，这样的要求就是规则。本质上这两者都是相同的，只是为了给浏览器看，CSS 用了更复杂的语法。比如下面这个 CSS：

1
2
3
4
h1 {
    color: red;
    font-size: 5em;
}

用自然语言讲出来就是“把所有的 h1 的颜色变成红色，字体大小变成 5em”。是不是非常简单？下面我们分析一下。

这里的例子就是一个完整的 CSS 规则。规则以一个 选择器（selector） 开头，它选出我们这条规则影响的元素。在这里它是 h1 ，就是选中所有的一号标题（大标题），让它用上后面紧跟着的大括号内指定的样式。

选择器后面是一个大括号 {}，里面定义一些属性。比如 color: red 就把元素的 color 属性设置成了 red，也就是把颜色设置成红色。我们可以看见冒号前面是属性，冒号后面是值。

像这样按照 属性:值 (property:value) 的格式来指定属性的值句子叫做 声明（declarations）。每个声明以半角分号（;）结尾。不同于 HTML 的是，CSS 的属性是区分大小写的。

属性的值不是随便设置的，比如你给 color 的 red 换成 read ， write 这些乱七八糟的值是没有任何效果的（CSS 会自动忽略那些错误的规则）。如果属性有多个值，那么多个值之间用英文逗号（,）隔开。CSS 当中具有非常多样的属性，给各种元素很大的自定义空间，具体可以查看有关 CSS 的文档（比如 MDN 的文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference）。

一个 CSS 不只有一个规则，它可以包含很多的规则，比如这样：

1
2
3
4
5
6
7
h1 {
    color: red;
    font-size: 5em;
}
p {
    color: black;
}

这里就多了一个把所有的 <p> 里面的字都设置成黑色的规则。

属性一览

因为属性太多，我们不可能一下子全部列出。这一系列的教程可能会把属性随着进度慢慢地讲出来，而不是单独分成一个专题。所以

color

顾名思义，这就是颜色相关的属性，准确来说这是前景色（通常是文本颜色），还可以用 background-color 来设置背景色。刚刚我们提到的是用颜色名称来设置。实际上颜色还可以不止通过这种方式。例如用 rgb 或者 rgba，或者十六进制颜色值。

1
2
3
4
5
6
7
8
9
h1 {
  color: rgb(255, 255, 255) /*设置成白色*/
}
p {
  color: rgba(255, 255, 204, 0.8) /*淡黄色 20% 透明*/
}
ul {
  color: #0000FF;/*蓝色*/
}

更多的内容可以去 MDN 上搜索 color 去看详细的介绍。

font

font 相关的都是字体的属性。其中包括了字体，字号和类型等等。

设置字体大小使用 font-size ，大概就是这样:

1
2
3
font-size: 12px;/*12 像素大小*/
font-size: 0.8em;/*0.8 字符大小*/
font-size: 200%;/*缩放 200% */

其中第一个 px 结尾的就是以像素大小为单位的绝对大小，第二个 em 是以字号为单位的相对大小。使用相对大小有利于去适应不同的设备，我们推荐使用 em 的方式。通常情况下，电脑浏览器上 1em 等于 16px。如果对个别字进行操作，也可以是使用缩放。

设置字体的是 font-family 属性。这个属性可以指定字体。你可以给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

1
2
font-family: Georgia, serif; /*使用 Georgia 字体，如果没有选择默认衬线字体*/
font-family: sans-serif;/*使用无衬线字体*/

font-style 用来设置斜体。例如 font-style: italic 设置字体为斜体。

font-weight 设置粗体。font-weight: bold 将字体设置成粗体。

最后

我们会在下一章开始正式运用 CSS 到我们的网页上面。

发表于 更新于 分类于 ，

以下是我们转载的文章。

引用的一些内容来源链接在文末给出

大家好，我是Acfboy,算法竞赛，开源软件和航空业的爱好者.

今天，开源软件在生活中的地位与日俱增，但在很多人的概念中，只有闭源软件，没有开源，所以，想通过这篇文章简单介绍介绍开源软件。

开源是什么

开源软件的定义

开放源代码（Open source code）也称为源代码公开，指的是一种软件发布模式。一般的软件仅可取得已经过编译的二进制可执行档，通常只有软件的作者或著作权所有者等拥有程序的原始码。有些软件的作者会将原始码公开，此称之为“源代码公开”，但这并不一定符合“开放源代码”的定义及条件，因为作者可能会设定公开原始码的条件限制，例如限制可阅读原始码的对象、限制衍生品等。

——百度百科

简单的来说，开源软件就是通过一定的许可协议开放源代码的软件。

最早源自开源运动之父RMS的Copyleft思想，这里的left不是“左”或“留下”，而与“著作权”中的Copyright相对应。

RMS：

从1989年第一个开源许可协议GPL被提出后，开源软件逐步发展，如今已经渗透到各行各业，你的手机，路由器，你谷的评测机，等等，都使用了按照GPL开源的Linux，其它的一些开源组件也广泛使用，如你谷显然用了MDUI,一个开源的前端框架。

程序猿们总是希望自己的软件能够安全使用，遇到问题能自己改或让人改，好奇时能看一看源代码。从这个角度来说，开源软件就像是送给程序员的礼物。

开源软件同样可以带来商业利益，如围绕Ubuntu展开的商业服务

为什么要支持开源

首先，开源软件有长期可依赖性，不大可能对你停止授权；对于一些源代码被阅读多的项目，安全性和稳定性是可以保证的；由于源代码开放，可定制程度高，易于学习（只要你足够厉害），也是其一大亮点。

前一段时间，美国搞了一个出口限制清单，限制软件对中国的授权，哈工大、北航等国内高校被禁止使用 MATLAB。

这个时候开源软件便体现出它独到的优越性，FSF（自由软件基金会），Apache基金会和Linux基金会都宣布已经发布的开源软件不会受美国清单的影响。

RMS说

学校应该教授开源软件的使用，这是帮助他们在信息社会成为独立的人；保证社会不被高科技公司所垄断。教授闭源软件是在培养学生的依赖性，与学校的宗旨背道而驰。

可见，我们都应该支持开源软件，随着开源软件商业生态逐渐形成，开源公司也能实现盈利，开源软件将成为计算机软件的未来。

开源从何而来？

最早的开源，可以从那场操作系统的战争中讲起。

1985年，微软发布了Windows1.0操作系统，图形界面的操作系统使电脑开始进入大众的视野，人们不需要再记住许许多多的命令(但有的时候命令行真心方便)就可以使用电脑。苹果紧随其后推出了它们的图形操作系统。

1990年，Windows 3发布，一个真正可用的大众操作系统，微软的黄金时代开始了。1997年，微软占据了90%的市场。直到现在，Windows仍然是大部分用户使用的操作系统。 但在微软和苹果打得不可开交的时候，他们没有注意到一名 21 岁的芬兰计算机科学专业学生出现了。十分偶然的，他彻底改变了一切。

哪些科技巨头忙着竞争的时候，开源和自由软件的先驱也雨后春笋般冒出来，其中之一便是Richard Matthew Stallman, RMS。

当时，Unix价格高昂，RMS创立了GNU，即"GNU is Not Unix"(发现递归了吗)

现在，回到那位大学生身上来，他负担不起Unix高昂的费用，但只有Unix才能让他自由地编程，于是，他决定——自己写一个。一不小心地，就改变了世界。

1991年10月5日，Linus Torvalds提交了第一个Linux内核，包含一万行代码。

如今，Linux已经包含两千万行代码，超过五千位贡献者，并且击败了微软，成为了统治世界的操作系统，在手机，路由器，服务器等设备上，运行着无数的Linux，我们每个人都成为了受益者。

Linus Torvalds为什么能成功？GPL起了很大的作用。

微软和苹果这样的公司一直在试图建造软件大教堂，而 Linux 及类似的软件则提供了一个由不同议程和方法组成的巨大集市，集市比大教堂有趣多了。

——Eric Raymond

Linux的成功，从一定程度上带动了所有开源软件的发展。

开源的时代，开始了！

开源许可证

开源许可证是告诉使用者它们可以干什么，不可以干什么的一种方式，大概就是这么一段话：

我允许你们XXX，我许可你们XXXX，你们可以XXXX，但是，你们必须XXXX，如果你们XXXX了，你们就必须XXXX，对了，对于XXXX这些情况，我可不负责。


你要同意，就用，不同意就别用。如果你用了，但违反了许可证的要求，我可能会告你啊！

各大许可证简单介绍

有一张图简单介绍了开源许可证：

GPL

  • 可以任意演绎、分发、复制
  • 源码开放
  • 衍生版本必须也使用GPL协议开源
    • LGPL允许用类库引用(link)方式使用LGPL类库而不需要开源商业软件的代码

Linux就是通过GPL开源的

MIT

  • 保留源作者版权声明
  • 没有其它任何限制

Gridea(洛谷日报曾介绍过的博客系统)通过MIT开源

BSD

(@BillZhou233补充)BSD 许可证分为 BSD-2 和 BSD-3，前者大概等效于 MIT，后者在前者基础上追加了 不能以源作者的名字宣传你的衍生版本 这项规定，文章中的 BSD 许可证其实是指代的 BSD-3。

  • 保留版权声明
  • 不能以源作者的名字宣传你的衍生版本
  • 没有其它限制

Chromium通过BSD开源

Apache

  • 可以任意演绎、复制、分发等
  • 保留版权声明
  • 二次开发必须写明修改内容

如何使用开源许可证

作为作者

  • 在一级目录下，给出一个LICENSE（或COPYING）文件，里面就是这个许可证的全文。

  • 在所有的源码头部，说明版权，说明许可。

如图

在开源许可证中，用下面的方式写版权是非常好的：版权属于×××\times \times \times和所有贡献者

作为使用者，您应该说明引用了哪些其它开源项目，谷歌的浏览器在这一点是一个典范。

文档共享协议

“醉翁之意不在酒，在乎山水之间也”

喜欢开源软件，喜欢的是开源精神，软件只是一个形式，文档和其它作品也有“开源”的协议。

cc0协议

最大限度地放弃知识产权，就是在法律限度内放弃了所有权利，洛谷首页挂的Blue的博客就是通过这种方式共享的。

(@EnderCrystal补充)但中国大陆法律规定不得放弃著作权，所以在这里CC0是无效的。而这样来看的话，Blue相当于按照CC0放弃了权利，但他却无法放弃责任。

CC协议

CC后面可以加上以下后缀改变授权方式。

  • 姓名标示（BY）：您可以自由复制、散布、展示及演出本作品；您必须按照作者或授权人所指定的方式，保留其姓名标示。
  • 非商业性（NC）：您可以自由复制、散布、展示及演出本作品；您不得为商业目的而使用本作品。
  • 禁止改作（ND）：你可以自由复制、散布、展示及演出本作品；您不得改变、转变或改作本作品。
  • 相同方式分享（SA）：你可以自由复制、散布、展示及演出本作品；若您改变、转变或改作本作品，仅在遵守与本著作相同的授权条款下，您才能散布由本作品产生的衍生作品。

如本文采用CC BY-NC-SA 4.0许可证进行许可。

最后的话

在我们学校的名人墙上，为自己赚钱写程序比尔盖茨，乔布斯昂首挺胸，而不拿钱的，为全人类做出巨大贡献的RMS，Linus Torvalds却不见踪影，这也体现了国内开源文化的短板

很快，明年，或再下一年，Python就要加入初中的课本了。

希望各位一线教师们，在传授Python语法的同时，也能顺便普及一些开源思想，普及一下GitHub这样的开源平台。

虽然美国现行法律不会影响开源软件的出口，但现在大量开源的使用，使我国的技术依然受制于人。

解决的办法，就是发展我们自己的开源平台和开源软件。

开源的愿望很美好，祝福开源的未来会更光明！

参考


原作者: Acfboy
原文链接: https://www.luogu.com.cn/blog/Acfboy/kai-yuan-shi-shi-me-neng-chi-ma-post
原文按照 CC-BY-NC-SA 4.0 协议发布，转载请注明出处。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

现在我们已经学习了网页的很多元素了。那么下一步，我们就要开始做一个真正的网页。

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉

通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 SEO（搜索引擎优化）。

一个典型的网页可能是这样的：

典型的网页

不过大部分网页都有一些不同。比如说百度的搜索李彦宏泼水的结果页面。

百度搜李彦宏泼水

当然要达到这样的效果肯定是需要CSS的。但是我们先写HTML。

首先介绍<div>。这个元素是一个块级元素，像是一个盒子，你可以往里面塞很多各种各样的元素。div里塞div也是可行的。

在HTML5之前，前端工程师们通常使用多个加了id或class的div元素来实现这些内容。然而在HTML5中有很多语义化的标签可以替代这些div：

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。

比如上面那个“典型的网页”，可以这么写（仅body部分内容）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<header>
    <h1>聆听电子天籁之音</h1>
</header>
<nav>
    <ul>
        <li>主页</li>
        <li>作品</li>
        <li>项目</li>
        <li>联系我们</li>
    </ul>
    <div id="search-box">
        <input type="text" name="search" 
        id="search" placeholder="要搜索的内容">
        <button name="search-button">搜索</button>
    </div>
</nav>
<main>
    <article>
        以下省略2147483647字
    </article>
    <!--因为侧边栏在右边，所以aside写article下面。
        如果侧边栏在左边的话应该写在article上面-->
    <aside>
        <h2>相关链接</h2>
        <ul>
            <li><a href="qwertyuiop">言和</a></li>
            <li><a href="asdfghjkl">乐正绫</a></li>
            <!--不想写了，就这么多吧-->
        </ul>
    </aside>
</main>
<footer>
    &copy;2042-2077 ？？？保留所有权利
</footer>

浏览上面的代码，可以看见：

1.HTML的内容确实可以换行写。比如那个input，还有注释都换行了。
2.一般来说，导航栏都使用无序列表实现。别看无序列表似乎和导航栏完全不像，CSS渲染之后就好了。
3.&copy;——还记得实体引用吗？这也是。
4.注意那个id=”search-box”的div。其实拆开来也没什么关系，但是写div里更清楚一点，也方便写CSS。

至于input和button元素，我们以后讲——也许会讲吧。

好了，接下来我们可以真正地制作自己的网页了。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

假设怺假冢穴的段长想要统计某个段的月考成绩，需要用到excel表格。在HTML中，也有表格，不过它并不是用来统计什么的，而是给人看的。

假设我们的GXH先生开发了一款很牛逼的软件卖钱（但是GXH先生肯定不会卖钱，他只会开源），就需要这样一个表格：

GXH浏览器购买方案

这味也太冲了吧！

代码如下。你可以复制到你的浏览器里试一试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table>
    <tr>
        <th colspan="3"><h2>GXH安全浏览器购买方案</h2></td>
    </tr>
    <tr>
        <th><h3>试用版</h3></td>
        <th><h3>高级版</h3></td>
        <th><h3>旗舰版</h3></td>
    </tr>
    <tr>
        <td>￥0</td>
        <td>￥114514（永久）</td>
        <td>￥1919810（永久）</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>✅使用GXH安全大脑新一代浏览器保护技术</li>
                <li>❌启用GXH安全卫士</li>
                <li>❌每天无限使用时间（限时30分钟）</li>
                <li>❌去广告</li>
                <li>❌会员尊享服务</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>✅使用GXH安全大脑新一代浏览器保护技术</li>
                <li>✅启用GXH安全卫士</li>
                <li>✅每天无限使用时间</li>
                <li>❌去广告</li>
                <li>❌会员尊享服务</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>✅使用GXH安全大脑新一代浏览器保护技术</li>
                <li>✅启用GXH安全卫士</li>
                <li>✅每天无限使用时间</li>
                <li>✅去广告</li>
                <li>✅会员尊享服务</li>
            </ul>
        </td>
    </tr>
</table>

然而你打开浏览器一看，却是一副凄惨的景象：

GXH浏览器购买方案

为什么这个表格没有边框？！为什么这个表格没有居中？！
表格在默认情况下就是无边框的，也没有居中。如果需要这样的效果，就得加入CSS。
还记得怎么加入外部CSS文件吗？请将这个链接用导入CSS的方式加入你的HTML中：

1
https://cdn.jsdelivr.net/gh/mdn/learning-area/html/tables/basic/minimal-table.css

如果你忘了的话，答案在下面： 

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdn/learning-area/html/tables/basic/minimal-table.css">

加入到<head>元素内。

好的，这个表格显示正常了。然后我们来逐步学习表格。

用<table></table>包住的内容就是表格内容。表格是有行和列的，我们需要一行行描述，然后描述每一行的单元格。
我们用<tr></tr>描述一行，用<td></td>描述单元格。 

1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <tr>
        <td><h3>试用版</h3></td>
        <td><h3>高级版</h3></td>
        <td><h3>旗舰版</h3></td>
    </tr>
    <tr>
        <td>￥0</td>
        <td>￥114514（永久）</td>
        <td>￥1919810（永久）</td>
    </tr>
</table>

我们先写一下上面这个表格。这个表格就是原先那个表格的前两行，可以看出，table嵌套tr，tr嵌套td。多个tr并列，多个td并列。

首先写一个单元格：

1
<td><h3>试用版</h3></td>

然后，把同一行的其他单元格都加上来：

1
2
3
<td><h3>试用版</h3></td>
<td><h3>高级版</h3></td>
<td><h3>旗舰版</h3></td>

这样一行的内容就完成了，我们把它用tr包起来：

1
2
3
4
5
<tr>
    <td><h3>试用版</h3></td>
    <td><h3>高级版</h3></td>
    <td><h3>旗舰版</h3></td>
</tr>

这样的一行还有很多：

1
2
3
4
5
6
7
8
9
10
<tr>
    <td><h3>试用版</h3></td>
    <td><h3>高级版</h3></td>
    <td><h3>旗舰版</h3></td>
</tr>
<tr>
    <td>￥0</td>
    <td>￥114514（永久）</td>
    <td>￥1919810（永久）</td>
</tr>

最后用table标签包起来就完事了。

按照刚刚的方法完成了下面的表格内容，你还有一个标题。还有一个问题：最上面的大标题。如果你按照同样的方法写，那么它会缩到最左边去。如果看看我的代码，就可以发现，在开始标签里面写一个colspan="3"就可以让这个单元格有三格的宽度。类似的还有rowspan属性，是描述单元格的高度的。
还有一个小小的问题：看我的示例代码，用到了<th>。这是什么？和td有什么区别？其实它也是语义化的内容。th代表标题，td代表下面的内容。这不仅有利于看代码的人理解，也对CSS渲染有好处。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

之前我们学习的时候，利用VSCode的自动补全弄了一段很长的生成的代码，大部分都是<head>里的内容。现在就让我们详细讲讲这里的内容。
虽然这里的东西大部分不会给用户看到，但它们依然是举足轻重的。让我们一行行看下来。

<!DOCTYPE html>：文档类型

（叹气）这玩意吧，其实是历史遗留了，现在反正也没啥用。不过最好加上去就完事了。

<html lang="en">：主语言

这句话的意思是设置主语言为英文。你可以把它改成<html lang="zh-CN">，这样就是简体中文了。
这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。浏览器能更好地识别网页的语言，也就能更好地为用户提供机翻。

你还可以将文档的分段设置为不同的语言，使用的是<span>元素。例如，我们可以把日语部分设置为日语，如下所示： 

1
<p>日语实例: <span lang="jp">ご飯が熱い。</span></p>

<meta>：元数据

元数据就是描述数据的数据。<meta>就可以用来添加元数据。

<meta charset="UTF-8">：指定字符集

之前我们的基础教程里讲了编码，也就是现在说的字符集。UTF-8是现在做网页最常用的字符集（最好不要用别的）。这句话的意思就是指定字符集。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

（叹气）众所周知IE是垃圾浏览器，这句话就是为了给IE垃圾浏览器做兼容用的。反正是生成的，别动它，留着就完事了。

<meta name="xxx" content="xxx">

许多<meta> 元素包含了name 和 content 特性：
name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。
比如下面的一个例子指定了作者：

1
<meta name="author" content="GCVillager">

还有一个例子，可以认为是对页面的简要描述：

1
2
3
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

你还可以定义各种各样的元数据。
如果你学过一门编程语言的话，就会觉得，这有点像是author="GCVillager"之类的表达式。（这句话看不懂就算了）。
指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多。（内卷！）

<title>：标题

这个标题是浏览器的标签页上的那个标题，不是用<h1>写的标题。如图所示：
title和h1

它的<head>元素里面，就有这样一句话：<title>入门CSS | 永嘉中学-博客</title>。收藏页面的时候，默认的标题也是<title>里的内容。

然后现在我们看一下，比如说在Google上搜MDN的时候，就会出现<title>里的内容（蓝色方框），还有名称为discrption的元数据的内容（红色方框）。或者你在QQ里分享的时候也会差不多。所以写这些是值得的。

搜索引擎显示

除了VSCode自动生成的那些东西，还有一些别的。请看——

添加自定义图标

从标签页上面就可以看到，到目前为止，你的网页还没有图标。这未免有些丑。
示例如下： 

1
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

rel属性向浏览器说明文件的类型，方便它处理；href属性指向一个链接（和<a>元素很像），这里是你的图标的链接，可以是任意链接（相对或者绝对路径）。
至于这个文件格式，ico就是图标用的格式。其实你可以用别的格式，比如最常用的png，但是在某些年代久远的IE浏览器上，png格式的图标不一定能显示。
如果要使用png格式的图标，就可以像这样做：

1
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

另外，收藏夹里看到的图标也是这里指定的图标。

应用CSS

虽然我觉得GXH的教程里大概会讲，但是为了避免他说我没讲，要骂我，再加上后面要用到，还是要讲一下。 

1
<link rel="stylesheet" href="my-css-file.css">

注意：这一句依然要写在head里。 同理，rel="stylesheet就是说文件类型，href写的还是文件链接。用它引入CSS之后，页面就能根据CSS的要求渲染了。比如说我们上次写的那句：

1
<p>这是一段<span class="red">奇怪</span>的文字，<span class="hide">这里你是看不见的</span></p>

加上了对应的CSS之后，就能正确显示了。
点击这个链接下载CSS文件，将它与你要写的HTML放在同一个文件夹里。然后用link语句链接进来。至于应该怎么写，你自己想想——其实模仿着写就对了。
然后再把那段HTML代码复制进去，就可以看到上次那张图片里的样子了。

应用Javascript

也是写在head里。这样引入一段写在外部文件里的脚本：

1
<script src="my-js-file.js"></script>

这里的src是source的缩写，和href其实有点像。注意，<script>并不是空元素，所以要有闭合标签。
还有一种方式引入Javascript，就是直接写在里面：

1
2
3
4
5
6
7
<script>
    function boring() {
        let i=1;
        return i+1;
    }
}
</script>

刚刚写在里面的就是一段Javascript代码。（至于JS代码怎么写，就是以后的事情了）

GCV写累了，表格我们下次再说。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

列表

现在假设我要列出Mojang Studios的几个员工，就像下面这样，该怎么做呢？

  • Jens ‘Jeb’ Bergensten
  • Nathan ‘Dinnerbone’ Adams
  • Mikael ‘Slicedlime’ Hedberg

代码如下，如果你要写自己的列表可以照着这个写。列表里内容数量不限，只需要再加入<li></li>即可。

1
2
3
4
5
<ul>
    <li>Jens 'Jeb' Bergensten</li>
    <li>Nathan 'Dinnerbone' Adams</li>
    <li>Mikael 'Slicedlime' Hedberg</li>
</ul>

这是无序（unordered）列表。还有有序（ordered）列表：

噼哩噼哩番剧排行（某年某月某日记录的）

  1. 关于我转生变成史莱姆这档事 第二季
  2. 死神少爷与黑女仆
  3. 精灵幻想记
  4. 转生成为了只有乙女游戏破灭Flag的邪恶大小姐 第二季
  5. 侦探已死

代码其实就是把<ul>改成<ol>：

1
2
3
4
5
6
7
8
<p>噼哩噼哩番剧排行（某年某月某日记录的）</p>
<ol>
    <li>关于我转生变成史莱姆这档事 第二季</li>
    <li>死神少爷与黑女仆</li>
    <li>精灵幻想记</li>
    <li>转生成为了只有乙女游戏破灭Flag的邪恶大小姐 第二季</li>
    <li>侦探已死</li>
</ol>

有时候我们还会需要嵌套列表：

Mojang Studios

  • 臭写代码的 
     1. Jens 'Jeb' Bergensten  
 2. Nathan 'Dinnerbone' Adams
  • 画画的 
     1. Markus 'Junkboy' Toivonen  
 2. Ninni Landin

代码也一样，像这里的话，就是让两个无序列表成为有序列表的一个<li>元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p>Mojang Studios</p>
<ul>
    <li>
        <p>臭写代码的</p>  
        <ol>
            <li>Jens 'Jeb' Bergensten</li>  
            <li>Nathan 'Dinnerbone' Adams</li>
        </ol>
    </li>
    <li>
        <p>画抽象画的</p>  
        <ol>
            <li>Markus 'Junkboy' Toivonen</li>  
            <li>Ninni Landin</li>
        <ol>
    </li>
</ul>

如果你觉得看不懂的话，可以这么理解：把这一段：

1
2
3
4
5
6
<p>臭写代码的</p>  
    <ol>
        <li>Jens 'Jeb' Bergensten</li>  
        <li>Nathan 'Dinnerbone' Adams</li>
    </ol>
<p>

看成一个这是某一段文本的话，就和一个无序列表一样了。

再谈属性

灯只有“开”和“关”两个状态（谁要是跟我说“为什么没有‘坏’这个状态”，我直接把他宰了），如果把“开”当成True，“关”当成False，那么只有True和False的东西，我们称之为布尔变量。HTML中的属性也有布尔属性。比如说HTML中的输入框<input>，我们可以用这样的代码让他不能输入：

1
<input type="text" disabled>

也就是说，有的属性可以不需要打="xxxx"这一串，这些属性就是布尔属性。它相当于一个开关，比如说这里就是把“disable”这个开关打开。

还有的属性是用来辨识当前元素的。假如我开了一个网络小说网站，现在有一大堆<p>元素，其中有的是写的文章的自然段，有的是网站的一些其他文本。现在我要给所有网文自然段加上好看的Noto Sans CJK字体（当然这需要CSS），怎么让浏览器知道哪些文本应该改字体，哪些文本不需要呢？
我们给这些<p>元素标记一下，有的标记成“自然段”，有的不标记，浏览器就知道标记了的<p>元素需要改字体。这里就要用到HTML的一个属性——class。class就是“类”的意思。HTML的每种元素都可以带class属性。回到我们之前说的<p>元素： 

1
<p class="paragraph">了解清楚计算机社是全学校最垃圾的社团到底是一种怎么样的存在，是解决一切问题的关键。 可是……</p>

注：上述文本由已经通过图灵测试的狗屁不通文章生成器生成。
还有，我并没有说class的属性一定要写paragraph，或者什么属性写成paragraph就会有好看的字体之类的。class属性的值是随你写的，至于有这个属性的元素到底会产生什么变化，也是你写的CSS决定的。

一个元素还可以有多个类：

1
<p class="paragraph book article">一段文字</p>

上面的<p>元素就有paragraph、book和article三个类。在CSS里写了每个类对应的样式之后，这段文本就会同时渲染这三种样式。（如果你问冲突了怎么办的话，请看CSS篇）

还有一个和这个很像的属性，它也是任何元素都可以用的，用来找到某个特定的元素。它就是id。在同一个HTML里，id的属性值必须是唯一的。假如你写了CSS，说id="title"的元素要加大字号，那么这个唯一的元素显示的样子就会改变。id还有一个用途，就是页面内跳转。（还是狗屁不通文章生成器，嘿嘿） 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1>《996的自我修养》</h1>

<h2>第一章：什么是996？</h2>

<p>点击<a href="#charpter2">链接</a>直接跳到第二章</p>

<p>996的自我修养因何而发生？ 这样看来， 带着这些问题，我们来审视一下996的自我修养。 俾斯麦说过一句富有哲理的话，失败是坚忍的最后考验。我希望诸位也能好好地体会这句话。 问题的关键究竟为何？ 笛卡儿曾经提到过，读一切好书，就是和许多高尚的人谈话。这句话语虽然很短，但令我浮想联翩。 生活中，若996的自我修养出现了，我们就不得不考虑它出现了的事实。 带着这些问题，我们来审视一下996的自我修养。</p>

<p>拉罗什福科曾经说过，我们唯一不会改正的缺点是软弱。这句话语虽然很短，但令我浮想联翩。 希腊曾经提到过，最困难的事情就是认识自己。这似乎解答了我的疑惑。 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 996的自我修养，到底应该如何实现。 带着这些问题，我们来审视一下996的自我修养。 就我个人来说，996的自我修养对我的意义，不能不说非常重大。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。</p>

<p>一般来说， 别林斯基曾经说过，好的书籍是最贵重的珍宝。带着这句话，我们还要更加慎重的审视这个问题： 带着这些问题，我们来审视一下996的自我修养。 经过上述讨论， 一般来讲，我们都必须务必慎重的考虑考虑。 这样看来， 带着这些问题，我们来审视一下996的自我修养。 一般来讲，我们都必须务必慎重的考虑考虑。 996的自我修养，发生了会如何，不发生又会如何。 既然如何， 这样看来， 一般来说， 那么， 现在，解决996的自我修养的问题，是非常非常重要的。 所以， 总结的来说， 996的自我修养的发生，到底需要如何做到，不996的自我修养的发生，又会如何产生。 吉姆·罗恩曾经提到过，要么你主宰生活，要么你被生活主宰。带着这句话，我们还要更加慎重的审视这个问题： 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。 996的自我修养因何而发生？ 就我个人来说，996的自我修养对我的意义，不能不说非常重大。 996的自我修养，发生了会如何，不发生又会如何。 俾斯麦说过一句富有哲理的话，对于不屈不挠的人来说，没有失败这回事。这启发了我， 克劳斯·莫瑟爵士说过一句富有哲理的话，教育需要花费钱，而无知也是一样。这启发了我， 莎士比亚在不经意间这样说过，抛弃时间的人，时间也抛弃他。带着这句话，我们还要更加慎重的审视这个问题： 经过上述讨论， 所谓996的自我修养，关键是996的自我修养需要如何写。 这样看来。</p>

<h2 id="#charpter2">第二章：如何开始996</h2>

<p>如果要996，你首先需要一个科技公司。取个名字，什么白渡、滕迅、啊狸叭叭都可以。</p>

<p>点击<a href="#charpter2">链接</a>直接跳到第二章</p>这一句的“链接”两字会被加上超链接，点击它，文本会直接跳转到第二章。你可以自己试试。（可能由于第二章标题已经出现在了视野中，你是看不到“跳转”的，那样的话就多加点废话进去）

空白

1
2
3
<h1> 《 好 兄 弟 》 </h1>
<h1> 《       好      兄
     弟      》 </h1>

上面这两段HTML显示起来是一样的，都是：

《 好 兄 弟 》

无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，渲染的时候，连续出现的空白符（包括回车）都会变成一个空格。没错，不管是带文本的元素之外，还是带文本的元素之内，都一样。

那么为什么我们会在HTML元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚做一团的混乱.。在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。
——GCV Ctrl+C Ctrl+V 自 MDN

实体引用

那我偏要打很多空格怎么办？
也是可以解决的。如果你打了一个&nbsp，在解释的时候，就会变成空格。比如说这样一段：

1
<p>啊&nbsp&nbsp&nbsp这</p>

它显示的时候就会有三个空格。
同样还有别的问题，比如说，如果要打一个尖括号呢？如果直接打，是会被当成标签的。
&lt就是左尖括号（小于号），&gt就是右尖括号（大于号）。比如说这个，前一句是错的，后一句就可以显示正确的样子：

1
2
<p>HTML 中用 <p> 来定义段落元素。</p>           错的！
<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>       对的！

上面这种用一串奇奇怪怪的东西代替一个字符的方式叫实体引用。这里有一个表格：

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

注释

如果你写了一段超级长的HTML，n年后维护的时候，你很有可能发现不知道你写了什么。因此，你当初需要写注释，来避免这种情况的发生。或者，你写了HTML给别人看，他看不懂你写了什么LJ玩意。这也需要你写注释。
浏览器不会渲染注释的内容，用户也看不到它，只有看源码的人才能看到。
把一段东西变成注释，只需要用<!--和-->把东西包起来。下面这段代码，由于第一句在注释外，第二句和第三句在注释内，所以只会显示“我在注释外！”。

1
2
3
<p>我在注释外！</p>
<!-- 我在注释内！ -->
<!-- <p>我也在注释内！</p> -->

音视频

要是你可怜的网页没有音视频，大概很多人都会不感兴趣。所以，来学习嵌入音视频吧。

视频

由于GCVillager是_________，所以这里还是放一个__________的视频。 

1
2
3
4
<video controls>
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4" type="video/mp4">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4">此链接</a>观看</p>
</video>

正常显示起来大概是这样，一个简易的播放器：

视频播放器

解释一下：controls是video元素的一个属性（还是布尔属性），选了之后会多出来一个栏，让用户可以拉进度条啊，调音量之类的。source就是字面意思，src里面就是视频的链接，type属性向浏览器说明了视频的格式。由于video元素是HTML5加的，如果别人在用IE之类的垃圾浏览器，可能看不了你的视频。这时候，剩下的内容叫后备内容，写了它，可以让那些用户至少还能把视频下过来看（记得提醒他们换浏览器）。
假如你做了一个视频网站，有时候，可能你的某个小服务器维护啊之类的；或者因为mp4是有版权费的，有的浏览器买不起就不支持mp4，这时候就需要其他的视频源。

1
2
3
4
5
<video controls>
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4" type="video/mp4">
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-video.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4">此链接</a>观看</p>
</video>

这样就有两个视频源了，如果第一个不行就默认第二个。你还可以写第三个第四个第五个第六个第七个第八个第九个第十个，只需要照着样子加在后面。

其他视频属性

1
2
3
4
5
6
<video controls width="400" height="400"
       autoplay loop muted preload="auto"
       poster="poster.png">
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4" type="video/mp4">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="https://yjzx-site.github.io/img/club-file/scissor-seven-video.mp4">此链接</a>观看</p>
</video>

width和height：和图片差不多，就是限定大小。方便嵌入到页面的某个部分，不打乱排版。
autoplay：打开页面就自动播放。（当然可能会被浏览器阻止）
loop：循环播放，就是放完再放。
muted：默认静音。当然用户可以自己把声音打开（如果你加了controls控制条的话）
poster：指向一张图片的链接，在视频播放前显示，可以做预览或者广告。不过在本例中，由于自动播放的存在，大概是看不到那张图片了。
preload：可以用来缓存较大的文件。这个属性有三个选项：none不缓冲，auto页面加载后缓存媒体文件，metadata只缓存媒体文件的元数据。

综合运用一下，假设我们要在网页靠上方的地方嵌入一个长条广告，人总是要恰饭的嘛。 

1
2
3
4
5
<video width="800" height="100"
       autoplay loop muted preload="auto">
  <source src="ad.mp4" type="video/mp4">
  <p>广告加载失败。</p>
</video>

广告可以控制进度可能就不像广告了，所以删掉controls来删掉控制条。为了逼别人看，而且他浏览这个网页的时候让他一直能看到，就开autoplay和loop。广告有声音太吵了给人骂，所以静音（您做广告的时候不加声音不就好了吗？）。缓存的话……在这个例子里加和不加也没什么区别，因为自动播放了嘛，本来就是加载好就开始播放的。

音频

音频和视频差不多。如下：

由于_________，所以__________。（不会还有人不会填这句话吧？） 

1
2
3
4
5
<audio controls>
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-music.mp3" type="audio/mp3">
  <source src="https://yjzx-site.github.io/img/club-file/scissor-seven-music.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="https://yjzx-site.github.io/img/club-file/scissor-seven-music.mp3">此链接</a>收听。</p>
</audio>

效果如图：

音频播放器

不过有一点差异：没有width和height，也没有poster，原因很简单吧，音频又不能看。

span元素

现在先假设一下，有一个CSS，它可以让你所有带red类的文本变成红色，而且让所有带hide类的文本背景变成黑色（这样黑色文字就躲在阴影里看不见了）。现在我们要有这样的效果：

span使用

如果直接给<p>上class，那么整个句子都会被渲染，那可不行。正确做法就是使用span。如下： 

1
<p>这是一段<span class="red">奇怪</span>的文字，<span class="hide">这里你是看不见的</span></p>

当然你自己写HTML的时候是不会显示成图片里那样子的啦，毕竟你没加CSS嘛……以后再讲。

发表于 更新于 分类于 ， ， ，

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:

上回说到，我们新建了一个HTML文件并补全了一个基本框架。今天我们就要了解往<body>里塞点什么东西。

段落元素：<p>

1
2
3
4
<p>
    <p>百度公司已于2021年2月31日倒闭</p>
    <p>如果持续亏损，腾讯将于2022年2月30日宣布破产</p>
</p>

显示效果：

百度公司已于2021年2月31日倒闭
如果持续亏损，腾讯将于2022年2月30日宣布破产

可以看出，<p>元素可以嵌套。它表示段落的开始，所以说如果你要写一篇小说，每一个自然段都可以用它括起来。
另外，第二行和第三行前面似乎有缩进。这并不是必须的，但是我们依然建议打。它可以直观地表明里面的两组<p></p>元素属于外层。这样就能方便阅读代码。打缩进的方式就是按键盘的Tab键。
比如说我们的yjzx-site的一个页面，像这样的缩进就是比较美观的。
缩进范例

行内元素和块级元素

我们看看这两组语句：

1
<p>AMD YES!</p> <p>NVIDIA NO!</p>
1
2
<p>AMD YES!</p>
<p>NVIDIA NO!</p>

显示结果是一样的，都是：

AMD YES!
NVIDIA NO!

下面这两组的显示效果也是一样的：

1
<strong>LINUX YES!</strong> <strong>WINDOWS NO!</strong>
1
2
<strong>LINUX YES!</strong>
<strong>WINDOWS NO!</strong>

它们显示起来都是：

LINUX YES!WINDOWS NO!

首先需要说明一点，可以看出，HTML显示的时候是否换行，不是根据你的文件里是否有换行决定的。那么为什么写<p>元素的时候，两段之间会有换行，写<strong>元素的时候就没有呢？
<p>元素是块级元素，自成一块，所以会换行；而<strong>元素是内联元素（行内元素），不换行。块级元素内能包含文本、块级元素和内联元素，而内联元素里只能有文本或者内联元素。
比如这样的一句，因为<strong>是内联元素，<p>是块级元素，虽然它能渲染出你想要的样子（给里面的东西加强调），但是这是浏览器绞尽脑汁才理解出来的，这不太好。这样的写法是错误的。

1
2
3
4
<strong>                   BAD!!!
    <p>你对得起我们吗！</p>
    <p>RNM，退钱！</p>
</strong>

常见的内联元素有：

1
<span>、<a>、<img>、<input>、<textarea>、<select>、<label>、<br>、<b>、<strong>、<sup> 、<sub>、<i>、<em>、<del>、<u>

常见的块级元素有：

1
<div>、<table>、<form>、<p>、<ul>、<h1>-<h6>、<hr>、<pre>、<address>、<blockquote>

<hr>分割线与<br>换行

之前我们讲了<hr>元素是一个空元素，作用是形成分割线。而<br>元素也是空元素，它能形成换行。
举个例子：

1
<p>我不知道！<br>我真的不知道！</p>

效果就是：

我不知道！
我真的不知道！

当你认为在当前语境下需要换行，又不应该开一个新段落的时候，就可以使用<br>。

斜体、粗体和语义

之前我们说到，<strong>元素表示文本重要性，会让文本加粗。但是HTML里还有一个<b>元素，也能让文本加粗。还有：<em>让文本变成斜体，<i>也让文本斜体，还有一个<cite>也让文本变成斜体。那么为什么会有多个效果一样的标签呢？
在HTML的早期，只有<i>和<b>。然而在HTML后面的标准里加入了<strong>和<em>等。这强调的一点就是“语义”。

对于<em>、<cite>和<i>，默认情况下，它们的视觉效果是一样的。但语义是不同的。 <em> 标签表示其内容的着重强调，而 <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <cite>。）
这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是CSS样式所做的。
一个 <em> 的例子可能是：”Just do it already!”，或：”We had to do something about it”。人或软件在阅读文本时，会对斜体字的发音使用重读强调。
一个 <i> 的例子可能是：”The Queen Mary sailed last night”。在这里，没有对 “Queen Mary” 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是：”The word the is an article”。

另外，“em”是“emphasis”（强调）的缩写。

同理，<strong>表示文本的重要性；而<b>只是加粗。

strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。 因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。
同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。

上面引用的那一段看不懂就算了。总之：如果斜体是有强调意义的，应该使用<em>；如果为表示作品的标题而斜体，应该使用<cite>；如果既不是作品也不是强调，才应该用<i>。同样：如果加粗是说明重要性的，应该使用<strong>；如果情况不适合用<strong>（即没有重要性的含义），再使用<b>。

那么<em>和<strong>又有什么区别呢？

在 HTML4 时， Strong 简单地表示一个更强的强调(emphasis)，而在HTML5中，这个元素被描述为表征“内容强烈的重要性(strong importance for its contents) ”。这是一个重要的区别。Em标签(Emphasis)用于改变一个句子的意思(比如”我<em>喜欢</em>胡萝卜” 和”我喜欢<em>胡萝卜</em>”，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 “警告! 这非常危险。”) Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。

看不懂就算了，我也不想看懂。

可是为什么要区别这些元素呢？其一，使用CSS渲染后，它可能会有不同的显示效果（是否不同取决于CSS写了什么）；对于搜索引擎和浏览器，明确的语义可以更好地组织数据；对于使用屏幕阅读器（一种朗读网页的程序）的视障患者，屏幕阅读器能更好地处理重读，让他们更好地理解网页。
HTML5尤其注重语义，我们之后会学习很多语义化的元素，许多都是HTML5新加的。

标题

Markdown有6级标题，HTML也一样。使用方法是<h1>~`

`包围标题内容。上示例： 

1
2
3
4
5
6
<h1>我是一个教程</h1>
    <h2>我是第一个副标题</h2>
        <p>教程的第一段</p>
    <h2>我也是副标题</h2>
        <p>教程的第二段</p>
        <p>教程的第三段</p>

显示效果：

我是一个教程

我是第一个副标题

教程的第一段

我也是副标题

教程的第二段
教程的第三段

其他的也没什么好讲的。但是请注意：<h1>~`

`的元素也是有语义的，它就表示标题，不能是别的。如果单纯为了增大字号而使用标题元素，是完全错误的。比如这样子，就是错误的：

1
2
3
4
5
<p>华强：你这瓜保熟吗？</p>
<p>老板：我开水果摊的，能卖给你生瓜蛋子？</p>
<p>华强：我问你这瓜保熟吗？</p>
<h2>老板：你是故意找茬，是不是？你要不要吧！</h2>         BAD!!!
<p>华强：你这瓜要是熟我肯定要啊</p>

虽然老板的话被放大了（也许这是你想要的），但是它不符合语义。搜索引擎可能会把它当做小标题，显示在搜索页上，忽略掉前后的部分，于是你的网站在搜索引擎上的预览会变得很奇怪。如果要改字号，请使用我们后面讲的CSS。

图像元素：<img>

之前讲过，<img>元素可以显示一张图片。现在好好讲一讲它。 

1
<img src="https://yjzx-site.github.io/img/club-file/scissor-seven-picture.jpg" alt="一张伍六七的图片" width="960px" height="540px">

由于GCVillager是__________，所以这里还是放那张__________。
首先回顾一下，src、alt等都是属性，用空格分隔。属性值最好用引号括起来，否则可能出错（单双引号都可以，但是前后必须一致。比如说，alt="一张伍六七的图片'就是错误的，浏览器可能无法理解。）接着我们来了解一下各个属性。

src

src是source的缩写，很好理解，就是图片的链接。链接可以是相对路径，也可以是绝对路径。举个例子，“我们机房隔壁是广播室”，这就是相对路径；而“广播室在浙江省永嘉县永嘉中学图书馆4楼四零几室”就是绝对路径。
比如说，假设scissor-seven-picture.jpg和你的HTML在同一个路径下（也就是同一个文件夹内），你的src就可以直接写scissor-seven-picture.jpg。
那要是这个文件在一个叫img的文件夹内，而img和你的网页同目录（文件夹）（如下图）呢？

1
2
3
4
--html（文件夹）  
    --index.html  
    --img（文件夹）  
        --scissor-seven-picture.jpg

那就输入img/scissor-seven-picture.jpg。
上面这两个就属于相对路径表示法。而像https://yjzx-site.github.io/img/club-file/scissor-seven-picture.jpg这样的路径就是绝对路径。可以这么说：最前面写了https:// 和域名的就是绝对路径，如果没有写，那就是相对路径。
在相对路径表示法里，还有.和..。.代表当前路径，所以./a.png和a.png代表的是同一个东西。..代表上层目录，比如说你的某个文件是https://amdyes.net/docs/index.html，同路径下有一个a.png，那么对index.html来说，a.png和../docs/a.png是同一个文件。
使用怎样的表示法，看具体情况。比如你的网站结构里，这些东西可能就是在同一个路径下的，那使用相对路径会比较方便，而且如果你换了自己网站的域名，也不容易出现图片无法显示的问题（比如说，你的网站叫yjzx.club，后来换成了yjzx.com，因为你的图片链接原先是https://yjzx.club/a.png，就会出现找不到图片的情况；但是相对路径就不会）；如果你的图片在别的网站上，那就必须用绝对路径。

alt

如果因为图片炸了，或者是视障人员，就需要使用alt属性。如果写了alt="一张伍六七的图片"，并且图片炸了（比如说我们倒闭了），就会显示alt里的内容，而如果能够显示图片，就不会显示alt的内容。但是使用屏幕阅读器的人可能需要听alt里的内容。
图片加载不出来就会这样：

一张伍六七的图片

为了让人在看不见图片的情况下就能了解内容，应该讲内容写成描述性文本。比如说，其实这里不应该写“一张伍六七的图片”，最好写成“伍六七和梅花十三坐在庙里”。

width height

width="960px" height="540px"的意思就是讲图片的宽度定为960像素（pixel），高度定为540像素。
像素是什么？假设有一张画，你将它分割成很多个很小的格子，然后用一种颜色概括一个格子；在另一张一样的纸上画一样的网格，把刚刚用来概括的颜色填到相应的格子里，稍微远一点的地方看，两张画理论上是差不多的。这种小格子就是像素。1像素是边长0.04cm的正方形小格子，图片分辨率是1920*1080，意思就是有1920乘1080个像素。分辨率越高，图片越清晰。
浏览器显示的时候，会按照图片分辨率显示。有时候，图片可能对你的要求来说太大了，或者太小了，或者你想要把图片压扁，就可以使用witdh和height。

链接元素：<a>

<a>元素就是链接元素。它可以添加一个超链接。“a”是“anchor”（锚）的缩写。下面是<a>元素的模板： 

1
<a href="某个网址">一些文本</a>

比如说我想要在某个页面中链接到我们的博客，显示如下的效果（超链接可点）：

欢迎访问我们的博客以获取更多信息。

就应该这么写：

1
<p>欢迎访问<a href="https://yjzxclub.github.io">我们的博客</a>以获取更多的信息。</p>

另外，href是超文本引用（ hypertext reference）的缩写。