【HTML】核心标签与功能-优快云博客

在这里插入图片描述

个人主页：Guiat
归属专栏：HTML CSS JavaScript

在这里插入图片描述

正文

HTML（超文本标记语言）是网页的基础结构，通过各种标签定义网页内容。以下是 HTML 的核心标签与功能介绍。

1. 基础文档结构

1.1 HTML 文档框架

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

1.2 头部标签

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="网页描述">
    <title>网页标题</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

2. 文本标签

2.1 标题标签

HTML 提供六级标题：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 段落与文本格式

<p>这是一个段落</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

<!-- 文本格式化 -->
<strong>粗体文本</strong> 或 <b>粗体文本</b>
<em>斜体文本</em> 或 <i>斜体文本</i>
<u>下划线文本</u>
<mark>高亮文本</mark>
<del>删除线文本</del>
<sup>上标</sup>
<sub>下标</sub>

2.3 引用和代码

<blockquote>
    这是一段长引用
</blockquote>

<q>这是一段短引用</q>

<code>这是代码片段</code>

<pre>
    这是
    预格式化
    文本
</pre>

3. 列表

3.1 无序列表

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

3.2 有序列表

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

3.3 定义列表

<dl>
    <dt>术语</dt>
    <dd>术语的定义</dd>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

4. 链接与图像

4.1 超链接

<!-- 基本链接 -->
<a href="https://www.example.com">链接文本</a>

<!-- 新窗口打开 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a>

<!-- 页内锚点 -->
<a href="#section1">跳转到章节1</a>
<h2 id="section1">章节1</h2>

<!-- 电子邮件链接 -->
<a href="mailto:example@example.com">发送邮件</a>

4.2 图像

<!-- 基本图像 -->
<img src="image.jpg" alt="图像描述">

<!-- 设置宽度和高度 -->
<img src="image.jpg" alt="图像描述" width="300" height="200">

<!-- 图像链接 -->
<a href="https://www.example.com">
    <img src="button.jpg" alt="点击按钮">
</a>

5. 表格

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>85</td>
            <td>92</td>
            <td>78</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>82</td>
            <td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>87.5</td>
            <td>87</td>
            <td>86.5</td>
        </tr>
    </tfoot>
</table>

6. 表单

6.1 基本表单结构

<form action="/submit" method="post">
    <!-- 表单元素 -->
    <input type="submit" value="提交">
</form>

6.2 输入元素

<!-- 文本输入 -->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

<!-- 密码输入 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password">

<!-- 单选按钮 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<!-- 复选框 -->
<input type="checkbox" id="bike" name="vehicle" value="bike">
<label for="bike">自行车</label>
<input type="checkbox" id="car" name="vehicle" value="car">
<label for="car">汽车</label>

<!-- 下拉列表 -->
<label for="city">城市:</label>
<select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 文本区域 -->
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<!-- 按钮 -->
<button type="button">点击我</button>
<input type="submit" value="提交">
<input type="reset" value="重置">

7. 语义化标签 (HTML5)

<header>网页头部</header>
<nav>导航栏</nav>
<main>
    <article>
        <section>第一部分</section>
        <section>第二部分</section>
    </article>
    <aside>侧边栏</aside>
</main>
<footer>网页底部</footer>

8. 多媒体标签

8.1 音频

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频标签。
</audio>

8.2 视频

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频标签。
</video>

9. HTML 标签使用频率分析

div、a、img、p 等基础标签使用频率最高
语义化标签如 header、nav、footer 的采用率持续上升
多媒体标签随着网络速度提升也越来越普遍

10. 响应式设计基础

<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 响应式图像 -->
<img src="image.jpg" alt="响应式图像" style="max-width:100%; height:auto;">

<!-- 响应式视频 -->
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
    <iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" 
            src="https://www.youtube.com/embed/example" 
            frameborder="0" allowfullscreen>
    </iframe>
</div>