外链论坛

 找回密码
 立即注册
搜索
查看: 15|回复: 3

把握前端新趋势:HTML5 新标签全解析

[复制链接]

3083

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098787
发表于 2024-10-3 11:02:21 | 显示全部楼层 |阅读模式

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





上一篇:云鸽笔记|技术复盘与总结
下一篇:HTML5 视频的哪些事儿
回复

使用道具 举报

2979

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569190
发表于 2024-10-7 04:53:53 | 显示全部楼层
软文发布平台 http://www.fok120.com/
回复

使用道具 举报

3053

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139078
发表于 2024-10-25 12:23:41 | 显示全部楼层
哈哈、笑死我了、太搞笑了吧等。
回复

使用道具 举报

3056

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138998
发表于 4 天前 | 显示全部楼层
“NB”(牛×的缩写,表示叹为观止)‌
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-20 17:11 , Processed in 0.130609 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.