当前位置:  首页>> 技术小册>> 编程入门课:HTML(5)从入门到实战

HTML(Hypertext Markup Language)是一种标记语言,用于创建网页和其他基于网络的应用程序。一个HTML文档由许多元素组成,它们协同工作来构建页面的结构、内容和样式。本文将介绍HTML文档的结构和各个组成部分的作用。

一、HTML文档基本结构

每个HTML文档都需要一个基本的结构,该结构由文档类型声明、HTML元素、head元素和body元素组成。

文档类型声明
文档类型声明(Document Type Declaration,简称DTD)是HTML文档的第一行。它告诉浏览器哪个HTML版本正在使用。HTML5的文档类型声明如下:

  1. <!DOCTYPE html>

在HTML5中,文档类型声明不区分大小写。

HTML元素
HTML元素是用于构建HTML文档的基本构建块。它们由开始标记、内容和结束标记组成。开始标记包含元素名称和任何属性,而结束标记只包含元素名称。

下面是一个简单的HTML元素示例:

  1. <p>这是一个段落。</p>

在这个例子中,<p>是开始标记,</p>是结束标记,这是一个段落。是元素的内容。

head元素
head元素位于HTML文档的开始标记和结束标记之间。它包含了一些元数据,如标题、关键词和描述等。它还可以包含其他引用,如CSS和JavaScript文件。

下面是一个简单的head元素示例:

  1. <head>
  2. <title>这是一个标题</title>
  3. <meta name="description" content="这是一个描述。">
  4. <link rel="stylesheet" type="text/css" href="style.css">
  5. </head>

在这个例子中,<title>是HTML文档的标题,<meta>提供了关于文档的描述,<link>引用了一个CSS文件。

body元素
body元素包含了HTML文档的所有可见内容,如文本、图像、表格和表单等。

下面是一个简单的body元素示例:

  1. <body>
  2. <h1>这是一个标题</h1>
  3. <p>这是一个段落。</p>
  4. <img src="image.jpg" alt="这是一张图片。">
  5. </body>

在这个例子中,<h1>是一个标题,<p>是一个段落,<img>引用了一张图片。

二、HTML元素的基本结构

HTML元素由开始标记、内容和结束标记组成。开始标记包含元素名称和任何属性,而结束标记只包含元素名称。

开始标记
开始标记是元素的开头,它由左尖括号和元素名称组成。元素名称是不区分大小写的。如果元素具有属性,那么它们应该在开始标记中定义。属性提供了关于元素的额外信息,如图像的URL、链接的目标等。

下面是一个带有属性的元素示例:

  1. <a href="https://www.example.com" target="_blank">这是一个链接</a>

在这个例子中,<a>是一个链接元素,href属性指定了链接的URL,target属性指定了链接在哪个窗口中打开。

内容
元素的内容是位于开始标记和结束标记之间的文本或其他元素。有些元素没有内容,如<img>,它仅显示图像。

下面是一个包含内容的元素示例:

  1. <p>这是一个段落。</p>

三、HTML元素的类型

HTML元素可以分为块级元素、内联元素和特殊元素。

块级元素
块级元素在页面中显示为块状元素,它们会占据整个可用宽度并自动换行。块级元素通常用于分隔页面中的不同段落。

下面是一些常见的块级元素:

<div>:用于组合其他元素,通常用于布局和样式控制。
<h1> - <h6>:用于标题,数字表示标题的重要性,从1到6递减。
<p>:用于段落。
<ul>和<ol>:分别用于无序和有序列表。
<table>:用于表格。
内联元素
内联元素在页面中显示为行内元素,它们只占据其内容的宽度,并且不会自动换行。内联元素通常用于强调文本或在文本中插入其他元素。

下面是一些常见的内联元素:

<a>:用于链接。
<span>:用于组合其他元素,通常用于文本样式控制。
<em>和<strong>:分别用于强调文本的斜体和粗体显示。
<img>:用于插入图像。
<input>:用于表单输入。
特殊元素
特殊元素在HTML文档中具有特殊含义,如文档类型声明和注释等。
以下是一些常见的特殊元素:

  1. <!DOCTYPE>:声明HTML文档的文档类型。
  2. <html>:HTML文档的根元素。
  3. <head>:HTML文档头部元素,包含文档的元数据,如标题、链接、脚本等。
  4. <title>:指定文档的标题,出现在浏览器的标题栏中。
  5. <meta>:元数据元素,用于指定文档的字符编码、关键字、描述等。
  6. <style>:用于定义HTML文档中的CSS样式。
  7. <script>:用于指定HTML文档中的JavaScript脚本。
  8. <!-- -->:注释标签,用于在HTML文档中添加注释。

该分类下的相关小册推荐: