常用HTML标签讲解加HTML全标签速查手册（分类详解）

一、HTML 基础概念

HTML全标签速查手册在下面

1. 什么是HTML？

  • 定义：超文本标记语言（HyperText Markup Language），用于定义网页内容结构。
  • 核心功能：
    • 描述文本、图片、链接等内容的排列方式
    • 通过标签（Tags）标识不同内容类型
    • 与CSS（样式）、JavaScript（交互）共同构成现代网页

2. HTML文档基本结构

<!DOCTYPE html> <!-- 声明为HTML5文档 -->
<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>：必须放在第一行，声明HTML5标准
    • <meta name="viewport">：适配移动端屏幕
    • <title>：影响搜索引擎优化（SEO）

三、常用HTML标签详解

1. 文本与标题标签

<h1>主标题</h1>    <!-- 一个页面建议只用一个h1 -->
<h2>次级标题</h2>
<p>这是一个段落，用于展示文本内容。</p>
<strong>强调文本（默认加粗）</strong>
<em>斜体强调文本</em>
<br> <!-- 换行（空标签，无闭合） -->
<hr> <!-- 水平分割线 -->
  • 注意事项：
    • <h1>到<h6>表示标题级别，层级需清晰
    • <strong>和<em>具有语义，优于<b>和<i>

2. 列表标签

无序列表（项目符号）

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

有序列表（数字编号）

<ol>
    <li>第一步：学习HTML</li>
    <li>第二步：学习CSS</li>
    <li>第三步：学习JavaScript</li>
</ol>

3. 链接与图片

<!-- 绝对路径链接 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>

<!-- 相对路径链接（跳转到同一网站的其他页面） -->
<a href="about.html">关于我们</a>

<!-- 图片 -->
<img src="images/logo.png" alt="公司Logo" width="200" height="100">
  • 关键属性：
    • target="_blank"：在新标签页打开链接
    • alt：图片加载失败时显示的替代文本（对SEO和可访问性至关重要）

4. 表格标签

<table border="1">
    <caption>学生成绩表</caption>
    <tr> <!-- 表行 -->
        <th>姓名</th> <!-- 表头单元格 -->
        <th>数学</th>
        <th>语文</th>
    </tr>
    <tr>
        <td>张三</td> <!-- 标准单元格 -->
        <td>90</td>
        <td>85</td>
    </tr>
</table>

  • 常用属性：

    • colspan：横向合并单元格

    • rowspan：纵向合并单元格

      HTML全标签速查手册（分类详解）

      以下按功能分类，详细说明每个标签的作用、格式及典型应用场景。

      1. 基础结构标签

      标签 作用与格式
      <!DOCTYPE> 声明文档类型：必须是HTML文档的第一行
      <!DOCTYPE html>
      <html> 根元素：包裹所有HTML内容
      <html lang="zh-CN">...</html>（lang属性对SEO/无障碍访问至关重要）
      <head> 元信息容器：包含<title>、<meta>、<link>等非可视内容
      <head>...</head>
      <body> 页面主体：所有可见内容放置区域
      <body>...</body>

      2. 文本内容标签

      标签 作用与格式
      <h1>-<h6> 标题：层级递减，<h1>每个页面唯一
      <h1>主标题</h1>
      <p> 段落：默认上下边距
      <p>这是一个段落</p>
      <span> 行内容器：无语义，用于样式控制
      <span class="highlight">文本</span>
      <br> 换行：空标签
      第一行<br>第二行
      <hr> 水平分割线：空标签
      <hr>（常用于内容分隔）
      <pre> 预格式化文本：保留空格/换行
      <pre>Hello World</pre>
      <blockquote> 长引用：需搭配cite属性
      <blockquote cite="来源URL">引用内容</blockquote>

      3. 列表标签

      标签 作用与格式
      <ul> 无序列表：默认实心圆点
      <ul><li>项目1</li></ul>
      <ol> 有序列表：支持start/reversed属性
      <ol start="5"><li>步骤</li></ol>
      <li> 列表项：必须嵌套在<ul>/<ol>中
      <li>内容</li>
      <dl> 定义列表：用于术语解释
      <dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>
      <dt> 定义术语：必须与<dd>配对使用
      <dd> 术语描述：缩进显示

      4. 链接与媒体标签

      标签 作用与格式
      <a> 超链接：target="_blank"新标签页打开
      <a href="url">链接文字</a>
      <img> 图片：必须含alt属性
      <img src="logo.png" alt="网站Logo" loading="lazy">
      <video> 视频播放器：支持多种格式
      <video controls><source src="video.mp4"></video>
      <audio> 音频播放器：
      <audio controls><source src="audio.mp3"></audio>
      <iframe> 嵌入外部内容：需注意同源策略
      <iframe src="https://example.com"></iframe>
      <picture> 响应式图片：适配不同屏幕
      <picture><source media="(min-width:800px)" srcset="large.jpg"><img src="small.jpg"></picture>
      <source> 媒体源：指定多种格式
      <source src="image.webp" type="image/webp">

      5. 表格标签

      标签 作用与格式
      <table> 表格容器：border属性定义边框
      <table border="1">...</table>
      <tr> 表格行：包裹单元格
      <tr><td>内容</td></tr>
      <td> 标准单元格：普通数据
      <td>数据</td>
      <th> 表头单元格：默认加粗居中
      <th>姓名</th>
      <thead> 表头区：包裹标题行
      <thead><tr><th>标题</th></tr></thead>
      <tbody> 表体区：包裹数据行
      <tfoot> 表脚区：包裹汇总行

      6. 表单标签

      标签 作用与格式
      <form> 表单容器：action定义提交地址
      <form action="/submit" method="POST">...</form>
      <input> 输入控件：type支持20+种类型
      <input type="email" required>
      <select> 下拉菜单：需配合<option>
      <select><option>选项</option></select>
      <option> 下拉选项：selected默认选中
      <option value="1" selected>选项1</option>
      <textarea> 多行文本输入：rows/cols定义尺寸
      <textarea rows="4"></textarea>
      <label> 标签：提升可访问性
      <label for="name">姓名：</label><input id="name">
      <datalist> 输入建议列表：需绑定<input>
      <input list="colors"><datalist id="colors"><option value="red"></datalist>

      7. 语义化标签（HTML5）

      标签 作用与格式
      <header> 页眉：通常包含LOGO/导航
      <header><nav>...</nav></header>
      <footer> 页脚：版权/联系方式
      <footer>© 2023 公司名称</footer>
      <article> 独立内容区块：如博客文章
      <article><h2>标题</h2>...</article>
      <section> 内容分组：需搭配标题
      <section><h3>子标题</h3>...</section>
      <nav> 导航栏：主要链接集合
      <nav><a href="/">首页</a></nav>
      <aside> 侧边栏：附加内容
      <aside>相关推荐...</aside>

      8. 高级交互标签

      标签 作用与格式
      <canvas> 绘图画布：需JavaScript操作
      <canvas id="myCanvas"></canvas>
      <svg> 矢量图形：XML格式
      <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg>
      <progress> 进度条：显示任务进度
      <progress value="70" max="100"></progress>
      <meter> 度量条：表示范围值
      <meter min="0" max="100" value="75"></meter>
      <dialog> 模态对话框：需JavaScript控制
      <dialog open><p>提示内容</p></dialog>
      <details> 折叠内容：默认隐藏
      <details><summary>查看详情</summary>内容</details>

      使用示例

      <!-- 语义化页面示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>现代网页示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <a href="#home">首页</a>
            <a href="#news">新闻</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>文章标题</h2>
            <section>
                <h3>章节一</h3>
                <p>正文内容...</p>
                <img src="demo.jpg" alt="示例图片">
            </section>
        </article>
    </main>

    <footer>
        <p>联系方式：contact@example.com</p>
    </footer>
