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 的语义化功能,使得网页结构更清晰、功能更丰富,亦减少了对额外插件的依赖。
|