HTML和CSS Essentials

我是卡西迪。我是一名工程师，15年多来我一直在自学HTML、CSS和其他Web开发和脚本。现在我想教您。因为您长得很帅。而且因为它很有用。

在本教程中，我们将从头开始。您不需要了解任何关于HTML和CSS的知识，也不需要了解任何关于代码的知识就可以开始使用。我将包括一些教程文件供您操作和检出。

现在。或者什么时候都行。我不打算在短期内撤下这篇文章。但是你只受到你自己的日程安排的限制。或者被它释放。管他呢。

因为这些东西很重要。无论你是为电子邮件格式化的商务人士，还是想要亲身体验的有抱负的网页设计师，还是只是对此感兴趣但从未尝试过任何编码、脚本编写或编程的人，HTML和CSS都是你学习曲线中必不可少的一部分。

所以你需要的第一件事就是编辑你的爵士乐。外面有很多选择。

记事本/文本编辑(没错，这是你电脑上最愚蠢的东西)--这几乎是你能得到的最基本的东西了。如果你想使用它，这是完全可以的，但我推荐下面的一个编辑器，这样你就可以看到代码突出显示(这将在稍后帮助你)。但是，如果你想成为一名纯粹主义者，这个办法就行得通。

Visual Studio代码-这是我通常使用的代码。它是开源的，有大量可用的扩展。

Atom-这是另一个非常可定制的选项，有一个巨大的插件库和开放源码，所以它一直在改进。

崇高文本3-这是一个相当流行的选择，而且有很好的理由。界面非常整洁。一旦你能驾驭它(学习曲线并不是那么大)，那就相当梦幻了。就像你的脸。

CodePen项目-这是一个浏览器内的代码编辑器，因此您可以直接在Web浏览器中编写代码，无需下载。：)。

Gitch-这是另一个浏览器内的代码编辑器。它是为更大的项目设计的，但是不用下载任何东西真好！

记事本++-这只比记事本高出一步。不过，这可真是个不错的选择。它有代码突出显示功能，没有什么太花哨的东西，这就是我喜欢它的地方。

这里列出了一大堆其他的，我只是列出了我用过的和喜欢的！

这是一个基本的HTML页面，非常简单。您可以在part1.html文件中的1-Structure文件夹中打开它。如果您在您最喜欢的浏览器中打开该文件(您可以这样做，请继续)，您将看到一个纯文本网页，标题为“我的网站”，上面写着“您好，世界！”。

那么，我们在这里看到的是什么呢？HTML是HyperText Markup Language的缩写，它由这些称为标记的东西组成，这些标记是写在<；和>；字符之间的单词，比如<；sometag>；。所有标记(只有几个例外，我们稍后将讨论)都有一个匹配的结束标记，该结束标记与开始标记同名，不同之处在于它在第一个<；之后包含/，如<；/sometag>；。

例如，<；html>；是一个标记，其结束标记是<；/html>；，与<；head>；和<；/head>；和<；body>；和<；/body>；相同，依此类推。开始和结束标记一起是一个元素(还包括写在其中的所有内容)。例如，<；title>；My WebSite<；/Title>；就是一个元素。元素内的文本，在标题大小写My WebSite中，称为元素的内容。

标记组织您的页面，并告诉浏览器您的页面由什么组成。市场上有成吨的标签，有些你可能永远不会用到。这里是一些标签列表，如果你真的想在这一点上看到所有的标签：

因此，如果您查看我们的示例，还可以将标记放在其他标记中(就像我们在<；head>；标记中处理<；title>；标记一样)。这称为嵌套元素。在本例中，我们会说<；head>；包含<；标题>；。有时当你有很多嵌套标签时，很难跟踪，所以你必须用空格格式化你的代码，如下所示。通常，内部标记的间距大于其外部标记的间距(就像<；title>；比<；head>；缩进得更远一样)。

让我们再看看1-Structure文件夹中的part1.html。您会注意到第一行有<；！doctype html>；。每个HTML文档和网站都必须有这个特殊的标签，因为它会告诉浏览器我们正在使用什么语言。这是我提到的不需要结束标记的特殊标记之一。

在第二行，您可以看到<；html>；标记。网站中的所有内容都包含在这个标签中，整个文档的最后一行始终是<；/html>；。

