HTML零基础快速入门篇(可用于备赛蓝桥杯Web应用开发) 牛客手把手戴刷FED1~8:基本标签,基本标签,媒体标签详解

酉鬼女又兒2026-03-13 16:04

基本标签

FED1 表单类型

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
   <form>
    <!-- 补全代码 -->
    <!--要求1.类型为密码,默认值为"nowcoder"-->
    <input type="password" value="nowcoder"></input>
    <!--要求2.类型为复选框,且状态为已勾选-->>
    <input type="checkbox" checked></input>
</form>
    <script type="text/javascript">
        // 填写JavaScript
    </script>
</body>

</html>
  • 注意 placeholder 和 value 的区别
  1. placeholder 是占位符，用于提醒用户输入
  2. value 是表单的输入值
  • 注意 checked 和 selected 的区别
  1. checked 是单选框和复选框默认选中属性
  2. selected 是下拉框默认选中属性

FED2 表格结构

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
   <table>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
    <script type="text/javascript">
        // 填写JavaScript
        
    </script>
</body>

</html>

FED3 图像标签属性

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
       
    </style>
</head>

<body>
    <img src="图片地址" title="标题属性" alt="代替文本属性">
    <script type="text/javascript">
        // 填写JavaScript
        
    </script>
</body>

</html>
  • <img>图片是一个闭合标签
  • src表示scource,代表存放图片的URL
  • title表示鼠标经过图片上方时会显示出的文字
  • alt表示当浏览器异常无法加载出指定地址的图片时，需要显示的信息

FED4 新窗口打开文档

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <a href="" target="_blank"></a>
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

target属性控制打开窗口，共有4个值，但是以下为常用的：

  • _blank 表示在一个新窗口打开（也正是符合他blank的语义，空的）
  • _self 表示当前窗口

FED5 自定义列表

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
  <dl>
    <!-- 补全代码 -->
    <dt>nowcoder</dt>
    <dd>nowcoder</dd>
</dl> 
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

标签语义说明

  • <dl>：全称 Definition List，是 HTML 中自定义列表的根标签，用于包裹整个自定义列表内容
  • <dt>：全称 Definition Term，用于定义列表项名称
  • <dd>：全称 Definition Description，用于定义列表项的描述内容

FED73 加粗文字

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <strong>牛客网</strong>
    <p>牛客网，程序员必备求职神器</p>
    <script type="text/javascript">
        // 填写JavaScript
    </script>
</body>

</html>

<strong>：HTML5 语义化标签，表示重要的文本，浏览器默认渲染为粗体，同时向搜索引擎和读屏软件传达「这段内容很重要」的语义

语义化标签

标签名 核心作用 通俗理解 常用场景 小白避坑要点
<header> 网页 / 独立内容块的头部区域 书的封面 / 页眉 网站顶部（logo / 搜索框）、文章标题栏 一个页面可多个，但不能嵌套在 <footer> 或另一个 <header> 内
<nav> 包裹页面核心导航链接 网站的菜单（顶部 / 侧边栏） 顶部主导航、侧边栏分类、页脚快捷导航 只放核心导航链接，页脚单个链接等非核心内容不需要用
<article> 独立完整、可单独复用的内容 报纸上的一篇完整新闻 / 博客正文 博客正文、论坛帖子、新闻报道、用户评论 可嵌套自己的 <header>/<footer>/<section>，是独立完整的内容单元
<section> 对内容进行主题分组 / 分段 文章里的一个章节 <article> 内的章节、页面主题模块（如热门推荐） 不用来当普通 <div>！必须有明确主题（一般带标题），是大内容的一部分，不能单独复用
<aside> 与主体相关的附属内容 网页侧边栏（作者介绍 / 相关推荐） 侧边栏、文章补充注释、广告位 位置不局限于侧边，核心是「附属、非核心内容」
<footer> 网页 / 独立内容块的底部区域 书的页脚 网站底部（版权 / 备案号）、文章底部（作者 / 时间） 一个页面可多个，可放在 <article> 等独立内容块内

FED6 语义化标签

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
   <header>
    <nav></nav>
   </header>
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

标签语义说明

  • <header>：HTML5 官方语义化头部标签，用于定义页面或内容区块的头部区域，是题目要求的「头部标签」的标准实现，替代传统无意义的 <div class="header"> 非语义写法。
  • <nav>：HTML5 官方语义化导航标签，专门用于包裹页面的主导航内容，是题目要求的「导航标签」的标准实现

媒体标签

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 <audio> 和 <video> 元素

HTML 音频/视频 方法

|-------------------------------------------------------------------------------------------------------------|-----------------------|
| 方法 | 描述 |
| addTextTrack() | 向音频/视频添加新的文本轨道。 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型。 |
| load() | 重新加载音频/视频元素。 |
| play() | 开始播放音频/视频。 |
| pause() | 暂停当前播放的音频/视频。 |

