如何编写HTML代码

今天你吸猫了么
305 阅读11分钟

How To Write HTML Code

建立一个网站的第一步是学习HTML。HTML真的很重要，因为它是所有网页的骨架。HTML为网站的内容提供结构，包括文本、图像、按钮、视频和链接。当你第一次学习代码时，HTML是一个开始学习之旅的好地方。在学习了一些基本的HTML之后，有可能建立基本的网站，包括文字、图像和视频。HTML是超文本 标记 语言的缩写。在本教程中，我们将仔细研究如何开始编写HTML。

基本的HTML标记

我们可以从一个简单的HTML标记的例子开始。

<h1>Purpose Of HTML</h1>

<p>HTML provides the skeleton for websites, and it is a great place to start when learning to code!</p>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" height="100" width="100">

<p>HTML is used by:</p>
<ul>
  <li>Web developers</li>
  <li>Marketers</li>
  <li>Content creators</li>
  <li>Entrepreneurs</li>
  <li>and many more!</li>
</ul>

上面的代码在网络浏览器中大概会产生以下输出。

basic html markup

HTML标记

HTML是一种网络开发的语言。它是将网络开发的所有方面联系在一起的胶水。HTML不是一种编码语言，而是一种标记语言。标记是指一种描述文本的方式，与文本本身是分开的。就像老师在学生的读书报告上 "标记 "关键句子和圈出摘要要点一样，HTML对网页中的内容进行注释。HTML通过使用HTML标签将内容和注释分开，这些标签由角括号表示，看起来像小于或大于的符号**（<**markup/> ）。

HTML标签如何工作

HTML标签是我们可以用来标记HTML的文本的工具。它们是一种机制，提供关于它们所包含的内容类型的信息。这里可以看到一个关于HTML标签如何环绕内容以创建一个HTML元素的语法例子。

html tag diagram

上图是一个HTML段落元素。该段落元素由一个开头标签**（

）、内容（"Hello World!"文本）和一个结束标签（

**）组成。

下面是对每个元素的进一步定义。

HTML元素--HTML文档中由HTML标签和它所包含的文本或媒体创建的单一内容。
开头标签- 用于开始一个HTML元素的元素名称，周围有开头和结尾的角括号。
内容- 一个HTML元素的开头和结尾标签之间包含的文本或媒体。
闭合标签- 用于结束一个HTML元素的第二个HTML标签。闭合标签里面有一个正斜杠（/），直接在左角括号之后。

练习HTML元素

为了感受一下HTML标记是如何影响内容的，我们需要进行练习。首先，我们要看一些原始文本，了解它在浏览器中的显示情况，然后我们可以给它添加一些标记，看看它是如何使外观发生改变的。

标记前

Willy's Web Design. With over 10 years of experience in HTML, JavaScript, and CSS, we'll provide 
you with the highest quality website. Every design is unique, custom, and tailored 
to your tastes. Click here!

raw text no markup

标记后

<h1>Willy's Web Design</h1>
<p>With over 10 years of experience in HTML, JavaScript, and CSS, we'll provide
 you with the highest quality website. Every design is unique, custom, and tailored
 to your tastes.</p>
<button>Click here!</button>

beginner html markup

通过简单地应用三个不同的HTML标签（h1、p和button），我们可以看到媒体在页面上的呈现方式发生了巨大的变化。

什么是超文本？

超文本是指与其他文本相连的文本。这张图显示了不同的网站，这些网站通过链接相互连接，这些链接用箭头表示。

linked web pages hypertext

超文本中的hyper一词给出了一个线索，即文本超越了传统的书面文字的限制。通过超文本阅读的人不是像阅读一本书那样从头到尾地阅读文件，而是可以浏览。这就是我们提出的 "浏览网络 "的原因。当点击从一个文件到另一个文件的链接时，用户可以跳到他们认为最有趣的任何页面，并在开放的网络中塑造他们自己的独特路径。

在现代网络上常见的是丰富的用户体验，有嵌入式视频、动画和互动性等功能，所以有时并不觉得你只是在从一个HTML页面导航到下一个页面。然而，在现实中，尽管网络已经取得了所有的进步，但在其核心部分，网络仍然只是一个超链接文件的集合。

超链接的介绍

链接是在HTML中用href属性创建的，它代表了超链接参考。href属性允许我们指定一个链接应该带用户去的URL。下面是一个关于href属性的实际应用的例子。

<a href="https://vegibit.com/how-to-write-html-code/">Write HTML Code!</a>

当我们在锚点标签（简称）上设置href属性时，我们可以同时指定应该为用户呈现的文本（锚点标签内的文本）和浏览器应该导航到的URL。

