HTML基础

HTML(超文本标记语言)是一种标记语言,用于构建和组织网页内容。它使用各种标签来定义页面上的不同元素,例如标题、段落和链接。


HTML 层级结构

HTML 元素是分层级的,这意味着它们可以相互嵌套以创建网页内容的树状结构。

这种分层结构称为 DOM(文档对象模型),它由网页浏览器用于渲染网页。例如,

<!DOCTYPE html>
<html>
    <head>
        <title>My web page</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>This is my first web page.</p>
        <p>It contains a 
             <strong>main heading</strong> and <em> paragraph </em>.
        </p>
    </body>
</html>

浏览器输出

A simple HTML example to demonstrate hierarchy

在此示例中,html 元素是层级结构的根元素,它包含两个子元素:headbodyhead 元素反过来包含一个名为 title 的子元素,而 body 元素包含子元素:h1p

让我们看看上面示例中使用的各种元素的含义。

  • <html>:DOM 的根元素,它包含代码中的所有其他元素
  • <head>:包含有关网页的元数据,例如标题以及任何链接的 CSS 或 JavaScript 文件
  • <title>:包含网页的标题,将显示在网页浏览器的标题栏或标签页中
  • <body>:包含网页的主要内容,将显示在网页浏览器的窗口中
  • <p>:包含网页上的文本段落
  • <strong>, <em><p> 元素的子元素,它们分别用于将文本标记为重要和强调

注意:只有 <body> 标签内的元素才会在网页浏览器中渲染。


什么是 HTML 元素?

HTML 元素由几个部分组成,包括开始标签和结束标签、内容和属性。以下是这些部分的解释

Basis html elements

这里,

  • 开始标签:由元素名称组成,用尖括号括起来。它表示元素的开始以及元素效果开始的点。
  • 结束标签:与开始标签相同,但在元素名称前有一个斜杠。它表示元素的结束以及元素效果停止的点。
  • 内容:这是元素的内容,可以是文本、其他元素或两者的组合。
  • 元素: 开始标签、结束标签和内容共同构成元素。

什么是 HTML 属性?

HTML 元素可以有属性,它提供有关元素的附加信息。它们在元素的开始标签中指定,并采用名称-值对的形式。让我们看一个示例

<a href="http://example.com"> Example </a>

href 是一个属性。它提供有关 <a> 标签的链接信息。在上面的示例中,

  • href - 属性名称
  • https://programiz.com.cn - 属性值

注意:HTML 属性大多是可选的。


HTML 语法

我们需要遵循严格的语法指南来编写有效的 HTML 代码。这包括标签、元素和属性的使用,以及正确的缩进和空格使用。以下是有关 HTML 语法的一些要点

1. HTML 标签由元素名称组成,用尖括号括起来。例如,<h1><p><img> 是一些 HTML 标签。

2. HTML 元素是通过将元素内容包含在元素的开始标签和结束标签中来创建的。例如,

<span>Some text.</span>

是一个 HTML 元素。

3. HTML 属性用于提供有关 HTML 元素的附加信息,并在元素的开始标签中指定。例如,

<a target="www.google.com">Click Here</a> 

这里,target 是一个属性。

4. HTML 代码应格式良好并正确缩进,每个元素占一行,每个层级缩进一个级别。这使代码更易于阅读和理解,并有助于避免错误。例如,

<html>
    <head>
        <title>My First HTML Page</title>
    </head>
    <body>
        <h1>My First HTML Page</h1>
        <p> Hello World!</p>
    </body>
</html>

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战