[HTML5] 一文读懂H5新特性的应用-我和黑大佬的365天知乎-365bet体育365bet官网-365bet手机app下载-我和黑大佬的365天知乎

也支持全局属性，如 class、id、style、data-* 等。

示例代码

HTML5新特性介绍

作者: 张三

2024年8月12日

HTML5 引入了很多新特性，如语义化标签、增强的表单控件、媒体标签等...

在这个例子中，

标签定义了一篇独立的文章，包含标题、作者信息、发布时间、正文内容以及分类信息。

标签

语法

标签用于定义文档中的节或区段，通常包含多个内容块。这些区段通常有一个标题，并在逻辑上分组为相关内容。

使用场景

内容分区：适用于将文档内容划分为多个部分，每个部分都有其特定的主题。章节划分：在文章或页面中使用

标签来标识不同的章节。

常用属性

无特定属性：与其他HTML标签一样，

也支持全局属性，如 class、id、style、data-* 等。

示例代码

HTML5的语义化标签

HTML5 引入了一些新的语义化标签，如

、

HTML5的多媒体支持

HTML5 新增了

这里的

标签用于划分文档的不同部分，每个部分都有其特定的主题和标题。

标签

语法

标签用于表示与页面主要内容间接相关的部分，如侧边栏、广告或引用的内容。通常作为页面的辅助内容块出现。

使用场景

侧边栏内容：适用于放置广告、相关链接、作者介绍等侧边栏内容。附加信息：在文章内使用

来提供注释、引用或补充信息。

常用属性

无特定属性：与其他HTML标签一样，

也支持全局属性，如 class、id、style、data-* 等。

示例代码

在这个示例中，

标签定义了一个侧边栏内容块，用于展示作者简介。

标签

语法

标签用于定义文档的主要内容区域，通常包含文档的核心内容。注意，页面中应该只出现一个

标签。

使用场景

主内容区：用于包裹页面的主要内容，避免与页眉、页脚、导航等非核心内容混淆。

常用属性

无特定属性：与其他HTML标签一样，

也支持全局属性，如 class、id、style、data-* 等。

示例代码

HTML5 新增语义化标签

HTML5 引入了很多新的语义化标签，这些标签...

HTML5 的多媒体支持

HTML5 通过

在这个示例中，

标签包含了页面的核心内容部分，包括两个文章块。

标签

语法

标签用于将图像、图表、照片等与文档正文相关的内容独立出来，通常搭配
** 和 **

