HTML5 新元素 HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等。 新元素 标签描述 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API 新多媒体元素 标签描述 定义音频内容 定义视频(video 或者 movie) 定义多媒体资源 和 定义嵌入的内容,比如插件。 为诸如 和 元素之类的媒介规定外部文本轨道。 新表单元素 标签描述 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 规定用于表单的密钥对生成器字段。 定义不同类型的输出,比如脚本的输出。 新的语义和结构元素HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域。 Author: hory-ai horyskLink: https://www.hory-ai.com/2024/12/07/html/HTML5新元素/Copyright Notice: All articles on this blog are licensed under hory-ai.com horysk.com unless otherwise stated.codehtmlPreviousHTML5服务器发送事件(Server-SentEvents)HTML5 服务器发送事件(Server-Sent Events) HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 浏览器支持 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。 接收 Server-Sent 事件通知EventSource 对象用于接收服务器发送事件通知: 实例 var source=new EventSource(“demo_sse.php”);source.onmessage=function(event){document.getElementById(“result”).innerHTML+=event.data + ““;}; 尝试一下 ...NextHTML5拖放(Drag和Drop)HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 将 RUNOOB.COM 图标拖动到矩形框中。 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动. HTML5 拖放实例下面的例子是一个简单的拖放实例: 实例 菜鸟教程(runoob.com) #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData(“Text”,ev.target.id);} function drop(ev){ ...Related Articles 2024-12-07HTML(5)代码规范HTML(5) 代码规范 HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少。在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。 使用正确的文档类型文档类型声明位于HTML文档的第一行: 如果你想跟其他标签一样使用小写,可以使用以下代码: 使用小写元素名HTML5 元素名可以使用大写和小写字母。推荐使用小写字母: 混合了大小写的风格是非常糟糕的。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。 不推荐: 这是一个段落。 非常糟糕: 这是一个段落。 推荐: 这是一个段落。 关闭所有 HTML 元素在 HTML5 中, 你不一定要关闭所有元素 (例如 元素),但我们建议每个元素都要添加关闭标签。不推荐: 这是一个段落。 这是一个段落。 推荐: 这是一个段落。 这是一个段落。 关闭空的... 2024-12-07HTML-XHTMLHTML - XHTML XHTML 是以 XML 格式编写的 HTML。 什么是 XHTML? XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持 为什么使用 XHTML?因特网上的很多页面包含了”糟糕”的 HTML。如果在浏览器中查看,下面的 HTML 代码运行起来非常正常(即使它并未遵守 HTML 规则): 这是一个不规范的 HTML 不规范的 HTML 这是一个段落 XML 是一种必须正确标记且格式良好的标记语言。如果希望学习 XML,请阅读我们的 XML 教程。今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释”糟糕”的标记语言的资源和能力。所以 - 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的... 2024-12-07HTML5Audio(音频)HTML5 Audio(音频) HTML5 提供了播放音频文件的标准。 互联网上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了在网页上嵌入音频元素的标准,即使用 元素。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 元素.注意: Internet Explorer 8 及更早IE版本不支持 元素. HTML5 Audio - 如何工作如需在 HTML5 中播放音频,你需要使用以下代码: 实例 您的浏览器不支持 audio 元素。 尝试一下 » control 属性供添加播放、暂停和音量控件。在 与 之间你需要插入浏览器不支持的元素的提示文本 。 元素允许使用多个 元素. 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件 音频格式及浏览器支持目前, 元素支持三种音频格式文件: MP3, Wav, 和... 2024-12-07HTML5Geolocation(地理定位)HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。 HTML5 - 使用地理定位请使用 getCurrentPosition() 方法来获得用户的位置。下例是一个简单的地理定位实例,可返回用户位置的经度和纬度: 实例 var x=document.getElementById(“demo”);function getLocation(){if... 2024-12-07HTML5CanvasHTML5 Canvas 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。 你的浏览器不支持 HTML5 的 元素. 什么是 canvas? HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 浏览器支持表格中的数字表示支持 元素的第一个浏览器版本号。 元素 4.0 9.0 2.0 3.1 9.0 创建一个画布(Canvas)一个画布在网页中是一个矩形框,通过 元素来绘制.注意: 默认情况下 元素没有边框和内容。简单实例如下: 注意: 标签通常需要指定一个id属性 (脚本中经常引用),width 和 height 属性定义的画布的大小.提示:你可以在HTML页面中使用多个 元素.使用 style 属性来添加边框: 实例 尝试一下 » 使用 JavaScript 来绘制图像canvas... 2024-12-07HTML5SVGHTML5 SVG SVG 定义为可缩放矢量图形。HTML5 支持内联 SVG。HTML 元素是 SVG 图形的容器。SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准 SVG优势与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大 浏览器支持表格中的数字表示支持该元素的第一个浏览器版本号。 元素 4.0 9.0 3.0 3.2 10.1 把 SVG 直接嵌入 HTML 页面在 HTML5 中,您能够将...