Cao Note

外观

HTML 语义化与 HTML5 新特性 ​

语义化标签 ​

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

  • 提高代码可读性和可维护性
  • 有助于搜索引擎优化（SEO）
  • 提高屏幕阅读器的可访问性
  • 更清晰的文档结构

主要语义化标签 ​

标签描述
<header>文档或区域的页眉
<nav>导航链接区域
<main>文档的主要内容
<article>独立的内容块，如博客文章
<section>文档中的一个区域
<aside>侧边栏或补充内容
<footer>文档或区域的页脚
<figure>独立的媒体内容，如图片、图表
<figcaption><figure> 的标题或说明
<time>日期或时间
<mark>标记或高亮文本
<code>计算机代码
<pre>预格式化文本，保留空格和换行
<blockquote>长引用
<q>短引用
<cite>引用的来源

语义化布局示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化布局示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>最新文章</h2>
            <article>
                <h3>文章标题</h3>
                <p>文章内容...</p>
                <footer>
                    <time datetime="2023-01-01">2023年1月1日</time>
                </footer>
            </article>
        </section>

        <aside>
            <h3>侧边栏</h3>
            <ul>
                <li><a href="#">热门文章</a></li>
                <li><a href="#">分类</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化布局示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>最新文章</h2>
            <article>
                <h3>文章标题</h3>
                <p>文章内容...</p>
                <footer>
                    <time datetime="2023-01-01">2023年1月1日</time>
                </footer>
            </article>
        </section>

        <aside>
            <h3>侧边栏</h3>
            <ul>
                <li><a href="#">热门文章</a></li>
                <li><a href="#">分类</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>

HTML5 新增特性 ​

  1. 语义化标签：如 <header>, <nav>, <main>, <article>, <section>, <footer> 等
  2. 增强的表单元素：如 email, url, number, range, date, color 等
  3. 音频和视频：<audio> 和 <video> 标签，无需插件
  4. Canvas 绘图：用于动态绘制图形
  5. SVG 支持：矢量图形，缩放不失真
  6. 地理位置 API：获取用户位置
  7. Web 存储：localStorage 和 sessionStorage
  8. 拖拽 API：实现元素拖拽功能
  9. Web Workers：后台运行 JavaScript
  10. WebSockets：双向通信协议
  11. 表单验证：内置的表单验证功能
  12. History API：history.pushState 和 history.replaceState

Copyright © 2024-present xiaocao