`** 标签**

语法

标签用于封装图像、图表、插图或其他媒体内容，并使这些内容与文档的主要文本部分区分开来。
标签则用于为
内的内容提供标题或说明。

使用场景

图像展示：在文章中插入图片时，可以使用
标签来封装图片，并使用
添加图片说明。图表和插图：用于图表、插图等媒体内容的展示，并为其添加相关的标题或说明。

常用属性

无特定属性：
和
支持HTML的全局属性，如 class、id、style、data-* 等。

示例代码

图1：示例图片的说明文字

在这个示例中，
标签封装了一个图片，
标签为该图片提供了说明文字。这样，图像和其说明可以独立于正文内容进行展示。

二、HTML5 表单增强功能

HTML5 对表单进行了显著增强，引入了许多新的输入类型、属性和元素，使表单更加强大和灵活。

1. 新的输入类型

HTML5 新增了许多标签的输入类型，如 email、url、date、time、number、range、color 等，方便开发者更精确地控制用户输入的内容。

示例代码

电子邮件:

个人主页:

出生日期:

预约时间:

年龄:

音量:

选择颜色:

此示例展示了HTML5表单中新输入类型的使用，每种类型都能更好地约束用户输入数据的格式。

2. 表单的验证属性

HTML5 还引入了一些新的表单验证属性，使得客户端验证更加简单直观。

required：表示输入字段是必填的。pattern：允许你为输入内容定义一个正则表达式。min** 和 **max：用于限制 number 和 date 类型的输入范围。step：用于设置数字或日期类型输入的增量。maxlength** 和 **minlength：设置输入字段的字符数限制。

示例代码

用户名:

年龄:

密码:

这个表单示例演示了HTML5验证属性的使用，用户在提交表单前，浏览器会自动进行验证，确保数据符合要求。

三、HTML5 多媒体标签

1.

语法

使用场景

音频播放：适用于嵌入背景音乐、语音解说、播客等音频内容。音效嵌入：可以为网页中的某些交互添加音效。

常用属性

controls：添加播放控件，如播放/暂停按钮、音量调节等。autoplay：页面加载时自动播放音频。loop：音频播放结束后重新开始播放。preload：定义音频文件在页面加载时是否应预加载。可选值为 none、metadata、auto。

示例代码

您的浏览器不支持 audio 标签。

在这个示例中，

2.

语法

使用场景

视频播放：用于嵌入电影片段、宣传视频、教程等视频内容。视频背景：可以作为页面的背景视频，增加视觉效果。

常用属性

controls：添加视频播放控件，如播放/暂停按钮、进度条、音量调节等。autoplay：页面加载时自动播放视频。loop：视频播放结束后重新开始播放。muted：播放视频时将音量静音。poster：指定视频加载前显示的预览图像。

示例代码

您的浏览器不支持 video 标签。

在这个示例中，

3. 标签

语法

标签用于在

使用场景

字幕添加：用于为视频内容添加多语言字幕。章节划分：在长视频或音频中添加章节，便于用户快速导航。

常用属性

kind：定义文本轨道的类型。常用值包括 subtitles（字幕）、captions（字幕，针对听障用户）、descriptions（视频描述）、chapters（章节）等。src：定义字幕文件的URL。srclang：定义字幕文件的语言，如 en 表示英语。label：为轨道提供一个可读标签。default：指定该轨道是否为默认轨道。

示例代码

您的浏览器不支持 video 标签。

此示例展示了如何为视频添加多语言字幕轨道，用户可以在视频播放时选择不同语言的字幕。

四、HTML5 全局属性

HTML5 引入了一些全局属性，这些属性可以应用于几乎所有的HTML元素中。

1. contenteditable 属性

语法

contenteditable 属性用于指定一个元素是否可编辑。

使用场景

富文本编辑器：在网页上创建一个富文本编辑区域，用户可以直接在页面上编辑内容。前端展示：临时编辑页面内容以查看效果。

示例代码

这是一个可编辑的段落，您可以点击此处进行编辑。

在这个示例中，用户可以直接在网页上编辑
元素的内容。

2. draggable属性

语法

draggable 属性用于指定一个元素是否可拖动。

使用场景

拖放交互：在网页中实现拖放操作，例如拖动图片、文件或文本块。自定义UI组件：创建可拖动的自定义界面元素，例如看板、工具栏等。

常用属性值

true：允许元素被拖动。false：禁止元素被拖动。auto：使用默认的拖动行为（通常元素默认是不可拖动的，除非是链接或图片）。

示例代码

这是一个可拖动的段落。

在这个示例中，和
标签分别通过 draggable 属性变得可拖动，用户可以通过拖动这些元素进行交互。

3. hidden 属性

语法

hidden 属性用于隐藏元素，使其不在页面上显示。

使用场景

临时隐藏元素：例如在表单中隐藏某些字段，或在特定条件下隐藏某些内容。状态管理：用于控制元素的显示与隐藏状态，而无需使用CSS的 display: none;。

示例代码

在这个示例中，段落文本被默认隐藏，点击按钮后，文本会显示出来。

4. data-* 自定义数据属性

语法

data-* 属性允许开发者在HTML元素中存储额外的自定义数据，这些数据可以通过JavaScript轻松访问。

使用场景

数据存储：在元素中存储特定数据，例如用户ID、配置选项等。JavaScript交互：通过JavaScript读取或修改这些自定义数据属性，实现页面的动态交互。

示例代码

用户信息

在这个示例中，data-* 属性用于在 div 元素中存储用户ID和角色信息，JavaScript可以轻松地获取这些数据进行处理。

5. spellcheck 属性

语法

spellcheck 属性用于指定元素的拼写和语法是否应该被检查。

使用场景

表单输入检查：在文本输入区域启用或禁用拼写检查功能，尤其是在多行文本或文章编辑器中。国际化支持：为不同语言的输入字段设置拼写检查功能，提升用户体验。

常用属性值

true：启用拼写检查。false：禁用拼写检查。

示例代码

请输入您的文本...

在这个示例中，标签启用了拼写检查，用户输入的文本会被浏览器自动检查拼写错误。</p> <p>五、HTML5 的语义化标签</p> <p>HTML5 强调语义化，通过引入一系列新的语义化标签，使网页结构更加清晰、易于理解，并提升SEO效果。</p> <p>1. <article> 标签</p> <p>语法</p> <p><article> 标签用于封装一段独立的内容块，如文章、博客帖子、新闻报道等，内容通常具有独立的意义，可以单独存在。</p> <p>使用场景</p> <p>博客文章：每篇博客文章可以使用一个 <article> 标签封装。新闻报道：新闻网站的每篇新闻报道可以使用 <article> 标签。论坛帖子：论坛中的每个帖子或回复可以使用 <article> 标签。</p> <p>示例代码</p> <p><article></p> <p><h2>HTML5的语义化标签</h2></p> <p><p>HTML5引入了许多语义化标签，使网页结构更加清晰。</p></p> <p></article></p> <p>在这个示例中，<article> 标签封装了一篇关于HTML5语义化标签的文章，内容独立且具备完整意义。</p> <p>2. <section> 标签</p> <p>语法</p> <p><section> 标签用于表示文档中的某个区域或部分，这个部分通常包含一个主题，并且可以包含多个 <article>。</p> <p>使用场景</p> <p>章节划分：用于文章、报告等文档的章节划分。页面模块：用于网页的不同模块或部分，如功能块、服务介绍等。</p> <p>示例代码</p> <p><section></p> <p><h2>HTML5 表单增强功能</h2></p> <p><p>HTML5 对表单进行了显著增强，增加了许多新特性。</p></p> <p></section></p> <p>在这个示例中，<section> 标签表示一个关于HTML5表单功能的章节或区域，可以包含与表单相关的多种内容。</p> <p>3. <nav> 标签</p> <p>语法</p> <p><nav> 标签用于定义页面中的导航链接区域。</p> <p>使用场景</p> <p>主导航菜单：用于定义网页的主导航栏。次级导航：用于定义页面中的次级导航部分，如文章目录、页内链接等。面包屑导航：用于实现网页的面包屑导航，方便用户理解当前页面的位置。</p> <p>示例代码</p> <p><nav></p> <p><ul></p> <p><li><a href="#home">首页</a></li></p> <p><li><a href="#about">关于我们</a></li></p> <p><li><a href="#services">服务</a></li></p> <p><li><a href="#contact">联系我们</a></li></p> <p></ul></p> <p></nav></p> <p>在这个示例中，<nav> 标签定义了一个简单的导航菜单，包含了几个主要的导航链接。</p> <p>4. <aside> 标签</p> <p>语法</p> <p><aside> 标签用于表示页面内容的侧边栏，或与主内容相关的补充信息，如广告、相关链接等。</p> <p>使用场景</p> <p>侧边栏：用于网页的侧边栏，通常放置广告、推荐文章、热门标签等内容。补充信息：用于提供与主内容相关的背景信息、引用、作者信息等。</p> <p>示例代码</p> <p><aside></p> <p><h3>关于作者</h3></p> <p><p>本篇文章的作者是前端开发专家，专注于HTML5技术。</p></p> <p></aside></p> <p>在这个示例中，<aside> 标签用于提供关于作者的补充信息，作为主内容的附加信息展示。</p> <p>5. <header> 标签</p> <p>语法</p> <p><header> 标签用于表示页面或页面部分的头部内容，通常包含标题、导航、logo等元素。</p> <p>使用场景</p> <p>页面头部：用于定义整个页面的头部区域，通常包括网站logo、主导航、搜索框等。章节头部：用于定义某个章节或部分的头部，如文章的标题和作者信息等。</p> <p>示例代码</p> <p><header></p> <p><h1>HTML5 新特性详解</h1></p> <p><nav></p> <p><ul></p> <p><li><a href="#introduction">简介</a></li></p> <p><li><a href="#forms">表单</a></li></p> <p><li><a href="#media">多媒体</a></li></p> <p></ul></p> <p></nav></p> <p></header></p> <p>在这个示例中，<header> 标签表示页面的头部，包含了页面标题和导航链接。</p> <p>6. <footer> 标签</p> <p>语法</p> <p><footer> 标签用于表示页面或页面部分的底部内容，通常包含版权声明、联系信息、社交媒体链接等。</p> <p>使用场景</p> <p>页面底部：用于定义整个页面的底部区域，通常包括版权声明、页面链接、联系信息等。章节底部：用于定义某个章节或部分的底部信息，如文章的结束语、作者简介等。</p> <p>示例代码</p> <p><footer></p> <p><p>© 2024 HTML5 学习笔记. 保留所有权利。</p></p> <p><ul></p> <p><li><a href="#privacy">隐私政策</a></li></p> <p><li><a href="#terms">服务条款</a></li></p> <p><li><a href="#contact">联系我们</a></li></p> <p></ul></p> <p></footer></p> <p>在这个示例中，<footer> 标签用于表示页面的底部区域，包含了版权声明和相关链接。</p> <p>六、HTML5 的多媒体标签</p> <p>HTML5 引入了新的多媒体标签 <audio> 和 <video>，使网页开发者能够直接在网页中嵌入音频和视频内容，而无需借助外部插件。这些标签提供了丰富的属性和方法来控制媒体的播放、暂停、音量、进度等功能。</p> <p>1. <audio> 标签</p> <p>语法</p> <p><audio> 标签用于在网页中嵌入音频文件，支持多种音频格式如 MP3、WAV、OGG 等。</p> <p>使用场景</p> <p>背景音乐：为网页添加背景音乐。音频播客：嵌入播客音频文件，用户可以在线收听。语音朗读：在教育网站中嵌入语音朗读的音频文件，辅助学习。</p> <p>常用属性</p> <p>src：指定音频文件的路径。controls：显示音频控制面板，如播放/暂停按钮、进度条、音量控制等。autoplay：页面加载后自动播放音频。loop：音频播放结束后自动重新播放。muted：默认将音频静音。</p> <p>示例代码</p> <p><audio controls></p> <p><source src="music.mp3" type="audio/mp3"></p> <p><source src="music.ogg" type="audio/ogg"></p> <p>您的浏览器不支持 audio 标签。</p> <p></audio></p> <p>在这个示例中，<audio> 标签嵌入了一个音频文件，并提供了多个格式以确保跨浏览器的兼容性。用户可以通过显示的控件播放、暂停、调整音量等。</p> <p>2. <video> 标签</p> <p>语法</p> <p><video> 标签用于在网页中嵌入视频文件，支持多种视频格式如 MP4、WebM、Ogg 等。</p> <p>使用场景</p> <p>嵌入视频教程：在教育平台嵌入视频教程，用户可以直接观看。产品展示：在电商网站中嵌入产品展示视频，以动态形式吸引用户。用户生成内容：在社交媒体平台允许用户上传和嵌入自己拍摄的视频。</p> <p>常用属性</p> <p>src：指定视频文件的路径。controls：显示视频控制面板，如播放/暂停按钮、进度条、音量控制、全屏按钮等。autoplay：页面加载后自动播放视频。loop：视频播放结束后自动重新播放。muted：默认将视频静音。poster：指定在视频加载或播放之前显示的预览图片。</p> <p>示例代码</p> <p><video controls poster="poster.jpg"></p> <p><source src="video.mp4" type="video/mp4"></p> <p><source src="video.webm" type="video/webm"></p> <p>您的浏览器不支持 video 标签。</p> <p></video></p> <p>在这个示例中，<video> 标签嵌入了一个视频文件，并提供了多个格式和一个预览图像，以确保跨浏览器的兼容性和用户体验。用户可以通过显示的控件播放、暂停、调整音量、全屏观看视频等。</p> <p>3. <track> 标签</p> <p>语法</p> <p><track> 标签用于为 <video> 和 <audio> 元素添加字幕、章节标题或元数据。</p> <p>使用场景</p> <p>字幕文件：为视频添加字幕，支持多语言字幕文件切换。章节导航：为视频或音频添加章节标记，便于用户快速跳转到特定内容。元数据：为媒体文件添加描述、标签等额外信息，便于搜索和管理。</p> <p>常用属性</p> <p>src：指定字幕或章节文件的路径。kind：指定轨道的类型，如 subtitles（字幕）、captions（显示的文字）、descriptions（描述性文字）、chapters（章节标题）、metadata（元数据）。srclang：指定字幕文件的语言，如 en、zh 等。label：为用户提供的字幕选择菜单中显示的标签文本。</p> <p>示例代码</p> <p><video controls></p> <p><source src="video.mp4" type="video/mp4"></p> <p><track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"></p> <p><track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="Chinese"></p> <p>您的浏览器不支持 video 标签。</p> <p></video></p> <p>在这个示例中，<track> 标签为视频添加了两个字幕文件，一个是英文字幕，一个是中文字幕。用户可以通过播放器的字幕菜单选择合适的字幕。</p> <p>4. <embed> 标签</p> <p>语法</p> <p><embed> 标签用于嵌入外部资源，如多媒体对象或交互式内容，包括Flash动画、PDF文档、音频、视频等。</p> <p>使用场景</p> <p>嵌入PDF文件：在网页中嵌入PDF文档，用户可以直接浏览。嵌入Flash动画：嵌入Flash游戏或动画（尽管Flash技术逐渐被淘汰）。嵌入外部内容：在网页中嵌入其他网站或平台的交互式内容，如视频播放器、小工具等。</p> <p>示例代码</p> <p><embed src="document.pdf" width="600" height="400" type="application/pdf"></p> <p>在这个示例中，<embed> 标签嵌入了一个PDF文档，用户可以直接在网页中查看该文档。</p> <p>七、HTML5 的离线与存储功能</p> <p>HTML5 提供了一系列新的API来增强网页的离线能力和本地存储能力，这使得Web应用程序可以在无网络连接时依然保持部分功能，并且可以在本地保存数据以提高性能和用户体验。</p> <p>1. Application Cache</p> <p>语法</p> <p>Application Cache 是HTML5提供的离线存储技术，允许开发者将网页资源（如HTML、CSS、JavaScript等）缓存到用户的设备中，当设备无法连接到互联网时，用户仍然可以访问这些缓存的内容。</p> <p>使用场景</p> <p>离线访问：使Web应用程序在无网络连接的情况下依然可用，如邮件客户端、新闻应用等。提高性能：减少服务器请求次数，提高页面加载速度。</p> <p>使用步骤</p> <p>创建缓存清单文件（.appcache）：</p> <p>清单文件应列出所有需要缓存的资源，并配置缓存策略。在HTML文件中引用清单文件：</p> <p>使用 manifest 属性将清单文件与HTML文件关联。配置服务器：</p> <p>确保服务器返回正确的MIME类型（text/cache-manifest）以识别缓存清单文件。</p> <p>示例代码</p> <p><!DOCTYPE html></p> <p><html manifest="example.appcache"></p> <p><head></p> <p><title>离线Web应用</title></p> <p></head></p> <p><body></p> <p><h1>这个应用程序可以离线访问</h1></p> <p><p>当没有网络时，您仍然可以查看此页面的内容。</p></p> <p></body></p> <p></html></p> <p>在这个示例中，HTML文档使用了 manifest 属性引用了缓存清单文件 example.appcache。通过配置该清单文件，用户可以在离线状态下访问页面内容。</p> <p>注意事项</p> <p>弃用与替代：Application Cache 已被标记为弃用技术，建议使用 Service Workers 作为替代方案，以实现更灵活和强大的离线能力。</p> <p>2. Local Storage 和 Session Storage</p> <p>语法</p> <p>Local Storage 和 Session Storage 是HTML5提供的本地存储技术，允许Web应用程序在用户浏览器中存储数据。</p> <p>Local Storage：用于持久存储，数据在浏览器会话结束后仍然存在，直到被显式删除。Session Storage：用于临时存储，数据只在当前浏览器会话中存在，浏览器关闭后数据会被清除。</p> <p>使用场景</p> <p>保存用户设置：如主题选择、语言偏好等，使用 Local Storage 保存，用户下次访问时依然有效。表单数据保存：在用户填写表单时，使用 Session Storage 临时保存数据，防止数据丢失。</p> <p>操作方法</p> <p>存储数据：</p> <p>localStorage.setItem('key', 'value');sessionStorage.setItem('key', 'value'); 读取数据：</p> <p>localStorage.getItem('key');sessionStorage.getItem('key');</p> <p>删除数据：</p> <p>localStorage.removeItem('key');sessionStorage.removeItem('key');</p> <p>清空所有数据：</p> <p>localStorage.clear();sessionStorage.clear();</p> <p>示例代码</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><title>Local Storage 示例</title></p> <p><script></p> <p>function saveData() {</p> <p>localStorage.setItem('username', document.getElementById('username').value);</p> <p>alert('用户名已保存');</p> <p>}</p> <p>function loadData() {</p> <p>var storedUsername = localStorage.getItem('username');</p> <p>if (storedUsername) {</p> <p>document.getElementById('username').value = storedUsername;</p> <p>alert('用户名已加载');</p> <p>} else {</p> <p>alert('没有保存的用户名');</p> <p>}</p> <p>}</p> <p></script></p> <p></head></p> <p><body></p> <p><h1>Local Storage 示例</h1></p> <p><label for="username">用户名：</label></p> <p><input type="text" id="username" /></p> <p><button onclick="saveData()">保存</button></p> <p><button onclick="loadData()">加载</button></p> <p></body></p> <p></html></p> <p>在这个示例中，Local Storage 被用来保存和加载用户名。用户输入的用户名在点击保存按钮后会被存储在浏览器中，下次访问页面时可以通过加载按钮来恢复。</p> <p>注意事项</p> <p>数据大小限制：每个域名在 Local Storage 和 Session Storage 中存储的数据通常受到5MB左右的限制，具体取决于浏览器。数据安全性：由于数据存储在客户端，敏感数据不应直接保存在 Local Storage 或 Session Storage 中。</p> <p>3. IndexedDB</p> <p>语法</p> <p>IndexedDB 是HTML5提供的一种低级API，用于在客户端存储大量结构化数据。它允许开发者使用索引和事务来查询和管理数据。</p> <p>使用场景</p> <p>离线数据同步：在用户离线时将数据保存到 IndexedDB，当恢复网络连接后再同步到服务器。复杂数据存储：适用于存储大量或复杂的结构化数据，如用户生成的内容、游戏进度、文件缓存等。</p> <p>基本操作</p> <p>打开数据库：使用 indexedDB.open() 方法打开或创建数据库。创建对象存储：在数据库中创建存储对象（类似于表）。添加数据：使用事务和请求对象来添加数据。读取数据：通过事务和游标来查询数据。</p> <p>示例代码</p> <p>// 打开数据库</p> <p>var request = indexedDB.open("myDatabase", 1);</p> <p>request.onupgradeneeded = function(event) {</p> <p>var db = event.target.result;</p> <p>// 创建一个对象存储</p> <p>var objectStore = db.createObjectStore("users", { keyPath: "id" });</p> <p>// 创建索引</p> <p>objectStore.createIndex("name", "name", { unique: false });</p> <p>objectStore.createIndex("email", "email", { unique: true });</p> <p>};</p> <p>request.onsuccess = function(event) {</p> <p>var db = event.target.result;</p> <p>var transaction = db.transaction(["users"], "readwrite");</p> <p>var objectStore = transaction.objectStore("users");</p> <p>// 添加数据</p> <p>var request = objectStore.add({ id: 1, name: "Kevin", email: "kevin@example.com" });</p> <p>request.onsuccess = function(event) {</p> <p>console.log("用户数据已添加");</p> <p>};</p> <p>// 读取数据</p> <p>var getRequest = objectStore.get(1);</p> <p>getRequest.onsuccess = function(event) {</p> <p>console.log("用户数据:", getRequest.result);</p> <p>};</p> <p>};</p> <p>在这个示例中，使用 IndexedDB 创建了一个名为 myDatabase 的数据库，并在其中创建了一个 users 对象存储。数据通过事务被添加到数据库，并通过索引进行查询。</p> <p>注意事项</p> <p>浏览器兼容性：IndexedDB 是一种较新的技术，在不同浏览器中的支持可能有所不同，需要进行兼容性测试。异步操作：IndexedDB 的所有操作都是异步的，需要使用回调函数或 Promise 来处理数据。</p> <p>八、HTML5 的表单增强</p> <p>HTML5 在表单方面做了大量改进，引入了新的输入类型、属性和元素，这大大提升了表单的用户体验和开发效率。</p> <p>1. 新的输入类型（Input Types）</p> <p>HTML5 为 <input> 标签增加了许多新的输入类型，这些类型能够更好地适应不同的数据输入需求，并且在大多数情况下提供了内置的验证功能。</p> <p>常见的新输入类型</p> <p>email：用于输入和验证电子邮件地址。</p> <p><input type="email" name="user_email" required></p> <p>当用户输入的内容不符合电子邮件格式时，浏览器会自动提示错误。</p> <p>url：用于输入和验证URL地址。</p> <p><input type="url" name="website" required></p> <p>number：用于输入数字，可以通过 min 和 max 属性设置数值范围，并且可以设置步进值 step。</p> <p><input type="number" name="age" min="0" max="100" step="1"></p> <p>range：用于选择范围值，通常显示为滑动条。</p> <p><input type="range" name="volume" min="0" max="100"></p> <p>date、time、datetime-local：用于选择日期和时间。</p> <p><input type="date" name="birthday"></p> <p><input type="time" name="appointment_time"></p> <p><input type="datetime-local" name="meeting"></p> <p>color：用于选择颜色，通常显示为颜色选择器。</p> <p><input type="color" name="favcolor"></p> <p>使用场景</p> <p>电子商务网站：在产品订购表单中使用 number、range、date 等类型，让用户输入和选择相关数据更加便捷。用户注册：在注册表单中使用 email、url 类型，确保用户输入有效的电子邮件地址和个人主页URL。预约系统：使用 date、time 类型让用户选择合适的预约日期和时间。</p> <p>2. 新的表单属性</p> <p>HTML5 为表单元素新增了一些属性，使开发者能够更轻松地控制表单的行为。</p> <p>required：标记输入字段为必填项。</p> <p><input type="text" name="username" required></p> <p>当用户未填写必填项时，浏览器会提示用户填写。</p> <p>placeholder：在输入字段中显示提示文本，当用户输入内容时提示文本消失。</p> <p><input type="text" name="search" placeholder="请输入搜索内容"></p> <p>pattern：用于指定输入内容的正则表达式模式。</p> <p><input type="text" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="123-4567-8910"></p> <p>autofocus：页面加载时自动聚焦到指定的输入字段。</p> <p><input type="text" name="first_name" autofocus></p> <p>autocomplete：用于控制浏览器是否允许自动填写表单，设置为 on 或 off。</p> <p><input type="text" name="username" autocomplete="off"></p> <p>novalidate：禁用表单的自动验证功能，通常与 form 标签一起使用。</p> <p><form novalidate></p> <p><input type="email" name="email" required></p> <p><button type="submit">提交</button></p> <p></form></p> <p>示例代码</p> <p><form action="/submit" method="post"></p> <p><label for="username">用户名：</label></p> <p><input type="text" id="username" name="username" required placeholder="请输入用户名"></p> <p><label for="email">邮箱：</label></p> <p><input type="email" id="email" name="email" required placeholder="请输入邮箱"></p> <p><label for="age">年龄：</label></p> <p><input type="number" id="age" name="age" min="0" max="120" required></p> <p><label for="birthday">生日：</label></p> <p><input type="date" id="birthday" name="birthday"></p> <p><label for="color">选择您喜欢的颜色：</label></p> <p><input type="color" id="color" name="color"></p> <p><button type="submit">提交</button></p> <p></form></p> <p>在这个示例中，表单元素使用了 required、placeholder、pattern 等属性，以提高用户填写表单的体验和数据的准确性。</p> <p>3. 新的表单元素</p> <p>HTML5 引入了几个新的表单元素，提升了表单的功能性和用户体验。这些新元素帮助开发者创建更具交互性的表单。</p> <p>1. <datalist> 元素</p> <p><datalist> 元素用于提供 <input> 元素的预定义选项。当用户在输入框中键入内容时，会显示一个下拉列表，用户可以从中选择一个选项。</p> <p>语法</p> <p><input list="browsers" name="browser"></p> <p><datalist id="browsers"></p> <p><option value="Chrome"></p> <p><option value="Firefox"></p> <p><option value="Safari"></p> <p><option value="Edge"></p> <p><option value="Opera"></p> <p></datalist></p> <p>使用场景</p> <p><datalist> 适用于需要用户输入文本且希望提供建议或预定义选项的场景，如搜索框、浏览器兼容性测试等。</p> <p>示例代码</p> <p><label for="browser">选择浏览器：</label></p> <p><input list="browsers" id="browser" name="browser" placeholder="请输入或选择浏览器"></p> <p><datalist id="browsers"></p> <p><option value="Chrome"></p> <p><option value="Firefox"></p> <p><option value="Safari"></p> <p><option value="Edge"></p> <p><option value="Opera"></p> <p></datalist></p> <p>2. <output> 元素</p> <p><output> 元素用于显示计算或脚本的结果。它通常与 JavaScript 一起使用，用于显示动态计算值。</p> <p>语法</p> <p><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"></p> <p><input type="range" id="a" name="a" value="50"></p> <p><input type="range" id="b" name="b" value="50"></p> <p><output name="result" for="a b">100</output></p> <p></form></p> <p>使用场景</p> <p><output> 元素适用于需要在表单中实时显示计算结果的场景，如动态定价、问卷评分计算等。</p> <p>示例代码</p> <p><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"></p> <p><label for="a">输入A：</label></p> <p><input type="range" id="a" name="a" value="50" min="0" max="100"></p> <p><label for="b">输入B：</label></p> <p><input type="range" id="b" name="b" value="50" min="0" max="100"></p> <p><output name="result" for="a b">100</output></p> <p></form></p> <p>3. <progress> 元素</p> <p><progress> 元素表示任务的完成进度。它通常用于展示任务（如文件上传或下载）的进度。</p> <p>语法</p> <p><progress value="70" max="100"></progress></p> <p>使用场景</p> <p><progress> 元素适用于显示任务进度的场景，如表单提交、文件上传、安装过程等。</p> <p>示例代码</p> <p><label for="file">文件上传进度：</label></p> <p><progress id="file" value="32" max="100">32%</progress></p> <p>4. <meter> 元素</p> <p><meter> 元素用于表示在已知范围内的标量值或分数值。它与 <progress> 元素不同，后者表示任务的进度，而 <meter> 表示一个度量值（如温度、打分）。</p> <p>语法</p> <p><meter value="0.6">60%</meter></p> <p>使用场景</p> <p><meter> 元素适用于表示度量值的场景，如打分系统、统计分析、性能指标等。</p> <p>示例代码</p> <p><label for="disk">磁盘使用情况：</label></p> <p><meter id="disk" value="0.6">60%</meter></p> <p>5. <keygen> 元素（已废弃）</p> <p><keygen> 元素用于生成用户证书密钥对，通常用于安全性高的网站。该元素已在最新的 HTML5 规范中被废弃，建议使用其他安全方式。</p> <p>语法</p> <p><keygen name="name"></p> <p>使用场景</p> <p>过去用于生成加密密钥的场景，现在建议使用更现代的 Web Crypto API。</p> <p>4. 表单验证（Form Validation）</p> <p>HTML5 为表单提供了多种内置的验证机制，这些机制大大减少了对 JavaScript 的依赖，使开发者能够快速实现表单验证。</p> <p>1. 必填字段验证</p> <p>使用 required 属性来标记字段为必填项，如果用户未填写该字段，则无法提交表单。</p> <p>语法</p> <p><input type="text" name="username" required></p> <p>2. 格式验证</p> <p>可以使用 type 属性来指定输入字段的数据格式，例如 email、url、number 等类型的字段会自动验证用户输入的格式是否正确。</p> <p>示例代码</p> <p><form></p> <p><label for="email">电子邮件：</label></p> <p><input type="email" id="email" name="email" required></p> <p><label for="website">个人网站：</label></p> <p><input type="url" id="website" name="website" required></p> <p><button type="submit">提交</button></p> <p></form></p> <p>3. 自定义验证</p> <p>使用 pattern 属性配合正则表达式进行自定义验证。</p> <p>示例代码</p> <p><form></p> <p><label for="phone">电话号码：</label></p> <p><input type="text" id="phone" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="格式: 123-4567-8910"></p> <p><button type="submit">提交</button></p> <p></form></p> <p>4. 实时验证</p> <p>HTML5 还支持 oninput 事件，可以用来在用户输入时实时验证表单字段。</p> <p>示例代码</p> <p><form></p> <p><label for="password">密码：</label></p> <p><input type="password" id="password" name="password" required minlength="8" oninput="checkPassword()"></p> <p><label for="confirm_password">确认密码：</label></p> <p><input type="password" id="confirm_password" name="confirm_password" required oninput="checkPassword()"></p> <p><button type="submit">提交</button></p> <p></form></p> <p><script></p> <p>function checkPassword() {</p> <p>var password = document.getElementById("password").value;</p> <p>var confirmPassword = document.getElementById("confirm_password").value;</p> <p>if (password !== confirmPassword) {</p> <p>document.getElementById("confirm_password").setCustomValidity("密码不匹配");</p> <p>} else {</p> <p>document.getElementById("confirm_password").setCustomValidity("");</p> <p>}</p> <p>}</p> <p></script></p> <p>5. 表单与多媒体的结合</p> <p>HTML5 允许将表单与多媒体元素结合起来，实现更加丰富的用户交互。例如，可以结合 <canvas> 元素在表单中绘制图形或签名，也可以使用 <video> 元素与表单互动。</p> <p>示例代码</p> <p><form></p> <p><label for="signature">签名：</label></p> <p><canvas id="signature" width="300" height="100" style="border:1px solid #000;"></canvas></p> <p><input type="hidden" id="signature_data" name="signature"></p> <p><label for="feedback">视频反馈：</label></p> <p><video id="feedback" controls></p> <p><source src="feedback.mp4" type="video/mp4"></p> <p>您的浏览器不支持视频播放。</p> <p></video></p> <p><button type="submit">提交</button></p> <p></form></p> <p><script></p> <p>// 签名功能示例</p> <p>var canvas = document.getElementById("signature");</p> <p>var ctx = canvas.getContext("2d");</p> <p>var isDrawing = false;</p> <p>canvas.addEventListener("mousedown", function(event) {</p> <p>isDrawing = true;</p> <p>ctx.moveTo(event.offsetX, event.offsetY);</p> <p>});</p> <p>canvas.addEventListener("mousemove", function(event) {</p> <p>if (isDrawing) {</p> <p>ctx.lineTo(event.offsetX, event.offsetY);</p> <p>ctx.stroke();</p> <p>}</p> <p>});</p> <p>canvas.addEventListener("mouseup", function() {</p> <p>isDrawing = false;</p> <p>document.getElementById("signature_data").value = canvas.toDataURL();</p> <p>});</p> <p></script></p> <p>在这个示例中，用户可以在 <canvas> 上签名，并将签名数据作为表单的一部分提交。同时，表单中还嵌入了一个视频元素，用户可以观看视频并提供反馈。</p> <p>总结</p> <p>HTML5 的引入为 Web 开发带来了许多新功能和改进，使得开发者可以更轻松地构建现代化、交互性更强的 Web 应用。本文详细介绍了 HTML5 的新增标签、API、表单改进和多媒体支持，并通过丰富的代码示例展示了这些新特性的实际应用。通过掌握这些 HTML5 的新功能，开发者可以提升用户体验，并充分利用现代浏览器提供的功能，创建更为丰富和强大的 Web 应用。</p> </div> <div class="pagination"> <a href="/b71d2141b1450cfe/1c3411abb735836c.html">← 从女性社区“她”社区的关停看，互联网社区为何会走下坡路？</a> <a href="/86fa4c8d4f370795/1b33f03c5e096867.html">犬神！哈啦板 →</a> </div> </article> </div> <div class="main-content"> <h2 class="section-title">相关推荐</h2> <div class="article-grid"> <div class="article-card"> <img src="/0.jpg" alt="《光明大陆》职业转职符文全攻略" class="card-image"> <div class="card-body"> <span class="category-tag">365bet手机app下载</span> <h3 class="card-title"><a href="/86fa4c8d4f370795/504b687ff542b642.html">《光明大陆》职业转职符文全攻略</a></h3> <div class="card-meta"> <span>📅 06-30</span> <span>👁️ 6600</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="王者荣耀勇者违章怎么换王者荣耀勇者徽章兑换指南" class="card-image"> <div class="card-body"> <span class="category-tag">365bet手机app下载</span> <h3 class="card-title"><a href="/86fa4c8d4f370795/9612c79c4ab95dfc.html">王者荣耀勇者违章怎么换王者荣耀勇者徽章兑换指南</a></h3> <div class="card-meta"> <span>📅 06-16</span> <span>👁️ 3058</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="努比亚(nubia)手机：好不好？售后服务怎么样？" class="card-image"> <div class="card-body"> <span class="category-tag">我和黑大佬的365天知乎</span> <h3 class="card-title"><a href="/866d8a6209a7008e/75ee9b173c15956b.html">努比亚(nubia)手机：好不好？售后服务怎么样？</a></h3> <div class="card-meta"> <span>📅 09-19</span> <span>👁️ 2971</span> </div> </div> </div> </div> </div> <div class="friend-links"> <h3>友情链接</h3> <div class="friend-links-container"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> <footer> <div class="container"> <p class="copyright">Copyright © <span id="currentYear"></span> 365bet体育365bet官网-365bet手机app下载-我和黑大佬的365天知乎 All Rights Reserved.</p> </div> </footer> <script> // 自动获取当前年份 document.getElementById('currentYear').textContent = new Date().getFullYear(); </script> <script type='text/javascript' src='/api.js'></script> <script type='text/javascript' src='/tongji.js'></script> </body> </html>

可拖动的图片 — 标签

语法

标签用于将图像、图表、照片等与文档正文相关的内容独立出来，通常搭配
** 和 **

`** 标签**

