![HTML语言标签入门，小白必看[基础]-白芸资源网](https://www.52byw.cn/wp-content/uploads/2025/02/20250201160527400-17383971272025020108052711.webp)
一、HTML 基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<!-- 引入CSS或JavaScript -->
</head>
<body>
<!-- 网页内容 -->
</body>
</html>关键说明：
1.<!DOCTYPE html>：声明文档类型为 HTML5。
2.<html>：根标签，lang属性定义语言（如zh-CN表示中文）。
3.<head>：包含元数据、标题和外部资源链接。
4.<meta charset="UTF-8">：定义字符编码为 UTF-8。
5.<title>：网页标题（显示在浏览器标签页）。
二、常用 HTML 标签
1. 文本内容
标题：<h1>到<h6>（重要性递减）
<h1>主标题</h1>
<h2>副标题</h2>段落：<p>
<p>这是段落内容</p>换行：<br>（自闭合标签）
水平线：<hr>
2. 链接与图片
超链接：<a>
<a href="https://www.52byw.c
n" target="_blank">点击跳转</a>图片：<img>
<img src="image.jpg" alt="图片描述" width="200" height="100">3. 列表
无序列表：<ul>+<li>
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>有序列表：<ol>+<li>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>4. 表格
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>5. 表单
<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">
</form>常用表单元素：
<input>：文本、密码、复选框、单选框等（通过type属性定义）。<textarea>：多行文本输入。<select>+<option>：下拉菜单。<button>：按钮。
6. 容器
通用块容器：<div>
<div class="container">内容块</div>三、HTML5 语义化标签
<header>页眉（网站Logo/导航）</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>内容区块</section>
<article>独立文章</article>
<aside>侧边栏</aside>
<footer>页脚（版权信息）</footer>四、多媒体
视频：<video>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>音频：<audio>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>五、注释与特殊符号
注释：
<!-- 注释内容 -->
特殊符号：
空格：
小于号：<
大于号：>
版权符号：©
六、注意事项
1. 闭合标签：如<p>必须用</p>闭合。
2. 属性值用引号包裹：如<a href="link.html" rel="external nofollow" >。
3. 语义化优先：尽量使用HTML5语义化标签提升SEO和可访问性。
4. 兼容性：部分新标签（如<video>）需注意旧浏览器支持。
© 版权声明
转载请注明来自白芸资源网以及原文地址。
本站不敢保证内容的可靠性，内容仅供小范围学习与参考，禁止用于商业、盈利或其它非法用途以及大范围传播，您需在学习与参考完毕后从您的个人存储空间彻底删除，因您滥用而造成的损失本站不承担法律责任。
本站部分内容可能源于互联网，版权争议与本站无关，如有侵权可联系站长处理，敬请谅解！
请您合法使用本站资源。
THE END
![狐狸库自定义底部footer页脚美化教程[本站同款]-白芸资源网](https://www.52byw.cn/wp-content/uploads/2025/01/20250126182829983-17378873092025012610282917.png)
暂无评论内容