HTML & CSS 系列--第一篇：概述

HTML & CSS 到底是什么？有什么用？

HTML 和 CSS 是两门语言。 语言是什么呢？语言是沟通的工具 人与人之间沟通的语言：自然语言 人与计算机之间沟通的语言：计算机语言。可以理解为，人通过计算机语言与计算机进行“沟通”，并通过一些指令或者任务，让计算机完成人想要计算机完成的事情。 HTML: Hyper Text Markup Language 超文本标记语言。可以简单的理解为：定义网页中有什么 CSS: Cascading Style Sheets 层叠样式表。可以简单的理解为：定义网页中的东西长什么样子 目前，可以广义的理解为：HTML + CSS + JavaScript = 网页。即 HTML，CSS，JavaScript是开发网页的三大基础语言。

一些需要了解的标准术语

web

web是什么？ web可以称为万维网，下面是对万维网的简单介绍，也可以称之为是对web的简单介绍： 万维网（英语：World Wide Web）亦作WWW、Web、全球广域网，是一个透过互联网访问的，由许多互相链接的超文本组成的信息系统。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。 万维网是信息时代发展的核心，也是数十亿人在互联网上进行交互和浏览器的主要工具。网页主要是文本文件格式化和超文本置标语言（HTML）。除了格式化文字之外，网页还可能包含图片、视频、声音和软件组件，这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。

注意⚠️： 万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。 如果想对互联网做进一步了解，可以通过以下链接查看：https://zh.m.wikipedia.org/wiki/%E4%BA%92%E8%81%94%E7%BD%91

w3c

万维网联盟，一个非营利性组织，是万维网的主要国际标准组织，为半自治非政府组织

扩展： w3c官网：https://www.w3.org/

XML

可扩展的标记语言：extension markup language，用于定义文档结构的。

什么是HTML

HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言。 HTML：Hyper Text Markup Language，超文本标记语言。 书写一个一级标题：

<h1>这是一个1级标题</h1>

扩展： HTML 参考官方文档：https://html.spec.whatwg.org/multipage/（全英版） 推荐MDN的官方文档，可以选择中文语言：https://developer.mozilla.org/zh-CN/docs/Web/HTML

什么是CSS

CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言。 简单点来说，CSS决定了页面长什么样子。

CSS 参考官方文档：https://www.w3.org/TR/css-2021/（全英版本-最新版） 推荐MDN的官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS

浏览器执行HTML、CSS

HTML、CSS -> 浏览器内核 -> 页面

浏览器的组成：

1. shell: 外壳
2. core: 内核（js执行引擎、渲染引擎）

市场上主流的浏览器及其内核：

IE: Trident（IE已经被微软宣布不在支持——2022年6月15日，微软宣布不再支持Internet Explorer） Firfox: Gecko Chrome: Webkit / Blink Safari: Webkit Opera: Presto / Blink

版本和兼容性：

HTML5、CSS3 HTML5：2014年 CSS3：目前还没有制定完成（CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展——CSS3发展过程报告）。 XHTML：可以认为是HTML的一种一个版本，完全符合XML的规范。

推荐使用开发工具和记录笔记工具

编辑器

1. Visual Studio Code(vs code): https://code.visualstudio.com/，微软出品的通用编辑器，支持大量插件扩展，支持自定义化等等（推荐）
2. WebStorm: https://www.jetbrains.com/zh-cn/webstorm/, jetbrains出品，很好用但略显笨重
3. Sublime: https://www.sublimetext.com/，曾经的前端开发主流工具，现在仍有大量开发人员使用，好用而且极其轻量

浏览器

1. Google Chrome: https://www.google.com/chrome/, Google出品的浏览器，对前端开发者有极其友好的调试工具，而且完全支持W3C标准。（推荐）
2. Edge：https://www.microsoft.com/en-us/edge?form=MA13FJ，微软出品的浏览器
3. ......

记录笔记工具（文档编写器）

1. typora: https://typora.io/，支持markdown语法，而且轻量好用，页面美观等（推荐）
2. 语雀: https://www.yuque.com/，支持markdown语法，支持知识库设置等（推荐）

扩展：

MDN：Mozilla Development Network，Mozilla开发者社区。 MDN里面的文档基本都是直接从W3C的官方文档翻译过来的，对应的中文字体基本没有错误，只有某些地方存在翻译错误 Markdown: 是一种轻量级标记语言，创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电邮中已有的纯文本标记的特性。由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Discord、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被用来撰写电子书。（简单的说，markdown语法不仅简单好用，而且使文档编写者不再花费大量时间关注样式，主要关注内容）