HTML学习笔记

发布时间:2014-10-23 23:30:56
来源:分享查询网

HTML 头部元素 HTML<head> 元素 <head>元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。 以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及<style>。 HTML<title> 元素 <title>标签定义文档的标题。 title 元素在所有 HTML/XHTML 文档中都是必需的。 title 元素能够: ·       定义浏览器工具栏中的标题 ·       提供页面被添加到收藏夹时显示的标题 ·       显示在搜索引擎结果中的页面标题 一个简化的 HTML 文档: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>   <body> The content of the document...... </body>   </html> HTML<base> 元素 <base>标签为页面上的所有链接规定默认地址或默认目标(target): <head> <base href="http://www.w3school.com.cn/images/"/> <base target="_blank" /> </head> HTML<link> 元素 <link>标签定义文档与外部资源之间的关系。 <link>标签最常用于连接样式表: <head> <link rel="stylesheet"type="text/css" href="mystyle.css" /> </head> HTML<style> 元素 <style>标签用于为 HTML 文档定义样式信息。 您可以在 style元素内规定 HTML 元素在浏览器中呈现的样式: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> HTML<meta> 元素 元数据(metadata)是关于数据的信息。 <meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 <meta>标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 针对搜索引擎的关键词 一些搜索引擎会利用 meta 元素的 name 和content 属性来索引您的页面。 下面的 meta 元素定义页面的描述: <meta name="description" content="FreeWeb tutorials on HTML, CSS, XML" /> 下面的 meta 元素定义页面的关键词: <meta name="keywords" content="HTML,CSS, XML" /> name 和 content 属性的作用是描述页面的内容。 HTML<script> 元素 <script>标签用于定义客户端脚本,比如 JavaScript。 我们会在稍后的章节讲解script 元素。 HTML 脚本 HTMLscript 元素 <script>标签用于定义客户端脚本,比如 JavaScript。 script元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。 必需的 type 属性规定脚本的 MIME 类型。 JavaScript最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出“HelloWorld!”: <script type="text/javascript"> document.write("Hello World!") </script> 提示:如果需要学习更多有关在 HTML 中编写脚本的知识,请访问我们的 JavaScript 教程。 <noscript>标签 <noscript>标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。 noscript元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 只有在浏览器不支持脚本或者禁用脚本时,才会显示noscript 元素中的内容: <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> 如何应付老式的浏览器 如果浏览器压根没法识别<script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别<script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。 实例 JavaScript: <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> HTML 字符实体 HTML实体 在 HTML 中,某些字符是预留的。 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样: &entity_name;   或者   &#entity_number; 如需显示小于号,我们必须这样写:&lt;或 &#60; 提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。 HTML Object 元素 HTML助手(插件) 辅助应用程序(helperapplication)是可由浏览器启动的程序。辅助应用程序也称为插件。 辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用<object> 标签来加载的。 使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。 大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。 在 HTML 中播放视频的最好方式? 如需了解在 HTML 中包含音视频的最好方法,请参阅下一章节。 HTML 音频 问题,问题,以及解决方法 在 HTML 中播放音频并不容易! 您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(InternetExplorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC,Mac , iPad, iPhone)都能够播放。 在本章,W3School为您总结了问题和解决方法。 使用插件 浏览器插件是一种扩展浏览器标准功能的小型计算机程序。 插件有很多用途:播放音乐、显示地图、验证银行账号,控制输入等等。 可使用<object> 或 <embed> 标签来将插件添加到 HTML 页面。 这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。 使用<embed> 元素 <embed>标签定义外部(非 HTML)内容的容器。(这是一个 HTML5标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。 下面的代码片段能够显示嵌入网页中的 MP3 文件: 实例 <embed height="100" width="100"src="song.mp3" /> 亲自试一试 问题: ·       <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML4 验证。 ·       不同的浏览器对音频格式的支持也不同。 ·       如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。 ·       如果用户的计算机未安装插件,无法播放音频。 ·       如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。 注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。 使用<object> 元素 <objecttag> 标签也可以定义外部(非 HTML)内容的容器。 下面的代码片段能够显示嵌入网页中的 MP3 文件: 实例 <object height="100" width="100"data="song.mp3"></object> 亲自试一试 问题: ·       不同的浏览器对音频格式的支持也不同。 ·       如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。 ·       如果用户的计算机未安装插件,无法播放音频。 ·       如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。 使用 HTML5<audio> 元素 <audio>元素是一个 HTML5 元素,在 HTML4 中是非法的,但在所有浏览器中都有效。 实例 <audio controls="controls">   <sourcesrc="song.mp3" type="audio/mp3" />   <sourcesrc="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio> 亲自试一试 上面的例子使用了一个 mp3 文件,这样它在 Internet Explorer、Chrome以及 Safari 中是有效的。 为了使这段音频在Firefox 和 Opera 中同样有效,添加了一个 ogg 类型的文件。如果失败,会显示错误消息。 问题: ·       <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML4 验证。 ·       您必须把音频文件转换为不同的格式。 ·       <audio> 元素在老式浏览器中不起作用。 注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。 最好的 HTML解决方法 实例 <audio controls="controls"height="100" width="100">   <sourcesrc="song.mp3" type="audio/mp3" />   <sourcesrc="song.ogg" type="audio/ogg" /> <embed height="100" width="100"src="song.mp3" /> </audio> 亲自试一试 上面的例子使用了两个不同的音频格式。HTML5<audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试<embed> 元素。 问题: ·       您必须把音频转换为不同的格式。 ·       <audio> 元素无法通过 HTML 4 和 XHTML 验证。 ·       <embed> 元素无法通过 HTML 4 和 XHTML 验证。 ·       <embed> 元素无法回退来显示错误消息。 注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。 向网站添加音频的最简单方法 向网页添加音频的最简单的方法是什么? 雅虎的媒体播放器绝对算其中之一。 使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。 它能播放 mp3 以及一系列其他格式。通过一行简单的代码,您就可以把它添加到网页中,轻松地将 HTML 页面转变为专业的播放列表。 HTML 视频 使用<embed> 标签 <embed>标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频: 实例 <embed src="movie.swf"height="200" width="200"/> 亲自试一试 问题 ·       HTML4 无法识别 <embed> 标签。您的页面无法通过验证。 ·       如果浏览器不支持 Flash,那么视频将无法播放 ·       iPad 和 iPhone 不能显示 Flash 视频。 ·       如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。 使用<object> 标签 <object>标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 片段显示嵌入网页的一段 Flash 视频: 实例 <object data="movie.swf"height="200" width="200"/> 亲自试一试 问题 ·       如果浏览器不支持 Flash,将无法播放视频。 ·       iPad 和 iPhone 不能显示 Flash 视频。 ·       如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。 使用<video> 标签 <video>是 HTML 5 中的新标签。 <video>标签的作用是在 HTML 页面中嵌入视频元素。 以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频: 实例 <video width="320" height="240"controls="controls">   <sourcesrc="movie.mp4" type="video/mp4" />   <sourcesrc="movie.ogg" type="video/ogg" />   <sourcesrc="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> 亲自试一试 问题 ·       您必须把视频转换为很多不同的格式。 ·       <video> 元素在老式浏览器中无效。 ·       <video> 元素无法通过 HTML 4 和 XHTML 验证。 最好的 HTML解决方法 HTML 5+ <object> + <embed> <video width="320" height="240"controls="controls">   <sourcesrc="movie.mp4" type="video/mp4" />   <sourcesrc="movie.ogg" type="video/ogg" />   <sourcesrc="movie.webm" type="video/webm" />   <objectdata="movie.mp4" width="320" height="240">     <embedsrc="movie.swf" width="320" height="240" />   </object> </video> 亲自试一试 上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。 问题 ·       您必须把视频转换为很多不同的格式 ·       <video> 元素无法通过 HTML 4 和 XHTML 验证。 ·       <embed> 元素无法通过 HTML 4 和 XHTML 验证。 注释:使用<!DOCTYPE html> (HTML5) 解决验证问题。 优酷解决方案 在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。 如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频: <embedsrc="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> 亲自试一试 使用超链接 如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如Windows Media Player 来播放这个 AVI 文件: 实例 <a href="movie.swf">Play a videofile</a> 亲自试一试 关于内联视频的一段注释 当视频被包含在网页中时,它被称为内联视频。 如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。 同时请注意,用户可能已经关闭了浏览器中的内联视频选项。 我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。  

返回顶部
查看电脑版