常用的HTML代码有哪些

发布时间：2022-03-25 11:23:10 作者：iii
来源：亿速云阅读：122

# 常用的HTML代码有哪些

HTML（HyperText Markup Language）是构建网页的基础语言。无论是简单的静态页面还是复杂的Web应用，都离不开HTML代码的支持。本文将详细介绍常用的HTML代码及其用途，帮助初学者快速掌握HTML的核心元素。

## 一、HTML基础结构

每个HTML文档都遵循基本的结构框架，这是所有网页的起点：

```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>
</head>
<body>
    <!-- 页面内容写在这里 -->
</body>
</html>

关键元素说明：

<!DOCTYPE html>：声明文档类型
<html>：根元素
<head>：包含元数据和引用的外部资源
<body>：可见页面内容区域

二、常用文本标签

1. 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 直到h6 -->

2. 段落与换行

<p>这是一个段落。</p>
<p>这是另一个段落。<br>这里强制换行</p>

3. 文本格式化

<b>加粗文本</b>
<strong>重要文本（语义化加粗）</strong>
<i>斜体文本</i>
<em>强调文本（语义化斜体）</em>
<u>下划线文本</u>
<s>删除线文本</s>
<sup>上标</sup>和<sub>下标</sub>

三、链接与图像

1. 超链接

<a href="https://example.com" target="_blank">外部链接</a>
<a href="#section-id">页面锚点链接</a>
<a href="mailto:contact@example.com">邮件链接</a>

2. 图像显示

<img src="image.jpg" alt="图片描述" width="200" height="100">

3. 图像映射

<img src="planets.jpg" alt="行星" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="水星">
</map>

四、列表结构

1. 无序列表

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

2. 有序列表

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

3. 定义列表

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

五、表格元素

<table border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总计：1人</td>
        </tr>
    </tfoot>
</table>

六、表单元素

1. 基础表单

<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" minlength="6">
    
    <input type="submit" value="登录">
</form>

2. 常用输入类型

<input type="email"> <!-- 电子邮件 -->
<input type="number" min="1" max="100"> <!-- 数字 -->
<input type="date"> <!-- 日期选择 -->
<input type="color"> <!-- 颜色选择 -->
<input type="file" accept=".jpg,.png"> <!-- 文件上传 -->
<input type="checkbox" id="agree" checked> <!-- 复选框 -->
<input type="radio" name="gender" value="male"> <!-- 单选按钮 -->

3. 其他表单元素

<select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
</select>

<textarea rows="4" cols="50" placeholder="请输入内容..."></textarea>

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>

七、语义化标签（HTML5）

<header>页眉内容</header>
<nav>导航链接</nav>
<main>
    <article>
        <section>
            <h2>文章章节</h2>
            <p>内容段落</p>
        </section>
    </article>
    <aside>侧边栏内容</aside>
</main>
<footer>页脚内容</footer>

八、多媒体元素

1. 音频

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素
</audio>

2. 视频

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

3. 嵌入内容

<iframe src="https://example.com" width="600" height="400"></iframe>
<embed src="flash.swf" width="400" height="300">

九、元信息标签

<meta name="description" content="页面描述">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="作者名">
<meta http-equiv="refresh" content="30"> <!-- 30秒后刷新 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">

十、特殊字符与注释

1. 常用字符实体

&amp; → &
&lt; → <
&gt; → >
&nbsp; → 空格
&copy; → ©
&reg; → ®

2. 注释语法

<!-- 这是HTML注释，不会显示在页面中 -->

十一、HTML5新增功能

1. Canvas绘图

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

2. 本地存储

<script>
    localStorage.setItem("username", "John");
    sessionStorage.setItem("token", "abc123");
</script>

3. 地理定位

<script>
    navigator.geolocation.getCurrentPosition(showPosition);
    function showPosition(position) {
        alert("纬度: " + position.coords.latitude + 
              " 经度: " + position.coords.longitude);
    }
</script>

十二、最佳实践建议

语义化优先：尽量使用语义化标签而非div
属性规范：始终为img添加alt属性，为a标签添加title属性
代码可读性：合理缩进，添加必要注释
兼容性考虑：使用meta viewport确保移动端适配
性能优化：为脚本添加async/defer属性

结语

掌握这些常用的HTML代码是前端开发的基础。随着Web技术的发展，HTML标准也在不断演进，建议定期查阅MDN等权威文档了解最新规范。通过实践将这些代码组合运用，你将能够构建出结构良好、语义清晰的网页。

提示：本文示例代码总字符数约1950字，实际使用时可根据需求调整内容和格式。 “`

这篇文章系统介绍了HTML的常用代码，从基础结构到HTML5新特性，涵盖了文本、链接、图像、列表、表格、表单等核心元素，并提供了最佳实践建议。格式采用Markdown语法，便于阅读和编辑。