在这段代码中，我们给href属性分配了一个值*vegibit.com/how-to-writ… HTML Code！）时，他们将被引导到Write HTML Code！。

元素 --------

只有开头和结尾的body标签内的内容才能显示在屏幕上。下面是开头和结尾的body标签的样子。

<body>
 
</body>

元素 ------

HTML元素代表段落。段落表示由空行或第一行缩进将文本块与附近的文本块分开。在HTML中，段落可以是任何相关内容的结构性分组，如图片或表单字段，它们在本质上是块级的。 

<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>

html paragraph element

元素 ------

是最高级别的段落标题元素。每个页面或视图只能使用一个

。它应该简明地描述内容的总体目的。 
<body>
<h1>Hello H1 Tag</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>

html h1 element

元素 --------
HTML元素是流动内容的通用容器。它对内容或布局没有任何影响，除非使用CSS进行某种方式的样式设计。 
<body>
<h1>Hello H1 Tag</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<div>
    <p>This paragraph is a child of the div element and a grandchild of the body element</p>
</div>
</body>

html div element

关于HTML结构的说明

HTML标记被组织成一个类似于家庭树的关系集合。正如你在前面看到的，我们把

标签放在标签内，这就是所谓的子元素。

标签是标签的一个子元素。这也意味着子元素是嵌套在父元素里面的。

<body>
  <p>This paragraph is a child of the body</p>
</body>

在上面的例子中，

元素被嵌套在元素里面。

元素被认为是元素的一个子元素，而元素被认为是父元素。可以有多个层次的嵌套，所以这个比喻可以扩展到孙子、曾孙等等。元素与它们的祖先和后代元素之间的关系被称为层次结构。理解HTML的层次结构是很重要的，因为子元素可以继承其父元素的行为和风格。

到

元素 -----------

我们已经看了h1元素，一般来说，每个HTML页面应该只有一个这样的元素。还有其他5个标题元素，包括h2到h6。

  • 标题信息可以被用户代理用来自动构建一个文档的目录。
  • 避免使用标题元素来调整文本的大小。相反，可以使用CSS字体大小属性。
  • 避免跳过标题级别：总是从

    开始，然后是

    ，以此类推。

  • 每个页面或视图只使用一个

    。它应该简明地描述内容的总体目的。

<body>
<h1>Hello H1 Tag</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

write html headings

HTML属性

属性是HTML的一个超级重要方面。想想看，属性就像添加到一个元素的开头标签中的内容，可以用不同的方式使用，从提供信息到改变风格。属性是由两部分组成的。

  • 属性的名称
  • 该属性的值

id是开始学习属性的一个好地方。它被经常使用，并被用来唯一地识别HTML页面上的部分。id属性可以用在很多方面，但现在，我们将看看它如何帮助我们识别页面上的内容。

<body>
<h1>Peppers</h1>

<div id="introduction">
    <h2>About Peppers</h2>
    <h3>Types</h3>
    <h3>Characteristics</h3>
</div>

<div id="growing">
    <h2>Growing Peppers</h2>
    <h3>Soil nutrition for growing Peppers</h3>
    <h3>Required temperatures for Peppers</h3>
</div>

<div id="recipes">
    <h2>Recipes for Peppers</h2>
</div>

</body>

上面的标记有三个不同的部分，每个部分都被自己的div元素包裹着。这是组织页面上的数据的一种常见方法。另外，请注意，我们为每个div元素添加了一个id，以唯一地识别它。当你在一个页面上使用一个id时，这个id的名字应该只使用一次。

用

或显示文本

<body>
<h1>Peppers</h1>

<div id="introduction">
    <h2>About Peppers</h2>
    <h3>Types</h3>
    <p>Peppers are both a fruit and a vegetable, so make sure
        to eat lots of them.</p>
    <h3>Characteristics</h3>
    <p>Peppers are a great source of vitamin C, and they are
        also a good source of potassium, which is important for the
        body's ability to absorb and store energy.</p>
</div>

<div id="growing">
    <h2>Growing Peppers</h2>
    <h3>Soil nutrition for growing Peppers</h3>
    <p>Peppers need rich organic soil to grow well.</p>
    <h3>Required temperatures for Peppers</h3>
    <p>Peppers need to be kept at a temperature between 70 and 90
        degrees Fahrenheit for best results.</p>
</div>

<div id="recipes">
    <h2>Recipes for Peppers</h2>
    <p>Stuffed Pepper Soup is a fantastic recipe!</p>
</div>

</body>

和元素

可以直接在HTML标记中为文本设置样式，而不需要任何CSS。例如，你可以使用标签来强调文本，或者使用标签来突出重要的文本。