语法

标签用于封装图像、图表、插图或其他媒体内容，并使这些内容与文档的主要文本部分区分开来。
标签则用于为
内的内容提供标题或说明。

使用场景

图像展示：在文章中插入图片时，可以使用
标签来封装图片，并使用
添加图片说明。图表和插图：用于图表、插图等媒体内容的展示，并为其添加相关的标题或说明。

常用属性

无特定属性：
和
支持HTML的全局属性，如 class、id、style、data-* 等。

示例代码

图1：示例图片的说明文字

在这个示例中，
标签封装了一个图片，
标签为该图片提供了说明文字。这样，图像和其说明可以独立于正文内容进行展示。

二、HTML5 表单增强功能

HTML5 对表单进行了显著增强，引入了许多新的输入类型、属性和元素，使表单更加强大和灵活。

1. 新的输入类型

HTML5 新增了许多标签的输入类型，如 email、url、date、time、number、range、color 等，方便开发者更精确地控制用户输入的内容。

示例代码

电子邮件:

个人主页:

出生日期:

预约时间:

年龄:

音量:

选择颜色:

此示例展示了HTML5表单中新输入类型的使用，每种类型都能更好地约束用户输入数据的格式。

2. 表单的验证属性

HTML5 还引入了一些新的表单验证属性，使得客户端验证更加简单直观。

