html教程 第4页

HTML 音频(Audio) 声音在HTML中可以以不同的方式播放. 问题以及解决方法 在 HTML 中播放音频并不容易！ 您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。 在本章，W3Cschool为您总结了问题和解决方法。 您可以参考本站的 HTML 参考手册的 <audio> 标签一节来获得更多详细信息！ 使用插件 浏览器插件是一种扩展浏览器标准功能的小型计算机程序。 插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上.  这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。 使用 <embed> 元素 <embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。 下面的代码片段能够显示嵌入网页中的 MP3 文件： 实例 <embed height=”50″ width=”100″ src=”horse.mp3″> 尝试一下 » 问题: <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。 不同的浏览器对音频格式的支持也不同。 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。 如果用户的计算机未安装插件，无法播放音频。 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。 使用 <object> 元素 <object> 标签也可以定义外部（非 HTML）内容的容器。 下面的代码片段能够显示嵌入网页中的 MP3 文件： 实例 <object height=”50″ width=”100″ data=”horse.mp3″></object> 尝试一下 » 问题: 不同的浏览器对音频格式的支持也不同。 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。 如果用户的计算机未安装插件，无法播放音频。 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。 使用 HTML5 <audio> 元素 HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。 The <audio> element works in all modern browsers. 浏览器兼容 格中的数字表示支持该属性的第一个浏览器版本号。 以下我们将使用 <audio> 标签来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个...

