探索HTML与CSS的世界：入门指南-优快云博客

探索HTML与CSS的世界：入门指南

thinkful-htmlintro to html and css项目地址:https://gitcode.com/gh_mirrors/th/thinkful-html

开发人员：Thinkful

thinkful

一起编码！现在就加入这里。

基础HTML和CSS之旅

网络上的每个网页都是由许多组件构建而成的，其中HTML（超文本标记语言）和CSS（层叠样式表）是两个最重要的基石。它们共同构成了互联网上每一个页面的基本框架。

想象一下汽车——它也由多个部分组成，比如车门、窗户、轮胎和座椅。在HTML的世界里，这些就是网页的“元素”。而这些组成部分通常会有不同的特性，如大小、颜色或磨损程度。在网页设计中，这些特性用于定义元素的外观。这就是CSS的作用，它定义了网页的视觉呈现和风格。

让我们通过一个具体的网页示例来深入了解...

必备条件

在我们开始之前，你需要一款源代码编辑器——一种专门用来编写源代码的文本编辑器。一些流行的编辑器包括Notepad++（Windows）、TextMate（Mac）和Gedit（跨平台）。为这个练习，请下载跨平台的Sublime Text，它以其简洁易用闻名。

另外，请确保已安装谷歌浏览器。

HTML

HTML为网页提供结构，使其能在浏览器中显示：

首先，创建基本的网页结构：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

将这段代码复制到你的文本编辑器，然后保存为index.html。

这种结构被称为模板，用于加速开发，避免每次新建网页时重复编写常见的基础代码。大多数模板会包含更多的功能（或模板代码），但这里我们从基础开始。

看看发生了什么？

第一行<!DOCTYPE html>声明文档类型，告诉浏览器使用的HTML版本（在这里是HTML5）。
<html>标签是第一个标签，它标志着所有位于该开闭标签之间的代码都属于HTML。
<head>标签内包含要链接的CSS样式表和JavaScript文件，还有搜索引擎用于分类的元信息。在这个例子中，我们使用<title>标签来设置网页标题。
<body>标签内的所有代码属于页面主要内容，用户在浏览器中看到的就是这部分。

这就是一个标准HTML页面的基本结构。

我们现在添加四个标签：

标题<title>
一级标题<h1>
图像<img>
换行<br>

<!DOCTYPE html>
<html>
  <head>
  	<title>我的蜜蜂网站</title>
  </head>
  <body>
    <h1 id="my-header">蜜蜂们！</h1>
    <p>
      <br/>
      <img src="http://farm4.staticflickr.com/3775/12059206813_e37135c9cf_z.jpg" width="240" height="180"/>
      <br>
    </p>
  </body>
</html>

在Chrome中打开这个页面，你应该能看到这样的效果：

html

元素、标签和属性

标签构成页面结构，赋予内容意义。大部分情况下有起始标签和结束标签，例如<div></div>（分隔符）。以下是我们用到的标签：

标题：<title>在浏览器工具栏展示标题，并用于收藏夹中的标题和搜索结果的页面标题。
标题标签：包括<h1>至<h6>，<h1>是最主要的标题，其他的依次减小，<h6>是最小的。最佳实践是在每个页面只使用一次<h1>标签，其他标签可以多次使用，但应按顺序使用。
有些标签如<img>（图像）和<br>（换行）不需要关闭标签。注意到我给<br>标签加上了斜杠。在旧版HTML中，这是一个最佳实践，但在HTML5版本中，这并不严格要求，但添加不会有问题。

元素代表标签以及它们之间的内容，比如<title>My bumblebee website</title>。
属性（有时称为选择器）用于某种目的选择标签。此处我们将使用它们进行样式定义，等我们学习CSS时会更深入。属性通常是ID或类。在上面的例子中，我们看到了关联<h1>标签的IDmy-header。稍后我们会详细讨论。此外，我们还使用了属性width="240"和height="180"。这些可以直接在HTML中定义，也可以放在CSS样式表中。以后会讲到更多。

整合起来

现在，让我们结合前面所学的所有标签。

一级标题

<h2>奇妙的蜜蜂世界</h2>
<h2>关于蜜蜂</h2>
<h2>蜜蜂数种：</h2>
<h3>(来源于<a href="http://en.wikipedia.org/wiki/Bumblebee">维基百科</a>)</h3>

更新后的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>我的蜜蜂网站</title>
  </head>
  <body>
    <h1 id="my-header">蜜蜂们！</h1>
    <h2>奇妙的蜜蜂世界</h2>
    <p>
      <br/>
      <img src="http://farm4.staticflickr.com/3775/12059206813_e37135c9cf_z.jpg" width="240" height="180"/>
      <br>
    </p>
    <h2>关于蜜蜂</h2>
    <h3>(来源于<a href="http://en.wikipedia.org/wiki/Bumblebee">维基百科</a>)</h3>
    <br>
    <h2>蜜蜂数种：</h2>
  </body>
