一、简介
HTML(HyperText Markup Language)是一种用于创建网页的标记语言。它使用标记(tag)来描述网页的结构和内容。HTML被用于定义网页中的文本、图像、链接、多媒体以及其他元素的排列和呈现方式。
HTML文档是由一系列的HTML元素(elements)组成的。每个元素通过标记(tag)来定义,标记通常是成对出现的,分为开标签和闭标签,中间包裹着元素的内容。HTML文档的基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这是一个HTML注释,可以用于注释代码 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片描述">
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
简要解释上面的HTML代码结构:
<!DOCTYPE html>
:声明文档类型,指示当前文档使用HTML5规范。<html>
:HTML文档的根元素,包含了整个HTML文档的内容。<head>
:头部元素,通常包含了文档的元数据,如字符编码、页面标题、引入的样式表和脚本等。<meta>
:元数据元素,用于设置文档的元数据,如字符编码、视口设置等。<title>
:标题元素,用于定义网页的标题,显示在浏览器的标题栏或标签页上。<body>
:主体元素,包含了网页的主要内容,如文本、图像、链接等。<h1>
、<p>
、<img>
、<a>
:分别是标题、段落、图片和链接等常用的HTML元素,用于构建网页的结构和内容。
二、基础
常用元素
- 标题元素
<h1>
到<h6>
:用于定义标题,级别从1到6逐渐减小。 - 段落元素
<p>
:用于定义段落。 - 图像元素
<img>
:用于插入图片。 - 超链接元素
<a>
:用于创建链接。 - 列表元素
<ul>
、<ol>
和<li>
:分别用于创建无序列表和有序列表。 - 表格元素
<table>
、<tr>
、<th>
和<td>
:用于创建表格。 - 表单元素
<form>
、<input>
、<textarea>
和<button>
:用于创建表单。
HTML注释
<!-- 这是一个注释 -->
注释用于在HTML代码中添加注解或说明,浏览器会忽略注释内容。
属性
HTML元素可以具有属性,属性提供了关于元素的额外信息。常见的属性有:
id
:用于给元素指定唯一的标识符。class
:用于给元素指定一个或多个类名,用于样式和脚本操作。src
:用于指定图像、音频、视频等资源的路径。href
:用于指定超链接的目标地址。alt
:用于指定图像元素的替代文本,当图像无法显示时显示该文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基础</title>
</head>
<body>
<h1>欢迎学习HTML基础</h1>
<p>这是一个段落。</p>
<img src="example.jpg" alt="示例图片">
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
三、元素
HTML由一系列的元素(elements)组成,每个元素都可以包含文本内容、其他元素或者是空的。HTML元素通常由开始标签(opening tag)、结束标签(closing tag)、内容和属性组成。
元素的基本结构:
<element attribute="value">content</element>
<element>
:元素名称,表示该元素的类型或者标签名称,比如<p>
表示段落元素,<img>
表示图像元素。attribute="value"
:元素的属性,用于提供额外的信息,比如src
属性用于指定图像的路径,href
属性用于指定链接的目标地址等。content
:元素的内容,即元素包裹的文本或者其他元素。- 开始标签:由元素名称和属性组成,以尖括号
<
和>
包围,用于表示元素的开始。 - 结束标签:与开始标签类似,但在元素名称前加上了斜杠
/
,表示元素的结束。
常见的HTML元素示例:
段落元素(<p>
):用于定义一个段落。
<p>This is a paragraph.</p>
标题元素(<h1>
到 <h6>
):用于定义标题,级别从1到6逐渐减小。
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
图像元素(<img>
):用于在网页中嵌入图像。
<img src="image.jpg" alt="Image description">
超链接元素(<a>
):用于创建链接。
<a href="https://www.example.com">This is a link</a>
列表元素(<ul>
、<ol>
和 <li>
):用于创建无序列表和有序列表。
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
表格元素(<table>
、<tr>
、<th>
和 <td>
):用于创建表格。
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
</table>