HTML 音频/视频属性

|-----------------------------------------------------------------------------------------------------------------------|---------------------------------------|
| 属性 | 描述 |
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频。 |
| buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象。 |
| controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象。 |
| controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等）。 |
| crossOrigin | 设置或返回音频/视频的 CORS 设置。 |
| currentSrc | 返回当前音频/视频的 URL。 |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计）。 |
| defaultMuted | 设置或返回音频/视频默认是否静音。 |
| defaultPlaybackRate | 设置或返回音频/视频的默认播放速度。 |
| duration | 返回当前音频/视频的长度（以秒计）。 |
| ended | 返回音频/视频的播放是否已结束。 |
| error | 返回表示音频/视频错误状态的 MediaError 对象。 |
| loop | 设置或返回音频/视频是否应在结束时重新播放。 |
| mediaGroup | 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。 |
| muted | 设置或返回音频/视频是否静音。 |
| networkState | 返回音频/视频的当前网络状态。 |
| paused | 设置或返回音频/视频是否暂停。 |
| playbackRate | 设置或返回音频/视频播放的速度。 |
| played | 返回表示音频/视频已播放部分的 TimeRanges 对象。 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载。 |
| readyState | 返回音频/视频当前的就绪状态。 |
| seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象。 |
| seeking | 返回用户是否正在音频/视频中进行查找。 |
| src | 设置或返回音频/视频元素的当前来源。 |
| startDate | 返回表示当前时间偏移的 Date 对象。 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
| volume | 设置或返回音频/视频的音量。 |

HTML 音频/视频事件

|-------------------------------------------------------------------------------------------------------------|---------------------------|
| 事件 | 描述 |
| abort | 当音频/视频的加载已放弃时触发。 |
| canplay | 当浏览器可以开始播放音频/视频时触发。 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
| durationchange | 当音频/视频的时长已更改时触发。 |
| emptied | 当目前的播放列表为空时触发。 |
| ended | 当目前的播放列表已结束时触发。 |
| error | 当在音频/视频加载期间发生错误时触发。 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
| loadstart | 当浏览器开始查找音频/视频时触发。 |
| pause | 当音频/视频已暂停时触发。 |
| play | 当音频/视频已开始或不再暂停时触发。 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
| progress | 当浏览器正在下载音频/视频时触发。 |
| ratechange | 当音频/视频的播放速度已更改时触发。 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 当浏览器刻意不获取媒体数据时触发。 |
| timeupdate | 当目前的播放位置已更改时触发。 |
| volumechange | 当音量已更改时触发。 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发。 |

FED7 音频媒体标签属性

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
   <audio controls>
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

核心标签与属性

  • ``：HTML5 原生音频媒体标签，用于在页面中嵌入音频内容。
  • controls：布尔属性，添加后会在浏览器中渲染出标准音频控制界面（包含播放 / 暂停按钮、音量滑块、进度条等），是实现「控件功能」的关键

FED8 视频媒体标签属性

复制代码 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
   <video src="yourvedio.mp4" onerror="handleVideoError"></video>
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

src：指定视频资源路径（可省略，仅展示事件绑定逻辑）

onerror：绑定错误处理函数，当视频加载失败（如资源不存在、网络错误、格式不兼容等）时自动触发 handleVideoError() 方法

  • onerror 事件不仅适用于 <video>，也适用于 `` 标签，是 HTML 媒体元素的通用错误处理事件。
  • 错误类型可通过 video.error.code 获取：
    • 1：用户中止加载
    • 2：网络错误导致加载中断
    • 3：视频解码失败
    • 4：资源格式不支持或路径无效
相关推荐
weixin199701080161 小时前
搜好货商品详情页前端性能优化实战
java·前端·python
SuperEugene2 小时前
NPM Script 实战：常用命令设计与封装｜Vue 工程化篇
前端·javascript·vue.js·前端框架·npm
前端进阶之旅2 小时前
React 18 并发特性实战指南：提升大型应用性能的关键技术
前端·react.js·前端框架
恋猫de小郭2 小时前
Android 性能迎来提升：内核引入 AutoFDO 普惠所有 15-16 设备
android·前端·flutter
小霍同学2 小时前
Vue 动态表单（Dynamic Form）
前端·vue.js
Dragon Wu2 小时前
Taro 小程序开发注意事项（不定期记录更新）
前端·javascript·小程序·typescript·taro
wangfpp2 小时前
多端统一你真的会了吗？
前端·javascript·架构
小霍同学2 小时前
Vue 动态组件（Dynamic Components）
前端·vue.js
代码煮茶2 小时前
Vue3 组件封装实战 | 从 0 封装一个可复用的表格组件（附插槽 / Props 设计）
前端·vue.js
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 飞书机器人不回复消息？3 小时踩坑总结05Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南06得物前端部门，没了07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录10OpenClaw 接入 QQ Bot 完整实践指南