HTML中如何键入空格 一个空格的键入 在 html 网页中一个空格，我们可以键入“空格”键即可实现。 多个 html 空格字符 如果在 html 中想实现多个空格间隙，如果是键入多个“空格”键，但最终也只显示一个空格间隙。这个时候我们就需要真正的空格字符代码 &nbsp; 了。 代码示例： 实例 学编程上w3cschool&nbsp;学编程上w3cschool&nbsp;&nbsp;学编程上w3cschool&nbsp; &nbsp;&nbsp; 尝试一下 » HTML空格的多种转义字符 == 普通的英文半角空格  == == == no-break space （普通的英文半角空格但不换行）  == 中文全角空格 （一个中文宽度）  ==   == en空格 （半个中文宽度） ==   == em空格 （一个中文宽度）  == 四分之一em空格 （四分之一中文宽度）  相比平时的空格（ ），nbsp 拥有不间断（non-breaking）特性。即连续的 nbsp 会在同一行内显示。即使有100个连续的 nbsp，浏览器也不会把它们拆成两行。 如何用 JS 动态给 HTML 添加空格 前端项目中有时需要动态用 JS 添加空格，例如为了照顾 CSS 的样式或者为了照顾特殊效果的实现。只要用下面这种方法就好了。 HTML: 如果你不单单想让div 之间是 null，而是想动态添加空格的话，这样(jquery) $(“#id”).innerHTML += ” “; 使用 HTML（超文本标记语言）添加段落间距 如果你希望输入的文本形成一个段落，那么在段落前插入 <p> ，在段落内句与句之间插入 <p> 来分割句子。 实例 w3cschool简介 w3cschool.cn注册并建站于2009年8月，是国内较早以w3c标准为教程材料的的技术在线教程类网站之一，后来经过原站长多年经营，成为广为人知的w3cschool在线教程网站，2016年开始公司化运作。 网站主要为初学者提供入门的学习内容和日常技术资料查询服务。 为了能更好的服务大家，本站中提供了大量的在线实例，通过实例，您可以更好地学习如何建站。 并且我们会根据当前互联网的变化实时更新内容。 对于我们网站及内容如有不足的地方，欢迎广大技术爱好者在本站留言提供意见、建议。 尝试一下 »

你已经完成了 HTML 的学习，下一步该学习什么呢？ HTML 总结 本教程已教你如何使用 HTML 创建站点。 HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 的关键是标签，其作用是指示将出现的内容。 如需更多关于 HTML 的信息，请查看我们的 HTML 教程 和 HTML 参考手册 。 为了能够巩固您对 HTML 的熟练度，您可以进行一些基础的 HTML 测试！ 现在，你已学完 HTML，接下来该学习什么呢？ 学习 CSS CSS 被用来同时控制多重网页的样式和布局。 通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。  通过使用 CSS 来我们可以大大提升网页开发的工作效率！ 如需学习如何创建样式表，请访问我们的 CSS 教程 。 学习 JavaScript JavaScript 可以让你的网页更加生动。 如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到 Javascript。 JavaScript 是互联网上最流行的脚本语言，目前所有主流浏览器都支持 Javascript。 如果你想学习更多关于Javascript 的知识，可以访问本站的 JavaScript 教程. 站点服务器 在自己的服务器上托管网站始终是一个选项。有几点需要考虑： 硬件支出 如果要运行”真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。 软件支出 请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。 人工费 不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个”任何事都可能发生”的环境中。 使用因特网服务提供商（ISP） 从 ISP 租用服务器也很常见。 大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点： 连接速度 大多数 ISP 都拥有连接因特网的高速连接。 强大的硬件 ISP 的 Web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。 安全性和可靠性 ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。 选择 ISP 时的注意事项 24 小时支持 确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。 每日备份 确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。 流量 研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。 带宽或内容限制 研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。 E-mail 功能 请确保 ISP 支持您需要的...

HTML 视频（Videos） 在 HTML 中播放视频的方法有很多种。 可以使用 <embed> 标签、<object> 标签以及 <video> 标签（HTML 5中启用）。 HTML视频（Videos）播放 实例 <video width=”320″ height=”240″ controls>   <source src=”movie.mp4″ type=”video/mp4″>   <source src=”movie.ogg” type=”video/ogg”>   <source src=”movie.webm” type=”video/webm”>   <object data=”movie.mp4″ width=”320″ height=”240″>     <embed src=”movie.swf” width=”320″ height=”240″>   </object> </video> 尝试一下 » 问题以及解决方法 在 HTML 中播放视频并不容易！ 您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。 在本章，W3CSchool 为您总结了问题和解决方法。 使用 <embed> 标签 <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频： 实例 <embed src=”intro.swf” height=”200″ width=”200″> 尝试一下 » 问题 HTML4 无法识别 <embed> 标签。您的页面无法通过验证。 如果浏览器不支持 Flash，那么视频将无法播放 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。 使用 <object> 标签 <object> 标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 片段显示嵌入网页的一段 Flash 视频： 实例 <object data=”intro.swf” height=”200″ width=”200″></object> 尝试一下 » 问题: 如果浏览器不支持 Flash，将无法播放视频。 iPad 和 iPhone 不能显示...

HTML 多媒体 Web 上的多媒体指的是音效、音乐、视频和动画。 现代网络浏览器已支持很多多媒体格式。 什么是多媒体？ 多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。 在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。 在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。 浏览器支持 第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。 不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。 您将在下面的章节学习更多有关插件的知识。 多媒体格式 格式 多媒体元素（比如视频和音频）存储于媒体文件中。 确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。 多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。 视频格式 MP4是互联网推出新的视频格式。 YouTube 推荐使用 MP4 。 Flash Players 支持 MP4 HTML5 支持 MP4。 格式 文件 描述 AVI .avi AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。 WMV .wmv Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。 MPEG .mpg .mpeg MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。 QuickTime .mov QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。 RealVideo .rm .ram RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。 Flash .swf .flv Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 Mpeg-4...

HTML5 MathML HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>…</math> 。 MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。 注意：大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。 MathML 实例 以下是一个简单的 MathML 实例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math> </body> </html> 尝试一下 » 运行结果图，如下所示： 以下实例添加了一些运算符： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>⁢</mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </body> </html> 尝试一下 » 运行结果图，如下所示： 以下实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>A</mi> <mo>=</mo> <mfenced open="[" close="]"> <mtable> <mtr> <mtd><mi>x</mi></mtd> <mtd><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>z</mi></mtd> <mtd><mi>w</mi></mtd> </mtr> </mtable> </mfenced> </mrow> </math> </body> </html>...

HTML页面内容 Article 标签 article元素表示自包含HTML文档中的内容。 以下代码显示了正在使用的 article 元素。 <!DOCTYPE HTML> <html> </head> <body> <article> <header> <hgroup> <h1 id="fruitsilike">H1Like</h1> <h2>H2</h2> </hgroup> </header> This is a test. <section> <h1 id="morefruit">XML</h1> This is a test. <section> <h1>HTML</h1> This is a test. </section> </section> <footer> <nav> Nav </nav> </footer> </article> </body> </html> HTML Sections section元素是HTML5的新功能，表示文档的一部分。 section元素应用于包含内容将在文档的大纲或目录中列出。 段元素通常包含一个或多个内容段落和标题，但标题是可选的。 以下代码显示了正在使用的section元素。 <!DOCTYPE HTML> <html> <head> </head> <body> <section> <hgroup> <h1>H1</h1> <h2>H2</h2> </hgroup> This is a test. <section> <h1>H1</h1> This is a test. <section> <h1>More information</h1> This is a test. </section> </section> </section> </body> </html> HTML nav nav 元素表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。 此元素标识文档的主要导航部分。 以下代码显示了使用 nav 元素。 <!DOCTYPE HTML> <html> <body> <header> <hgroup> <h1>H1</h1> <h2>by www.w3cschool.cn</h2> </hgroup> <nav> <h1>Contents</h1> <ul> <li><a href="#fruitsilike">XML</a></li> <ul> <li><a href="#morefruit">HTML</a></li> </ul> <li><a href="#activitiesilike">CSS</a></li> <ul> <li><a href="#tritypes">Java</a></li> <li><a href="#mytri">Javascript</a></li>...

HTML样式 style 元素允许您在HTML文档中内联定义CSS样式。 style 元素具有局部属性: type，media，scoped 。 HTML5中添加了 scoped 属性。 例子 以下代码给出了所使用的样式元素的示例。 <!DOCTYPE HTML> <html> <head> <style type="text/css"> a { background-color: grey; color: white; padding: 0.5em; } </style> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> </body> </html> 上面的代码为 a 元素创建了一个新样式。它显示具有灰色背景，白色文本和一些填充的链接。 您可以在整个HTML文档中使用 style 元素，并且单个文档可以包含多个样式元素。 type style 元素中的 type 属性可以告诉浏览器你要定义什么样的样式；但是，浏览器支持的唯一的样式机制是CSS，所以值的此属性将始终为text/css。 style Media style 元素中的 media 属性允许您指定应将样式应用于文档的时间。 以下代码提供了如何使用此属性的示例。 <!DOCTYPE HTML> <html> <head> <style media="screen" type="text/css"> a { background-color: grey; color: white; padding: 0.5em; } </style> <style media="print"> a{ color:Red; font-weight:bold; font-style:italic } </style> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> </body> </html> 上面的代码定义了两个具有不同媒体值的 style 元素。 当HTML在屏幕上显示时，浏览器将应用第一个样式，和打印页面时的第二种样式。 条件 您可以为样式创建非常具体的条件。 首先，您可以指定设备。可能的值列在下表中。 设备 描述 all 将此样式应用于任何设备(这是默认设置)。 aural 将此样式应用于语音合成器。 braille 将此样式应用于盲文设备。 handheld 将此样式应用于手持设备。 projection 将此样式应用于投影机。 print 在打印预览和打印页面时应用此样式。 screen 当内容显示在计算机屏幕上时应用此样式。 tty 将此样式应用于固定宽度的设备，例如电传。 tv 将此样式应用于电视。...

HTML结构 元素和属性用于标记HTML文档中的内容。 HTML文档是具有.html文件扩展名的文本文件。 您可以直接从磁盘或通过Web服务器将文件加载到浏览器中。对于大多数html文件，您可以将其拖放到浏览器窗口。 结构体 两个元素提供了HTML文档的外部结构: DOCTYPE element html element 以下代码显示了Web文档的基本结构。 <!DOCTYPE HTML> <html> <!-- elements go here --> </html> DOCTYPE 元素告诉浏览器它正在处理一个HTML文档。这通过HTML布尔属性表示: <!DOCTYPE HTML> html的开始标记位于DOCTYPE元素之后。 HTML文档是包含html标签的文本文件。HTML文档中的HTML标记标记网页。 将以下内容保存到名为index.htm的文本文件，然后将其拖放到浏览器。 <!DOCTYPE HTML> <html> <body> <h1>My Heading</h1> <p>My paragraph</p> </body> </html> HTML文档以<！DOCTYPE HTML>开头。<！DOCTYPE HTML> 告诉浏览器这是一个html文档。 <html> 和</html> 之间的内容标记网页。<body> 和</body> 标记可见的网页内容。<h1> 和</h1> 用于定义标题。<p> 和</p> 创建段落。 HTML元数据 HTML文档中的元数据提供了有关文档的信息。 元数据包含在head元素中。 <!DOCTYPE HTML> <html> <head> <!-- define your metadata here --> <title>web document title</title> </head> </html> 上面代码中的 title 元素是元数据。 大多数浏览器在浏览器中显示title元素窗口标题栏或显示页面的选项卡顶部。 head 元素也定义了与外部的关系资源(如CSS样式表)，定义内联CSS样式和定义和加载脚本。 HTML Body 通过 body 元素添加html文档的内容。 下面的代码将一行文本添加到body元素。 <!DOCTYPE HTML> <html> <head> <!-- metadata goes here --> <title>Example</title> </head> <body> This is the <code>content</code>. </body> </html> 在 body 标记中的内容中渲染的内容。 父元素与子元素 HTML元素定义与HTML文档中其他元素的关系。 包含另一个元素的元素是第二个元素的父级。 <!DOCTYPE HTML> <html> <head> <!-- metadata goes here --> <title>Example</title> </head> <body> This is the <code>content</code>....

//www.w3cschool.cn/html/html-css-index.html