去哪铺资源网

html零基础入门教程及代码演示例子

2023.05.13品悟
目录导航
  • 一. HTML是基于标识(html)的标记语言，
  • 二. 在文件的顶部，使用<html>标记来告诉浏览器，这是一个HTML文件。
  • 三. 添加<head>和<body>标记。
  • 四. 在<body>标记中，添加不同的HTML标记，来呈现不同的元素。
  • 五. <p>标记用于添加段落。
  • 六. <br>标记用于添加换行符。
  • 七. <ul>和<li>标记 是用于添加无序列表的。
  • 八. <ol>和<li>标记 是用于添加有序列表的。
  • 九. <a>标记用于添加超链接。您需要设置href属性来指定链接的目标。
  • 十. <img>标记用于添加图像。您需要设置src属性来指定图像的来源。
  • 十一. 最后，保存此HTML文件，并在浏览器中打开它，以查看您创建的网页。

    • HTML是创建网页的基础语言。在互联网的世界里，网页是我们获取信息和与世界连接的主要途径之一。因此，学习HTML是设计和制作网页的重要一步。如果您是一个完全零基础的人，那么这份教程可以帮助您快速入门，并开始创建自己的网页。在这个教程中，我们将探讨HTML的基础语法和标记，以及如何将它们组合在一起来构建一个简单的网页。无需任何预备知识，您只需要在计算机上安装一个文本编辑器和浏览器，就可以开始学习HTML。让我们开始！

     

    HTML是一种用于创建网页的标记语言。对零基础的人来说，入门教程是很有必要的。以下是HTML零基础入门教程的步骤：

     

    一. HTML是基于标识(html)的标记语言，

     

    而web浏览器使用HTML代码来显示网页。您需要一个基本的文本编辑器(如记事本)来编写HTML代码。

     

    当你使用文本编辑器编写HTML代码时，需要确保以下事项：

     

    1. 文件扩展名为.html。

    2. 在文件的顶部应该是<html>标记。

    3. 文件必须包括<head>和<body>标记。

     

    下面是一个例子显示一个简单的HTML网页，使用Windows记事本编写。

     

    1. 首先，创建一个新文件并将其命名为example.html。

     

    2. 在文件的顶部添加<html>标记，如下所示：

     

    html
<!DOCTYPE html>
<html>

     

    3. 在<head>标记之间，您可以添加一个标题，如下所示：

     

    html
<head>
<title>My First HTML Page</title>
</head>

     

    4. 在<body>标记之间，添加一些HTML元素，例如标题、段落和图像。

     

    html
    <body>
<h1>Welcome to my website</h1>
<p>This is my first HTML page</p>
<img src="https://mippu.qunapu.com/upload/2023/05/202305101683732845501182.jpg" alt="My image">
</body>

     

    5. 最后，为了使HTML文件完成，您需要将</html>标记添加到文件的底部，如下所示：

     

    html
</html>

     

    6. 保存文件并在浏览器中打开该文件，即可查看创建的HTML网页。

     

    希望这个例子可以帮助你熟悉HTML代码的基本结构和编写过程。

     

    二. 在文件的顶部，使用<html>标记来告诉浏览器，这是一个HTML文件。

     

    同样，在文件的末尾，您需要使用</html>来结束它。

     

    以下是一个示例代码，展示了如何使用<html>标记来表示一个HTML文件的开头，并使用</html>标记来表示结束标记：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>示例页面</title>
  </head>
  <body>
    <h1>这是一个示例页面</h1>
    <p>这是一个段落，包含了一些文本。</p>
    <ul>
      <li>这是一个无序列表的第一项</li>
      <li>这是一个无序列表的第二项</li>
      <li>这是一个无序列表的第三项</li>
    </ul>
  </body>
