01-HTML5语义标签

最新推荐文章于 2025-12-04 22:56:41 发布

原创最新推荐文章于 2025-12-04 22:56:41 发布 · 824 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

01-HTML5语义标签

有语义强调与重要性标签

标签	作用
strong	加粗
em	倾斜
ins	下划线
del	删除线

图片标签

属性	作用
src	指向要插入到页面的图像地址
alt	备选文本，图片无法显示提示的文字
width	设置图片宽度（建议css修改）
height	设置图片高度（建议css修改）
title	图像标题，鼠标悬停显示的文本

音视频标签

属性	作用
autoplay	自动播放
loop	循环播放
muted	静音
poster	预览图像

代码如下：

  <!-- 视频用video标签，音频用audio标签 -->
  <!-- 兼容性写法 想要自动播放 autoplay，需要先静音 muted ， 循环播放loop -->
  <video width="400" controls muted loop poster="./media/yu7.jpg">
    <source src="./media/yu7.mp4" type="video/mp4">
    <p> 您的浏览器不支持视频播放 </p>
  </video>
  <!-- 另一种写法 -->
  <video src="./media/yu7.mp4" width="400" controls autoplay muted loop poster="./media/yu7.jpg"></video>

链接标签

<!-- 1. 内部链接 -->
  <a href="./11-音视频标签.html">音视频</a>
  <!-- 2. 外部链接 -->
  <a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a>
  <!-- 3. 空连接 -->
  <a href="#">产品介绍</a>
  <!-- 4. 下载链接 -->
  <a href="./download.zip">下载软件</a>
  <!-- 5. 邮件链接 -->
  <a href="mailto:123@qq.com">联系我们</a>

锚点标签

在这里插入图片描述

网页结构标签

标签	作用
header	网页页眉（头部）
main	网页内容，每个网页只能有一个
nav	导航栏
article	文章相关
section	分块
aside	侧边栏
footer	页面页脚（底部）

表格标签

标签	作用
table	表格容器标签
tr	行标签
td	单元格标签
th	表头单元格
thead	定义表格的头部区域
tbody	定义表格的主题内容
tfoot	定义表格的底部区域

代码如下：

 <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>100</td>
      </tr>
    </tbody>
 </table>

表单标签

单行文本框和密码框

type属性值	说明
text	单行文本框
password	密码框

其他属性	说明
placeholder	提示信息
name	元素的名称
maxlength	允许的最大字符数
accesskey	使元素获得焦点的快捷键
autocomplete	用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值取值取值on/off

单选框、复选框和文件域textarea

type属性值	说明
radio	单选框
checkbox	复选框

其他属性	说明
name	表单名称实现分组
value	表单值
checked	是否默认选中

代码如下：

<form action="">
    <!-- 1. 单行文本框和密码框 -->
    <ul>
      <li>
        <label>
          账号： <input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
        </label>
      </li>
      <li>
        密码： <input type="password" placeholder="请输入密码" name="pwd" maxlength="6">
      </li>
      <!-- 2. 单选框 复选框和文件域 -->
      <li>
        性别：
        <!-- label 方式一   for  id 关联 -->
        <input type="radio" name="gender" value="0" checked id="nv">
        <label for="nv">女</label>
        <input type="radio" name="gender" value="1" id="nan">
        <label for="nan">男</label>
      </li>
      <li>
        爱好：
        <!-- label 方式二 -->
        <label>
          <input type="checkbox" name="hobby" value="0" checked> 足球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="1"> 篮球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="2"> 双色球
        </label>
      </li>
      <!-- 文本域 下拉列表和button按钮 -->
      <li>
        <label>
          留言：
          <textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea>
        </label>
      </li>
      <!-- select 下拉列表 不常用 -->
      <li>
        城市：
        <select name="city" id="">
          <option value="北京">北京</option>
          <option value="上海" selected>上海</option>
          <option value="广州">广州</option>
        </select>
      </li>
      <!-- disabled 属性：禁用按钮，不能点击 -->
      <li>
        <button disabled>注册</button>
      </li>
    </ul>

  </form>