个人主页: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>
以上就是 HTML 核心标签与功能的详细介绍。HTML 是 Web 开发的基础,掌握这些核心标签对于构建网页至关重要。
结语
感谢您的阅读!期待您的一键三连!欢迎指正!