新HTML5 - 技术栈

新HTML5

倒霉男孩2025-04-08 13:42

在新HTML5中，DOCTYPE声明以及字符编码声明都非常简单：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   内容 
</body>
</html>

HTML5中也添加了许多新元素：

新语义元素：<header> <footer> <article > <section>

新表单元素属性：number,date,time,calendar,range

新图形元素：<svg> <canvas>

新多媒体元素：<audio> <video>

HTML5定义八个新的语义元素。所有这些都是块级元素。

css 复制代码

header.section,footer,aside,nav,main,article,figure{
     display: block;
}

加入新的元素到HTML

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        myHero{
            display: block;
            background-color: #dddddd;
            padding: 50px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <myHero> 新元素 <myHero>
</body>
</html>

可以使用Shiv语法，来协助浏览器兼容旧的E浏览器。

HTML5Shiv被放在<head>标签里

html 复制代码

<head>
   <!--[If It IE 9]>
    <![endif]-->
</head>

实例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--[If It IE 9]>
    <![endif]-->
    <title>Document</title>
</head>
<body>
    <section>
        <h1>城市</h1>
        <article>
            <h2>伦敦</h2>
            <p>伦敦是全球著名金融中心，是世界重要的外汇交易、证券交易和金融衍生品交易市场。</p>
        </article>
    </section>
</body>
</html>