我的HTML笔记（三）

HTML元素

9.图像 

<img src="URL" width="100" height="100" alt="替代文字" />

说明：

属性说明

src        　定义图像的url

alt　　　　定义图像的替代文本

width 　　设置图像的宽度

height　　设置图像的高度

10.图像相对地址的意义

情形	html文件位置	图片位置	写法
同一个目录	F:/html/01.html	F:/html/01.jpg	<imgsrc="01.jpg" /> <imgsrc="./01.jpg" />
下一层目录	F:/html/01.html	F:/html/images/01.jpg	<imgsrc="images/01.jpg"/>
上一层目录	F:/html/01.html	F:/01.jpg	<imgsrc="../01.jpg"/>
同一层不同目录	F:/html/01.html	F:/images/01.jpg	<imgsrc="../images/01.jpg"/>

 

说明：

　　①./ 　　 　　 当前目录
　　②../　　 　　 回到上一层目录
　　③images/ 　 进入一层目录
　　④../images/  回到上一层目录，然后再进入images目录

11.图像热区

<img src="URL"  usemap="# map 名称" />
<map name="map 名称">
    <area shape="形状" coords="坐标值" href="URL" />
</map>

说明：
　　shape 热区形状(rect、circle、poly )
　　coords 形状的坐标值

12.audio(音频)

带控制器的音频播放器

语法：

<audio src="song.ogg" controls="controls"></audio>

如果考虑到不同浏览器对视频文件的兼容性

<audio width="320" height="240" controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  <p>Your browser does not support the audio tag.</p>
</audio>

属性说明：

　　autoplay 如果出现该属性，则音频在就绪后马上播放。
　　controls 如果出现该属性，则向用户显示控件，比如播放按钮。
　　loop 如果出现该属性，则每当音频结束时重新开始播放。
　　preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果 使用 "autoplay"，则忽略该属性。
　　src url 要播放的音频的 URL。

13.video(视频)

带控制器的视频播放器

语法：

<video src=“movie.mp4” controls="controls"></video>

如果考虑到不同浏览器对视频文件的兼容性

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <p>Your browser does not support the video tag.</p>
</video>

属性说明：
　　autoplay 如果出现该属性，则视频在就绪后马上播放。
　　controls 如果出现该属性，则向用户显示控件，比如播放按钮。
　　loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
　　muted 规定视频的音频输出应该被静音。
　　poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
　　preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
　　src url 要播放的视频的 URL。
　　width pixels 设置视频播放器的宽度。
　　height pixels 设置视频播放器的高度。

14.列表

❶无序列表
列表用来在网页上组织信息，HTML能够创建三种类型的列表：无序列表、有序列表和定义列表。

说明：
属性 属性值 说明
Type disc 用来设置项目前面的标记
Circle
square

代码结构：
<ul>
<li>……</li>
<li>……</li>
<li>……</li>
</ul>
❷有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。

说明：
属性 属性值 说明
type 1、 a 、 A、i、I 用来设置项目前面的标记
start 数值 排序的起点数值

代码结构：
<ol >
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

❸定义列表
定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。

代码结构：
<dl>
<dt>HTML</dt>
<dd>html 是超文本标记语言</dd>

<dt>XHTML</dt>
<dd>可扩展超文本置标语言 </dd>
<dd>表现方式与超文本置标语言（HTML）类似，不过语法上更加严格 </dd>
</dl>