Web开发学习笔记（6）-HTML5（二）

义化标签，是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。

在 HTML5 中，提供了如下图所示的语义化标签，可更直观看到页面结构。

标签说明：

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

例如，环球科学的首页，用语义化标签划分结构：

这些标签本身只有一个块级元素的特点，若不加入 CSS 样式，没有任何效果。

header 标签是一种具有引导和导航作用的构架元素，通常用来放置整个页面或者页面中一个内容块的标题，若是作为整个页面的标题，应该放在页面的起始位置。
nav 标签是一个可以用作页面导航的链接组。其中的导航元素可以将页面导航至其他关联页。需要注意的是并不是需要将一个页面的所有超链接都放到 nav 标签中，只放具有导航意义的超链接即可。
section 标签用于对页面上的内容进行分区，可以通过该标签将页面的内容分成多个部分。每个部分之间又有一定的联系。一个 section 标签通常由标题和内容组成。
article 标签用来表示页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇文章、一段评论、或者一段描述。一个 article 通常都包含一个 header 标签作为该文章的标题。
aside 标签用来描述当前页面内容的附注信息，它可以是当前页面内容相关的引用、广告、侧边栏等。
footer 标签可以作为内容的注脚，例如在网页中添加版权信息等。

time 标签可以对日期进行管理操作。它代表某个日期或者是 24 小时中的某个时刻。当表示时刻的时候，可以使用时区进行显示。例如：

<time datetime="2024-1-14">2024年1月14日</time>
<time datetime="2024-1-14T20:00">2024年1月14日晚8点</time>
<time datetime="2024-1-14T20:00Z">2024年1月14日晚8点</time>

搜索引擎会读取 datetime 属性的值，标签中的文字是在页面中显示的文字。其中 T 代表的是日期和时间的间隔。z 代表的是时间使用的是 UTC 标准时间。

time 标签有一个特殊的属性为：pubdate。该属性是布尔类型，通常用在 article 标签中代表该文章的发布日期。新建一个 index.html 文件，在其中写入以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <article>
      <header>
        <h1>文章标题</h1>
        <p>发布日期：<time datetime="2024-1-14" pubdate>2024年1月14日</time></p>
      </header>
    </article>
  </body>
</html>

figure 标签规定独立的流内容（包括图像、图表、照片、代码片段等）。

figcaption 标签为figure流内容的标题。figcaption 标签应该被置于 figure 标签的第一个或最后一个子标签的位置。

figure 和 figcaption 标签的使用，语法格式如下：

<figure>
  <figcaption></figcaption>
</figure>

在 HTML 中为我们提供了 code 标签，在 <code> 与 </code> 之间就是代码编辑区域。

举个例子，新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <figure>
      <pre>
            <code>
                var str="Hello LanQiao";
                console.log(str);
            </code>
        </pre>
      <figcaption>
        <p>这是一段 JavaScript 代码</p>
      </figcaption>
    </figure>
  </body>
</html>

点击预览页面，效果如下：

从截图可以看出代码部分在 code 标签里的内容，与我们普通文字是不一样。在我们的代码里有一对 pre 标签，它是用来格式化文本内容的，保留文本原有的换行格式。

们都知道，互联网的发展速度是非常快的，用飞速发展来评价也不为过，一些老的技术也在逐渐被新的技术更新覆盖或淘汰。其中HTML5不断的更新和发展也变得越来越成熟，同时，越来越多的行业巨头们也开始向HTML5示好。现在在我们的生活中，HTML5的身影已经随处可见了，但是小编相信在未来的日子里，HTML5技术必定会以更多的形式来渗透到我们日常生活的方方面面。

青岛HTML5

现在市场上，HTML5的使用越来越广泛，并且在企业的前端开发中，HTML5的使用率也一直高居不下，因为HTML5作为开发工具而言，不仅可以灵活，相对于其他前端开发语言，HTML5也可以为企业节省大量成本。