</html>

     

    在这个示例中，<html>标记是文件的开头，告诉浏览器这是一个HTML文件。而在</html>标记处，我们告诉浏览器整个HTML文档已经结束。在这两个标记之间，我们可以使用其他标记来编写HTML页面的内容。其中，<head>标记包含一些元数据，例如页面标题，<body>标记包含了整个页面的主要内容。在这个例子中，我们添加了一个标题(<h1>)和一个段落(<p>)，还添加了一个无序列表(<ul>)，其中包含三个列表项(<li>)。

     

    三. 添加<head>和<body>标记。

     

    在<head>标记中，您可以添加标题、CSS和JavaScript等元素。在<body>标记中，您添加将在浏览器中显示的所有内容。

     

    以下是一个示例代码，展示了如何使用<head>和<body>标记来编写一个简单的HTML页面：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的第一个HTML页面</title>
    <meta charset="utf-8">
    <style>
      h1 {
        color: blue;
      }
      p {
        font-size: 18px;
      }
    </style>
    <script>
      function showAlert() {
        alert("Hello, World!");
      }
    </script>
  </head>
  <body>
    <h1>欢迎来到我的页面</h1>
    <p>这是我的第一个HTML页面。</p>
    <button onclick="showAlert()">点击这里</button>
  </body>
</html>

     

    在这个示例中，<head>标记包含了页面的标题、字符集、CSS样式和JavaScript代码。标题是在浏览器标签页中显示的文本。字符集(meta charset)告诉浏览器该页面的编码方式。CSS样式规则(color和font-size)定义了标题和段落的外观。JavaScript代码(alert函数)定义了一个函数，当点击页面上的按钮时，浏览器将弹出一个带有"Hello, World!"消息的对话框。在<body>标记中，我们添加了一个标题、一个段落和一个按钮。当用户单击按钮时，就会调用JavaScript函数。

     

    四. 在<body>标记中，添加不同的HTML标记，来呈现不同的元素。

     

    以下是一个示例代码，展示了如何使用<head>和<body>标记来编写一个简单的HTML页面：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的第一个HTML页面</title>
    <meta charset="utf-8">
    <style>
      h1 {
        color: blue;
      }
      p {
        font-size: 18px;
      }
    </style>
    <script>
      function showAlert() {
        alert("Hello, World!");
      }
    </script>
  </head>
  <body>
    <h1>欢迎来到我的页面</h1>
    <p>这是我的第一个HTML页面。</p>
    <button onclick="showAlert()">点击这里</button>
  </body>
</html>

     

    在这个示例中，<head>标记包含了页面的标题、字符集、CSS样式和JavaScript代码。标题是在浏览器标签页中显示的文本。字符集(meta charset)告诉浏览器该页面的编码方式。CSS样式规则(color和font-size)定义了标题和段落的外观。JavaScript代码(alert函数)定义了一个函数，当点击页面上的按钮时，浏览器将弹出一个带有"Hello, World!"消息的对话框。在<body>标记中，我们添加了一个标题、一个段落和一个按钮。当用户单击按钮时，就会调用JavaScript函数。

     

    五. <p>标记用于添加段落。

     

    以下是一个使用 `<p>` 标记添加段落的 HTML 代码示例：

     

    html
<!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
  </body>
</html>

     

    在这个示例中，我们使用了两个 `<p>` 标记来添加两个段落。这些标记告诉浏览器将它们之间的文本解释为一个段落。每个段落的文本可以是任何您希望显示的内容。

     

    六. <br>标记用于添加换行符。

     

    以下是一个使用 `<br>` 标记添加换行符的 HTML 代码示例：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。<br>这是另一行文本。</p>
    <p>这是另一个段落。<br>这是另一行文本。</p>
  </body>
</html>

     

    在这个示例中，我们在每个 `<p>` 标记中使用了 `<br>` 标记来添加换行符。这些标记告诉浏览器将文本分成两行，在第一行的末尾插入一个换行符，从而在第二行开始继续显示文本。这使我们能够在段落中创建多行文本，而不必创建多个段落。

     

    七. <ul>和<li>标记 是用于添加无序列表的。

     

    以下是使用 `<ul>` 和 `<li>` 标记创建无序列表的 HTML 代码示例：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>我的喜爱食物</h1>
    <ul>
      <li>披萨</li>
      <li>汉堡</li>
      <li>寿司</li>
      <li>墨西哥玉米片</li>
    </ul>
  </body>
