新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>
相关推荐
驭风少年君1 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说2 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友2 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行2 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安3 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-3 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada3 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚3 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好13 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式