HTML 标签介绍与用法

猪鼻插大葱扮大笨象

于 2024-07-22 09:30:00 发布

阅读量716

点赞数 6

分类专栏：前端自学知识文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_59779364/article/details/140596309

版权

前端自学知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML 标签介绍与用法

HTML（超文本标记语言）是构建网页的基础。它使用标签来定义网页的结构和内容。本文将详细介绍常用的 HTML 标签及其用法，并提供示例。

1. HTML 基础结构

每个 HTML 文档都有一个基本的结构，通常包含以下几个部分：

<!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>
    <p>这是一个用来展示 HTML 标签的示例。</p>
</body>
</html>

1.1 结构解析

<!DOCTYPE html>：声明文档类型，告知浏览器使用 HTML5 解析。
<html>：根元素，包含整个 HTML 文档。
<head>：文档的头部，包含元数据、标题、样式等。
<body>：文档的主体，包含可见的内容。

2. 常用 HTML 标签

2.1 标题标签

HTML 提供了六种标题标签，从 <h1> 到 <h6>，用于定义不同级别的标题。

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

2.2 段落标签

段落使用 <p> 标签定义。

<p>这是一个段落。段落用于显示文本内容。</p>

2.3 链接标签

使用 <a> 标签创建超链接。

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

2.4 图像标签

使用 <img> 标签插入图像。

<img src="image.jpg" alt="描述文本" width="300" height="200">

2.5 列表标签

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

无序列表

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

2.6 表格标签

使用 <table> 标签创建表格。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

2.7 表单标签

表单用于收集用户输入。

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <input type="submit" value="提交">
</form>

2.8 其他常用标签

强调标签：<strong>（加粗）和 <em>（斜体）。
分隔线：<hr> 用于创建水平线。
块引用：<blockquote> 用于引用其他内容。

<strong>这是加粗文本</strong>
<em>这是斜体文本</em>
<hr>
<blockquote>这是一个引用的文本。</blockquote>

3. 综合案例

下面是一个包含多种 HTML 标签的完整示例：

<!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>
    <p>这是一个关于我的网页，下面是我的兴趣爱好：</p>
    
    <h2>兴趣爱好</h2>
    <ul>
        <li>编程</li>
        <li>旅行</li>
        <li>阅读</li>
    </ul>
    
    <h2>我的技能</h2>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    
    <h2>联系我</h2>
    <form action="/submit" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="提交">
    </form>
    
    <h2>我的照片</h2>
    <img src="myphoto.jpg" alt="我的照片" width="300" height="200">
    
    <h2>引用</h2>
    <blockquote>“生活就像一盒巧克力，你永远不知道你会得到什么。”</blockquote>
</body>
</html>