从企业开发成本中就可以看出来HTML5受欢迎的优势，那么HTML5还有哪些原因会这么受欢迎？

一、互动更好

很多人都喜欢更好的互动，喜欢对用户有反馈的动态网站，并且用户也很享受互动的过程，HTML5的画图便签就允许你更多的互动和动画，甚至超越我们之间使用的flash达到的效果，HTML5还拥有很多API允许你创建更加的用户体验，且更加动态的web应用程序。总体来讲，不管是移动APP和网站，还是仍然占重要地位的琢磨web应用程序，越来越多的开发人员选择HTML5技术，在以后的跨平台软件开发中，将会扮演更重要的角色。

二、更聪明的存储

本地存储是HTML5中最重要的特性，它的技术有点像cookie和客户端数据库的融合，但是比cookie更好用，支持多个Windows存储，有更好的安全性能，即便是关闭了浏览器也是可以保存数据。在很多情况下，本地存储是个不错的选择，不用担心用户删除任何cookie，并且现在所有主流浏览器都支持HTML5。

三、HTML5使你更让公司青睐

现在越来越来越多的公司开始注重HTML5的使用，并且很大程度上可以拿到不错的薪水，现在企业中会HTML5要比不会入职薪资水平高多不少。

四、HTML5语法较弱

在w3c指定的HTML5的规范中，对于HTML5的语法规定比较松散，并且没有严格要求每个控制标记都要有相应的结束控制标记。一些语义化标签可以使开发更快捷，更轻松。

五、其他

随着互联网全面的快速发展，现代浏览器都已经支持HTML5，作为最前沿的web技术，持有canvas标签和多种选择的游戏开发引擎，让游戏开发更便捷。可以更加丰富展现页面，让用户体验得到极大的提高。

就目前的情况来看，HTML5不管是移动开发中还是游戏开发中，都已经在扮演者非常重要的角色，毕竟一种能够帮助企业节省成本，还能够帮助开发人员节省时间和精力的编程语言，没有人和企业能够不喜欢它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form>
    <table border="0">
        <caption><h3>基本信息</h3></caption>
        <tr>
            <td>
                姓名：<input type="text"/>
            </td>
            <td>
                性别：<input type="text"/>
            </td>
            <td rowspan="4">
                <img src="https://labfile.oss.aliyuncs.com/courses/3582/pelissari.jpg" width="150px" height="180px"/>
            </td>
        </tr>
        <tr>
            <td>
                年龄：<input type="number"/>
            </td>
            <td>
                生日：<input type="date"/>
            </td>
        </tr>
        <tr>
            <td>
                邮箱：<input type="mail" />
            </td>
            <td>
                电话：<input type="tel" />
            </td>
        </tr>
        <tr>
            <td>
                学历：<select>
                    <option>专科</option>
                    <option>本科</option>
                    <option>硕士</option>
                    <option>博士</option>
                </select>
            </td>
            <td>
                学校：<input type="text" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
            爱好：
            <input type="checkbox" name="hobby" value="reading"/>看书
            <input type="checkbox" name="hobby" value="drawing"/>画画
            <input type="checkbox" name="hobby" value="sporting"/>运动
            <input type="checkbox" name="hobby" value="photoing"/>摄影
            <input type="checkbox" name="hobby" value="traveling"/>旅行
            <input type="checkbox" name="hobby" value="coding"/>编程
            <input type="checkbox" name="hobby" value="other"/>其他
            </td>
        </tr>
        <tr>
            <td colspan="3">
            教育背景 <br />
            <textarea cols="90" rows="2"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                自我评价 <br />
                <textarea cols="90" rows="2" ></textarea>
            </td>
        </tr>
    </table>
     <input type="submit" value="提交" />
</form>
</body>
</html>

在线咨询

上一篇：在eBay美国、欧盟和澳大利亚站点常见物品刊登的安全
下一篇：10分钟速成！Midjourney 网页版操作指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web开发学习笔记（6）-HTML5（二）

您的项目需求