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：资源格式不支持或路径无效
相关推荐
hunterandroid16 分钟前
Compose LazyColumn 性能优化：从卡顿到流畅的大列表治理
前端
sakiko_35 分钟前
Swift学习笔记39-实战注意事项
前端·笔记·学习·swift
海带紫菜菠萝汤36 分钟前
MSE (Media Source Extensions) 实战：流媒体分块加载与自适应码率
前端·javascript·音视频
@小匠41 分钟前
Spring Boot Nacos绑定 Map 时中文 key 导致启动失败：一次从复现到源码的排查实录
java·开发语言·前端
黄华SJ520it1 小时前
顶俏洗衣液模式制度开发介绍：S2B2C社交分销+多门店核销系统全解析
前端·数据库·小程序·零售·系统开发
晓说前端1 小时前
TypeScript 核心语法应用 —— Vue 3 中的使用（上）
前端·typescript
No Silver Bullet1 小时前
Vue进阶（贰幺叁）vue.config.js 中 productionSourceMap 作用详解
前端·javascript·vue.js
xcsweb1 小时前
从5分钟到10秒：我用一个Skill把团队部署效率提升了30倍
前端·vue.js
城管不管2 小时前
第八次面试2026.8.10
面试·职场和发展
热门推荐
01VSCode+CodeX扩展，无法启动02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04如何新建文件夹？ 电脑新建文件夹的4种方法052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08历年考研数学一、数学二、数学三真题试卷及答案PDF09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片