HTML补充及总结学习笔记

发布时间：2024-12-05 02:40:30

HTML补充及总结学习笔记

HTML5语义化

语义化概念

无语义标签：<div> 和 <span>，用于分隔和组合内容，但无语义。 语义化标签：具有明确的语义，便于机器和开发者理解。

为什么要使用语义化标签？

对于人类：

代码更易维护和理解。 即使无样式，仍能呈现清晰的结构。

对于搜索引擎：

提高SEO优化效果。 有助于屏幕阅读器支持，提高无障碍性。

HTML5新增语义化标签

<header>：定义页面头部。 <nav>：定义导航栏。 <main>：定义页面主要内容。 <section>：用于分块内容。 <article>：用于独立的内容块。 <aside>：用于附属内容，如侧边栏。 <footer>：定义页面底部。 <figure> 和 <figcaption>：用于图像与说明。

示例代码：

<header>
    <nav>
        <a href="#">主页</a>
        <a href="#">关于</a>
    </nav>
</header>
<main>
    <article>
        <h1>HTML5语义化标签</h1>
        <p>这是关于HTML5语义化标签的示例。</p>
    </article>
</main>
<footer>
    <p>版权所有 © 2024</p>
</footer>

HTML多媒体

音频标签

<audio>标签用于嵌入音频。 常用属性： src: 音频路径 controls: 显示音频控件 autoplay: 自动播放 loop: 循环播放

示例代码：

<audio src="music.mp3" controls loop></audio>

视频标签

<video>标签用于嵌入视频。 常用属性： src: 视频路径 controls: 显示视频控件 autoplay: 自动播放 loop: 循环播放 poster: 视频封面

示例代码：

<video src="movie.mp4" controls poster="poster.jpg"></video>

HTML图形技术

SVG（可缩放矢量图形）

基于XML的矢量图形格式。 可直接嵌入HTML。

示例代码：

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Canvas画布

使用JavaScript绘制图形。

示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 150, 80);
</script>

WebGL

用于3D图形渲染。 常与three.js等库配合使用。

总结

掌握了HTML5语义化标签的概念及其优势。 了解了如何使用多媒体标签嵌入音视频。 学习了基础图形技术（SVG、Canvas、WebGL）。

评论数：0