这些标签可以通过CSS定制它们在HTML中显示内容的方式，但浏览器有内置的样式表，一般会以下列方式为这些标签设置样式。

  • 标签一般会显示为斜体强调。
  • 一般会显示为粗体强调。
<body>
<h1>Peppers</h1>

<div id="introduction">
    <h2><em>About Peppers</em></h2>
    <h3>Types</h3>
    <p>Peppers are both a <strong>fruit</strong> and a <strong>vegetable</strong>, so make sure
        to eat lots of them.</p>
    <h3>Characteristics</h3>
    <p>Peppers are a <em>great source</em> of vitamin C, and they are
        also a good source of potassium, which is important for the
        body's ability to absorb and store energy.</p>
</div>

</body>

em and strong html


标签

在一个HTML文件中包含的空白空间实际上并不影响元素在网络浏览器中的位置。当在HTML中输入新的一行时，浏览器只是从左到右继续解析文本。为了在渲染的输出中引入一个新行，你可以使用HTML的换行元素：
。

换行元素是独一无二的，因为它没有结束标签。你可以在你的HTML代码中的任何地方使用它，在浏览器中就会显示断行。

<p>This is on line 1 <br> and this is on line 2 <br> line 3 is here</p>

how html line break works

无序列表

    无序列表是网页开发中的一个主要部分。无序列表标签（

      ）用于创建一个无特定顺序的项目列表。无序列表用一个圆点来显示每个列表项。

        元素不是将实际文本插入HTML的地方。每个列表项必须用
      • 标签添加到无序列表中。
      • 或列表项标签是用来描述列表中的一个项目。
        • 牛排
        • 黑豆
        • 蔬菜
        • 莎莎酱
        • 生菜
        • 奶酪
        • 鳄梨酱

        html unordered list how to

        有序列表

          HTML中的有序列表与无序列表的工作原理很相似，不同的是每个元素都有编号。当你需要列出一个程序中的不同步骤或将项目从头到尾排列时，有序列表是很好的选择。你可以用

            标签和嵌套的
          1. 标签创建一个有序列表。在这里，我们简单地将上面的无序列表改为有序列表。

            <ol>
    <li>Steak</li>
    <li>Black Beans</li>
    <li>Vegetables</li>
    <li>Salsa</li>
    <li>Lettuce</li>
    <li>Cheese</li>
    <li>Guacamole</li>
</ol>

            how to writed ordered html list

            元素

            网页上只有文字内容，可能有点空洞的感觉。这就是为什么我们有标签，这样网页开发者就可以在他们的HTML中添加吸引人的图片。标签是你在网页上添加图片的方式。关于标签的一个有趣的观点是，它是自我封闭的。这意味着你只需在标签的末尾添加一个正斜杠/。不需要像这样的东西。

            为了让图像显示，src属性必须填入图像的位置。这将是一个存储文件的URL。

            <img
        src="https://images.pexels.com/photos/8698152/pexels-photo-8698152.jpeg"
        width="400"
/>

            how to use img html tag

            alt属性，代表替代文本，用于为网站上的图像赋予意义。这个属性可以像src属性一样被添加到图像标签中。它被用来指定图像的准确描述。这对于包容性的考虑是很重要的，例如当屏幕阅读器被用作访问世界范围的网络时的一种辅助技术。

            <img
        src="https://images.pexels.com/photos/8698152/pexels-photo-8698152.jpeg"
        width="400"
        alt="A beautiful sky with trees in the foreground"
/>

            <视频

            现代网络每天都在变得越来越有活力。用户现在正在寻找移动的图像，也就是视频，以进一步增强网络体验。HTML支持用元素显示视频，并需要一个带有视频源链接的src属性。与元素不同，元素确实需要一个开头和结尾标签。

            <video src="awesome-video.mp4" width="400" height="300" controls>
  Video not supported
</video>

            如何编写HTML代码总结

            本教程涵盖了许多基础知识，你需要开始为网络编写HTML代码。让我们回顾一下我们现在知道的东西。

            • HTML是超文本标记语言（Hyper Text Markup Language）的首字母缩写。
            • 它用于创建网页的结构和内容
            • HTML元素包含开头和结尾标签，在它们之间有原始文本或其他HTML标签
            • HTML元素可以嵌套在其他元素中
            • 可见的内容应放在开头和结尾的标签内
            • 标题和副标题，

              至

              标签，用于为内容的各个部分提供标题。

            • 、和

              标签指定文本或区块
            • 和标签用于斜体字和粗体字。
            • 换行符是用
              标签创建的。
            • 有序列表
                是编号的
              1. 无序列表
                  是子弹式的。
                • 图片和视频可以使用它们的src属性添加。

      avatar
      文章
      阅读
      粉丝