【HTML5】H5的新标签简介

简介:
新标记 
HTML5 提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引
擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的
功能,如<audio>和<video>标记。
一些过时的 HTML4 标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 CSS 取代。

(1)<video> 标记
定义和用法:
<video> 标签定义视频,比如电影片段或其他视频流。
实例:
一段简单的 HTML5 视频
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

浏览器支持的视频格式:
ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。
mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
WebM = WebM由Google提出,是一个开放、免费的媒体文件格式。

(2)<audio>  标记
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
实例:
一段简单的 HTML 5 音频
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
音频格式:
当前,audio 元素支持三种音频格式:
Ogg Vorbis、MP3、Wav

(3)<canvas>  标记
定义和用法:
<canvas> 标签定义图形,比如图表和其他图像。
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例:
如何通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></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>

效果:


其中canvas.getContext()定义和用法
getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
提示:在未来,如果 <canvas> 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 "3d" 字符串参数。


增加:
编辑本段新应用程序接口(API )
除了原先的 DOM 接口,HTML5 增加了更多 API,如:
1. 用于即时 2D 绘图的 Canvas 标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理

去除:
b 和 i 标签依然存在,但它们的意义已经和之前有所不同,u,font,center,strike 这些标签则被完全去掉了。










目前标签的兼容性:
按字母顺序排列的标签列表
?4: 指示在 HTML 4.01 中定义了该元素
?5: 指示在 HTML 5 中定义了该元素
标签 描述 4 5
<!--...--> 定义注释。 4 5
<!DOCTYPE> 定义文档类型。 4 5
<a> 定义超链接。 4 5
<abbr> 定义缩写。 4 5
<acronym> HTML 5 中不支持。定义首字母缩写。 4
<address> 定义地址元素。 4 5
<applet> HTML 5 中不支持。定义 applet。 4
<area> 定义图像映射中的区域。 4 5
<article> 定义 article。 5
<aside> 定义页面内容之外的内容。 5
<audio> 定义声音内容。 5
<b> 定义粗体文本。 4 5
<base> 定义页面中所有链接的基准 URL。 4 5
<basefont> HTML 5 中不支持。请使用 CSS 代替。 4
<bdo> 定义文本显示的方向。 4 5
<big> HTML 5 中不支持。定义大号文本。 4
<blockquote> 定义长的引用。 4 5
HTML 5 从入门到精通-中文学习教程
第 10 页, 总 261 页  05-16-2011
<body> 定义 body 元素。 4 5
<br> 插入换行符。 4 5
<button> 定义按钮。 4 5
<canvas> 定义图形。 5
<caption> 定义表格标题。 4 5
<center> HTML 5 中不支持。定义居中的文本。 4
<cite> 定义引用。 4 5
<code> 定义计算机代码文本。 4 5
<col> 定义表格列的属性。 4 5
<colgroup> 定义表格列的分组。 4 5
<command> 定义命令按钮。 5
<datalist> 定义下拉列表。 5
<dd> 定义定义的描述。 4 5
<del> 定义删除文本。 4 5
<details> 定义元素的细节。 5
<dfn> 定义定义项目。 4 5
<dir> HTML 5 中不支持。定义目录列表。 4
<div> 定义文档中的一个部分。 4 5
<dl> 定义定义列表。 4 5
<dt> 定义定义的项目。 4 5
<em> 定义强调文本。 4 5
<embed> 定义外部交互内容或插件。 5
<fieldset> 定义 fieldset。 4 5
<figcaption> 定义 figure 元素的标题。 5
<figure> 定义媒介内容的分组,以及它们的标题。 5
<font> HTML 5 中不支持。 4
<footer> 定义 section 或 page 的页脚。 5
<form> 定义表单。 4 5
<frame> HTML 5 中不支持。定义子窗口(框架)。 4
<frameset> HTML 5 中不支持。定义框架的集。 4
<h1> to <h6> 定义标题 1 到标题 6。 4 5
<head> 定义关于文档的信息。 4 5
<header> 定义 section 或 page 的页眉。 5
<hgroup> 定义有关文档中的 section 的信息。 5
<hr> 定义水平线。 4 5
<html> 定义 html 文档。 4 5
<i> 定义斜体文本。 4 5
<iframe> 定义行内的子窗口(框架)。 4 5
<img> 定义图像。 4 5
<input> 定义输入域。 4 5
<ins> 定义插入文本。 4 5
<keygen> 定义生成密钥。 5
<isindex> HTML 5 中不支持。定义单行的输入域。 4
<kbd> 定义键盘文本。 4 5
<label> 定义表单控件的标注。 4 5
<legend> 定义 fieldset 中的标题。 4 5
<li> 定义列表的项目。 4 5
<link> 定义资源引用。 4 5
<map> 定义图像映射。 4 5
<mark> 定义有记号的文本。 5
<menu> 定义菜单列表。 4 5
<meta> 定义元信息。 4 5
<meter> 定义预定义范围内的度量。 5
<nav> 定义导航链接。 5
<noframes> HTML 5 中不支持。定义 noframe 部分。 4
<noscript> 定义 noscript 部分。 4 5
<object> 定义嵌入对象。 4 5
<ol> 定义有序列表。 4 5
<optgroup> 定义选项组。 4 5
<option> 定义下拉列表中的选项。 4 5
<output> 定义输出的一些类型。 5
<p> 定义段落。 4 5
<param> 为对象定义参数。 4 5
<pre> 定义预格式化文本。 4 5
<progress> 定义任何类型的任务的进度。 5
<q> 定义短的引用。 4 5
<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5
<rt> 定义 ruby 注释的解释。 5
<ruby> 定义 ruby 注释。 5
<s> HTML 5 中不支持。定义加删除线的文本。 4
<samp> 定义样本计算机代码。 4 5
<script> 定义脚本。 4 5
<section> 定义 section。 5
<select> 定义可选列表。 4 5
<small> 定义小号文本。 4 5
<source> 定义媒介源。 5
<span> 定义文档中的 section。 4 5
<strike> HTML 5 中不支持。定义加删除线的文本。 4
<strong> 定义强调文本。 4 5
<style> 定义样式定义。 4 5
<sub> 定义下标文本。 4 5
<summary> 定义 details 元素的标题。 5
<sup> 定义上标文本。 4 5
<table> 定义表格。 4 5
<tbody> 定义表格的主体。 4 5
<td> 定义表格单元。 4 5
<textarea> 定义 textarea。 4 5
<tfoot> 定义表格的脚注。 4 5
<th> 定义表头。 4 5
<thead> 定义表头。 4 5
<time> 定义日期/时间。 5
<title> 定义文档的标题。 4 5
<tr> 定义表格行。 4 5
<tt> HTML 5 中不支持。定义打字机文本。 4
<u> HTML 5 中不支持。定义下划线文本。 4
<ul> 定义无序列表。 4 5
<var> 定义变量。 4 5
<video> 定义视频。 5
<xmp> HTML 5 中不支持。定义预格式文本。 4


总结:
HTML 5 有两大特点:
首先,强化了 Web 网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。

其次,追加了本地数据库等 Web 应用的功能。

转载请注明出处:http://blog.csdn.net/acmman/article/details/50952056

相关文章
|
30天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
47 5
|
2天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2天前
|
存储 移动开发 前端开发
|
29天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
29天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
30 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
99 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
174 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便
|
24天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
90 0