在<；html>；内部，有两个元素：<；head>；和<；body>；。包含在<；head>；<；/head>；中，我们将为浏览器放置用户不一定需要查看的各种信息。目前，我们只有<；标题>；。<；Title>；的内容将用作浏览器选项卡的名称，也将由搜索引擎使用。

在地球的另一边，我们有<；Body>；/Body>；。用户可见的所有内容都包含在这些标记中。现在，所有的内容都是“你好，世界！”让我们为了好玩而改变这一点吧。在您最喜欢的HTML编辑器中将"；Hello，World！"；替换为您自己的文本，然后在浏览器中打开该页面。干净利落！

让我们变得更多汁吧。我们将讨论一些用于组织文本的新标签。因为你不会希望整个网站只有一种风格的文本，对吧？

查看1-Structure文件夹中的part2.html。我们将在这里讨论的标记是<；h1>；、<；p>；、<；ul>；和<；li>；。在浏览器中打开文件，试着了解到底是怎么回事。

首先，我们有<；h1>；，它为我们的网站添加了标题。基本上，标题只是字体较大的文本。但还是这样。很重要。我们很快就会学习如何调整任意和所有字体大小，但现在还不是时候。只需知道您的标题应该在<；h1>；标签中。此外，如果您有较小的标题或副标题，可以使用<；h2>；，它比<；h1>；小，但比普通文本大。您可以继续使用更多的数字，直到到达<；h6>；，每个标题都比前一个稍小。试着在我们现在的标题下面加一些副标题！

接下来，我们有<；p>；标签。<；p>；向我们的网站添加一段文本，这些文本块前后各有一些空格。编辑给定段落中的文本，并添加您自己的文本，以了解我的意思！

最后，我们有<；ul>；。<；ul>；表示项目符号列表(也称为无序列表)，其中每个<；li>；都是该列表中的一项(称为列表项)。但是如果你想要一个编号列表呢？您可以将<；ul>；更改为<；ol>；(别忘了它的结束标签)，它就这么简单！<；ol>；是一个有序列表，它包含数字而不是项目符号，这是唯一的区别。将一些列表项(<；li>；)添加到列表中(请确保您留在<；ul>；标记内)，然后将<；ul>；标记更改为<；ol>；！

打开2-tag文件夹，然后在page1.html中的标题后面添加这段代码：

好的，那么让我们来看看这个。首先，您可以看到段落中包含的<；a>；标记。太好了。但是那个时髦的牛奶是什么呢？嗯，这种语法叫做属性。属性改变了标签的工作方式，并且对网站用户不可见。您只向开始标签添加属性，而不是向结束标签添加属性。标签可以有多个属性，例如：

因此，不管怎样，属性'；href'；告诉我们当用户单击链接时它将转到哪里(对于那些好奇的人来说，它代表HyperReference)。尝试添加更多指向不同网站的页面链接！

另外，您应该注意的一件事是：链接不一定要像我上面那样放在<；p>；标签中。您可以将它们放入列表中的<；li>；标记中，将它们放入链接标题的<；h1>；标记中，也可以完全单独放在<；li>；标记中！

让我们这么说吧，你有一个功能齐全的网站，叫做fakewebsite.com。您的主页和联系我们页面位于同一目录或文件夹中。

通常，当初学者链接到他们网站上的不同页面时，他们只会制作看起来像<；a href="；http://www.fakewebsite.com/index.htmL"；>；Home<；/a>；和<；a href="；http://www.fakewebsite.com/contactus.htmL"；>；Contact us<；/a>；的链接。

这个不错。但是，你可以做得更好。那么，如果你把你的域名改成reallyfakewebsite.com呢？当您编辑HTML时，您必须编辑每个链接以匹配新域。那太恶心了。有更好的办法。

当您在网站上创建指向您自己的目录或文件夹内的页面的链接时，不要放入整个URL，而要放入更像这样的内容：

现在，如果您要更改文件的域或位置，则无需更改任何内容。嘘呀。

因此，如果您想要查看一些可以用您的页面做的有趣的事情，您可以参考我之前向您展示的链接。不过，在我们继续讨论更酷、更大的东西之前，你可能会想看看其他一些东西。

<；img>；。让我们这么说吧，你想把一张图片放到你的网站上。这可能是一个值得了解的好标签。将以下内容添加到page1.html：

在浏览器中打开页面。哇哦。图像！因此，<；img>；标记就是这些特殊标记之一。首先，它没有结束标签。你只需在一个标签的末尾插入a/，你就完成了。其次，它还有一个src属性(source的缩写)，在该属性的值中放入图像的URL(类似于锚标记中的href)。

