回到所有的课程
课程库

介绍HTML和CSS

HTML是网站的结构和内容,而CSS是内容的样式。Webflow在您设计时生成这些代码。

本视频采用了旧的用户界面。更新版本即将到来!

当你在构建网页时,理解HTML和CSS之间的关系是很有帮助的。

在这节课中:

  1. 理解浏览器如何呈现代码
  2. 检查网站的代码
  3. 了解HTML和CSS
  4. 设计的同时,Webflow为你生成干净的代码

理解浏览器如何呈现代码

当你访问一个网站时,你在屏幕上看到的是浏览器决定如何呈现网站的底层代码的结果。它使用代码中的信息来显示每个人在加载页面时看到的内容。

一个谷歌chrome窗口包括在左侧显示实时网站和右侧显示代码的检查界面。选择一个h1元素进行检查。属于h1元素的代码在元素检查器窗口中高亮显示。

检查网站的代码

您可以在大多数浏览器上检查和临时编辑源代码。

打开Chrome DevTools:和操作

  1. 右击并选择检查从弹出菜单,或按ctrl + Shift + I(在Windows上)或命令+选项+ I(Mac)
  2. 编辑检查器中的代码来临时更改浏览器中的内容

测试代码和呈现内容之间的关系可能很有趣。因为您只在浏览器中本地进行更改,所以当您刷新页面时,您的更新将消失。

在左边的第一步,突出显示文本元素,右键单击它,拉出下拉菜单,在那里你可以选择Inspect按钮。步骤二在右边,编辑文本元素的代码副本。
第三步,在浏览器上预览实时网站的临时更改。

了解HTML和CSS

HTML在网站上创建内容,CSS负责内容的设计和样式。

HTML:内容

HTML通常用于内容:它告诉浏览器页面上有什么。这包括你看到的一切,包括标题、段落、链接和图像。

使用HTML代码创建的一组内容的示例。示例中包括一个标题、段落文本、一个链接文本块和一个宇航员在太空中的图像,该图像被放大到头盔的反光中。

在HTML中,我们习惯于逐行使用内联样式来设置所有内容的样式。更改字体系列、颜色或大小等简单的事情需要在HTML中逐项更新。一个元素一个元素地更新一个网站元素是极其多余的,而且很难更新一个网站范围内的风格,比如基本段落元素的字体系列或字体大小。

前面HTML内容示例中的标题、段落文本、文本链接块和图像的HTML代码片段示例。

CSS:样式

CSS(层叠样式表)接收所有过去以内联方式编写的样式信息——颜色、边框、大小、定位、版式等等——并将其移动到一个带有类的单独样式文档中。

27个内联术语用Webflow的蓝色矩形背景围绕着术语CSS。这个可视化视图显示了级联样式表中包含的所有这些术语。

这样,HTML中的任何这些元素都可以被赋予一个类名,以采用与该类相关的样式。

对CSS文件中的类进行更改会影响使用该类的任何元素。

类名为“awesome”的元素会重复出现四次。这个元素的CSS代码片段突出显示了单词.awesome。呈现的实时视觉效果显示在这两个代码示例下。

最大的问题是:编写代码越来越难了

在web的早期,我们只需要知道最基本的标签和属性。随着时间的流逝,互联网真正开始成长起来。设备发生了变化,我们与网络互动的方式变得更加个性化。

随着这一切的发生,有必要重新装备。随着我们作为设计师和开发人员所构建的内容的可能性的增加,我们在幕后管理的所有内容的复杂性也随之增加。

很多不同的web工具的logo都围绕着HTML和CSS这两个词。这个图表显示了各种各样的工具,可以在幕后管理一个网站。

今天,要成为一个成功的网页开发者,你必须掌握HTML, CSS, JS,数据库,Sass, JavaScript库,CSS库,浏览器特有的怪僻,浏览器版本,响应式设计,GitHub, jQuery, Java,图像压缩,加载速度,优化,SEO——这个列表不断增长,很快就会觉得网页开发不可能进入。

设计的同时,Webflow为你生成干净的代码

HTML和CSS是网页设计的主要基础,提供结构和样式。理解这些概念是很有用的,但是由于Webflow,我们已经达到了不再需要手工编写HTML和CSS代码的地步。

Webflow设计器界面的一个示例,选中一个元素,在右侧显示用于定制的样式面板。

我们所提供的Webflow是一种快速、高效地建立网站的方式。通过可视化地在画布上创建和操作内容,我们可以直接与HTML、CSS和屏幕上的其他所有内容交互。使用Webflow,您可以直接连接到您正在操作的媒体。

我们不是绘制草图并输出原型,也不是经历痛苦的设计迭代到开发交接过程,而是输出可用于生产的代码。欧宝体育在线首页所以你可以把最疯狂的设计想法变成现实,而不需要写代码。

尝试Webflow——它是免费的
Baidu
map