<![CDATA[ HTML5 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ HTML5 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ Eleventy Sun, 24 May 2026 19:38:00 +0000 60 <![CDATA[ 你可能不知道的有用的 HTML5 标签 ]]> 标签 当你想要显示你在博客中使用的缩写的完整形式时，你可以使用此标签。 例如，如果你正在撰写有关智能家居产品的文章，该产品还具有你想要讨论的一些 AI 功能。现在，可能会有一些不熟悉人工智能的普通读者。使用此 abbr 标签和 title 属性将向读者显示一个工具提示，其中包含写在缩写标题标签中的内容。当用户将鼠标悬停在缩写上时，它可以帮助他们了解 “AI” 的含义。 想想如果你想将这种功能添加到你的博客中，它将为你节省多少麻烦。你所要做的就是插入这个标签，而不是思考如何使用 CSS。 标签的工作原理 假如你正在编写博客并且可以 ]]> https://www.freecodecamp.org/chinese/news/html5-tags-you-might-not-know/ 631c792c5826d307a3f9c476 Fri, 09 Sep 2022 11:18:00 +0000 原文： Useful HTML5 Tags You Might Not Know

HTML5 与之前版本不同的关键因素之一是语义标签的引入。

语义标签为网页添加了真正的含义，使人类和搜索引擎能够轻松区分网站的不同部分。

在一定程度上，它也会影响网页的 SEO。

因此，你应该知道可以用来提升你的网站的 HTML5 标签。

有一些非常有用但鲜为人知的 HTML5 标签也可以派上用场。它们为你的网页赋予语义意义，增强网站的可访问性。

在这篇文章里我列出了 5 个你可能想尝试的有用的 HTML 标签。

<abbr> 标签

当你想要显示你在博客中使用的缩写的完整形式时，你可以使用此标签。

例如，如果你正在撰写有关智能家居产品的文章，该产品还具有你想要讨论的一些 AI 功能。现在，可能会有一些不熟悉人工智能的普通读者。使用此 abbr 标签和 title 属性将向读者显示一个工具提示，其中包含写在缩写标题标签中的内容。当用户将鼠标悬停在缩写上时，它可以帮助他们了解 “AI” 的含义。

想想如果你想将这种功能添加到你的博客中，它将为你节省多少麻烦。你所要做的就是插入这个标签，而不是思考如何使用 CSS。

<abbr> 标签的工作原理

假如你正在编写博客并且可以访问 HTML 视图，你必须用 <abbr> 缩写词，并带有 title 属性，该属性将包含缩写词的定义或完整形式。正确完成后，当用户将鼠标悬停在显示 title 属性所包含内容的缩写上时，工具提示将出现。

<p style="font-family: sans-serif;"> Can <abbr title="Artificial Intelligence">AI</abbr> be taught how to reciprocate human emotions?
</p>
image-300

<details> 标签

可以使用此标记创建一个交互式容器框，当用户单击它时可以展开和收缩，同时包含所有内容。展开后，它会显示其中的内容，在收缩后它会关闭内容。

对于“常见问题解答”或“目录”部分，我都会使用它。

我最近在我的一个网站上工作时使用了它。我使用它构建了“目录”部分（你将能够在下面看到它）。

<details> 标签的工作原理

首先，我们声明包裹 <summary> 标签的 <details> 标签和你希望用户在需要时看到的常用内容。它可以是任何东西——表单、表格、段落或图像。

<details>
	<summary>Table of Contents</summary>
    <ul>
    	<li>
        	<a href="#web-dev">Web Development</a>
        </li>
        <ul>
            <li><a href="#web-dev-html">HTML</a></li>
            <li><a href="#web-dev-css">CSS</a></li>
        </ul>
       </ul>
 </details>

现在，我前面提到了 <summary> 标签：这个标签与 <details> 标签一起使用，并指定内容的标题。

details
Image Credit: Screen Grab of Freemium Stuff

提示：假设你正在使用此标签创建一个“常见问题解答”部分，并且你希望容器在页面加载时打开，例如“最常问的问题”：

<details open>
	<summary>How do I get my product registered?</summary>
    <p>You can get your product...</p>
