08-HTML网页结构标签说明-2

HTML基础-标签说明

多媒体标签

img图像标签

  • 语法示例
<img src="smile.gif" alt="smile" />
  • 标签属性
属性值描述45
alt text 定义有关图形的短的描述。 4 5
src URL 要显示的图像的 URL。 4 5
align

top

bottom

middle

left

right

 规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。 4  
border pixels 定义图像周围的边框。不支持。请使用 CSS 代替。 4  
height pixels % 定义图像的高度。 4 5
hspace pixels 定义图像左侧和右侧的空白。不支持。请使用 CSS 代替。 4  
ismap URL 把图像定义为服务器端的图像映射。 4 5
longdesc URL  一个 URL，指向了描述该图像的文档。不支持。 4  
usemap URL 定义作为客户端图像映射的一幅图像。请参阅 <map> 和 <area> 标签，了解其工作原理。 4 5
vspace pixels 定义图像顶部和底部的空白。不支持。请使用 CSS 代替。 4 5
width pixels % 设置图像的宽度。 4 5
  • 例题演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--使用本地文件-->
        <img src="./03a.jpg" width="350" height="300" title="你的名字" /-->
        <!--使用远程文件-->
        <!--img src="" width="350" height="300" alt="高校女神白鹿" /-->
    </body>
</html>

audio语音标签

  • 语法示例
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
  • 标签属性
属性值描述
autoplay true | false 如果是 true，则音频在就绪后马上播放。
controls true | false 如果是 true，则向用户显示控件，比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
  • 例题演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio src="./郭燕%20-%20天空之城.mp3" autoplay="autoplay" controls="controls">
            当前浏览器不支持audio        
        </audio>
    </body>
</html>
  • 浏览器音频格式兼容情况
音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

video视频标签

  • 语法示例
<video src="somevideo.wmv">您的浏览器不支持 video 标签。</video>
  • 标签属性
属性值描述
autoplay true | false 如果是 true，则视频在就绪后马上播放。
controls true | false 如果是 true，则向用户显示控件，比如播放按钮。
end numeric value 定义播放器在视频流中的何处停止播放。默认地，声音会播放到结尾。
height pixels 设置视频播放器的高度。
loopend numeric value 定义在视频流中循环播放停止的位置，默认是 end 属性的值。
loopstart numeric value 定义在视频流中循环播放的开始位置。默认是 start 属性的值
playcount numeric value 定义视频片段播放多少次。默认是 1。
poster url 在视频播放之前所显示的图片的 URL。
src url 要播放的视频的 URL。
start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
width pixels 设置视频播放器的宽度。
  • 例题演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video width="350" height="300" autoplay="autoplay" controls="controls" poster="./03a.jpg" />
                <source src="./video_unwilling.mp4" type="video/mp4"></source>
                <source src="myvideo.ogv" type="video/ogg"></source>
                <source src="myvideo.webm" type="video/webm"></source>
                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                    <param name="movie" value="myvideo.swf" />
                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
                </object>
                当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
        </video>
    </body>
</html>

样式标签

  • 语法示例
    • 使用方法：style:"属性1:值1;属性2:值2....."
<table>
  <col style="color:blue" />
  <col span="2" style="color:yellow";"font-size:12px" />
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
  • style属性
  • 字体：font-family
    • 参考地址：
      • https://www.cnblogs.com/whwywzhj/p/6092158.html
      • https://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html
      • https://www.runoob.com/css/css-font.html

  • 字体大小：font-size
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'microsft yahei';">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'STheiti';">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'STSong';">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: xx-large;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: x-large;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: medium;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: x-small;">网易Python全栈课程带你从小白走上大神之路</p>
　　　　　<!--像素-->
        <p style="font-size: 12px;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: 30px;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: 24px;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: 10px;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: 1.25rem;">网易Python全栈课程带你从小白走上大神之路</p>
    </body>
</html>
  • 颜色：color

 

  •  例题演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'microsft yahei';color: #FF0000;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'STheiti';color: #009FCC;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-family: 'STSong';color: #EFD9AC;">网易Python全栈课程带你从小白走上大神之路</p>
        <p style="font-size: x-large;">网易Python全栈课程带你从小白走上大神之路</p>
    </body>
</html>
  • 标签属性
属性值描述45
align

right

left

center

justify

char

 定义列中的单元格内容的水平对齐方式。 4  
char character

定义一个字符，按照该字符对齐文本。

与 align="char" 使用。

 4  
charoff

pixels

%

 规定第一个对齐字符的偏移量。 4  
span number 定义 <col> 应当横跨的列数。 4 5
valign

top

middle

bottom

baseline

 定义列中的单元格内容的垂直对齐方式。 4  
width

%

pixels

relative_length

 定义列的宽度。 4  
  • 例题演示

 

 

边框border

  • 边框宽度
  • 边框颜色
  • 边框线型
  • 边框圆角
  • 参考资料：https://www.runoob.com/css/css-border.html
  • 标签属性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="font-size: 20px;">
        <p style="border-width: 3px;
                 border-color: #FF0000;
                 border-style: solid;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="border:1em #FF00FF solid;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="border:3px #1E01FC solid;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="border:3px #2FA0D0 solid;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
    </body>
