Day 24

2月3日，每天回来都好累啊啊啊，想躺死在床上，好羡慕不用打工的。。

1.增加图片

（1）img元素：自包含元素，不能封装其他任何元素。正确写法是<img>,而不是<img/>或者<img></img>。

（2）属性说明：src设置图片的地址；alt(alternative text)提供给搜索引擎，或者当图片不可见时显示的文本。

（3）width和height属性：为img设置固定的width和height可提升页面的加载速度。预留固定的大小，加载整个页面。如果设置width或者height任意一个属性，其他一个属性尺寸会等比例缩放。

（4）测试代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box img{
            width: 400px;
        }
    </style>
</head>
<body>
    <img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">
</body>
</html>

2.定位图片

（1）img元素级别：img默认是inline级别元素，但可通过设置float、display以及盒子模式的padding、border、margin设置元素停靠位子。

（2）float定位图片：为了让图片停靠在文字的左边或者右边，可通过float属性设置。例如下面的代码可通过设置img的float值可让图片靠左或者靠右：


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            border: 1px solid #dedede;
            width: 700px;
        }

        .box span{
            word-wrap:break-word;
            word-break:break-all;
        }

        .box img{
            border: 1px solid #9799a7;
            background: #eaeaed;
            
            width: 200px;
            float: right;
            margin: 5px;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
    </div>
  </body>
</html>

3.增加音频文件

（1）audio元素：播放音频文件元素。

（2）属性：autoplay、controls、loop、preload。autoplay、controls、loop是布尔属性，在使用它们时不需要设置值，直接添加属性名即可。例如：<audio src=”test.mp3”controls loop></audio>。

（3）属性说明：controls，是否手动控制;autoplay,是否自动播放；loop，是否循环播放。

（4）preload：包含none、auto、metadata三个值，none表示不加载文件信息，auto表示自动加载所有信息，metadata加载有效信息。如果audio没有添加preload属性，则默认加载文件的所有信息（相当于auto）。为了让页面加载更快，可设置preload属性为none或者metadata。demo如下：

<audio src="test.mp3" controls loop></audio>

4.增加视频文件

（1）video元素：播放视频文件元素。

（2）属性：和audio相似，拥有src、autoplay、controls、loop、preload属性。

（3）controls：和audio不同，如果没有controls属性，video也会显示出来。

（4）poster属性：在播放视频之前可设置poster显示一张默认图片。例如：

<video src="test.mp4" controls poster="test.jpg"></video>

5.页面嵌套

（1）iframe元素：<iframe src=”http://www.baidu.com”></iframe>。

（2）属性：iframe默认设置了border、width、height。我们有可以自己设置。例如下面的样式设置：


iframe{
    height: 800px;
    width: 100%    ;
    border: none;
}
posted @ 2025-02-04 22:22  阿伟·  阅读(6)  评论(0)    收藏  举报