</details>

<optgroup> 标签

此标签可让你在你构建的表单中对下拉列表的选项进行分类。

如果你想要用户可以从中选择的下拉列表之类的内容，请使用 <select> 标签。但是，用户浏览整个列表以找到正确的选项通常会变得非常冗长和乏味。

对选项进行分组确实很有帮助，你的用户会喜欢这一点，因为他们不必遍历每个选项。相反，他们可以导航到自己需要的类别。这有助于提升用户体验。

<optgroup> 标签的工作原理

在布局所有选项之前，声明 <optgroup> 标签并将所有类似的选项包裹在其中，就像下面的示例一样。你可以根据需要为尽可能多的组执行此操作。

<label for="cars">Cars</label>
    <select name="Cars" id="cars">
        <optgroup label="SUV">
            <option value="">Porsche Cayenne</option>
            <option value="">Lincoln Nautilus</option>
            <option value="">Mercedes-Benz GLB 2022</option>
            <option value="">BMW X3 2022</option>
            <option value="">Genesis GV80 2022</option> 
            <option value="">Mercedes-Benz GLS 2022</option>
        </optgroup>
        <optgroup label="Sports Car">
            <option value="">Ford Mustang</option>
            <option value="">Toyota GR Supra</option>
            <option value="">McLaren 7205</option>
            <option value="">Porsche 911</option>
            <option value="">Audi R8 V10</option>
            <option value="">Chevrolet Corvette Z06</option>
        </optgroup>
    </select>
image-302
图像来源：本文作者

<base> 标签

此标签将允许你更改该 HTML 文件中所有相对 URL 的基准 URL。你应该把它放在 <head> 标签中。它让你在使用相对 URL 的便利性的同时，还可以灵活地更改基准 URL。

<base> 标签的工作原理

用户只需要在 <head> 标签内声明这个标签，现在文档中的所有相对 URL 都会以新的 URL 作为其基础。

<head>
	<base href="https://bhaveshrawat.pages.dev/assets/">
</head>
<body>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="netflix-planform.webp">
        <figcaption>Netflix Planform made with Grid. </figcaption>
    </figure>
    <figure style="max-width: 480px;">
        <img style="width: 100%;" src="hamburger-menu.gif">	
        <figcaption>&lt;input&gt; tag menu bar</figcaption>
    </figure>
</body>
image-305

<base> 标签的问题

不过，使用这个标签有一个问题。它不适用于页内锚标记，例如 <a href="#home">。从导航的角度来看，这些类型的链接非常有用。所以，除非你用 JS 来弥补页内锚标签，否则这个标签可能并不理想。

<map> 标签

如果你想将单个图像与多个链接挂钩并根据图像映射它们，这个标签将让你做到这一点。此标签可让你指定图像上的区域——它可以是矩形、圆形或多边形（基本上是任何不规则形状）——并将它们映射到不同的链接。

<map> 标签的工作原理

首先，我们使用 usemap 属性指定一个 <img> 标签，该属性与 <map> 标签的 name 属性具有相同的值。

<map> 标签将在之后声明，其 name 属性与 usemap 属性具有相同的值。

标签还包裹了具有 shape、coords、alt 属性的 <area> 标签。shape 属性指定地图区域的形状，coords 定义地图区域的坐标以用于映射目的，alt 用于替代文本，href 保存各个区域的链接。

<img src="frame.png" width="430" height="194" usemap="#map" />
    <map name="map">
        <area shape="circle" coords="51,51,31" alt="Twitter" href="https://twitter.com/" />
        <area shape="circle" coords="161,52, 33" alt="Github" href="https://github.com/" />
        <area shape="circle" coords="271,51,31" alt="LinkedIn" href="https://linkedin.com/" />
        <area shape="circle" coords="379,51,31" alt="Medium" href="https://medium.com/" />
        <area shape="circle" coords="187, 143, 31" alt="Contra" href="https://contra.com/" />
        <area shape="circle" coords="215, 143, 31" alt="Instagram" href="https://www.instagram.com/" />
        <area shape="circle" coords="323,143,31" alt="Codepen" href="https://codepen.io" />
    </map>
