首页 > 代码库 > HTML5的文档结构和新的语义元素

HTML5的文档结构和新的语义元素

2024-10-29 08:25:39   207人阅读

学习前端的东西似乎没有什么捷径，就是直接上手撸就完了

本文目标：（熟知）

1、创建基本HTML5文档结构

2、使用新的语义元素来布局页面

下面直接上代码：

<!DOCTYPE html> <!-- DOCTYPE简洁声明，强制现代的浏览器使用标准模式 -->
<html lang="en"> <!-- 使用lang指定文档语言 -->
<head>
    <meta charset="UTF-8"> <!-- 使用charset属性定义字符编码，这里使用了8位的unicode编码 -->
    <title>HTML5标记-语义</title>
    <link rel="stylesheet" href="style.css"> <!-- 使用link元素引入css样式表。浏览器会假设link元素都默认有一个text/css的MIME类型 -->
    <script src="app.js"></script> <!-- 使用script元素可以引入javascript脚本，浏览器会假设script元素具有一个text/javascript的MIME类型，除非使用的不是JavaScript脚本 -->
</head>
<body>
    <header> <!-- 使用header元素，用于标题和其他重要的细节(标题、永久链接、元信息)，可重复使用的元素 -->
        <hgroup> <!-- hgroup和article元素里都可以包含一个h1。标题结构的运作方式和HTML4不同 -->
            <h1>My Site</h1>
            <h2>My Title</h2>
        </hgroup>
        <nav> <!-- 使用nav元素，显示主要导航区或内容目录 -->
            <ul></ul>
        </nav>
    </header>
    <nav>
        <h1>Links Headings</h1>
        <ul></ul>
    </nav>
    <aside> <!-- 使用aside元素定义一个页面上独立于内容区域的部分。如文章的边栏、弹出式广告或浮动窗口 -->
        <!-- other info -->
    </aside>
    <section> <!-- 使用section元素，定义大块的内容，如文章区域或重要的表单。区块可以有自己的标题、导航及脚本 -->
        <article> <!-- 使用article元素来标记独立的可发布内容。 -->
            <header>
                <h1>Post Tilte</h1>
                <div class="meta">
                    Published by someone on
                    <time datetime="2015-07-17T12:30+00:00"> <!-- 使用time元素按照指定的格式显示时间 -->
                        01 May 2017 @ 12:30pm
                    </time>
                </div>
            </header>
            <section>
                <!-- post -->
                <p>this is a  
                    <mark>wonderful</mark>     <!-- 使用mark高亮文档中的搜索词，突出显示文本部分 -->
                    article.
                </p>
            </section>
        </article>
    </section>
    <footer> <!-- 使用footer元素表示页面或区域底部的页脚，通常包括相关文章和链接、版权和元数据等 -->
        <ul><!-- links --></ul>
        <!-- copyright -->
    </footer>
</body>
</html>

上述代码段中使用的<header>、<section>、<article>、<footer>等均属于HTML5的新语义元素

使用新语义元素代替原来的<div class="">的形式进行布局，不仅增加了页面的代码的易读性，规范了书写，更易于搜索引擎和辅助技术对页面的理解

但是也存在些问题，HTML5新特性对于旧版的浏览器不能正常访问和动态页面不能正常显示等一些问题，怎么做才能更好的解决呢？下一篇HTM5文章将举例介绍

HTML5的文档结构和新的语义元素


联系
我们