HTML4到HTML5的新增内容，你知道吗？

不念不忘少年蓝@ 2023-07-02 13:30 5阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  一、新增的元素
     *  二、新增的 input 元素类型
 *  END

# 前言 #

自从 2010 年 HTML5 正式推出以来，就以一种惊人的速度被迅速地推广，世界各知名浏览器厂商也对 HTML5 有很好的的支持。例如，微软就对 IE9 做了标准上的改进，使其能够支持 HTML5。而且 HTML5 还有一个特点，就是在老版本的浏览器上也可以正常运行。本文将为大家介绍与 HTML4 相比，HTML5 新增的元素与属性。

> **注意**  
> HTML5 的出现代表着 Web 开发进入了一个新的时代。但这并不表示现在用 HTML4 开发的网站要重新创建，因为 HTML5 内部功能并不是革命性的，而是发展性的。这正是 HTML5 兼容性的表现。

# 正文 #

## 一、新增的元素 ##

在 HTML5 中新增了以下元素。

*  <section>元素  
    `<section>`元素表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与 h1、h2、h3、h4 等元素结合起来使用，标示文档结构。

**\[例1\]** 应用`<section>`标签在页面中定义一个区域。代码如下:

<section>
        <h2>section标记的使用</h2>
        <p>完成百分比：100%</p>
        <input type="button" value="请单击"/>
    </section>

上面这段代码相当于在 HTML4 中使用`<div>`标签在页面中定义了一个区域。

*  <article>元素  
    `<acticle>`元素表示在页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章、一段用户评论等。除了内容部分，一个`<article>`元素通常有自己的标题、脚注等内容。
 *  <header>元素  
    `<header>`元素表示页面中一个内容区域或整个页面的标题。
 *  <footer>元素  
    `<footer>`元素表示整个页面或页面中一个内容区域块的脚注，例如日期、作者信息等。

**\[例2\]** 应用`<article>`元素在页面中定义一个区域，并演示`<header>`元素和`<footer>`元素的应用。代码如下:

<article>
        <header>
            <h1>苹果美容</h1>
        </header>
        <p>苹果素有“水果之王”的美称，它含有丰富的维生素C，能让皮肤细嫩、柔滑而白皙。</p>
        <footer>
            <p>2020-01-30</p>
        </footer>
    </article>

*  <aside>元素  
    `<aside>`元素用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。

**\[例3\]** 应用`<aside>`元素定义页面侧栏。代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title><aside>标签</title>
    </head>
    <body>
        <aside>
            <nav>
                <h2>侧栏</h2>
                <ul>
                    <li><a href="#">明日图书</a> 2020-01-30</li>
                    <li><a href="#">明日软件</a> 2020-01-30</li>
                    <li><a href="#">编程词典</a> 2020-01-30</li>
                </ul>
            </nav>
        </aside>
    </body>
    </html>

页面运行结果如下所示。

--------------------

## 侧栏 ##

*  明日图书 2020-01-30
 *  明日软件 2020-01-30
 *  编程词典 2020-01-30

## 二、新增的 input 元素类型 ##

HTML5 中新增了很多 input 元素类型，这些新增的元素可以使程序员更加方便地创建页面。HTML5 新增的 input 元素类型如下:

*  email  
    将 input 元素的类型设置为 email，表示文本框必须输入 E-mail 地址。
 *  url  
    url 表示必须输入 URL 地址。
 *  number  
    number 表示必须输入数值的文本框。
 *  range  
    range 表示必须输入一定范围内数值的文本框。

# END #

本文简单的介绍了 HTML4 到 HTML5 的新增内容，都是一些基本的内容，后面将会补充 CSS 的一些内容，请大家记得收藏或关注我哦\_。  
如果本文有什么写的不对的地方或有什么更好地建议和想法，欢迎在下方评论留言或私信我，大家一起进步学习！大佬勿喷～～