HTML
HTML的学习与复习
Mirst
W.
展开
-
HTML 四十四 HTML5 浏览器支持
您可以帮助老版本浏览器处理 HTML5。HTML5 浏览器支持所有现代浏览器都支持 HTML5。此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。正因如此,您可以帮助老式浏览器处理”未知的“ HTML 元素。注释:您甚至可以教授石器时代的 IE6 如何处理未知的 HTML 元素。把 HTML5 元素定义为块级元素HTML5 定义了八个新的语义HTML 元素。所有都是块级元素。您可以把 CSSdisplay属性设置为block,以确保老式浏览器中...原创 2020-09-19 00:11:31 · 294 阅读 · 0 评论 -
HTML5 八 地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。浏览器支持Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).注意:Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。.原创 2020-09-10 09:41:46 · 298 阅读 · 0 评论 -
HTML5 七 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分。拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动.HTML5 拖放实例下面的例子是一个简单的拖放实例:<!DOCTYPE HTML><html&g原创 2020-09-07 23:16:11 · 95 阅读 · 0 评论 -
HTML5 六 MathML
HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。注意:大部分浏览器都支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari 浏览器查看。MathML 实例以下是一个简单的 MathML 实例:<!DOCTYPE html&g.原创 2020-09-07 23:16:04 · 141 阅读 · 0 评论 -
HTML5 五 内联 SVG
HTML5 支持内联 SVG。什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准SVG优势与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的原创 2020-09-07 23:15:55 · 138 阅读 · 0 评论 -
HTML5 四 Canvas
<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。什么是 canvas?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。浏览器支持表格中的数字表示支持原创 2020-09-07 23:16:18 · 189 阅读 · 0 评论 -
HTML5 三 新元素
HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。<canvas> 新元素标签 描述 <canvas> 标签定义图形,比如图表和其他图像。该原创 2020-09-07 23:15:49 · 117 阅读 · 0 评论 -
HTML5 二 浏览器支持
你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。HTML5 浏览器支持现代的浏览器都支持 HTML5。此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。正因为如此,你可以"教会"浏览器处理"未知"的 HTML 元素。甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。 将 HTML5 元素定义为块元素HTML5 定了 8 个新的 HTML语义(semantic)元素。所有这些元素都...原创 2020-09-07 23:15:41 · 134 阅读 · 0 评论 -
XHTML 十三 结构化2
无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的性能,以及设计、制作和更新网站的便利性。在本节,你将学到如何撰写合乎逻辑的、紧凑的标记,使得你有能力将带宽流量降低50%左右,在减少服务器负担和压力的同时,减少网站的加载时间。通过去除那些表现元素,并改掉那些没有任何好处的坏习惯,我们就可以达到上述的目的。这些坏习惯折磨着网络中的许多站点,特别是那些将 CSS 代码与主要基于表格的布局混合在一原创 2020-09-07 23:15:15 · 135 阅读 · 0 评论 -
XHTML 十二 结构化1
我们曾经为本节撰写的标题是:“XHTML : 简单的规则,容易的方针。”原因之一是,本节讨论的规则和方针是简单和容易的。原因之二是,一本简单和容易的 WEB 设计图书,就像超级市场的新式的免费商品一样,虽然常见却可以有效地吸引人的眼球,这样的东西可以刺激人的兴趣,并且鼓励人们尝试。我确实希望本节的内容可以激发你的兴趣,并鼓励你去尝试。为什么这么说呢?因为一旦你掌握了本章包含的简单容易的理念,你就会重新思考网页运作的方式,并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一遍。我希望你可以实实在原创 2020-09-07 23:15:06 · 110 阅读 · 0 评论 -
XHTML 十一 总结
XHTML 概要本教程已经向你教授了如何创建更严谨纯净的 HTML 页面。你已经知道所有的 XHTML 元素都必须被正确地嵌套,XHTML 必须拥有良好的结构,所有的标签必须小写,并且所有的 XHTML 元素必须被关闭。你也学到了所有的 XHTML 文档必须拥有 DOCTYPE 声明,并且 html、head、title 和 body 元素必须存在。如果需要关于 XHTML 的更多信息,请查看我们的XHTML 参考手册。课外阅读如果希望继续深入学习 XHTML,请务必阅读 w3s..原创 2020-09-07 23:14:57 · 93 阅读 · 0 评论 -
XHTML 十 事件属性
HTML 4.0 的新特性之一是使 HTML 事件触发浏览器中的行为,比方说当用户点击一个 HTML 元素时启动一段 JavaScript 。以下就是可被插入 HTML 标签以定义事件行为的一系列属性。假如你希望学习如何使用这些事件进行编程,那么你应该学习我们的JavaScript 教程和DHTML 教程。窗口事件 (Window Events)仅在 body 和 frameset 元素中有效。属性 值 描述 onload 脚本 当文档被载入时执行脚本 ...原创 2020-09-04 23:59:14 · 586 阅读 · 0 评论 -
XHTML 九 属性
HTML 标签拥有属性。每个标签的特殊属性均被列于每个标签描述之下。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。核心属性 (Core Attributes)以下标签不提供下面的属性:base, head, html, meta, param, script, style, 以及 title 元素。属性 值 描述 class class_rule 或 style_rule 元素的类(class) id id_name 元素的某个特定原创 2020-09-04 23:59:07 · 603 阅读 · 0 评论 -
XHTML 八 模块
XHTML 模块化模型定义了 XHTML 的模块。XHTML 模块化的原因XHTML 是简单而庞大的语言。XHTML 包含了网站开发者需要的大多数功能。对于某些特殊的用途,XHTML 太大且太复杂,而对于其他的用途,它又太简单了。通过将 XHTML 分为若干模块,W3C 已经创造出数套小巧且定义良好的 XHTML 元素,这些元素既可被独立应用于简易设备,又可以与其他 XML 标准并入大型且更复杂的应用程序。通过使用模块化的 XHTML,产品和软件设计者可以:选择被某种设备所支持的元素原创 2020-09-04 23:59:00 · 710 阅读 · 0 评论 -
XHTML 七 验证
XHTML 文档是根据文档类型声明进行验证的。通过 DTD 验证 XHTMLXHTML 文档是根据文档类型声明(DTD)进行验证的。只有将正确的 DTD 添加到文件的首行,XHTML 文件才会被正确地验证。严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性:!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"过原创 2020-09-04 23:58:52 · 717 阅读 · 0 评论 -
XHTML 六 升级至XHTML
如何将你的网站升级至 XHTML ?为了将站点从 HTML 转换为 XHTML,你首先应该熟悉前几章讲解的 XHTML 语法规则。下面讲解具体的步骤。添加文件类型声明将下面的文件类型声明添加至每页的首行:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">使用过渡的 DTD 也是个不原创 2020-09-04 23:58:43 · 667 阅读 · 0 评论 -
XHTML 五 DTD
XHTML 定义了三种文件类型声明。使用最普遍的是 XHTML Transitional。<!DOCTYPE> 是强制使用的。一个 XHTML 文档有三个主要的部分:DOCTYPE Head Body基本的文档结构是这样的:<!DOCTYPE ...><html><head><title>... </title></head><body> ... </body>原创 2020-09-04 23:58:21 · 702 阅读 · 0 评论 -
XHTML 四 语法
编写 XHTML 代码需要纯净的 HTML 语法。更多的 XHTML 语法规则:属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素属性名称必须小写这是错误的:<table WIDTH="100%">这是正确的:<table width="100%">属性值必须加引号这是错误的:<table width=100%>这是正确的:原创 2020-09-03 23:58:27 · 500 阅读 · 0 评论 -
XHTML 三 XHTML 与 HTML 之间的差异
通过开始编写严格的 HTML,你可以为 XHTML 做好准备。如何为 XHTML 做好准备XHTML 与 HTML 4.01 标准没有太多的不同。所以将你的代码升级至 4.01 是个不错的开始。我们的完整的《HTML 4.01 参考手册》会帮助你做到这一点。另外,你应该马上使用小写字母编写HTML代码,同时绝不要养成忽略类似 </p> 标签的坏习惯。祝您可以愉快地编码!最主要的不同:XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写原创 2020-09-03 23:51:59 · 173 阅读 · 0 评论 -
XHTML 二 为什么要使用XHTML?
XHTML 是 HTML 与 XML(扩展标记语言)的结合物。XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。为什么要使用XHTML?我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。下面的 HTML 代码仍然可以工作得很好,即使它没有遵守 HTML 规则:<html><head><title>This is bad HTML</title><body><h1>Bad HTM原创 2020-09-03 23:51:52 · 105 阅读 · 0 评论 -
XHTML 一 简介
XHTML 是更严格更纯净的 HTML 代码。XHTML 是什么?XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。 XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格更纯净的 HTML 版本。 XHTML 是作为一种 XML 应用被重新定义的 HTML。 XHTML 是一个 W3C 标准。之前应该掌握的知识在继续学习本教程之前,你应该对下列知识有一个基本的理解:原创 2020-09-03 23:51:42 · 174 阅读 · 0 评论 -
XHTML 零 首页
XHTML 教程XHTML 是更严谨更纯净的 HTML 版本。在此教程中,我们会为您讲解 HTML 与 XHTML 之间的差异,同时也会为您展示将该站点升级到 XHTML 的方法。内容列表XHTML 简介此章节对 XHTML 进行了简要的介绍,并解释了 XHTML 的概念。XHTML - Why?这章解释了我们为何如此地需要一门像 XHTML 这样的语言。XHTML与HTML之间的差异这章解释了 XHTML 与 HTML 在语法上的主要不同之处。XHTML 语法这原创 2020-09-03 23:51:27 · 67 阅读 · 0 评论 -
HTML 六十二 实例
HTML 基础标签实例一个简单的 HTML 文件这个例子是一个很简单的 HTML 文件,使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。简单的段落此例演示:段落元素中的文字如何被浏览器显示。更多的段落本例演示段落元素的某些缺省的行为。“诗歌”问题本例演示 HTML 格式化的某些问题。折行本例演示在 HTML 文档中折行的使用。标题本例演示在 HTML 文档中显示标题的标签。居中排列的标题本例演示一个居中排列的原创 2020-09-30 20:45:01 · 556 阅读 · 0 评论 -
HTML 六十一 HTML5 SSE
HTML Server-Sent 事件Server-Sent 事件允许网页从服务器获得更新。Server-Sent 事件 - One Way MessagingServer-Sent 事件指的是网页自动从服务器获得更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。浏览器支持表格中的数字指示完全支持 server-sent 事.原创 2020-09-30 20:42:54 · 210 阅读 · 0 评论 -
HTML 六十 HTML5 Web Workers
Web worker 是运行在后台的 JavaScript,不会影响页面的性能。什么是 Web Worker?当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。浏览器支持表格中的数字指示完全支持 Web Worker 的首个浏览器版本。HTML Web Workers 实例原创 2020-09-28 09:45:36 · 104 阅读 · 0 评论 -
HTML 五十九 HTML5 应用缓存
HTML5 应用程序缓存使用应用程序缓存,通过创建 cache manifest 文件,可轻松创建 web 应用的离线版本。什么是应用程序缓存?HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势:离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源浏览器支持表格中的数字指示完全支原创 2020-09-28 09:40:20 · 152 阅读 · 0 评论 -
HTML 五十八 HTML5 Web存储
HTML 本地存储:优于 cookies。什么是 HTML 本地存储?通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访原创 2020-09-20 00:26:42 · 140 阅读 · 0 评论 -
HTML 五十七 HTML5 拖放
拖放拖放(Drag 和 Drop)是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。浏览器支持表格中的数字指示了完全支持拖放的首个浏览器版本。HTML 拖放实例下列是关于拖放的简单例子:实例<!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:198px; height:66px;pa原创 2020-09-20 00:26:18 · 222 阅读 · 0 评论 -
HTML 五十六 HTML5 地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。<!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的位置:</p><button onclick="getLocation()">试一下</button><div id="mapholder"></div><script src="http://maps.goog原创 2020-09-20 00:25:49 · 735 阅读 · 0 评论 -
HTML 五十五 视频
在 HTML 中播放视频的方法有很多种。<!DOCTYPE html><html><body><video width="320" height="240" controls="controls" autoplay="autoplay"> <source src="/i/movie.ogg" type="video/ogg" /> <source src="/i/movie.mp4" type="video/mp4" /原创 2020-09-20 00:25:31 · 760 阅读 · 0 评论 -
HTML 五十四 音频
在 HTML 中播放声音的方法有很多种。问题,问题,以及解决方法在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。使用插件浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件有很多用途:播放音乐、显示地图、验证银行账号,控制输入等等。可使用 <object&.原创 2020-09-20 00:24:52 · 114 阅读 · 0 评论 -
HTML 五十三 对象
HTML Object 元素<object> 的作用是支持 HTML 助手(插件)。HTML 助手(插件)辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或.原创 2020-09-20 00:24:26 · 47 阅读 · 0 评论 -
HTML 五十二 多媒体
Web 上的多媒体指的是音效、音乐、视频和动画。现代网络浏览器已支持很多多媒体格式。什么是多媒体?多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。浏览器支持第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的.原创 2020-09-20 00:24:10 · 319 阅读 · 0 评论 -
HTML 五十一 HTML5 画布 vs SVG
HTML 5 Canvas vs. SVGCanvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。CanvasCanvas 通过 JavaScript 来绘制 .原创 2020-09-20 00:23:54 · 130 阅读 · 0 评论 -
HTML 五十 HTML5 SVG
HTML5 支持内联 SVG。什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准SVG 的优势与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩.原创 2020-09-20 00:19:05 · 191 阅读 · 0 评论 -
HTML 四十九 HTML5 画布
HTML5 Canvascanvas 元素用于在网页上绘制图形。什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:<canvas id="myCanvas" width="200" height="1.原创 2020-09-19 00:16:33 · 105 阅读 · 0 评论 -
HTML 四十八 HTML5 代码约定
HTML5样式指南和代码约定HTML 代码约定web 开发者常常不确定在 HTML 中使用的代码样式和语法。在 2000 年至 2010 年之间,许多 web 开发者从 HTML 转换为 XHTML。通过 XHTML,开发者不得不编写有效的“格式良好的”代码。HTML5 在代码验证时会更宽松一点。通过 HTML5,您必须创建属于自己的最佳实践、样式指南和代码约定。智能且有未来保证对样式的合乎逻辑的使用,可以令其他人更容易理解和使用您的 HTML。在未来,诸如 XML 阅.原创 2020-09-19 00:15:51 · 307 阅读 · 0 评论 -
HTML 四十七 HTML5 迁移
从 HTML4 迁移至 HTML5本章讲解如何从一张典型的 HTML4 页面迁移至典型的 HTML5。本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面,在不破坏如何原始内容和结构的情况下。注释:您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。典型的 HTML4 典型的 HTML5 <div id="header"> <header> <div id="menu"> <nav>原创 2020-09-19 00:14:14 · 229 阅读 · 0 评论 -
HTML 四十六 HTML5 语义
语义学(源自古希腊)可定义为对语言意义的研究。语义元素是拥有语义的元素。什么是语义元素?语义元素清楚地向浏览器和开发者描述其意义。非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息。语义元素的例子:<form>、<table> 以及 <img> - 清晰地定义其内容。浏览器支持此外,您可以“帮助”老式浏览器处理“未知元素”。所有现代浏览器均支持 HTML5 语义元素。在 HTML5 浏览器原创 2020-09-19 00:12:51 · 1034 阅读 · 0 评论 -
HTML 四十五 HTML5 元素
HTML5 中的新元素下面列出的 HTML5 的新元素,以及对它们的描述。新的语义/结构元素HTML5 提供的新元素可以构建更好的文档结构:标签 描述 <article> 定义文档内的文章。 <aside> 定义页面内容之外的内容。 <bdi> 定义与其他文本不同的文本方向。 <details> 定义用户可查看或隐藏的额外细节。 <dialog> 定义对话框或窗口。 <原创 2020-09-19 00:11:59 · 110 阅读 · 0 评论