HTML5（1） 介绍

一、HTML5基础

  • 1999年 发布 HTML 4.01
  • 2000年 发布 XHTML 1.0
  • 2012年 发布HTML5 版本
  • 2013年发布 XHTML5
    HTML 4.01 基于 SGML（Standard Generalized Markup Language 标准通用标记语言），规定了三种不同的 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

1、声明

声明为 HTML5 文档 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

尝试一下 »

元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

2、将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

3、为 HTML 添加新元素

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 ：

JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>为 HTML 添加新元素</title>
<script>
    document.createElement("myHero")
</script>
<style>
myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
</head>
 
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
<myHero>我的第一个新元素</myHero>
 
</body>
</html>

尝试一下 »

注意：Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式，可以使用" html5shiv" 来解决该问题:


</head>
 
<body>
 
<h1>我的第一篇文章</h1>
 
<article>
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
</article>
 
</body>
</html>

尝试一下 »

二、HTML5 新元素

1、canvas 新元素

<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

2、新多媒体元素

  • <audio>：定义音频内容
  • <video>：定义视频（video 或者 movie）
  • <source>：定义多媒体资源 <video> 和 <audio>
  • <embed>：定义嵌入的内容，比如插件。
  • <track>：为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

3、新表单元素

  • <datalist>：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
  • <keygen>：规定用于表单的密钥对生成器字段。
  • <output>：定义不同类型的输出，比如脚本的输出。

4、新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

  • <article>：定义页面独立的内容区域。
  • <aside>：定义页面的侧边栏内容。
  • <bdi>：允许您设置一段文本，使其脱离其父元素的文本方向设置。
  • <command>：定义命令按钮，比如单选按钮、复选框或按钮
  • <details>：用于描述文档或文档某个部分的细节
  • <dialog>：定义对话框，比如提示框
  • <summary>：标签包含 details 元素的标题
  • <figure>：规定独立的流内容（图像、图表、照片、代码等等）。
  • <figcaption>：定义 <figure> 元素的标题
  • <footer>：定义 section 或 document 的页脚。
  • <header>：定义了文档的头部区域
  • <mark>：定义带有记号的文本。
  • <meter>：定义度量衡。仅用于已知最大和最小值的度量。
  • <nav>：定义导航链接的部分。
  • <progress>：定义任何类型的任务的进度。
  • <ruby>：定义 ruby 注释（中文注音或字符）。
  • <rt>：定义字符（中文注音或字符）的解释或发音。
  • <rp>：在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
  • <section>：定义文档中的节（section、区段）。
  • <time>：定义日期或时间。
  • <wbr>：规定在文本中的何处适合添加换行符。

5、已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

posted on 2019-02-03 16:00  springsnow  阅读(168)  评论(0)  编辑  收藏  举报

导航