Chris Castiglione One Month的老师。哥伦比亚大学的教师,我教数字素养。

HTML与CSS:有什么区别

1 min read

HTMLCSS是构建网站的两种基本语言,那么它们有什么不同呢?

首先,HTMLCSS并不是同一个东西,而是最佳搭档! 它们共同构成了网站的骨架和血肉。 让我们先分开单独研究它们,然后再看看他们是如何组合来工作的……

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>
HTML code example
HTML code example

上面第一行中的!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>
HTML code example
HTML code example

CSS

CSS代表层叠样式表。

如果HTML是网站的骨架,那么CSS就是网站的皮肤。

如果没有CSS,你的网站看起来会很无聊,乏味,甚至可以说是简陋。但是有了CSS,就有了一个属性和一个值。 属性是你想要改变的性质; 值是改变的大小。

让我们回顾一下我们的HTML示例。

HTML code example
HTML code example

首先看一下<body>标签。 我们可以通过添加细节来使用CSS扩充HTML主体。 例如,假设我们想要改变正文的颜色,就要像这样做……

body {
 background: red;
 }
HTML code example
HTML code example

或者我们想要改变我们放入的任何文字的颜色和大小。

就要像这样做……

body {
 font-size: 25px; background: blue; color: orange;
}
HTML code example
HTML code example

或者如果你想要更改H1标签的属性,你可以这样做……

H1 {
 color: blue; font-size: 100px
}
HTML code example
HTML code example

使用标准的颜色名称是可以的,但如果您想要能够选择更多样化的调色板,可以尝试使用十六进制(#RRGGBB)。

但是为了让我们更好地发挥CSS的强大功能,需要将HTML与其相连接。我们可以使用以下代码执行此操作:

<link rel=”stylesheet” type=”text/css” href=”main.css”/>

如你所见,HTMLCSS之间存在着关系(rel)。

我们可以实现CSS的另一种方法是使用font-family属性。 这与使用文本编辑器更改字体相同。

我们通过以下代码完成此操作:

h1 {
 font-family: Arial
 }
HTML code example
HTML code example

案例研究:CSS Zen Garden

CSS Zen Garden是展示两种语言之间关系的一个精彩案例。

CSS Zen Garden

CSS Zen Garden展示了CSS的强大功能。 单击右侧的链接将加载出一个可区分的相同网页CSS 这向我们展示了CSS可以做些什么来改变网页的外观。

这里有一些garden的例子……

The difference between HTML and CSS

The difference between HTML and CSS

The difference between HTML and CSS
The difference between HTML and CSS

教学点睛

  • 我们学习了什么?
  • HTML可以独立存在,CSS不能,但是二者可以完美结合。
  • 我们对每种语言的了解越多,我们的设计就越有创意。 结构是确定的,但是选择是无限的。
  • HTML是名词;  CSS是动词。 让我们来次头脑风暴吧!

立即学习HTMLCSS

  • 如果您想继续了解HTMLCSS,这里有一些资源供你参考: 学习如何编写HTMLCSS代码该在线课程将在短短30天内将您从初学者转变为中级开发人员。 该课程包括人工支持,视频,实际项目操作,评分以及学成后的HTMLCSS证明。
  • 关于前端开发人员与后端开发人员前端开发人员的薪水是多少? 后端开发人员呢? 哪个更容易? 在你着手开始学习时,这些都是可能出现的问题。 阅读这篇文章来了解更多吧。
  • 如何学习Javascript  – 既然您了解了HTMLCSS,那么JavaScript是什么以及您如何学习它呢?
Learn to Code Comment Avatar
Chris Castiglione One Month的老师。哥伦比亚大学的教师,我教数字素养。

Bitcoin 对…

Learn to Code Comment Avatar Chris Castiglione
14 sec read

Codecadem…

Learn to Code Comment Avatar Chris Castiglione
24 sec read

为什么Codeca…

Learn to Code Comment Avatar Chris Castiglione
10 sec read