HTML5概述及新语义元素

最新推荐文章于 2021-02-01 03:25:15 发布

青柠97

最新推荐文章于 2021-02-01 03:25:15 发布

阅读量361

点赞数

分类专栏： html5总结文章标签： html5

本文链接：https://blog.csdn.net/a1997bcd/article/details/82534695

版权

html5总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注：W3C 指 World Wide Web Consortium，万维网联盟。

编者注：WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5带来的变革

使javascript成为最热门的语言之一
使消除浏览器的差异成为可能
带来了移动端开发的热浪

html5新特性

语义化标签
HTML !–…– 标签

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

HTML !DOCTYPE 标签

<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容......
</body>

</html>

HTML a 标签

<a href="http://www.w3school.com.cn">W3School</a>

HTML abbr 标签

The <abbr title="People's Republic of China">PRC</abb

标记一个首字母缩写：

<acronym title="World Wide Web">WWW</acronym>

Example.com 的联系信息：

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

一段简单的 HTML 5 音频：

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

这是粗体文本

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

把用户名从周围的文本方向设置中隔离出来：

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

<bdo dir="rtl">Here is some text</bdo>

定义和用法

标签呈现大号字体效果。

使用标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在标签和其相应的标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个标签将不起任何作用。

更妙的是，可以嵌套标签来放大文本。每一个标签都可以使字体大一号，直到上限 7 号文本，正如字体模型所定义的那样。
但是使用标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持标签的浏览器来说，它经常将其认为是粗体字标签。

以下代码标记了一个按钮：

<button type="button">Click Me!</button>

如何通过 canvas 元素来显示一个红色的矩形：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

组合表单中的相关元素：

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

文档中的页脚部分：

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

六个不同的 HTML 标题：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

被水平线分隔的标题和段落：

This is header 1

This is some text

一段简单的 HTML5 视频：

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

正在进行的下载：

<!DOCTYPE html>
<html>
<body>

下载进度：
<progress value="22" max="100">
</progress>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

</body>
</html>

创建带有 4 个选项的选择列表：

<!DOCTYPE html>
<html>
<body>

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

</body>
</html>

通过标签把相关的选项组合在一起：

<html>
<body>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

</body>
</html>

关于文档的细节：

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

</body>
</html>

下面是一个 input 元素，datalist 中描述了其可能的值：

<!DOCTYPE HTML>
<html>
<body>

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

</body>
</html>

简单的三框架页面：

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>