APNG-1

更多

这不是一个标签，而是一个可以帮助你为你的应用程序构建自定义上下文菜单的属性。我说的是 oncontextmenu 属性。

上下文菜单基本上是一个菜单栏，当用户在浏览器上单击鼠标右键时会出现并提供诸如“检查”、“查看页面源代码”等选项。

7ecce6cb9af145cb11c57bc6ccb47e1a2c0c5eac

在构建 Web 应用程序时，你可能希望为你的用户提供自定义上下文菜单，其中包含许多特殊选项和功能，就像 Spotify 所做的那样。

image-313
图片来源：来自 Spotify 的屏幕抓取

oncontextmenu 属性如何工作

此属性的值默认为 true。这使你可以访问右键单击时出现的上下文菜单。但是，当给定一个错误值时，上下文菜单将不会出现。

因此，你将禁用本机上下文菜单，因为你的用户不需要它。此外，它不会干扰你的 web 应用程序的功能。

你不希望你的自定义菜单被上下文菜单重叠/干扰，对吗？所以，这个练习可以让你摆脱这种可怕的经历。

<body oncontextmenu="return false"></body>

注意：该属性适用于所有 HTML 元素。这意味着如果你不希望用户仅在某个部分具有上下文菜单功能，你也可以这样做。只需使用父元素上的属性，就像这样：

<body>
    <section oncontextmenu="return false"></section>
</body>

总结

这些就是我想与大家分享的 HTML 标签！我希望这篇文章值得你花时间，你从中学到了一些东西。

如果这些标签中的任何一个引起了你的兴趣，你可以在 MDN 上了解更多关于它们的信息。

祝你有美好的一天！

如果你正在学习 Git，我想推荐一本我在学习 Git 时写的电子书。它有 PDF 和 E-PUB 格式，你可以在 Gumroad 上免费获得。希望你喜欢这本电子书。

]]> <![CDATA[ Flash Player终将成为历史，HTML5正站在舞台的中央 ]]> https://www.freecodecamp.org/chinese/news/flash-player-vs-html5/ 5fead84739641a0517d527e6 Tue, 29 Dec 2020 07:36:48 +0000 12月28日，微软确认Windows 10在下一次更新时将自动删除Flash Player，这意味着Flash Player将正式成为历史。

Flash曾是互联网的一段传奇，它统一了互联网的内容创作模式，做到了真正的一次编写，到处运行，让每个人都有可能成为动画师和艺术家。

然而，随着移动互联时代的到来，Flash也逐渐暴露出越来越多的技术短板，耗电、运行速度慢以及安全隐患甚至一度让乔布斯对其彻底失去了信心。2017年7月25日， Adobe官方声明：2020年12月31日，将停止更新和发行Flash Player（EOL），这意味着 Flash Player在这一刻终于成为了历史：

自终止日期之后，Adobe不会继续发布Flash Player更新或安全补丁

从2021年1月12日开始禁止Flash内容在Flash Player中运行

主要的浏览器供应商也将在EOL日期之后禁止Flash Player运行

Flash Player前世：因带宽限制而兴

在2000年前后，互联网已经开始在国内普及，受带宽的限制（当年主流拨号是56K的modem，有个128K的ISDN就算是土豪了），网页内容大多以静态方式呈现，网速慢到下载一首MP3需要十多分钟甚至二十分钟时间，看一段清晰度很差的视频得等上20分钟，还必须先安装一个微软的MediaPlayer插件。

为了解决上述问题，Adobe 推出了一种矢量动画的格式，通过占用少量的空间，提供动画的无限放大和保真度，这就是 Flash 的雏形。

由于空间占用小，意味着用户可以更快的打开，互联网页面的呈现方式首次以动画效果示人，由于可以无限放大，意味着用户可以看到更加清晰的动画，而不用忍受GIF为了体积而缩小、减色（真彩色缩减为256色）。

