熟悉HTML文件结构，并练习基本标签使用

发布于 2024-09-05 15:37:43

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页和网络应用的标准标记语言。一个基本的HTML文档由一系列的标签组成，这些标签告诉浏览器如何显示其中的内容。

HTML文件的基本结构

一个标准的HTML文档通常包含以下几个主要部分：

DOCTYPE: 声明文档类型，告诉浏览器这是一个HTML5文档。
html: 根元素，所有的内容都包含在其中。
head: 包含了文档的元数据，如标题、链接到其他资源（如CSS或JavaScript文件）。
title: 页面标题，显示在浏览器的标签上。
body: 包含了网页的所有内容，如文本、图片、链接等。

下面是一个简单的HTML文件示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">访问示例网站</a>
</body>
</html>

常用HTML标签

HTML元素：由开始标签、结束标签和内容组成。例如：
```
<p>这是一个段落。</p>
```
块级元素：通常以新行开始，占据一定空间。例如<div>, <p>, <h1>至<h6>, <li>等。
内联元素：不以新行开始，只占据必要空间。例如<span>, <a>, <img>, <input>等。

练习基本标签使用

文本结构：
- <h1>到<h6>定义标题。
- <p>定义段落。
- <br>定义换行。

链接：

<a href="https://www.example.com">点击这里</a>

图片：

<img src="image.jpg" alt="描述文字">

列表：

无序列表：

<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

有序列表：

<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

表格：

<table border="1">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表单：

<form action="submit_page.html" method="get">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="user_name">
  <input type="submit" value="提交">
</form>

实践是学习的最佳方式，你可以在本地创建HTML文件，用这些基本标签编写自己的网页，然后通过浏览器查看效果。随着实践的深入，你会对HTML有更深刻的理解。