介绍HTML和CSS

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

在这节课中:

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

理解浏览器如何呈现代码

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

检查网站的代码

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

打开Chrome DevTools:和操作

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

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

理解HTML和CSS

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

HTML:内容

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

在HTML中，我们习惯于使用行内样式，逐行地设置所有内容的样式。像更改字体族、颜色或大小这样的简单事情都需要在HTML中逐项更新。一个元素一个元素地更新站点元素是非常多余的，而且很难更新站点范围内的单一样式，比如字体族或基本段落元素的字体大小。

CSS:样式

CSS(级联样式表)将所有过去内联编写的样式信息——颜色、边框、大小、位置、排版等等——移到一个带有类的单独样式文档中。

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

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

最大的问题是:代码变得越来越难

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

随着这一切的发生，有必要重新装备。随着我们作为设计师和开发者所创造的可能性的增加，我们必须在幕后管理的所有内容也变得更加复杂。

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

当Webflow为你生成干净的代码时进行设计

HTML和CSS是网页设计的主要基础，提供了结构和样式。理解这些概念是很有用的，但是我们已经到了不必再手工编写HTML和CSS的地步——因为有了Webflow。

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

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