HTML标签大合集入门指南

稿子不爱

于 2024-08-23 20:10:06 发布

阅读量504

点赞数 19

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_74252611/article/details/141473836

版权

欢迎来到HTML标签的入门指南！在这里，我们将通过一种结构化的方式来介绍HTML的基本标签和它们的用法。无论你是新手还是想要回顾基础知识，这篇文章都将为你提供有用的信息。

HTML文档结构

在开始编写HTML文档之前，我们需要了解其基本结构。

网页的基本结构

<!DOCTYPE html>
<html>
<head>
    <title>HTML标签大合集入门</title>
    <!-- 用于包含页面的头部信息 -->
</head>
<body>
    <!-- 包含页面主体内容 -->
    <h1>欢迎来到HTML标签大合集入门指南</h1>
</body>
</html>

DOCTYPE: <!DOCTYPE html>是声明页面标准的标签。
html: 主文档标签。
head: 包含页面的头部信息，如标题、元数据、样式等。
body: 包含页面的主体内容。

常用标签

块级元素和内联元素

div: 块级元素，用于创建独立的块。
p: 段落标签，具有上下行距。
h1-h6: 标题标签，具有上下行距，字体变大且加粗。
span: 内联元素，没有默认样式。
hr: 水平分割线。
br: 强制换行。

文本格式化标签

b/strong: 加粗文本。
i/em: 斜体文本。
u: 下划线文本。
del: 中划线文本。
sup: 上标。
sub: 下标。

列表标签

<ul>
    <li>无序列表项</li>
</ul>
<ol>
    <li>有序列表项</li>
</ol>
<dl>
    <dt>项目标题</dt>
    <dd>项目说明</dd>
</dl>

ul: 无序列表。
ol: 有序列表。
li: 列表项。
dl: 定义列表。
- dt: 定义标题。
- dd: 定义描述。

表格标签

<table border="1" cellpadding="5" cellspacing="0" align="center" width="80%">
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

table: 表格容器。
tr: 表格行。
th: 表头单元格。
td: 普通单元格。

多媒体标签

img: 图像标签，使用alt属性提供加载失败的替代文本。
video: 视频标签，使用controls属性显示控件。
audio: 音频标签，使用controls属性显示控件。

链接和嵌入

a: 超链接标签，使用href属性指向目标地址。
iframe: 内嵌框架，使用src属性引入一个页面。

表单标签

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

form: 表单容器。
- action: 提交目标地址。
- method: 提交方法（get或post）。
input: 输入框。
- 类型包括：text, password, file, radio, checkbox等。
select: 下拉列表。
textarea: 多行输入文本框。

标准属性

id: 唯一标识符。
class: 类名，可以在多个标签中使用。
style: 内联样式。
name: 标签名称，用于表单提交。
title: 当用户将鼠标悬停在元素上时显示的提示信息。

这些标准属性可以应用于几乎所有HTML元素，为每个元素提供额外的功能和样式控制。

综合示例

以下是一个综合的HTML示例，展示了如何使用这些标签和属性来构建一个简单的网页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签大合集入门</title>
</head>
<body>
    <header>
        <h1>欢迎来到HTML标签大合集入门指南</h1>
        <p>学会使用基本的HTML标签来构建你的第一个网页。</p>
    </header>
    
    <section>
        <h2>常用标签示例</h2>
        <div>
            <p>这是一个段落，使用了<strong>加粗</strong>和<em>斜体</em>。</p>
            <p>水平分割线如下：</p>
            <hr>
            <p><u>下划线文本</u>和<del>删除线文本</del></p>
        </div>
    </section>

    <section>
        <h2>列表示例</h2>
        <ul>
            <li>无序列表项一</li>
            <li>无序列表项二</li>
        </ul>
        <ol>
            <li>有序列表项一</li>
            <li>有序列表项二</li>
        </ol>
    </section>

    <section>
        <h2>表格示例</h2>
        <table border="1" cellpadding="5" cellspacing="0" width="100%">
            <tr>
                <th>名称</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>HTML</td>
                <td>超文本标记语言</td>
            </tr>
            <tr>
                <td>CSS</td>
                <td>层叠样式表</td>
            </tr>
        </table>
    </section>

    <section>
        <h2>多媒体和链接</h2>
        <img src="image.jpg" alt="描述图片" width="200">
        <p>访问我们的<a href="https://example.com" title="访问示例网站">示例网站</a></p>
    </section>

    <section>
        <h2>表单示例</h2>
        <form action="/submit" method="post">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required placeholder="输入用户名">
            
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required placeholder="输入密码">
            
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </section>

    <footer>
        <p>感谢阅读本指南！</p>
    </footer>
</body>
</html>

总结

本文介绍了HTML文档的基本结构及常用标签，包括文本格式化、列表、表格、多媒体、链接和表单等。通过这些基础知识，你可以开始构建简单的网页。

希望这篇指南能够帮助你更好地理解和使用HTML标签。如果你有任何疑问或需要进一步的学习，请随时查阅更多资源或练习。祝你学习愉快！

稿子不爱

关注

19
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML标签大合集入门指南

本文介绍了HTML文档的基本结构及常用标签，包括文本格式化、列表、表格、多媒体、链接和表单等。通过这些基础知识，你可以开始构建简单的网页。希望这篇指南能够帮助你更好地理解和使用HTML标签。如果你有任何疑问或需要进一步的学习，请随时查阅更多资源或练习。祝你学习愉快！
复制链接

扫一扫