HTML自学手册-基础篇7

你已经完成了 HTML 的学习,下一步该学习什么呢?

本教程已教你如何使用 HTML 创建站;

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示;

HTML 的关键是标签,其作用是指示将出现的内容;


现在,你已学完HTML,接下来该学习什么呢?


学习 CSS

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS,所有的格式化均可从 HTML 中剥离出来,并存储于一个独立的文件中。

如需学习如何创建样式表,请访问我们的 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 支持您需要的 e-mail 功能;

数据库访问

如果您计划使用网站数据库中的数据,那么请确保您的 ISP 支持您需要的数据库访问。

在您选取一家 ISP 之前,请务必阅读菜鸟教程的 Web 主机教程。

XHTML 是以 XML 格式编写的 HTML

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持

因特网上的很多页面包含了”糟糕”的 HTML。
如果在浏览器中查看,下面的 HTML 代码运行起来非常正常(即使它并未遵守 HTML 规则):为什么使用 XHTML?
因特网上的很多页面包含了”糟糕”的 HTML。
如果在浏览器中查看,下面的 HTML 代码运行起来非常正常(即使它并未遵守 HTML 规则):

<html>
<head>
<meta charset="utf-8">
<title>这是一个不规范的 HTML</title>
<body>
<h1>不规范的 HTML
<p>这是一个段落
</body>

XML 是一种必须正确标记且格式良好的标记语言。

今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释”糟糕”的标记语言的资源和能力。

所以 – 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML


文档结构

  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的
  • <html>、<head>、<title> 以及 <body> 也是强制性的

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的

XHTML 文档必须进行 XHTML 文档类型声明(XHTML DOCTYPE declaration)。
<html>, <head>, <title>, 和 <body> 元素也必须存在,并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。
下面的例子展示了带有最少的必需标签的 XHTML 文档:<!DOCTYPE ….>是强制性的
XHTML 文档必须进行 XHTML 文档类型声明(XHTML DOCTYPE declaration)。
<html>, <head>, <title>, 和 <body> 元素也必须存在,并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。
下面的例子展示了带有最少的必需标签的 XHTML 文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta charset="utf-8">
  <title>文档标题</title>
</head>
 
<body>
文档内容
</body>
 
</html>

在 HTML 中,一些元素可以不互相嵌套,像这样:XHTML 元素必须合理嵌套
在 HTML 中,一些元素可以不互相嵌套,像这样:

<b><i>粗体和斜体文本</b></i>

在 XHTML 中,所有的元素都必须互相合理地嵌套,像这样:

<b><i>粗体和斜体文本</i></b>

错误示例:XHTML 元素必须有关闭标签
错误示例:

<p>这是一个段落
<p>这是另外一个段落

正确示例:

<p>这是一个段落</p>
<p>这是另外一个段落</p>

错误示例:空元素必须包含关闭标签
错误示例:

分行:<br>
水平线: <hr>
图片: <img decoding="async" src="happy.gif" alt="Happy face">

正确示例:

分行:<br />
水平线: <hr />
图片: <img decoding="async" src="happy.gif" alt="Happy face" />

错误示例:

<BODY>
<P>这是一个段落</P>
</BODY>

正确示例:

<body>
<p>这是一个段落</p>
</body>

错误示例:

<table WIDTH="100%">

正确示例:

<table width="100%">

错误示例:

<table width=100%>

正确示例:

<table width="100%">

错误示例:

<input checked>
<input readonly>
<input disabled>
<option selected>

正确示例:

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

  1. 添加一个 XHTML <!DOCTYPE> 到你的网页中
  2. 添加 xmlns 属性添加到每个页面的html元素中。
  3. 改变所有的元素为小写
  4. 关闭所有的空元素
  5. 修改所有的属性名称为小写
  6. 所有属性值添加引号

什么是多媒体?

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。

在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。


第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器,图片支持也被加入。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理,而某些则需要额外的插件。

您将在下面的章节学习更多有关插件的知识。


格式 多媒体元素(比如视频和音频)存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。


格式文件描述
AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。
WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。
MPEG.mpg.mpegMPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。
QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。
RealVideo.rm.ramRealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。
Flash.swf.flvFlash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。

最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。


MP3是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的,你可以选择mp3格式。

格式文件描述
MIDI.mid.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio.rm.ramRealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。
WMA.wmaWMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。
MP3.mp3.mpgaMP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

HTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。


辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。

插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。 

大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。

  • 注意:
  • 大多数浏览器不再支持 Java 小程序和插件。
  • 大多数现代浏览器关闭了对 Flash 的支持。
  • 以下 swf 文件的实例在现代浏览器中无法正常运行。

我们可以使用 <video> 和 <audio> 标签来显示视频和音频


所有主流浏览器都支持 <object> 标签。

<object> 元素定义了在 HTML 文档中嵌入的对象。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

实例

<object width="400" height="50" data="bookmark.swf"></object>

<object> 元素同样可用于包含HTML文件:

<object width="100%" height="500px" data="snippet.html"></object>

或者插入一张图片:

<object data="audi.jpeg"></object自学元宇宙 (liboven.cn)
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

所有主流浏览器都支持 <embed> 元素。

<embed> 元素表示一个 HTML Embed 对象 。

<embed> 元素已经出现很长一段时间了,但是在 HTML5 前并未被详细说明,该元素在 HTML 5 页面上会被验证,在 HTML 4 上不会。

实例

<embed width="400" height="50" src="bookmark.swf">

注意 <embed> 元素没有关闭标签。 不能使用替代文本。

<embed> 元素同样可用于包含 HTML 文件:

<embed width="100%" height="500px" src="snippet.html">

或者插入一张图片:

<embed src="audi.jpeg">

在 HTML 中播放音频并不容易!

您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

在本章,菜鸟教程为您总结了问题和解决方法。


浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上. 

这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。


<embed>标签定义外部(非 HTML)内容的容器。(这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。

下面的代码片段能够显示嵌入网页中的 MP3 文件:

<embed height="50" width="100" src="horse.mp3">

问题:

  • <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件,无法播放音频。
  • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

<object tag> 标签也可以定义外部(非 HTML)内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件:

<object height="50" width="100" data="horse.mp3"></object>

问题:

  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件,无法播放音频。
  • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

HTML5 <audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在所有浏览器中都有效。

The <audio> element works in all modern browsers.

浏览器兼容

格中的数字表示支持该属性的第一个浏览器版本号。

以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败,它会显示一个错误文本信息:

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

问题:

  • <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
  • 您必须把音频文件转换为不同的格式。
  • <audio> 元素在老式浏览器中不起作用。

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素。

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

问题:

  • 您必须把音频转换为不同的格式。
  • <embed> 元素无法回退来显示错误消息。

如果网页包含指向媒体文件的超链接,大多数浏览器会使用”辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接,浏览器会启动”辅助应用程序”来播放该文件:

<a href="horse.mp3">Play the sound</a>

当您在网页中包含声音,或者作为网页的组成部分时,它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音,您需要意识到很多人都觉得内联声音令人恼火。同时请注意,用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是,在用户需要听到录音并点击某个链接时,会打开页面然后播放录音。


 HTML5 新标签

标签描述
<embed>定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object>定义内嵌对象。
<param>定义对象的参数。
<audio>New定义了声音内容
<video>New定义一个视频或者影片
<source>New定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

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)都能够播放。

在本章,菜鸟教程为您总结了问题和解决方法。


<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 代码显示嵌入网页的 Flash 视频:

<embed src="intro.swf" height="200" width="200">

问题

  • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
  • 如果浏览器不支持 Flash,那么视频将无法播放
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频:

<object data="intro.swf" height="200" width="200"></object>

问题:

  • 如果浏览器不支持 Flash,将无法播放视频。
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

HTML5 <video> 标签定义了一个视频或者影片.

<video> 元素在所有现代浏览器中都支持。

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频:

<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">
您的浏览器不支持 video 标签。
</video>

问题:

  • 您必须把视频转换为很多不同的格式。
  • <video> 元素在老式浏览器中无效。

以下实例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。

HTML 5 + <object> + <embed>

<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>

问题:

  • 您必须把视频转换为很多不同的格式

如果网页包含指向媒体文件的超链接,大多数浏览器会使用”辅助应用程序”来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动”辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:

<a href="intro.swf">Play a video file</a>

当视频被包含在网页中时,它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。

同时请注意,用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。


HTML5新标签.

标签描述
<embed>定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object>定义内嵌对象。
<param>定义对象的参数。
<audio>New定义了声音内容
<video>New定义一个视频或者影片
<source>New定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

温馨提示:本文最后更新于2022-12-27 10:05:10,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容