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是什么以及您如何学习它呢?