required：表示输入字段是必填的。pattern：允许你为输入内容定义一个正则表达式。min** 和 **max：用于限制 number 和 date 类型的输入范围。step：用于设置数字或日期类型输入的增量。maxlength** 和 **minlength：设置输入字段的字符数限制。

示例代码

用户名:

年龄:

密码:

这个表单示例演示了HTML5验证属性的使用，用户在提交表单前，浏览器会自动进行验证，确保数据符合要求。

三、HTML5 多媒体标签

1.

语法

使用场景

音频播放：适用于嵌入背景音乐、语音解说、播客等音频内容。音效嵌入：可以为网页中的某些交互添加音效。

常用属性

controls：添加播放控件，如播放/暂停按钮、音量调节等。autoplay：页面加载时自动播放音频。loop：音频播放结束后重新开始播放。preload：定义音频文件在页面加载时是否应预加载。可选值为 none、metadata、auto。

示例代码

您的浏览器不支持 audio 标签。

在这个示例中，

2.

语法

使用场景

视频播放：用于嵌入电影片段、宣传视频、教程等视频内容。视频背景：可以作为页面的背景视频，增加视觉效果。

常用属性

controls：添加视频播放控件，如播放/暂停按钮、进度条、音量调节等。autoplay：页面加载时自动播放视频。loop：视频播放结束后重新开始播放。muted：播放视频时将音量静音。poster：指定视频加载前显示的预览图像。