</html>

段落

段落：<p>标签用于分割内容，让每段内容出现在新的一行。

<p>大黄蜂是蜜蜂科 Bombus 的成员，在Apidae家族中，已有超过250种被发现，主要分布在北半球，虽然也有少量存在于南美洲。它们被引入新西兰和澳大利亚的塔斯马尼亚州。</p>

更新后的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>我的蜜蜂网站</title>
  </head>
  <body>
    <h1 id="my-header">蜜蜂们！</h1>
    <h2>奇妙的蜜蜂世界</h2>
    <p>
      <br/>
      <img src="http://farm4.staticflickr.com/3775/12059206813_e37135c9cf_z.jpg" width="240" height="180"/>
      <br>
    </p>
    <h2>关于蜜蜂</h2>
    <h3>(来源于<a href="http://en.wikipedia.org/wiki/Bumblebee">维基百科</a>)</h3>
    <p>大黄蜂是蜜蜂科 Bombus 的成员，在Apidae家族中，已有超过250种被发现，主要分布在北半球，虽然也有少量存在于南美洲。它们被引入新西兰和澳大利亚的塔斯马尼亚州。</p>
    <br>
    <h2>蜜蜂数种：</h2>
  </body>
</html>

有序列表

<ol>
  <li>南部草原大黄蜂</li>
  <li>新花园大黄蜂</li>
  <li>早春大黄蜂</li>
  <li>橙带大黄蜂</li>
  <li>大土蜂或大型地蜜蜂</li>
</ol>

更新后的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>我的蜜蜂网站</title>
  </head>
  <body>
    <h1 id="my-header">蜜蜂们！</h1>
    <h2>奇妙的蜜蜂世界</h2>
    <p>
      <br/>
      <img src="http://farm4.staticflickr.com/3775/12059206813_e37135c9cf_z.jpg" width="240" height="180"/>
      <br>
    </p>
    <h2>关于蜜蜂</h2>
    <h3>(来源于<a href="http://en.wikipedia.org/wiki/Bumblebee">维基百科</a>)</h3>
    <p>大黄蜂是蜜蜂科 Bombus 的成员，在Apidae家族中，已有超过250种被发现，主要分布在北半球，虽然也有少量存在于南美洲。它们被引入新西兰和澳大利亚的塔斯马尼亚州。</p>
    <br>
    <h2>蜜蜂数种：</h2>
    <ol>
      <li>南部草原大黄蜂</li>
      <li>新花园大黄蜂</li>
      <li>早春大黄蜂</li>
      <li>橙带大黄蜂</li>
      <li>大土蜂或大型地蜜蜂</li>
    </ol>
  </body>
</html>

在浏览器中查看页面。你可以尝试添加更多元素，或者继续学习CSS来让网站看起来更好。

接下来是CSS...

CSS

HTML提供了结构，而CSS则负责样式，使网页更加美观。从字体大小、背景色到HTML元素的定位，几乎网页的每一个视觉方面都可以通过CSS来控制。

HTML和CSS相辅相成。CSS样式（或规则）直接应用到HTML元素。比如之前的<h1 id="my-header">蜜蜂们！</h1>元素，因为有一个ID选择器，我们可以使用外部样式表给它分配CSS样式。

#my-header {
  color: #660000;
}

将此保存为"styles.css"。

有三种方式将样式分配给HTML标签：内联、内部和外部。内联样式直接放在标签中，但应该尽量避免，因为最佳实践是保持HTML和CSS样式的分离（不混合使用）。

这个开源项目是一个完美的起点，无论你是初学者还是寻求复习HTML和CSS基础知识的专业人士。通过实际操作和练习，你会发现编写代码并没有那么复杂。它强调了清晰的结构、有效的注释和良好的编程习惯，这些都是任何开发者都需要掌握的关键技能。

项目特点：

逐步指导：从基础HTML布局开始，逐步引导你完成基本元素的学习。
实战体验：通过实际的网页创建，加深对HTML和CSS的理解。
分离样式：强调了HTML与CSS的分离，有利于维护和扩展网页设计。
跨平台兼容性：适用于多种操作系统和浏览器。

现在，准备好开启你的HTML和CSS探索之旅，创造自己的网页世界吧！

thinkful-htmlintro to html and css项目地址:https://gitcode.com/gh_mirrors/th/thinkful-html

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

探索HTML与CSS的世界：入门指南