</body>
</html>

      核心要点：

      1. 语义优先：优先使用HTML5语义化标签
      2. 可访问性：为所有<img>添加alt属性，为表单控件添加<label>
      3. 响应式设计：使用<picture>和srcset适配多设备
      4. 验证合规：通过W3C验证器检查代码

      掌握此手册，可覆盖90%的日常开发需求！ 🚀

三、表单与用户输入

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="pwd" minlength="6">

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="example@mail.com">
    
    <button type="submit">注册</button>
</form>
  • 输入类型扩展：
    • type="number"：数字输入（可设置min/max）
    • type="date"：日期选择器
    • type="color"：颜色选择器

2. 选择控件

<!-- 单选按钮组 -->
<fieldset>
    <legend>性别</legend>
    <label><input type="radio" name="gender" value="male" checked>男</label>
    <label><input type="radio" name="gender" value="female">女</label>
</fieldset>

<!-- 下拉菜单 -->
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 多选框 -->
<label><input type="checkbox" name="hobby" value="music">音乐</label>
<label><input type="checkbox" name="hobby" value="sports">运动</label>

3. 表单验证

  • HTML5原生验证：
    • required：字段必填
    • pattern="[A-Za-z]{3}"：正则表达式验证
    • title="提示文字"：鼠标悬停显示验证提示

四、多媒体与嵌入内容

1. 视频与音频

<!-- 视频播放器 -->
<video controls width="600" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放
</video>

<!-- 音频播放器 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>

2. 嵌入外部内容

<!-- 嵌入YouTube视频 -->
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/视频ID" 
    frameborder="0" 
    allowfullscreen>
</iframe>

<!-- 嵌入地图 -->
<iframe 
    src="https://maps.google.com/maps?q=北京&output=embed"
    width="600" 
    height="450" 
    style="border:0">
</iframe>

五、开发工具与调试技巧

1. 推荐编辑器

  • VS Code：免费且强大，安装插件：
    • Live Server：实时预览网页
    • HTML CSS Support：代码自动补全

2. 浏览器开发者工具

  • 打开方式：右键页面 → 检查（或按F12）
  • 核心功能：
    • Elements面板：查看/修改HTML和CSS
    • Console面板：调试JavaScript错误
    • Network面板：分析资源加载性能

六、实战项目：构建个人简介页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人简介</title>
</head>
<body>
    <header>
        <h1>张三的个人主页</h1>
        <nav>
            <a href="#info">基本信息</a>
            <a href="#skills">技能列表</a>
        </nav>
    </header>

    <main>
        <section id="info">
            <h2>基本信息</h2>
            <img src="avatar.jpg" alt="头像" width="150">
            <ul>
                <li>年龄：25岁</li>
                <li>职业：前端开发者</li>
            </ul>
        </section>

        <section id="skills">
            <h2>技术技能</h2>
            <ol>
                <li>HTML5 & CSS3</li>
                <li>JavaScript</li>
                <li>React框架</li>
            </ol>
        </section>
    </main>

    <footer>
        <p>联系方式：zhangsan@email.com</p>
    </footer>
</body>
</html>

下一步行动：

  1. 复制代码示例并保存为 .html 文件
  2. 用浏览器打开文件查看效果
  3. 尝试修改代码并观察变化

掌握这些内容后，你将能够独立搭建结构清晰、内容丰富的静态网页！ 🚀

posted @ 2025-02-25 19:13  以恒1  阅读(121)  评论(0)    收藏  举报