您可能需要记住<；img>；标记的一个属性是alt属性。如果您将上面的代码更改为：

当您在浏览器中加载页面时，图像看起来是一样的。但是，如果你把鼠标移到图像上，你会看到一些文字出现！哇。这是alt属性。它代表图像的替代文本，当用户出于任何原因(使用屏幕阅读器、连接速度慢、src属性出错等)无法查看图像时使用。或者，在XKCD的案例中，它用来给页面增加更多的幽默(将鼠标滚动到网站上的所有漫画上，他们总是会添加另外一两个很多人不知道的笑话)。

假设您想将所有内容保留在一个段落中，但您仍想将其拆分。

因此，这里有两个特殊的标签，<；hr>；和<；br>；。它们是空标签，这意味着它们没有结束标签。

<；hr>；代表水平标尺，并创建可见的换行符。<；br>；是一个简单的换行符，它所做的就是拆分您的段落。

桌子真的很酷。它们也可能有点令人困惑。在浏览器中打开tables.html(在2-tag文件夹中)，签出我在那里为您制作的示例表。

表格有几个标签，但基本的标签是<；table>；、<；tr>；、<；th>；和<；td>；。在编辑器中查看tables.html。

我们要在这一页上再做一张我们自己的桌子。你可以删除我为你做的，或者在当前的下面做一个。

这将包含您的表的所有部分。有时，表格的边框属性将等于表格边框粗细的某个值(由于我们将在后面解释原因，只有1&34；或不有是合适的)。继续添加一个，如下所示：

我们要签出的下一个标记是<；tr>；，它用于表格行。简单的农民。那么，让我们将3个标签添加到我们的表格中。

最后，我们得到了表格的实际单元格。此标记有两种类型，<；th>；(表头)和<；td>；(表数据)。顾名思义，前者用于表头，后者用于表中的所有数据。

在我们的第一组<；tr>；标记中，添加4<；th>；标记，在第二和第三组<；tr>；标记中添加4<；td>；标记。

<；表格边框="；1&34；>；<；tr>；<；th>；<；/th>；<；/tr>；<；td>；<；/td>；<；Td>；<；/tr>；<；td>；<；/td>；<；/td>；<；td>；<；<；/td>；<；/tr>；<；/table>；

好啦！我们的桌子都摆好了。我们有一个具有BORDER=1属性、3行和4列的表。让我们用数据填充它，这样您就可以看到<；表>；标记的正确应用：

表格边框="；1&34；>；<；tr>；<；th>；项目<；/th>；<；数量<；/th>；<；rate<；/th>；<；成本<；/th>；<；/tr>；<；tr>；<；td>；糖果<；/td>；<；Td>；10<；/td>；<；td>；$.50<；/td>；<；$5.00<；/td>；<；/tr>；<；td>；牙膏<；/td>；<；td>；2<；/td>；<；td>；$3.00<；/td>；<；TD>；$6.00<；/td>；<；/tr>；<；/table>；

在浏览器中打开页面并签出您的工作。干得好！我真的印象深刻。去吃些又好又胖的东西吧。

您可以尝试使用的另一个有趣的东西是colspan和rowspan属性。如果将colspan="；2"；(或rowspan或任何其他数字)添加到<；th>；或<；td>；标记中，单元格将扩展到超出其单元格大小。例如，<；th colspan="；2"；>；将显示跨2列的表格标题，而<；td rowspan="；3"；>；将生成高度为3行的单元格。爵士乐！

你也可以嵌套桌子，但我现在不会讨论这个。如果要使用代码，请尝试在当前<；td>；标记内添加一些<；tr>；和<；td>；标记。神奇的东西。

所以，你的网站现在看起来相当平淡，这是正常的。但是，我们想要一个热门的，性感的，迷人的，和强大的网站。是的，没错，我们想要一个和你们一样的网站。

因此，首先，我将向您展示设置页面样式的错误方法。您可能会问为什么，但是相信我，如果您按照这个顺序学习，您将更好地理解HTML属性，然后当您继续学习CSS时，您的头脑将会欣喜若狂。爆炸。

好的。让我们快活起来吧。打开3-Styles文件夹和文件style 1.html。你可能注意到这个文件现在相当平淡无奇，但这正是我们要解决的问题。耐心点，我的蚱蜢。

