把握前端新趋势：HTML5 新标签全解析
<h1 style="color: black; text-align: left; margin-bottom: 10px;">HTML5 新标签</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/sz_mmbiz_png/ygdXubopVYD4gaPRyGA8uDmf5MaFV1kfDXibzuVCiaYK7NKkgdibAebQGXNvpw3Wn4l1NLaPaVuiaGATZSpmTk0NIQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 语义化标签</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些标签<span style="color: black;">帮忙</span>更好地定义网页的结构，<span style="color: black;">加强</span>网页的可读性和可<span style="color: black;">拜访</span>性：</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <header></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">一般</span><span style="color: black;">安置</span>在页面的顶部，<span style="color: black;">包括</span>网站的标题和导航链接。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• role：定义该元素的角色（例如，banner）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">header</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"banner"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">></span></span><span style="color: black;">我的网站</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#home"</span></span><span style="color: black;">></span></span><span style="color: black;">首页</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#about"</span></span><span style="color: black;">></span></span><span style="color: black;">关于</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">header</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <main></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">做为</span>页面的<span style="color: black;">重点</span>内容容器，排除其他部分。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• role：定义该元素的角色（例如，main）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">main</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"main"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">重点</span>内容</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">h1</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">这儿</span>是网站的<span style="color: black;">重点</span>内容部分。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">main</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <footer></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：定义页面或部分的底部内容。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• role：定义该元素的角色（例如，contentinfo）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">footer</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"contentinfo"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">© 2024 我的<span style="color: black;">机构</span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">footer</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <nav></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于定义网站的导航部分，<span style="color: black;">包括</span>导航链接。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• role：定义该元素的角色（例如，navigation）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"navigation"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#home"</span></span><span style="color: black;">></span></span><span style="color: black;">首页</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;"><span style="color: black;">href</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#services"</span></span><span style="color: black;">></span></span><span style="color: black;">服务</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">a</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">li</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">ul</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">nav</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <section></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用来划分页面中的<span style="color: black;">区别</span>内容块，<span style="color: black;">一般</span>带有标题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• id：为该部分定义<span style="color: black;">独一</span>标识符。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">section</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"about"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;">关于<span style="color: black;">咱们</span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">这是关于<span style="color: black;">咱们</span><span style="color: black;">机构</span>的描述。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">section</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <article></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">暗示</span>独立的内容，如<span style="color: black;">文案</span>或博客。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• lang：定义内容的语言。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">article</span></span><span style="color: black;"><span style="color: black;">lang</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"zh"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;">一篇有趣的<span style="color: black;">文案</span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">这是<span style="color: black;">文案</span>的内容。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">article</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <aside></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于侧边栏或附加信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• role：定义该元素的角色（例如，complementary）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">aside</span></span><span style="color: black;"><span style="color: black;">role</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"complementary"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">关联</span>信息</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">h2</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">有些</span>额外的内容。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">aside</span></span><span style="color: black;">></span></span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 多<span style="color: black;">媒介</span>标签</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5 <span style="color: black;">增多</span>了对音频和视频的原生支持：</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <audio></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：嵌入音频文件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• src：音频文件的 URL。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• controls：<span style="color: black;">表示</span>播放控件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">audio</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"audio.mp3"</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">></span></span><span style="color: black;">您的浏览器不支持音频元素。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">audio</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <video></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：嵌入视频文件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• src：视频文件的 URL。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• controls：<span style="color: black;">表示</span>播放控件。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• width、height：定义视频的宽度和高度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"600"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"400"</span></span><span style="color: black;">></span></span><span style="color: black;"> 您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <source></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：为音频或视频元素<span style="color: black;">供给</span>多个文件<span style="color: black;">源自</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• src：<span style="color: black;">媒介</span>文件的 URL。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• type：<span style="color: black;">媒介</span>文件的 MIME 类型。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.webm"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/webm"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/mp4"</span></span><span style="color: black;">/></span></span><span style="color: black;"> 您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <track></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：为视频或音频元素添加字幕或文本轨道。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• kind：定义轨道类型（如 subtitles、captions）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• src：轨道文件的 URL。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;"><span style="color: black;">controls</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">source</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video.mp4"</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"video/mp4"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">track</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"subtitles_en.vtt"</span></span><span style="color: black;"><span style="color: black;">kind</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"subtitles"</span></span><span style="color: black;"><span style="color: black;">srclang</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"en"</span></span><span style="color: black;"><span style="color: black;">label</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"English"</span></span><span style="color: black;">/></span></span><span style="color: black;"> 您的浏览器不支持视频元素。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">video</span></span><span style="color: black;">></span></span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 表单<span style="color: black;">关联</span>标签</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5 <span style="color: black;">加强</span>了表单的功能，引入了多个新元素和属性：</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <datalist></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">供给</span>预定义的选项供用户<span style="color: black;">选取</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• id：为<input>元素<span style="color: black;">供给</span>的选项列表标识符。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">list</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browsers"</span></span><span style="color: black;"><span style="color: black;">name</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browser"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browser"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">datalist</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"browsers"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Chrome"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Firefox"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"Safari"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">option</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">datalist</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <keygen></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于生成公钥的表单字段（已被弃用）。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <output></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">表示</span>计算结果或用户操作的结果。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• for：指定与之<span style="color: black;">相关</span>的输入元素。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">form</span></span><span style="color: black;"><span style="color: black;">oninput</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"</span><span style="color: black;">result</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">=</span><span style="color: black;">parseInt</span><span style="color: black;">(</span><span style="color: black;">a</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">)+</span><span style="color: black;">parseInt</span><span style="color: black;">(</span><span style="color: black;">b</span><span style="color: black;">.</span><span style="color: black;">value</span><span style="color: black;">)</span><span style="color: black;">"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"range"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"a"</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;">/></span></span><span style="color: black;">+</span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">input</span></span><span style="color: black;"><span style="color: black;">type</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"number"</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"b"</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">output</span></span><span style="color: black;"><span style="color: black;">name</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"result"</span></span><span style="color: black;"><span style="color: black;">for</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"a b"</span></span><span style="color: black;">></span></span><span style="color: black;">100</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">output</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">form</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <progress></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">表示</span>任务进度，<span style="color: black;">暗示</span>任务的进度，<span style="color: black;">一般</span>用于进度条，例如文件上传进度、下载进度等</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• value：当前进度值。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• max：进度的最大值。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">progress</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"70"</span></span><span style="color: black;"><span style="color: black;">max</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;">></span></span><span style="color: black;">70%</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">progress</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <meter></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">暗示</span>范围内的度量值，<span style="color: black;">暗示</span>在一个已知范围内的数值，<span style="color: black;">例如</span><span style="color: black;">暗示</span>分数、投票结果、带宽<span style="color: black;">运用</span>量等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• value：当前值。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• min、max：值的范围。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">meter</span></span><span style="color: black;"><span style="color: black;">value</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"0.6"</span></span><span style="color: black;"><span style="color: black;">min</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"0"</span></span><span style="color: black;"><span style="color: black;">max</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"1"</span></span><span style="color: black;">></span></span><span style="color: black;">60%</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">meter</span></span><span style="color: black;">></span></span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 图形和脚本标签</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了支持更现代的网页应用和功能，HTML5 引入了<span style="color: black;">有些</span>绘图和脚本的标签：</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <canvas></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于绘制图像和动画，<span style="color: black;">经过</span> JavaScript <span style="color: black;">掌控</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• width：画布的宽度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• height：画布的高度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">canvas</span></span><span style="color: black;"><span style="color: black;">id</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"myCanvas"</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"200"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;"><span style="color: black;">style</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"</span><span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1px</span><span style="color: black;"> solid </span><span style="color: black;">#000000;</span><span style="color: black;">"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">canvas</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">script</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">var</span></span><span style="color: black;"> canvas </span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">document</span></span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">getElementById</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">"myCanvas"</span></span><span style="color: black;">);</span><span style="color: black;"><span style="color: black;">var</span></span><span style="color: black;"> ctx </span><span style="color: black;">=</span><span style="color: black;"> canvas</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">getContext</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">"2d"</span></span><span style="color: black;">);</span><span style="color: black;"> ctx</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">fillStyle</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"#FF0000"</span></span><span style="color: black;">;</span><span style="color: black;"> ctx</span><span style="color: black;">.</span><span style="color: black;"><span style="color: black;">fillRect</span></span><span style="color: black;">(</span><span style="color: black;"><span style="color: black;">20</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">20</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">150</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">50</span></span><span style="color: black;">);</span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">script</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <svg></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于定义矢量图形（Scalable Vector Graphics）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">svg</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"100"</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">circle</span></span><span style="color: black;"><span style="color: black;">cx</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;"><span style="color: black;">cy</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"50"</span></span><span style="color: black;"><span style="color: black;">r</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"40"</span></span><span style="color: black;"><span style="color: black;">stroke</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"black"</span></span><span style="color: black;"><span style="color: black;">stroke-width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"2"</span></span><span style="color: black;"><span style="color: black;">fill</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"red"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">svg</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <mark></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">暗示</span>高亮<span style="color: black;">表示</span>或<span style="color: black;">明显</span>的文本。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">这是<span style="color: black;">有些</span> </span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">mark</span></span><span style="color: black;">></span></span><span style="color: black;">高亮<span style="color: black;">表示</span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">mark</span></span><span style="color: black;">></span></span><span style="color: black;"> 的文本。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <time></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于<span style="color: black;">暗示</span><span style="color: black;">详细</span>时间或日期。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">重点</span>属性</strong>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• datetime：时间的<span style="color: black;">设备</span>可读格式。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">time</span></span><span style="color: black;"><span style="color: black;">datetime</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"2024-09-22"</span></span><span style="color: black;">></span></span><span style="color: black;">2024年9月22日</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">time</span></span><span style="color: black;">></span></span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 新功能标签</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <figure></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">暗示</span>独立的图示、照片、代码或其他可自<span style="color: black;">包括</span>的内容。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">img</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"image.jpg"</span></span><span style="color: black;"><span style="color: black;">alt</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"示例图像"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">></span></span><span style="color: black;">这是一幅示例图像的说明。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <figcaption></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：为<figure>元素<span style="color: black;">供给</span>图示的标题或说明。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong> ：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">img</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"image.jpg"</span></span><span style="color: black;"><span style="color: black;">alt</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"示例图像"</span></span><span style="color: black;">/></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">></span></span><span style="color: black;">这是一幅示例图像的说明。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">figcaption</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">figure</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <details></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于<span style="color: black;">表示</span>或<span style="color: black;">隐匿</span>额外的内容。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">></span></span><span style="color: black;">点击查看详情</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">这儿</span>是<span style="color: black;">隐匿</span>的<span style="color: black;">仔细</span>内容。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <summary></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：为<details>元素定义一个可点击的标题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;">更加多</span>信息</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">summary</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">这是<span style="color: black;">有些</span>额外的信息。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">details</span></span><span style="color: black;">></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <embed></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：用于嵌入<span style="color: black;">外边</span>资源，如插件、视频、音频等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">embed</span></span><span style="color: black;"><span style="color: black;">src</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"external-content.swf"</span></span><span style="color: black;"><span style="color: black;">width</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"300"</span></span><span style="color: black;"><span style="color: black;">height</span></span><span style="color: black;">=</span><span style="color: black;"><span style="color: black;">"200"</span></span><span style="color: black;">/></span></span>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">- <wbr></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span><span style="color: black;">办法</span></strong>：<span style="color: black;">意见</span>在指定位置进行换行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">代码示例</strong>：</p><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span><span style="color: black;">这是一个长单词：supercalifragilisticexpialidocious</span><span style="color: black;"><span style="color: black;"><</span><span style="color: black;"><span style="color: black;">wbr</span></span><span style="color: black;">/></span></span><span style="color: black;">，<span style="color: black;">这里</span>处<span style="color: black;">意见</span>换行。</span><span style="color: black;"><span style="color: black;"></</span><span style="color: black;"><span style="color: black;">p</span></span><span style="color: black;">></span></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这些新标签<span style="color: black;">加强</span>了 HTML5 的语义化功能，使得网页结构更清晰、功能更丰富，<span style="color: black;">亦</span>减少了对额外插件的依赖。</p>
软文发布平台 http://www.fok120.com/ 哈哈、笑死我了、太搞笑了吧等。 “NB”（牛×的缩写，表示叹为观止）
页:
[1]