基本标签
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 的区别
- 注意 checked 和 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：资源格式不支持或路径无效