</html>

     

    在这个示例中，我们使用 `<ul>` 标记来创建一个无序列表，其中包含了四个列表项，每个列表项使用 `<li>` 标记包裹。这表示每个列表项是等级相同的，是无序的，浏览器会自动添加项目符号来标识它们是列表项。我们可以在列表项中添加任何我们需要的内容。这是一种常用的方法来显示文本中的一系列项目。

     

    八. <ol>和<li>标记 是用于添加有序列表的。

     

    以下是使用 `<ol>` 和 `<li>` 标记创建有序列表的 HTML 代码示例：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>我的阅读清单</h1>
    <ol>
      <li>我爱你，你爱我吗</li>
      <li>《射雕英雄传》 - 金庸</li>
      <li>今生最爱你，爱你一生</li>
      <li>一生最爱 - 某作家</li>
    </ol>
  </body>
</html>

     

    在这个示例中，我们使用 `<ol>` 标记来创建一个有序列表，其中包含了四个列表项，每个列表项使用 `<li>` 标记包裹。这表示每个列表项是等级相同的，但是是有序的，浏览器会自动添加数字来标识它们是列表项。我们可以在列表项中添加任何我们需要的内容。这是一种常用的方法来显示文本中的一系列项目，特别是在需要编写指南、说明或步骤的情况下。

     

    九. <a>标记用于添加超链接。您需要设置href属性来指定链接的目标。

     

    以下是使用 `<a>` 标记创建超链接的 HTML 代码示例：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的博客!</h1>
    <p>在这里我将分享我的观点、经验和故事。我希望您喜欢!</p>
    <p>如果您有任何问题或反馈，请随时 <a href="mailto:kf@qunapu.com">联系我</a>。</p>
  </body>
</html>

     

    在这个示例中，我们使用 `<a>` 标记来创建一个超链接，其中 `href` 属性指定了链接的目标。在本例中，链接指向一个电子邮件地址，当用户点击链接时，电子邮件应用程序会自动打开，并填写了目标电子邮件地址。我们可以在 `<a>` 标记中添加任何我们需要的文本或图像，这些元素都可以成为链接的一部分。

     

    十. <img>标记用于添加图像。您需要设置src属性来指定图像的来源。

     

    以下是使用 `<img>` 标记添加图像的 HTML 代码示例：

     

    html
<!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的可爱的猫咪，他叫做Tom:</p>
    <img src="https://mippu.qunapu.com/upload/2023/05/20230513132800168395568060415.jpg" alt="Tom the cat">
  </body>
</html>

     

    在这个示例中，我们使用 `<img>` 标记来添加一张图片，其中 `src` 属性指定了图片的来源。在本例中，图片来源于 Pixabay 免费图片库中的一张照片。我们还可以使用 `alt` 属性来提供替代文本，以便在无法显示图片时提供说明。这里我们提供了一段简短的关于猫咪的说明，如果图片无法加载，这段文本会显示在页面上。

     

    十一. 最后，保存此HTML文件，并在浏览器中打开它，以查看您创建的网页。

     

    以下是完整的 HTML 代码示例，您可以将其保存为 `index.html` 文件并在浏览器中打开：

     

    <!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的可爱的猫咪，他叫做Tom:</p>
    <img src="https://mippu.qunapu.com/upload/2023/05/20230513132800168395568060415.jpg" alt="Tom the cat">
    <p>在这里我将分享我的观点、经验和故事。我希望您喜欢!</p>
    <p>如果您有任何问题或反馈，请随时 <a href="mailto:kf@qunapu.com">联系我</a>。</p>
  </body>
</html>

    在这个示例中，我们使用 `<h1>`、`<p>`、`<img>` 和 `<a>` 等标记创建文本、图像和链接，并把它们组合到一个简单的网页中。保存并在浏览器中打开该文件，您将看到一个简单的网页，它包含一张猫咪的图片和一些文本内容。因为我们提供了 `alt` 属性，如果您的浏览器无法显示图像，它将在页面上显示替代文本。

     

    希望能帮助您开始学习HTML。

    html零基础入门教程及代码演示例子 第1张

    云计算与代码 394 html代码html语言网页代码html零基础入门教程
    搜索
    分类最新
    分类热门
    分类猜你喜欢
    © Copyright去哪铺.Z-Blog.Some Rights Reserved.粤公网安备 44170202000251号 粤ICP备15035385号-2 免责声明 帮助中心 编程文档