前端开发学习笔记05---HTML高级教程

来源：互联网发布：用python做的网站编辑：程序博客网时间：2024/05/02 04:21

`HTML <!DOCTYPE>`

内容摘自w3school
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
常用的声明
- HTML5
  <!DOCTYPE html>
- HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

HTML 头部元素

HTML <head> 元素
<head> 元素是所有头部元素的容器。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
一个简化的 HTML 文档：

<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head><base href="http://www.w3school.com.cn/images/" /><base target="_blank" /></head>

<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

HTML 头部元素

标签      描述<head>      定义关于文档的信息。<title>     定义文档标题。<base>      定义页面上所有链接的默认地址或默认目标。<link>      定义文档与外部资源之间的关系。<meta>      定义关于 HTML 文档的元数据。<script>    定义客户端脚本。<style>     定义文档的样式信息。

HTML 脚本

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">document.write("Hello World!")</script><noscript>Your browser does not support JavaScript!</noscript>

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

<script type="text/javascript"><!--document.write("Hello World!")//--></script>

HTML 字符实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
HTML 中的常用字符实体是不间断空格( )。

HTML 统一资源定位器

网址，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

HTML 多媒体

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
使用哪种格式？
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。
HTML Object 元素
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
HTML 音频
<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
下面的代码片段能够显示嵌入网页中的 MP3 文件：

<embed height="100" width="100" src="song.mp3" />

<object tag> 标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：

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

最好的 HTML播放音频文件的解决方法

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

上面的例子使用了两个不同的音频格式。HTML5 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试元素。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。
HTML 5 多媒体标签

标签      描述<audio> 标签定义声音，比如音乐或其他音频流。<embed> 标签定义嵌入的内容，比如插件。

HTML 视频

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

<embed src="movie.swf" height="200" width="200"/>

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

使用 <object> 标签
下面的 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">  <source src="movie.mp4" type="video/mp4" />  <source src="movie.ogg" type="video/ogg" />  <source src="movie.webm" type="video/webm" />Your browser does not support the video tag.</video>

问题
您必须把视频转换为很多不同的格式。
元素在老式浏览器中无效。
元素无法通过 HTML 4 和 XHTML 验证。

最好的 HTML播放视频的解决方法

HTML 5 + <object> + <embed>

以下是代码片段

<video width="320" height="240" controls="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></video>

上例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
问题
您必须把视频转换为很多不同的格式
<video> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="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 video file</a>

HTML 4.01 多媒体标签

标签          描述<object>    定义内嵌对象。<param>     定义对象的参数。

HTML 5 多媒体标签

标签      描述<video> 标签定义声音，比如音乐或其他音频流。<embed> 标签定义嵌入的内容，比如插件。

0 0