示例代码

您的浏览器不支持 video 标签。

在这个示例中，

3. 标签

语法

标签用于在

使用场景

字幕添加：用于为视频内容添加多语言字幕。章节划分：在长视频或音频中添加章节，便于用户快速导航。

常用属性

kind：定义文本轨道的类型。常用值包括 subtitles（字幕）、captions（字幕，针对听障用户）、descriptions（视频描述）、chapters（章节）等。src：定义字幕文件的URL。srclang：定义字幕文件的语言，如 en 表示英语。label：为轨道提供一个可读标签。default：指定该轨道是否为默认轨道。

示例代码

您的浏览器不支持 video 标签。

此示例展示了如何为视频添加多语言字幕轨道，用户可以在视频播放时选择不同语言的字幕。

四、HTML5 全局属性

HTML5 引入了一些全局属性，这些属性可以应用于几乎所有的HTML元素中。

1. contenteditable 属性

语法

contenteditable 属性用于指定一个元素是否可编辑。

使用场景

富文本编辑器：在网页上创建一个富文本编辑区域，用户可以直接在页面上编辑内容。前端展示：临时编辑页面内容以查看效果。

示例代码

这是一个可编辑的段落，您可以点击此处进行编辑。

在这个示例中，用户可以直接在网页上编辑
元素的内容。

2. draggable属性

语法

draggable 属性用于指定一个元素是否可拖动。

使用场景

拖放交互：在网页中实现拖放操作，例如拖动图片、文件或文本块。自定义UI组件：创建可拖动的自定义界面元素，例如看板、工具栏等。

常用属性值

true：允许元素被拖动。false：禁止元素被拖动。auto：使用默认的拖动行为（通常元素默认是不可拖动的，除非是链接或图片）。

示例代码

这是一个可拖动的段落。

在这个示例中，和
标签分别通过 draggable 属性变得可拖动，用户可以通过拖动这些元素进行交互。

3. hidden 属性

语法

hidden 属性用于隐藏元素，使其不在页面上显示。

使用场景

临时隐藏元素：例如在表单中隐藏某些字段，或在特定条件下隐藏某些内容。状态管理：用于控制元素的显示与隐藏状态，而无需使用CSS的 display: none;。

示例代码

在这个示例中，段落文本被默认隐藏，点击按钮后，文本会显示出来。

4. data-* 自定义数据属性

语法

data-* 属性允许开发者在HTML元素中存储额外的自定义数据，这些数据可以通过JavaScript轻松访问。

使用场景

数据存储：在元素中存储特定数据，例如用户ID、配置选项等。JavaScript交互：通过JavaScript读取或修改这些自定义数据属性，实现页面的动态交互。

示例代码

用户信息

在这个示例中，data-* 属性用于在 div 元素中存储用户ID和角色信息，JavaScript可以轻松地获取这些数据进行处理。

5. spellcheck 属性

语法

spellcheck 属性用于指定元素的拼写和语法是否应该被检查。

使用场景

表单输入检查：在文本输入区域启用或禁用拼写检查功能，尤其是在多行文本或文章编辑器中。国际化支持：为不同语言的输入字段设置拼写检查功能，提升用户体验。

常用属性值

true：启用拼写检查。false：禁用拼写检查。

示例代码

请输入您的文本...

