HTML/ CSS 入门

前言

我们在之前的学习中，对于网络有了一定的了解。现在我们来学习一些基础的 HTML/ CSS 知识。希望阅读完这篇文章能达到编写简单页面的程度。

目录：

1. HTML/ CSS 的发明；
2. HTML 基础；
3. CSS 基础；
4. 页面是如何渲染的；

Part 1. HTML/ CSS 的发明

1989 年 3 月，互联网还只属于少数人。

同年，蒂姆·伯纳斯·李（Tim Berners-Lee）提出了一种能让远隔两地的研究者们共享知识的设想。

这一想法的实践促使了万维网的诞生。它基于现有的 TCP/IP 协议构建，包括 4 个部分：

• 一种表示超文本文档的文本格式，即超文本标记语言（HTML）；
• 一种用于交换这些文档的简单协议，即 HyperText 传输协议（HTTP）；
• 一个客户端可以显示这些文档，第一个 Web 浏览器称为 WorldWideWeb。
• 一个可以访问文档的服务器；

这四部分在 1990 年底完成。虽然此时 Web 页面只能显示单纯的文本内容，浏览器也只能显示呆板的文字信息，不过这已经基本满足了建立 Web 站点的初衷，实现了信息资源共享。

从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。

随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于是 CSS 便诞生了。

1995 年 www 网络会议上 CSS 被提出。同年，W3C 组织成立，层叠样式表的开发就此走上正轨。

HTML 负责网页内容，CSS 负责内容的基本样式。

Part 2. HTML 基础

什么是 HTML

HTML 是 Hper Text Markup Language 的简称，即超文本标记语言。它就像我们熟知的 Word 一样，只不过它适用于 Web。

HTML 同 Word 一样提供了标题、段落、列表、表格、图像、粗体、斜体等文本来构建文档。关键区别在于 Word 中的格式文本是可视的，而 HTML 代码纯粹是语义的。

HTML 基础

像任何语言一样，HTML 带有一组规则。这些规则相对简单，就是要界定界限——知道从哪里开始，从哪里结束。

例如，HTML 表示的段落将被写为：

说明：

• 一对尖括号 （</ >）中间的就是 HTML 标签。
• 不同的标签有不同的含义。这里的 p 代表了一个段落的意思；
• HTML 标签通常成对出现，开始标签（opening tag）<p>定义了段落的开始，结束标签（closing tag）</p>定义了结束；
• 开始和结束标签之间唯一的区别就是标签名称前的斜杠 /；
• 当您把开始标签和结束标签以及两者之间所有内容组合在一起时，就获得了一个 HTML 元素；
• 标签（尖括号内的内容都）不会被显示，仅仅用于区分内容的语义并提供一些默认的样式；

在哪里写 HTML？

就像我们熟知的 .txt 文本文件一样， HTML 文档（后缀为 .html）也可以使用任意文本编辑器打开。

打开您的任一文本编辑器，然后复制并粘贴以下内容：

<p>这是我的第一个网页</p>

将文件另存为 my-first-webpage.html ，然后使用浏览器将其打开，您就会看到：

但实际上，我们一般会选择更加专业的软件：

属性

属性就像绑定到 HTML 元素的额外信息一样。它们写在 HTML 标签内，所以，浏览器也不会显示它们。

例如，href 属性就是用来定义 a 标签跳转目标链接的属性：

<a href="https://www.wmyskxz.com/">点击会跳转到我的主页</a>

有 16 个 HTML 属性可用于任何 HTML 元素，所有这些都是可选的。

我们最常用的就是 class 属性（用于 CSS）。

一些 HTML 元素具有强制属性。例如，插入图片时，必须使用 src （source）属性来提供图像的位置：

<img src="#" alt="Description of the image">

考虑到 <img> 标签的意义，强制性的要求设置显示图像的路径，是有意义的。

注释

如果你有一些不想显示但是又想提醒代码阅读者的一些事情，通常可以添加注释。

HTML 注释以 <!-- 开始，以 --> 结束。如下所示：

<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

您还可以注释掉部分 HTML 代码来进行调试，如下所示：

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->

自封闭元素

一些 HTML 元素只有一个开始标签：

<br>	<!-- 换行标签 -->
<img src="#" alt="Description">	<!-- 图像标签 -->
<input type="text">	<!-- 文字输入标签 -->

因为它们没有结束标签，因此内部不能包含任何内容。所以自封闭元素通常带有一些属性，以便为它们提供附加信息。

HTML 块和内联

在 HTML 中，您主要会遇到两种类型的 HTML 元素：

块元素用于通过将内容划分为连贯的块来构造页面的主要部分。

<p>这是第一段内容</p>
<p>这是第二段内容</p>

内联元素旨在区分文本的一部分，以赋予其特定的功能或含义。内联元素通常包含一个或几个单词。

<p>如果感兴趣，可以点击<a href="https://www.wmyskxz.com">这里</a>来访问我的主页</p>

开始和结束标签

所有块级元素都有一个开始和结束标签。

所以，自封闭元素都是内联元素，仅仅是因为它们的语法不允许它们包含任何其他 HTML 元素。

HTML 层次结构

HTML 文档就像一棵大的家族树，上面有父母、兄弟姐妹、孩子、祖先和后代等。

这源于 HTML 元素具有相互嵌套的功能。

嵌套

让我们编写一个简单的段落，并通过插入两个内联元素来区分文本各个部分来对其进行增强：

<p>
  <strong>培根</strong>曾经说过：<q>合理安排时间，就等于节约时间</q>。