将此行代码添加到<；正文>；标题标记下面的某个位置(我做了很多工作是为了好玩...)：<；p style="；color：red"；>；此文本就像我的正文一样火辣<；/p>；

我们首先要看的是style属性。你可以在里面设计各种样式，从颜色到宽度，从高度到边框，再到重量，应有尽有。但就目前而言，让我们先谈谈颜色吧。

所以，你可能会想，这到底是怎么回事，我可以在红色的空格里输入任何颜色吗？答案是否定的。你可以在那里输入大量的颜色，比如蓝色、黄色、青色和洋红色，但你不能只说oasisorange或ElectricWhite就希望它能行得通。

你怎么才能得到你喜欢的特定颜色呢？嗯，那是当你使用RGB或HEX颜色的时候。这是一种痛苦的理解，它花了我一点时间，所以我将尽可能简单地解释它：RGB代表红色、绿色和蓝色。每种颜色的值都可以介于0到255之间，以形成几乎所有存在的颜色。哇哦。形成与上面类似的RGB码的方法很简单：style="；color：rgb(255，0，0)"；。在这个例子中，有255个红色，0个绿色和0个蓝色。所以，它都是红色的。砰，够简单了。

现在十六进制的颜色非常相似。它由标签SIGN#和6个十六进制数字组成，这6个数字是0123456789ABCDEF，其中F是最高数字。与RGB一样，HEX的前两个数字是红色，后两个数字是蓝色，第三对数字是绿色。因此，要编写上面相同的颜色代码，您可以使用style=#34；color：#FF0000&34；来表示红色，因为您有FF表示红色，00表示蓝色，00表示绿色。简单？很简单。

别担心，你不用自己想出RGB和十六进制的颜色。有很多网站、程序和颜色选择器可以帮你做到这一点。这里有几个例子：

尝试为页面上的各种标签添加颜色！您可以使您的<；h1>；颜色#005DFC、您的<；h3>；标签RGB(242,127，56)和您的<；p>；标签LightBlue。继续玩，直到你满意为止。

现在，您可能会在HTML旅程中看到实际具有颜色属性的语法，如<；p color="；red"；>；wut<；/p>；。虽然这在技术上是允许的，但请不要这样做。请。我保证，从长远来看，你会更幸福的。

那么，如果您想要使图片或段落具有不同的大小，该怎么办呢？简单的农民。

您可以使用两个选项，样式属性和宽度和高度属性。我两个都给你们看。

现在，让我们假设您希望图像的大小准确，比如说600x800。您所需要做的就是添加宽度和高度属性来做到这一点！

把那个婴儿加载到浏览器里。嘘呀。但是，你会注意到图像的比例有点偏了。好痛苦啊。这实际上是相当容易解决的。让我们假设你的宽度绝对要达到600像素，但是高度可以滑动。这就像去掉高度属性一样简单。

刷新DAT页面。太棒了。同样，如果您有所需的设置高度，只需包含Height属性，而不包括宽度。

很简单！现在，我们已经看了一些样式属性，但是我还没有解释语法。Style属性用于内联样式。这意味着您可以直接在每个元素中重新设置HTML样式，而不是使用CSS。但是，我们还没有走到那一步，所以我就不谈这一部分了。

现在，样式属性中的语法有点时髦。它始终是style="；property：value"；，其中该属性实际上是您正在编辑的标记的属性(例如，颜色、宽度、高度)，并且该值是您正在更改或编辑该属性的值(例如，Blue，600px，#FF0000)。如果您有多个要设置样式的属性(例如，高度和宽度)，请在分隔之间加一个分号。因此，在我们的示例中，如果要在样式属性中编辑图像的高度和宽度，我们将执行以下操作：

为什么语法如此时髦？嗯，那是因为它暗地里使用CSS语法。但我们稍后会更详细地讨论这一点。

如果我们在盒子里放一段话。这就对了。有点像一张桌子。但事实并非如此。那会很酷的。当然，还有很多其他东西可以有边界。按钮(我们将在稍后讨论这些内容)、颜色块(也是稍后)和图像，以及更多可以使用它们。嗯。

现在，您可以添加BORDER=#34；5&34；，您将得到一个粗细为5像素的图像边框。但是，除了表之外，这个属性实际上不再受支持(哦，对了，我们对表使用了这个属性。记忆。)，所以我们可以用一种更好的方式来做这件事。你猜到了。款式快到了。

.