</html>
  • 例题演示1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 100px;height: 50;border: 3px solid red;
                 border: 2px solid green;">
            一般情况下是直角矩形
        </p>
        <p style="width: 100px;height: 50;border: 3px solid red;
                 border: 2px solid red;
                 border-radius: 10px;">
            加上border-radius可以变成圆角矩形
        </p>
        <p style="width: 100px;height: 100px;border: 3px solid red;
                 border: 2px solid blue;
                 border-radius: 50px;">
            控制圆角大小变成圆形
        </p>
        <p style="width: 150px;height: 150;border: 3px solid red;
                 border: 2px solid green;
                 border-radius: 10px 20px 30px 40px;">
            可以任意设置4个角的半径
        </p>
    </body>
</html>

宽width、高height、行高line-height

  • width百分比与屏幕宽度适配
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="">
        <p style="border: 3px black solid">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 250px;border: 2px solid orange">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 100%;border: 2px solid red;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 50%;border: 2px solid green;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 25%;border: 2px solid blue;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
    </body>
</html>
#通过屏幕拉伸，按%保持占屏幕的百分比不变
  • height百分比与父容器height相关
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="height: 300px;">
        <p style="width: 50%;height: 20px;border: 2px solid orange">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 100%;height: 30px;border: 2px solid red;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="width: 50%;height: 100%;border: 2px solid red;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="width: 240px;">
        <p style="border: 2px solid orange">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="border: 2px solid red;line-height: 15px;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <p style="border: 2px solid green;line-height: 32px;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
    </body>
</html>
  • 拥有宽高属性的元素为块级元素、img是个特殊的行级元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="">
        <!--img是图片，有高度宽度-->
        <img src="./03a.jpg" style="width: 50px; /">你的名字
    </body>
</html>

 

  • 行级元素不具有宽高属性，比如a元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="">
        <p style="width: 50%;border: 2px solid orange">
            网易Python全栈课程带你从小白走上大神之路
        </p><!--块级元素一行只能放一个段落，无法放置2个段落;即一行只能有一个块级元素-->
        <p style="width: 50%;border: 2px solid green;">
            网易Python全栈课程带你从小白走上大神之路
        </p>
        <a herf="python-xp.com"
            style="border: 1px solid red;
            height: 50px;width: 50%;
            line-height: 100px;">
            Python-XP手册
        </a>
        <a herf="python-xp.com"
            style="border: 1px solid red;
            height: 50px;width: 50%;
            line-height: 100px;">
            Python-XP手册
        </a>
    </body>
</html>
  • 不同块级元素不能处于同一行，行级元素可以处于同一行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="">
        <!--单行文本垂直居中-->
        <ul>
            <li style="height: 50px;border: 1px solid red;">
                <a href="python-xp.com" style="/* line-height: 50px;*/">
                Python-XP
                </a>
            </li>
            <li style="height: 50px;border: 1px solid red;">
                <a href="python-xp.com" style="line-height: 50px;">
                Python-XP
                </a>
            </li>
        </ul>
    </body>
</html>
  • 作业例题

  • 例题代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="">
        <table>
            <p outline-style="dashed" style="height: 120px;
                              width: 350px;border: 2px dashed cadetblue">
            </p>
            <div class="right">
            <ul>
                <li style="height: 50px;width: 300px;
                           border: 2px dashed red;
                           position: absolute;
                           top: 16px;
                           right: 64px;"
                           >
                    <a style="line-height: 50px;">
                    我是一名Python开发者
                    </a>
                </li>
                <li style="height: 50px;width: 300px;
                           border: 2px solid plum;
                           position: absolute;
                           top: 68px;
                           right: 64px;"
                           >
                    <a style="line-height: 50px;">
                        我自豪、我光荣
                    </a>
                </li>
            </ul>
            </div>
            <img src="./03a.jpg" style="width: 80px;height: 80px;
                     border: 2px solid red;
                     border-radius: 40px;
                     position: absolute;
                     top: 150px;
                     left: 90px">
            <a style="line-height: 50px;position: absolute;
                     top: 210px;
                     left: 0px;">
            80*80的圆头像
            </a>         
        </table>
    </body>
</html>

background背景标签 

  • background-image：背景图来源
  • background-size：背景图大小
  • background-repeat：设置重复排版背景图片的方向
  • background-color：设置背景色
  • background-position：设置背景图片的位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 200px;height: 300px;border: 1px solid #ff0000;
                  background-image: url(./02a.jpg);
                  background-size: 50px 50px;
                  background-repeat: repeat-y;
        ">
        网易权重Python课程带你走上Python大神之路
        </p>
        <p style="width: 200px;height: 300px;border: 1px solid #ff0000;
                  background-image: url(./02a.jpg);
                  background-size: 50px 50px;
                  background-repeat: repeat-x;
        ">
        网易权重Python课程带你走上Python大神之路
        </p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 200px;height: 300px;border: 1px solid #ff0000;
                  background-image: url(./02a.jpg);
                  background-size: 50px 50px;
                  background-repeat: no-repeat;
        ">
        网易权重Python课程带你走上Python大神之路
        </p>
        <p style="width: 200px;height: 300px;border: 1px solid #ff0000;
                  background-image: url(./02a.jpg);
                  background-size: 50px 50px;
                  background-repeat: no-repeat;
                  background-position: 100px 100px;
        ">
        网易权重Python课程带你走上Python大神之路
        </p>
    </body>
</html>

  • css图像精灵
    • css图像精灵：（提高访问速率，多个图标集成在一个张图片中）

  • 代码演示

 

  • 作业习题

  • 代码演示

 

posted @ 2021-02-21 00:06  西瓜的春天  阅读(85)  评论(0)    收藏  举报