HTML 核心标签

HTML 核心标签

• 排版标签
• • 标题标签
  • 段落标签
  • 换行标签
  • 水平分割线标签
• 文本格式化标签
• 媒体标签
• • 图片标签
  • 音频标签
  • 视频标签
• 超链接标签
• 列表标签
• • 无序列表
  • 有序列表
  • 自定义列表
• 表格标签
• • 表格基础
  • 表格合并
• 表单标签
• • input
  • button
  • select
  • textarea
  • lable
• 语义化标签
• • 无语义
  • 有语义
• 字符实体

本文整理了 HTML 中最核心、最常用的标签，分为两大模块：第一部分主要涵盖排版、格式化、媒体、链接等基础标签，第二部分则深入讲解列表、表格、表单、语义化标签及字符实体。

排版标签

标题标签

    <!-- 标题标签  -->
    <!-- 
        特点：独自占一行
     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签

    <!-- 段落标签 -->
    <p>一段文字</p>

换行标签

    <!-- 换行标签 -->
    <p>两段文字<br>三段文字</p>

水平分割线标签

    <!-- 水平分割线标签 -->
    <hr>

文本格式化标签

    <!--2.【 文本格式化标签 】 -->
    <!--
         说明：下面一组为了突出语义
     -->
    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <s>删除线</s>

    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除线</del>

媒体标签

图片标签

    <!-- 图片标签 -->
    <!-- 
        src:图片路径；绝对和相对路径
        alt:替换文本 
        title：提示文本；当鼠标悬停时候才出现
        width,height:宽度和高度；当只设置一个时候，另一个等比列所缩放
     -->
    <img src="1.jpg" alt="This is Bilie" title="Bilie" width="500" height=" "> 

音频标签

    <!-- 音频标签 -->
    <!--说明：格式只支持：MP3,WAV,OGG-->
    <!-- 
        controls:显示音频播放控件
        autoplay:自动播放（有些浏览器不支持）
        loop:循环播放
     -->
    <audio src="" controls loop></audio>

视频标签

    <!-- 视频标签 -->
    <!--说明：格式只支持：MP4，WEBM,OGG-->
    <!-- 
        controls:显示播放控件
        autoplay:自动播放（谷歌浏览器中需要配合muted实现静音播放）
        loop:循环播放
     -->
    <video src=" " controls></video>

超链接标签

    <!-- 4. 【链接标签 】 -->
    <!-- 
        href:跳转地址
        target:目标网站打开形式 
            _self（默认值）:覆盖原网页
            _blank:保留原网页
     -->
     <!--说明：空链接 #-->
     <a href="https://www.baidu.com/" target="_blank">跳转到百度 </a>

列表标签

无序列表

    <!-- 无序列表 -->
    <!-- 
        ul：无序列表的整体，用于包裹li标签
        li：表示无序列表的每一项，用于包含每一行的内容
     -->
    <ul>
        <li> 第一点</li>
        <li> 第二点</li>
        <li> 第三点</li>
    </ul>

有序列表

    <!-- 有序列表 -->
    <ol>
        <li>张三 90</li>
        <li>李四 85</li>
        <li>王麻子 80</li>
    </ol>

自定义列表

    <!-- 自定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

表格标签

表格基础

    <!-- 表格 -->
    <!-- 
        table:表格整体
        tr：表格每行
        td：表格单元格
        th：表头单元格
        caption:表格大标题
        关系：table > tr > td(th)

        thead:表格头部
        tbody:表格主体
        tfoot:表格底部
     -->
     <!-- 
         表格属性：
         border：边框宽度
         width：表格宽度
         height：表格高度
      -->
     <table border="1" width="200" height="200">
         <caption><strong>学生成绩单</strong></caption>
         <thead>
            <tr>
                <th>姓名</th> <th>成绩</th>
            </tr>
         </thead>
        
         <tbody>
            <tr>
                <td>张三</td><td>90</td>
            </tr>
            <tr>
                <td>李四</td><td>90</td>
            </tr>
         </tbody>
        <tfoot>
            <td>平均分</td><td>90</td>
        </tfoot>
     </table>

表格合并

     <!--表格的合并-->
     <!-- 
         rowspan：跨列合并单元格的个数
         colspan：跨行合并单元格的个数
      -->
      <!-- 
          注意：合并不能跨thead，tbody，tfoot
       -->
     <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
           <tr>
               <th>姓名</th> <th>成绩</th>
           </tr>
        </thead>
       
        <tbody>
           <tr>
               <td>张三</td><td rowspan="2">90</td>
           </tr>
           <tr>
               <td>李四</td><td>90</td>
           </tr>
        </tbody>
       <tfoot>
           <td>平均分</td><td>90</td>
       </tfoot>
    </table>

表单标签

input

    <!-- 表单标签 -->
    <!-- 标签：input-->
     <!-- 
         type属性：
         text：文本框                  placeholder:占位符（提示信息）
         password：密码框          
         radio：单选框                 name：分组 | checke：默认选中
         checkbox：多选框
         file:文件选择                 multiple：多个文件
         submit:提交按钮               value：文字
         reset:重置按钮，配合form标签
         button:普通按钮，配合js
      -->
      <form action="">
        账号：<input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密码：<input type="password" placeholder="密码">
        <br>
        <br>
        选择性别：<input type="radio" name="gender" checked> 男 <input type="radio" name="gender">女
        <br>
        <br>
        选择您感兴趣的领域：<input type="checkbox" name="interest">动漫 <input type="checkbox" name="interest">鬼畜
                            <input type="checkbox" name="interest">音乐
        <br>
        <br>
        上传您的头像<input type="file" multiple>
        <br>
        <br>
        <input type="submit" value="注册"> <input type="reset"> <input type="button" value="普通按钮">
     </form>

button

     <!-- 标签：button -->
     <!-- 
         属性：同input
         submit:
         reset:
         button:
      -->
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">普通按钮</button>

select

      <!-- 
          标签：
          select：下拉整体
          option：下拉菜单每一项
       -->
       <!-- 
           属性：
           seleced：默认选中
        -->
        <select>
            <option selected>北京</option>
            <option>西安</option>
            <option>上海</option>
            <option>深圳</option>
        </select>

textarea

        <!--标签：textarea-->
        <!-- 
            属性：
            cols:宽度
            rows:文本可见行数
         -->
         <!-- 说明:显示的文本框可以调整大小，需要配合css -->
        <textarea name="" id="" cols="30" rows="10"></textarea>

lable

    <!-- 标签：label -->
    <!-- 
        方法一：input+id lable+for
        方法二：lable一包
     -->
    <input type="radio" name="sex" id="man"> <label for="man">男</label> 
    <label> <input type="radio" name="sex">女 </label>

语义化标签

无语义

    <!-- 语义化标签 -->
    <!-- 无语义标签 -->
    <!-- 
        说明：
        div换行
        span在一行
     -->
    <div>div标签</div>
    <div>div标签</div>

    <span>span标签</span>
    <span>span标签</span>

有语义

    <!-- 有语义标签 -->
    <!-- 
        标签：
        header：网页头部
        nav：网页导航
        footer：网页底部
        aside：网页侧边栏
        section：网页区块
        article：网页文章
     -->
     <!-- 说明：用于手机端网页 -->
     <header>网页头部</header>
     <nav>网页导航</nav>
     <aside>网页侧边栏</aside>
     <section>网页区块</section>
     <article>网页文章</article>
     <footer>网页底部</footer>

字符实体

    <!-- 字符实体 -->
    <!-- 空格实现 -->
    <!-- 
        &nbsp;
     -->
     <div>网页&nbsp;&nbsp;学习</div>