HTML和CSS是构建网站的两种基本语言，那么它们有什么不同呢？
首先，HTML和CSS并不是同一个东西，而是最佳搭档！ 它们共同构成了网站的骨架和血肉。 让我们先分开单独研究它们，然后再看看他们是如何组合来工作的……
HTML代表超文本标记语言。 HTML相当于文档的骨架，为网站提供了框架。 这是通过标签，元素和属性完成的。HTML可以完成所有标题，列表，图像还是链接的工作。
让我们从一个基本的HTML文档开始研究。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to One Month</title>
</head>
<body>
<h1>Big Willie Style</h1>
<img src=https://i.imgur.com/Vr37Ac3.jpg>
</body>
</html>
上面第一行中的!DOCTYPE可以让浏览器知道它正在查看哪种类型的文档。 在本例中，它是一个HTML文档。 第三行标题区域，在它下面，你可以看到标题标签，你可以在此处放置网站的标题。 在本例中，文档的标题是“欢迎来到One Month。”在正文（第6-9行）中，你可以像我们一样添加H1标记，那就是把文本设置为H1样式，也就是最大的标题标签。
Tag，就是你！
这是一些其他常见的标签！
<h1>，<h2>，<h3>，<h4>，<h5>，<h6>
这些标签用于标题，就像本篇博客的标题一样！ H1是最大的标题标记，因此它的文本最大。 H6是最小的标题标签，所以，你猜对了，这是最小的标题文本选项。
<P>
段落文本
<br>
分行符
<IMG>
img标签用于插入图像到你的网站。
<video>
Video标签用于添加视频到你的网站。
<a href>
用于添加链接到你的网站，它代表锚。
<strong>
粗体
<EM>
斜体
<UL>
无序列表
<OL>
有序列表
儿童标签
如果您正在编写无序的<ul>（项目符号标记的）或有序的<ol>（数字编号了的）列表，那么列表中肯定需要项目！ 所以，我们使用列表 <li>标签。 <li>是<ul>或<ol>标签的子元素。 因此，一个我们最喜欢的90年代情景喜剧的项目符号列表看起来应该像这样……
<ul> <li>Seinfeld</li> <li>Friends</li> <li>Frasier</li> <li>Growing Pains</li> </ul>
CSS
CSS代表层叠样式表。
如果HTML是网站的骨架，那么CSS就是网站的皮肤。
如果没有CSS，你的网站看起来会很无聊，乏味，甚至可以说是简陋。但是有了CSS，就有了一个属性和一个值。 属性是你想要改变的性质; 值是改变的大小。
让我们回顾一下我们的HTML示例。
首先看一下<body>标签。 我们可以通过添加细节来使用CSS扩充HTML主体。 例如，假设我们想要改变正文的颜色，就要像这样做……
body {
background: red;
}
或者我们想要改变我们放入的任何文字的颜色和大小。
就要像这样做……
body {
font-size: 25px; background: blue; color: orange;
}
或者如果你想要更改H1标签的属性，你可以这样做……
H1 {
color: blue; font-size: 100px
}
使用标准的颜色名称是可以的，但如果您想要能够选择更多样化的调色板，可以尝试使用十六进制（#RRGGBB）。
但是为了让我们更好地发挥CSS的强大功能，需要将HTML与其相连接。我们可以使用以下代码执行此操作：
<link rel=”stylesheet” type=”text/css” href=”main.css”/> 如你所见，HTML和CSS之间存在着关系（rel）。
我们可以实现CSS的另一种方法是使用font-family属性。 这与使用文本编辑器更改字体相同。
我们通过以下代码完成此操作：
h1 {
font-family: Arial
}
案例研究：CSS Zen Garden
CSS Zen Garden是展示两种语言之间关系的一个精彩案例。
CSS Zen Garden展示了CSS的强大功能。 单击右侧的链接将加载出一个可区分的相同网页CSS。 这向我们展示了CSS可以做些什么来改变网页的外观。
这里有一些garden的例子……
教学点睛
- 我们学习了什么？
- HTML可以独立存在，CSS不能，但是二者可以完美结合。
- 我们对每种语言的了解越多，我们的设计就越有创意。 结构是确定的，但是选择是无限的。
- HTML是名词; CSS是动词。 让我们来次头脑风暴吧！
立即学习HTML和CSS！
- 如果您想继续了解HTML和CSS，这里有一些资源供你参考: 学习如何编写HTML和CSS代码 – 该在线课程将在短短30天内将您从初学者转变为中级开发人员。 该课程包括人工支持，视频，实际项目操作，评分以及学成后的HTML和CSS证明。
- 关于前端开发人员与后端开发人员 – 前端开发人员的薪水是多少？ 后端开发人员呢？ 哪个更容易？ 在你着手开始学习时，这些都是可能出现的问题。 阅读这篇文章来了解更多吧。
- 如何学习Javascript – 既然您了解了HTML和CSS，那么JavaScript是什么以及您如何学习它呢？