Flash的火爆仿佛就在情理之中，在很短的时间内便发展成为了嵌入网页中的小游戏、动画、广告载体以及图形用户界面最常用的格式。围绕着 Flash 而生的产业链也如雨后春笋般涌现，如以 “2144”、“4399”、“7k7k”等为代表的网页游戏，以优酷网、土豆网等为代表的在线视频门户网站，就连当年的中学计算机课也把制作一个Flash动画作为考试的题目。

用Flash制作的动画作品“新长征路上的摇滚”、“东北人都是活雷锋” 传唱大江南北。

--1
--2

Flash Player今生：因视频播放而盛

Flash，并没有因2017年Adobe公司的声明被宣判 “死刑”。相反，从Flash Player 6开始，Macromedia 给Flash加入了支持播放视频的能力，可以在SWF格式的文件中嵌入视频数据，依然支持流播放。以至于后来大名鼎鼎的FLV格式，也是从Flash Player 7的文件格式中提取出来的。

FLV的出现引爆了视频流媒体的整个行业，此时 Flash播放器的装机率已经超过95%，用Flash做一个几十KB的小播放器，然后用这个小播放器来流式播放FLV视频文件，便可以迅速搭建出一个在线视频点播网站！Youtube、优酷、土豆正是借此先后兴起。

--3

Flash Player未来：因HTML5兴起而衰

在HTML5中，Flash几乎所有的功能都可以实现，而与Flash不同的是，HTML5是一个开放的标准，而Flash是属于Adobe公司的。因此，无论是苹果、谷歌，还是微软，都不希望被一家公司所左右，它们更喜欢一个门户开放的东西。

即便在初期，Flash身上的毛病HTML5同样存在，甚至更严重（在对比测试中HTML5的性能更差，能耗更高），但是当微软、苹果、谷歌三大巨头的浏览器都支持HTML5的时候，这个标准事实上就建立起来了。

之后发生的事大家都看到了，各个网站都开始从Flash转向HTML5，Flash也全面走向了边缘化。2014年10月29日,万维网联盟宣布,经过8年的艰辛努力,HTML5标准规范终于最终制定完成了,并公开发布。

HTML5封神的那一刻，Flash便注定大势已去。

2017年7月26日，Adobe宣布计划终结Flash Player插件，并在 2020年年底前停止开发和分发。而其之所以做出这个决定，主要原因在于Flash长久以来被人诟病的性能和安全问题，Flash自发布以来就被曝存在大量严重安全漏洞，即便屡次更新也难以彻底解决。

英雄终将落幕，薪火总会传承

对于原有的flash player网站运营来说，寻找替代方案是必须的：

  • 视频播放：在HTML5 中，可以通过HTML标签“video”和“audio”来支持嵌入式的媒体，使开发者能够更方便地将媒体嵌入到HTML文档中。
<video src="/i/movie.ogg" controls="controls" width="400" height="300">
</video>
  • 2D/3D动画：通过WebGL这一浏览器动画渲染的技术，有别于过去需要安装浏览器插件，通过 WebGL的技术，它让你可以将其元素与HTML元素进行混合和匹配，并将其与页面或背景图片的其他页面元素相结合，只需要编写网页代码即可实现3D图像的展示。WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以在浏览器里更流畅地展示3D场景和模型，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
  • 复杂的前端功能：随着HTML5标准的确立，日益发展的前端开发领域为我们提供了众多成熟的技术框架以及功能组件，可以协助我们快速实现各种应用场景下的需求，比如在线编辑 Excel 文档。

对于普通用户来说，如果仍然碰到包含Flash内容的网站，可以考虑下面的选择：

继续使用中国特供版Flashplayer，即便在flash player通用版本停止更新后，Adobe的中国合作方仍会继续推出特供版，就目前的实际情况看，特供版会附带广告弹窗，请谨慎考虑。

可以继续使用支持flashplayer的浏览器。比如IE或者老版本的Edge。

如今，大部分的网站已经将flash player以HTML5支持的相关元素进行了替换，普通用户在正常浏览网站时并不会有太多的感知和不便。因此，作为用户而言，不必太担心这个问题。而对于网站运营和开发人员来说，由于flash player的使用场景大部分集中在网站建设中，因此有必要认真考虑这个问题，并积极寻找Flash替代方案。

]]>