HTML学习笔记10

1、HTML背景

<body>拥有两个配置背景的标签，可以是颜色或图像。

设置背景颜色使用bgcolor:

1 <body bgcolor="#000000">
2 <body bgcolor="rgb(0,0,0)">
3 <body bgcolor="black">

设置背景图像，可以用background，属性值为图像的URL。

1 <body background="1.gif">
2 <body background="http://www.baidu.com.cn/1.gif">

2、HTML文档类型

<!DOCTYPE>声明不是HTML标签，它是为浏览器提供一项信息，即HTML是用什么版本编写的。

 1 <!--文档类型-->
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <title>文档类型</title>
 6     </head>
 7 
 8     <body>
 9         文档内容
10     </body>
11 </html>

常用的声明：

HTML 5

 1 <!DOCTYPE html> 

HTML4.01

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

XHTML

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

其他可参考http://www.w3school.com.cn/tags/tag_doctype.asp

3、HTML头部

<title>定义文档的标题

1     <head>
2         <title>文档类型</title>
3     </head>

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

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

<link>标签定义文档与外部之间的关系。

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

<style>标签为HTML文档定义样式

1 <head>
2     <style type="text/css">
3         body {background-color:yellow}
4         p {color:blue}
5     </style>
6 </head>

<meta> 标签提供关于 HTML 文档的元数据，用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

1 <head>
2     <meta name="description" content="HTML, CSS, JavaScript" />
3     <meta name="keywords" content="HTML, CSS, XML" />
4 </head>

<script>标签用于定义客户端脚本，如JavaScript。

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

4、HTML脚本

<script>标签在前面已经提到，JavaScript 最常用于图片操作、表单验证以及内容动态更新。

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

1 <head>
2     <script type="text/javascript">
3         document.write("Hello World!")
4     </script>
5     <noscript>你的浏览器不支持JavaScript!</noscript>
6 </head>

老式浏览器无法识别<script>标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上，则可以采用这种方法，即将脚本隐藏在注释的标签当中。

1 <head>
2     <script type="text/javascript">
3         <!--
4             document.write("Hello World!")
5         -->
6     </script>
7 </head>

5、HTML字符实体

在 HTML 中，某些字符是预留的，例如小于号（<）和大于号（>），此时就必须使用字符实体（character entities），类似于C语言的转义符。

1 <!DOCTYPE html>
2 <html>
3     <body>
4         <h2>字符实体</h2>
5         <p>&X;</p>
6         <p>用实体数字（比如"#174"）或者实体名称（比如 "pound"）替代 "X"，然后查看结果。</p>
7     </body>
8 </html>

具体可参考 HTML 实体符号参考手册。

6、HTML Object标签

<object> 的作用是支持 HTML 的各种插件，可以用于播放各种媒体文件，例如音频、视频等。

例如，插入flash文件：

1 <object width="400" height="40"
2 classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
3 codebase="http://fpdownload.macromedia.com/
4 pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
5     <param name="SRC" value="bookmark.swf">
6     <embed src="bookmark.swf" width="400" height="40"></embed>
7 </object>

7、插入音频

向网站插入音频有三种方法可用：

第一种是用<embed>标签

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

第二种是上面提到的<object>标签

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

第三种是使用HTML5的<audio>标签

1 <audio controls="controls">
2     <source src="song.mp3" type="audio/mp3" />
3     <source src="song.ogg" type="audio/ogg" />
4 </audio>

W3C推荐最好的HTML解决方法，需要进行HTML文档声明，因为<audio>在HTML4中是非法的。

1 <audio controls="controls" height="100" width="100">
2     <source src="song.mp3" type="audio/mp3" />
3     <source src="song.ogg" type="audio/ogg" />
4     <embed height="100" width="100" src="song.mp3" />
5 </audio>

还有可以使用雅虎播放器，因为它是免费的，先声明脚本：

1 <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

如：

1 <!DOCTYPE html>
2 <html>
3 <body>
4     <p><a href="/i/song.mp3">播放 mp3</a></p>
5     <p><a href="/i/bird.wav">播放 wav</a></p>
6     <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
7 </body>
8 </html>

8、插入视频

插入视频与音频一样，都可以采用三种方法，最好的方法是：

 1 <!DOCTYPE html>
 2 <html>
 3     <body>
 4         <video width="320" height="240" controls="controls" autoplay="autoplay">
 5           <source src="/i/movie.ogg" type="video/ogg" />
 6           <source src="/i/movie.mp4" type="video/mp4" />
 7           <source src="/i/movie.webm" type="video/webm" />
 8           <object data="/i/movie.mp4" width="320" height="240">
 9             <embed width="320" height="240" src="/i/movie.swf" />
10           </object>
11         </video>
12     </body>
13 </html>

还可以使用用优酷等视频网站：

1 <!DOCTYPE html>
2 <html>
3     <body>
4         <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"  width="480" height="400" type="application/x-shockwave-flash">
5         </embed>
6     </body>
7 </html>

 

 

posted @ 2014-05-10 15:09  weddy.zheng  阅读(100)  评论(0)    收藏  举报