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