在这个示例中，标签启用了拼写检查，用户输入的文本会被浏览器自动检查拼写错误。</p> <p>五、HTML5 的语义化标签</p> <p>HTML5 强调语义化，通过引入一系列新的语义化标签，使网页结构更加清晰、易于理解，并提升SEO效果。</p> <p>1. <article> 标签</p> <p>语法</p> <p><article> 标签用于封装一段独立的内容块，如文章、博客帖子、新闻报道等，内容通常具有独立的意义，可以单独存在。</p> <p>使用场景</p> <p>博客文章：每篇博客文章可以使用一个 <article> 标签封装。新闻报道：新闻网站的每篇新闻报道可以使用 <article> 标签。论坛帖子：论坛中的每个帖子或回复可以使用 <article> 标签。</p> <p>示例代码</p> <p><article></p> <p><h2>HTML5的语义化标签</h2></p> <p><p>HTML5引入了许多语义化标签，使网页结构更加清晰。</p></p> <p></article></p> <p>在这个示例中，<article> 标签封装了一篇关于HTML5语义化标签的文章，内容独立且具备完整意义。</p> <p>2. <section> 标签</p> <p>语法</p> <p><section> 标签用于表示文档中的某个区域或部分，这个部分通常包含一个主题，并且可以包含多个 <article>。</p> <p>使用场景</p> <p>章节划分：用于文章、报告等文档的章节划分。页面模块：用于网页的不同模块或部分，如功能块、服务介绍等。</p> <p>示例代码</p> <p><section></p> <p><h2>HTML5 表单增强功能</h2></p> <p><p>HTML5 对表单进行了显著增强，增加了许多新特性。</p></p> <p></section></p> <p>在这个示例中，<section> 标签表示一个关于HTML5表单功能的章节或区域，可以包含与表单相关的多种内容。</p> <p>3. <nav> 标签</p> <p>语法</p> <p><nav> 标签用于定义页面中的导航链接区域。</p> <p>使用场景</p> <p>主导航菜单：用于定义网页的主导航栏。次级导航：用于定义页面中的次级导航部分，如文章目录、页内链接等。面包屑导航：用于实现网页的面包屑导航，方便用户理解当前页面的位置。</p> <p>示例代码</p> <p><nav></p> <p><ul></p> <p><li><a href="#home">首页</a></li></p> <p><li><a href="#about">关于我们</a></li></p> <p><li><a href="#services">服务</a></li></p> <p><li><a href="#contact">联系我们</a></li></p> <p></ul></p> <p></nav></p> <p>在这个示例中，<nav> 标签定义了一个简单的导航菜单，包含了几个主要的导航链接。</p> <p>4. <aside> 标签</p> <p>语法</p> <p><aside> 标签用于表示页面内容的侧边栏，或与主内容相关的补充信息，如广告、相关链接等。</p> <p>使用场景</p> <p>侧边栏：用于网页的侧边栏，通常放置广告、推荐文章、热门标签等内容。补充信息：用于提供与主内容相关的背景信息、引用、作者信息等。</p> <p>示例代码</p> <p><aside></p> <p><h3>关于作者</h3></p> <p><p>本篇文章的作者是前端开发专家，专注于HTML5技术。</p></p> <p></aside></p> <p>在这个示例中，<aside> 标签用于提供关于作者的补充信息，作为主内容的附加信息展示。</p> <p>5. <header> 标签</p> <p>语法</p> <p><header> 标签用于表示页面或页面部分的头部内容，通常包含标题、导航、logo等元素。</p> <p>使用场景</p> <p>页面头部：用于定义整个页面的头部区域，通常包括网站logo、主导航、搜索框等。章节头部：用于定义某个章节或部分的头部，如文章的标题和作者信息等。</p> <p>示例代码</p> <p><header></p> <p><h1>HTML5 新特性详解</h1></p> <p><nav></p> <p><ul></p> <p><li><a href="#introduction">简介</a></li></p> <p><li><a href="#forms">表单</a></li></p> <p><li><a href="#media">多媒体</a></li></p> <p></ul></p> <p></nav></p> <p></header></p> <p>在这个示例中，<header> 标签表示页面的头部，包含了页面标题和导航链接。</p> <p>6. <footer> 标签</p> <p>语法</p> <p><footer> 标签用于表示页面或页面部分的底部内容，通常包含版权声明、联系信息、社交媒体链接等。</p> <p>使用场景</p> <p>页面底部：用于定义整个页面的底部区域，通常包括版权声明、页面链接、联系信息等。章节底部：用于定义某个章节或部分的底部信息，如文章的结束语、作者简介等。</p> <p>示例代码</p> <p><footer></p> <p><p>© 2024 HTML5 学习笔记. 保留所有权利。</p></p> <p><ul></p> <p><li><a href="#privacy">隐私政策</a></li></p> <p><li><a href="#terms">服务条款</a></li></p> <p><li><a href="#contact">联系我们</a></li></p> <p></ul></p> <p></footer></p> <p>在这个示例中，<footer> 标签用于表示页面的底部区域，包含了版权声明和相关链接。</p> <p>六、HTML5 的多媒体标签</p> <p>HTML5 引入了新的多媒体标签 <audio> 和 <video>，使网页开发者能够直接在网页中嵌入音频和视频内容，而无需借助外部插件。这些标签提供了丰富的属性和方法来控制媒体的播放、暂停、音量、进度等功能。</p> <p>1. <audio> 标签</p> <p>语法</p> <p><audio> 标签用于在网页中嵌入音频文件，支持多种音频格式如 MP3、WAV、OGG 等。</p> <p>使用场景</p> <p>背景音乐：为网页添加背景音乐。音频播客：嵌入播客音频文件，用户可以在线收听。语音朗读：在教育网站中嵌入语音朗读的音频文件，辅助学习。</p> <p>常用属性</p> <p>src：指定音频文件的路径。controls：显示音频控制面板，如播放/暂停按钮、进度条、音量控制等。autoplay：页面加载后自动播放音频。loop：音频播放结束后自动重新播放。muted：默认将音频静音。</p> <p>示例代码</p> <p><audio controls></p> <p><source src="music.mp3" type="audio/mp3"></p> <p><source src="music.ogg" type="audio/ogg"></p> <p>您的浏览器不支持 audio 标签。</p> <p></audio></p> <p>在这个示例中，<audio> 标签嵌入了一个音频文件，并提供了多个格式以确保跨浏览器的兼容性。用户可以通过显示的控件播放、暂停、调整音量等。</p> <p>2. <video> 标签</p> <p>语法</p> <p><video> 标签用于在网页中嵌入视频文件，支持多种视频格式如 MP4、WebM、Ogg 等。</p> <p>使用场景</p> <p>嵌入视频教程：在教育平台嵌入视频教程，用户可以直接观看。产品展示：在电商网站中嵌入产品展示视频，以动态形式吸引用户。用户生成内容：在社交媒体平台允许用户上传和嵌入自己拍摄的视频。</p> <p>常用属性</p> <p>src：指定视频文件的路径。controls：显示视频控制面板，如播放/暂停按钮、进度条、音量控制、全屏按钮等。autoplay：页面加载后自动播放视频。loop：视频播放结束后自动重新播放。muted：默认将视频静音。poster：指定在视频加载或播放之前显示的预览图片。</p> <p>示例代码</p> <p><video controls poster="poster.jpg"></p> <p><source src="video.mp4" type="video/mp4"></p> <p><source src="video.webm" type="video/webm"></p> <p>您的浏览器不支持 video 标签。</p> <p></video></p> <p>在这个示例中，<video> 标签嵌入了一个视频文件，并提供了多个格式和一个预览图像，以确保跨浏览器的兼容性和用户体验。用户可以通过显示的控件播放、暂停、调整音量、全屏观看视频等。</p> <p>3. <track> 标签</p> <p>语法</p> <p><track> 标签用于为 <video> 和 <audio> 元素添加字幕、章节标题或元数据。</p> <p>使用场景</p> <p>字幕文件：为视频添加字幕，支持多语言字幕文件切换。章节导航：为视频或音频添加章节标记，便于用户快速跳转到特定内容。元数据：为媒体文件添加描述、标签等额外信息，便于搜索和管理。</p> <p>常用属性</p> <p>src：指定字幕或章节文件的路径。kind：指定轨道的类型，如 subtitles（字幕）、captions（显示的文字）、descriptions（描述性文字）、chapters（章节标题）、metadata（元数据）。srclang：指定字幕文件的语言，如 en、zh 等。label：为用户提供的字幕选择菜单中显示的标签文本。</p> <p>示例代码</p> <p><video controls></p> <p><source src="video.mp4" type="video/mp4"></p> <p><track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"></p> <p><track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="Chinese"></p> <p>您的浏览器不支持 video 标签。</p> <p></video></p> <p>在这个示例中，<track> 标签为视频添加了两个字幕文件，一个是英文字幕，一个是中文字幕。用户可以通过播放器的字幕菜单选择合适的字幕。</p> <p>4. <embed> 标签</p> <p>语法</p> <p><embed> 标签用于嵌入外部资源，如多媒体对象或交互式内容，包括Flash动画、PDF文档、音频、视频等。</p> <p>使用场景</p> <p>嵌入PDF文件：在网页中嵌入PDF文档，用户可以直接浏览。嵌入Flash动画：嵌入Flash游戏或动画（尽管Flash技术逐渐被淘汰）。嵌入外部内容：在网页中嵌入其他网站或平台的交互式内容，如视频播放器、小工具等。</p> <p>示例代码</p> <p><embed src="document.pdf" width="600" height="400" type="application/pdf"></p> <p>在这个示例中，<embed> 标签嵌入了一个PDF文档，用户可以直接在网页中查看该文档。</p> <p>七、HTML5 的离线与存储功能</p> <p>HTML5 提供了一系列新的API来增强网页的离线能力和本地存储能力，这使得Web应用程序可以在无网络连接时依然保持部分功能，并且可以在本地保存数据以提高性能和用户体验。</p> <p>1. Application Cache</p> <p>语法</p> <p>Application Cache 是HTML5提供的离线存储技术，允许开发者将网页资源（如HTML、CSS、JavaScript等）缓存到用户的设备中，当设备无法连接到互联网时，用户仍然可以访问这些缓存的内容。</p> <p>使用场景</p> <p>离线访问：使Web应用程序在无网络连接的情况下依然可用，如邮件客户端、新闻应用等。提高性能：减少服务器请求次数，提高页面加载速度。</p> <p>使用步骤</p> <p>创建缓存清单文件（.appcache）：</p> <p>清单文件应列出所有需要缓存的资源，并配置缓存策略。在HTML文件中引用清单文件：</p> <p>使用 manifest 属性将清单文件与HTML文件关联。配置服务器：</p> <p>确保服务器返回正确的MIME类型（text/cache-manifest）以识别缓存清单文件。</p> <p>示例代码</p> <p><!DOCTYPE html></p> <p><html manifest="example.appcache"></p> <p><head></p> <p><title>离线Web应用</title></p> <p></head></p> <p><body></p> <p><h1>这个应用程序可以离线访问</h1></p> <p><p>当没有网络时，您仍然可以查看此页面的内容。</p></p> <p></body></p> <p></html></p> <p>在这个示例中，HTML文档使用了 manifest 属性引用了缓存清单文件 example.appcache。通过配置该清单文件，用户可以在离线状态下访问页面内容。</p> <p>注意事项</p> <p>弃用与替代：Application Cache 已被标记为弃用技术，建议使用 Service Workers 作为替代方案，以实现更灵活和强大的离线能力。</p> <p>2. Local Storage 和 Session Storage</p> <p>语法</p> <p>Local Storage 和 Session Storage 是HTML5提供的本地存储技术，允许Web应用程序在用户浏览器中存储数据。</p> <p>Local Storage：用于持久存储，数据在浏览器会话结束后仍然存在，直到被显式删除。Session Storage：用于临时存储，数据只在当前浏览器会话中存在，浏览器关闭后数据会被清除。</p> <p>使用场景</p> <p>保存用户设置：如主题选择、语言偏好等，使用 Local Storage 保存，用户下次访问时依然有效。表单数据保存：在用户填写表单时，使用 Session Storage 临时保存数据，防止数据丢失。</p> <p>操作方法</p> <p>存储数据：</p> <p>localStorage.setItem('key', 'value');sessionStorage.setItem('key', 'value'); 读取数据：</p> <p>localStorage.getItem('key');sessionStorage.getItem('key');</p> <p>删除数据：</p> <p>localStorage.removeItem('key');sessionStorage.removeItem('key');</p> <p>清空所有数据：</p> <p>localStorage.clear();sessionStorage.clear();</p> <p>示例代码</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><title>Local Storage 示例</title></p> <p><script></p> <p>function saveData() {</p> <p>localStorage.setItem('username', document.getElementById('username').value);</p> <p>alert('用户名已保存');</p> <p>}</p> <p>function loadData() {</p> <p>var storedUsername = localStorage.getItem('username');</p> <p>if (storedUsername) {</p> <p>document.getElementById('username').value = storedUsername;</p> <p>alert('用户名已加载');</p> <p>} else {</p> <p>alert('没有保存的用户名');</p> <p>}</p> <p>}</p> <p></script></p> <p></head></p> <p><body></p> <p><h1>Local Storage 示例</h1></p> <p><label for="username">用户名：</label></p> <p><input type="text" id="username" /></p> <p><button onclick="saveData()">保存</button></p> <p><button onclick="loadData()">加载</button></p> <p></body></p> <p></html></p> <p>在这个示例中，Local Storage 被用来保存和加载用户名。用户输入的用户名在点击保存按钮后会被存储在浏览器中，下次访问页面时可以通过加载按钮来恢复。</p> <p>注意事项</p> <p>数据大小限制：每个域名在 Local Storage 和 Session Storage 中存储的数据通常受到5MB左右的限制，具体取决于浏览器。数据安全性：由于数据存储在客户端，敏感数据不应直接保存在 Local Storage 或 Session Storage 中。</p> <p>3. IndexedDB</p> <p>语法</p> <p>IndexedDB 是HTML5提供的一种低级API，用于在客户端存储大量结构化数据。它允许开发者使用索引和事务来查询和管理数据。</p> <p>使用场景</p> <p>离线数据同步：在用户离线时将数据保存到 IndexedDB，当恢复网络连接后再同步到服务器。复杂数据存储：适用于存储大量或复杂的结构化数据，如用户生成的内容、游戏进度、文件缓存等。</p> <p>基本操作</p> <p>打开数据库：使用 indexedDB.open() 方法打开或创建数据库。创建对象存储：在数据库中创建存储对象（类似于表）。添加数据：使用事务和请求对象来添加数据。读取数据：通过事务和游标来查询数据。</p> <p>示例代码</p> <p>// 打开数据库</p> <p>var request = indexedDB.open("myDatabase", 1);</p> <p>request.onupgradeneeded = function(event) {</p> <p>var db = event.target.result;</p> <p>// 创建一个对象存储</p> <p>var objectStore = db.createObjectStore("users", { keyPath: "id" });</p> <p>// 创建索引</p> <p>objectStore.createIndex("name", "name", { unique: false });</p> <p>objectStore.createIndex("email", "email", { unique: true });</p> <p>};</p> <p>request.onsuccess = function(event) {</p> <p>var db = event.target.result;</p> <p>var transaction = db.transaction(["users"], "readwrite");</p> <p>var objectStore = transaction.objectStore("users");</p> <p>// 添加数据</p> <p>var request = objectStore.add({ id: 1, name: "Kevin", email: "kevin@example.com" });</p> <p>request.onsuccess = function(event) {</p> <p>console.log("用户数据已添加");</p> <p>};</p> <p>// 读取数据</p> <p>var getRequest = objectStore.get(1);</p> <p>getRequest.onsuccess = function(event) {</p> <p>console.log("用户数据:", getRequest.result);</p> <p>};</p> <p>};</p> <p>在这个示例中，使用 IndexedDB 创建了一个名为 myDatabase 的数据库，并在其中创建了一个 users 对象存储。数据通过事务被添加到数据库，并通过索引进行查询。</p> <p>注意事项</p> <p>浏览器兼容性：IndexedDB 是一种较新的技术，在不同浏览器中的支持可能有所不同，需要进行兼容性测试。异步操作：IndexedDB 的所有操作都是异步的，需要使用回调函数或 Promise 来处理数据。</p> <p>八、HTML5 的表单增强</p> <p>HTML5 在表单方面做了大量改进，引入了新的输入类型、属性和元素，这大大提升了表单的用户体验和开发效率。</p> <p>1. 新的输入类型（Input Types）</p> <p>HTML5 为 <input> 标签增加了许多新的输入类型，这些类型能够更好地适应不同的数据输入需求，并且在大多数情况下提供了内置的验证功能。</p> <p>常见的新输入类型</p> <p>email：用于输入和验证电子邮件地址。</p> <p><input type="email" name="user_email" required></p> <p>当用户输入的内容不符合电子邮件格式时，浏览器会自动提示错误。</p> <p>url：用于输入和验证URL地址。</p> <p><input type="url" name="website" required></p> <p>number：用于输入数字，可以通过 min 和 max 属性设置数值范围，并且可以设置步进值 step。</p> <p><input type="number" name="age" min="0" max="100" step="1"></p> <p>range：用于选择范围值，通常显示为滑动条。</p> <p><input type="range" name="volume" min="0" max="100"></p> <p>date、time、datetime-local：用于选择日期和时间。</p> <p><input type="date" name="birthday"></p> <p><input type="time" name="appointment_time"></p> <p><input type="datetime-local" name="meeting"></p> <p>color：用于选择颜色，通常显示为颜色选择器。</p> <p><input type="color" name="favcolor"></p> <p>使用场景</p> <p>电子商务网站：在产品订购表单中使用 number、range、date 等类型，让用户输入和选择相关数据更加便捷。用户注册：在注册表单中使用 email、url 类型，确保用户输入有效的电子邮件地址和个人主页URL。预约系统：使用 date、time 类型让用户选择合适的预约日期和时间。</p> <p>2. 新的表单属性</p> <p>HTML5 为表单元素新增了一些属性，使开发者能够更轻松地控制表单的行为。</p> <p>required：标记输入字段为必填项。</p> <p><input type="text" name="username" required></p> <p>当用户未填写必填项时，浏览器会提示用户填写。</p> <p>placeholder：在输入字段中显示提示文本，当用户输入内容时提示文本消失。</p> <p><input type="text" name="search" placeholder="请输入搜索内容"></p> <p>pattern：用于指定输入内容的正则表达式模式。</p> <p><input type="text" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="123-4567-8910"></p> <p>autofocus：页面加载时自动聚焦到指定的输入字段。</p> <p><input type="text" name="first_name" autofocus></p> <p>autocomplete：用于控制浏览器是否允许自动填写表单，设置为 on 或 off。</p> <p><input type="text" name="username" autocomplete="off"></p> <p>novalidate：禁用表单的自动验证功能，通常与 form 标签一起使用。</p> <p><form novalidate></p> <p><input type="email" name="email" required></p> <p><button type="submit">提交</button></p> <p></form></p> <p>示例代码</p> <p><form action="/submit" method="post"></p> <p><label for="username">用户名：</label></p> <p><input type="text" id="username" name="username" required placeholder="请输入用户名"></p> <p><label for="email">邮箱：</label></p> <p><input type="email" id="email" name="email" required placeholder="请输入邮箱"></p> <p><label for="age">年龄：</label></p> <p><input type="number" id="age" name="age" min="0" max="120" required></p> <p><label for="birthday">生日：</label></p> <p><input type="date" id="birthday" name="birthday"></p> <p><label for="color">选择您喜欢的颜色：</label></p> <p><input type="color" id="color" name="color"></p> <p><button type="submit">提交</button></p> <p></form></p> <p>在这个示例中，表单元素使用了 required、placeholder、pattern 等属性，以提高用户填写表单的体验和数据的准确性。</p> <p>3. 新的表单元素</p> <p>HTML5 引入了几个新的表单元素，提升了表单的功能性和用户体验。这些新元素帮助开发者创建更具交互性的表单。</p> <p>1. <datalist> 元素</p> <p><datalist> 元素用于提供 <input> 元素的预定义选项。当用户在输入框中键入内容时，会显示一个下拉列表，用户可以从中选择一个选项。</p> <p>语法</p> <p><input list="browsers" name="browser"></p> <p><datalist id="browsers"></p> <p><option value="Chrome"></p> <p><option value="Firefox"></p> <p><option value="Safari"></p> <p><option value="Edge"></p> <p><option value="Opera"></p> <p></datalist></p> <p>使用场景</p> <p><datalist> 适用于需要用户输入文本且希望提供建议或预定义选项的场景，如搜索框、浏览器兼容性测试等。</p> <p>示例代码</p> <p><label for="browser">选择浏览器：</label></p> <p><input list="browsers" id="browser" name="browser" placeholder="请输入或选择浏览器"></p> <p><datalist id="browsers"></p> <p><option value="Chrome"></p> <p><option value="Firefox"></p> <p><option value="Safari"></p> <p><option value="Edge"></p> <p><option value="Opera"></p> <p></datalist></p> <p>2. <output> 元素</p> <p><output> 元素用于显示计算或脚本的结果。它通常与 JavaScript 一起使用，用于显示动态计算值。</p> <p>语法</p> <p><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"></p> <p><input type="range" id="a" name="a" value="50"></p> <p><input type="range" id="b" name="b" value="50"></p> <p><output name="result" for="a b">100</output></p> <p></form></p> <p>使用场景</p> <p><output> 元素适用于需要在表单中实时显示计算结果的场景，如动态定价、问卷评分计算等。</p> <p>示例代码</p> <p><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"></p> <p><label for="a">输入A：</label></p> <p><input type="range" id="a" name="a" value="50" min="0" max="100"></p> <p><label for="b">输入B：</label></p> <p><input type="range" id="b" name="b" value="50" min="0" max="100"></p> <p><output name="result" for="a b">100</output></p> <p></form></p> <p>3. <progress> 元素</p> <p><progress> 元素表示任务的完成进度。它通常用于展示任务（如文件上传或下载）的进度。</p> <p>语法</p> <p><progress value="70" max="100"></progress></p> <p>使用场景</p> <p><progress> 元素适用于显示任务进度的场景，如表单提交、文件上传、安装过程等。</p> <p>示例代码</p> <p><label for="file">文件上传进度：</label></p> <p><progress id="file" value="32" max="100">32%</progress></p> <p>4. <meter> 元素</p> <p><meter> 元素用于表示在已知范围内的标量值或分数值。它与 <progress> 元素不同，后者表示任务的进度，而 <meter> 表示一个度量值（如温度、打分）。</p> <p>语法</p> <p><meter value="0.6">60%</meter></p> <p>使用场景</p> <p><meter> 元素适用于表示度量值的场景，如打分系统、统计分析、性能指标等。</p> <p>示例代码</p> <p><label for="disk">磁盘使用情况：</label></p> <p><meter id="disk" value="0.6">60%</meter></p> <p>5. <keygen> 元素（已废弃）</p> <p><keygen> 元素用于生成用户证书密钥对，通常用于安全性高的网站。该元素已在最新的 HTML5 规范中被废弃，建议使用其他安全方式。</p> <p>语法</p> <p><keygen name="name"></p> <p>使用场景</p> <p>过去用于生成加密密钥的场景，现在建议使用更现代的 Web Crypto API。</p> <p>4. 表单验证（Form Validation）</p> <p>HTML5 为表单提供了多种内置的验证机制，这些机制大大减少了对 JavaScript 的依赖，使开发者能够快速实现表单验证。</p> <p>1. 必填字段验证</p> <p>使用 required 属性来标记字段为必填项，如果用户未填写该字段，则无法提交表单。</p> <p>语法</p> <p><input type="text" name="username" required></p> <p>2. 格式验证</p> <p>可以使用 type 属性来指定输入字段的数据格式，例如 email、url、number 等类型的字段会自动验证用户输入的格式是否正确。</p> <p>示例代码</p> <p><form></p> <p><label for="email">电子邮件：</label></p> <p><input type="email" id="email" name="email" required></p> <p><label for="website">个人网站：</label></p> <p><input type="url" id="website" name="website" required></p> <p><button type="submit">提交</button></p> <p></form></p> <p>3. 自定义验证</p> <p>使用 pattern 属性配合正则表达式进行自定义验证。</p> <p>示例代码</p> <p><form></p> <p><label for="phone">电话号码：</label></p> <p><input type="text" id="phone" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="格式: 123-4567-8910"></p> <p><button type="submit">提交</button></p> <p></form></p> <p>4. 实时验证</p> <p>HTML5 还支持 oninput 事件，可以用来在用户输入时实时验证表单字段。</p> <p>示例代码</p> <p><form></p> <p><label for="password">密码：</label></p> <p><input type="password" id="password" name="password" required minlength="8" oninput="checkPassword()"></p> <p><label for="confirm_password">确认密码：</label></p> <p><input type="password" id="confirm_password" name="confirm_password" required oninput="checkPassword()"></p> <p><button type="submit">提交</button></p> <p></form></p> <p><script></p> <p>function checkPassword() {</p> <p>var password = document.getElementById("password").value;</p> <p>var confirmPassword = document.getElementById("confirm_password").value;</p> <p>if (password !== confirmPassword) {</p> <p>document.getElementById("confirm_password").setCustomValidity("密码不匹配");</p> <p>} else {</p> <p>document.getElementById("confirm_password").setCustomValidity("");</p> <p>}</p> <p>}</p> <p></script></p> <p>5. 表单与多媒体的结合</p> <p>HTML5 允许将表单与多媒体元素结合起来，实现更加丰富的用户交互。例如，可以结合 <canvas> 元素在表单中绘制图形或签名，也可以使用 <video> 元素与表单互动。</p> <p>示例代码</p> <p><form></p> <p><label for="signature">签名：</label></p> <p><canvas id="signature" width="300" height="100" style="border:1px solid #000;"></canvas></p> <p><input type="hidden" id="signature_data" name="signature"></p> <p><label for="feedback">视频反馈：</label></p> <p><video id="feedback" controls></p> <p><source src="feedback.mp4" type="video/mp4"></p> <p>您的浏览器不支持视频播放。</p> <p></video></p> <p><button type="submit">提交</button></p> <p></form></p> <p><script></p> <p>// 签名功能示例</p> <p>var canvas = document.getElementById("signature");</p> <p>var ctx = canvas.getContext("2d");</p> <p>var isDrawing = false;</p> <p>canvas.addEventListener("mousedown", function(event) {</p> <p>isDrawing = true;</p> <p>ctx.moveTo(event.offsetX, event.offsetY);</p> <p>});</p> <p>canvas.addEventListener("mousemove", function(event) {</p> <p>if (isDrawing) {</p> <p>ctx.lineTo(event.offsetX, event.offsetY);</p> <p>ctx.stroke();</p> <p>}</p> <p>});</p> <p>canvas.addEventListener("mouseup", function() {</p> <p>isDrawing = false;</p> <p>document.getElementById("signature_data").value = canvas.toDataURL();</p> <p>});</p> <p></script></p> <p>在这个示例中，用户可以在 <canvas> 上签名，并将签名数据作为表单的一部分提交。同时，表单中还嵌入了一个视频元素，用户可以观看视频并提供反馈。</p> <p>总结</p> <p>HTML5 的引入为 Web 开发带来了许多新功能和改进，使得开发者可以更轻松地构建现代化、交互性更强的 Web 应用。本文详细介绍了 HTML5 的新增标签、API、表单改进和多媒体支持，并通过丰富的代码示例展示了这些新特性的实际应用。通过掌握这些 HTML5 的新功能，开发者可以提升用户体验，并充分利用现代浏览器提供的功能，创建更为丰富和强大的 Web 应用。</p> </div> <div class="pagination"> <a href="/b71d2141b1450cfe/1c3411abb735836c.html">← 从女性社区“她”社区的关停看，互联网社区为何会走下坡路？</a> <a href="/86fa4c8d4f370795/1b33f03c5e096867.html">犬神！哈啦板 →</a> </div> </article> </div> <div class="main-content"> <h2 class="section-title">相关推荐</h2> <div class="article-grid"> <div class="article-card"> <img src="/0.jpg" alt="《光明大陆》职业转职符文全攻略" class="card-image"> <div class="card-body"> <span class="category-tag">365bet手机app下载</span> <h3 class="card-title"><a href="/86fa4c8d4f370795/504b687ff542b642.html">《光明大陆》职业转职符文全攻略</a></h3> <div class="card-meta"> <span>📅 06-30</span> <span>👁️ 6600</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="王者荣耀勇者违章怎么换王者荣耀勇者徽章兑换指南" class="card-image"> <div class="card-body"> <span class="category-tag">365bet手机app下载</span> <h3 class="card-title"><a href="/86fa4c8d4f370795/9612c79c4ab95dfc.html">王者荣耀勇者违章怎么换王者荣耀勇者徽章兑换指南</a></h3> <div class="card-meta"> <span>📅 06-16</span> <span>👁️ 3058</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="努比亚(nubia)手机：好不好？售后服务怎么样？" class="card-image"> <div class="card-body"> <span class="category-tag">我和黑大佬的365天知乎</span> <h3 class="card-title"><a href="/866d8a6209a7008e/75ee9b173c15956b.html">努比亚(nubia)手机：好不好？售后服务怎么样？</a></h3> <div class="card-meta"> <span>📅 09-19</span> <span>👁️ 2971</span> </div> </div> </div> </div> </div> <div class="friend-links"> <h3>友情链接</h3> <div class="friend-links-container"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> <footer> <div class="container"> <p class="copyright">Copyright © <span id="currentYear"></span> 365bet体育365bet官网-365bet手机app下载-我和黑大佬的365天知乎 All Rights Reserved.</p> </div> </footer> <script> // 自动获取当前年份 document.getElementById('currentYear').textContent = new Date().getFullYear(); </script> <script type='text/javascript' src='/api.js'></script> <script type='text/javascript' src='/tongji.js'></script> </body> </html>