5 HTML 入门教程

5 HTML 入门教程

HTML(超文本标记语言)是构建网页的基础。通过本教程,你将学习到HTML的基本结构和常用标签。以下是各个小节内容。

HTML 文档结构

在创建一个HTML文件时,基本结构非常重要。下面是一个简单的HTML文档示例:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页!</h1>
</body>
</html>

在这个示例中:

  • <!DOCTYPE html> 声明文档类型。
  • <html> 标签包裹了整个HTML文档。
  • <head> 部分包含了元数据(如字符集和页面标题)。
  • <body> 部分是网页可见内容。

常用标签

标题标签

HTML 提供了六种标题标签,<h1><h6>,用于定义不同级别的标题。例如:

1
2
3
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

通常,<h1> 用于主标题,<h2> 用于副标题,依此类次。

段落标签

段落使用 <p> 标签定义。每个段落会以空行分隔。例如:

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

链接标签

可以使用 <a> 标签创建超链接,href 属性指定URL。例如:

1
<a href="https://www.example.com">访问示例网站</a>

点击这个链接将打开https://www.example.com。

图片标签

插入图片使用 <img> 标签,src 属性指定图片的路径,alt 属性提供替代文本。例如:

1
<img src="image.jpg" alt="一张美丽的风景图">

列表标签

HTML 支持有序列表和无序列表。

无序列表

使用 <ul> 创建无序列表,<li> 表示每个列表项:

1
2
3
4
5
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>

有序列表

使用 <ol> 创建有序列表:

1
2
3
4
5
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>

表格标签

可以使用 <table><tr><th><td> 标签创建表格。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>

在这个例子中,<th> 用于表头,而 <td> 用于表格数据单元。

总结

以上是HTML基础知识的简单介绍,包括文档结构、常用标签及应用案例。掌握这些基本知识后,你就可以开始构建自己的网页了。继续探索HTML的其他高级功能,比如表单、音视频元素等等,都会让你的网站更为丰富多彩。

5 HTML 入门教程

https://zglg.work/html/5/

作者

AI教程网

发布于

2024-08-08

更新于

2024-08-10

许可协议