新HTML5

在新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>
相关推荐
JarvanMo10 分钟前
Flutter 游戏开发:网上都查到了什么?
前端
前端小巷子17 分钟前
Vue 2 组件通信全景指南
前端·javascript·面试
江城开朗的豌豆17 分钟前
Vue的双向绑定已经能精确追踪变化,为什么还要用虚拟DOM?揭秘背后的性能哲学!
前端·javascript·vue.js
闲不住的李先森21 分钟前
使用 Ultracite 告别 ESLint 和 Prettier 的配置地狱
前端·代码规范
全栈技术负责人22 分钟前
前端静态资源优化
前端·性能优化·pdf
掘金安东尼1 小时前
⏰前端周刊第424期(2025年7月21日–7月27日)
前端·javascript·面试
江城开朗的豌豆1 小时前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
OpenTiny社区1 小时前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽1 小时前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js