HTML标签

HTML标签:(路径引用自己的)

1.列表

<ul>...<li>..</li>:无序列表

<ol>...<li>..</li>:有序列表(一般不用)type用于便前面的原点,三种样式实心圆、空心圆、方块。

<dl>...<dt></dt>..<dd></dd>:定义列表

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>音乐排行榜</title>
    </head>
    <body>
        <h1>音乐排行榜</h1>
        <ol>
            <li>潇洒走一回<img src="img/pic1.jpg"></li>

            <li>偏偏喜欢你<img src="img/pic1.jpg"></li>

            <li>酒干倘卖无<img src="img/pic1.jpg"></li>

            <li>不说再见&nbsp;&nbsp;&nbsp;<img src="img/pic1.jpg"></li>

            <li>舍不得你&nbsp;&nbsp;&nbsp;<img src="img/pic1.jpg"></li>

            <li>请跟我来&nbsp;&nbsp;&nbsp;<img src="img/pic1.jpg"></li>
        </ol>
             热门活动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</strong>
        <ul>
            <li><img src="img/tutu1.jpg"width="200"height="100"/></li>
            <p>推荐活动|原创音乐金钱榜T榜</p>
            <li><img src="img/tutu2.jpg"width="200"height="100"/></li>
            <p>推荐节目|《TAImusic》爆笑来袭</p>
            <li><img src="img/tutu3.jpg"width="200"height="100"/></li>
            <p>推荐歌单|继续宠爱张国荣</p>
            <li><img src="img/v2-3b32784c326a1f4aeb5fae4f8b5466c7_r.jpg"width="200"height="100"/></li>
            <p>推荐活动|330金属音乐节巡演&nbsp;成都小酒馆音乐空间</p>
    </body>
</html>

 

2.Table表格

<table>...<tr>...<td>:表格

border边框线 width宽度 height高度

<tr>中属性:

align:水平对齐 left左,right右 ,center居中

valign:垂直对齐 top上, bottom下,center,middle居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1"  >
            
            <tr>
                <td colspan="3"align="center">aaa</td>
                <td align="center">bbb</td>
                <td align="center">ccc</td>
            </tr>
            <tr>
                <td align="center">ddd</td>
                <td rowspan="3" align="center">eee</td>
                <td align="center">fff</td>
                <td colspan="2" rowspan="2" align="center" valign="center">ggg</td>
            </tr>
            <tr>
                <td align="center">hhh</td>
                <td align="center">iii</td>
            </tr>
            <tr>
                <td align="center">jjj</td>
                <td align="center">kkk</td>
                <td align="center">mmm</td>
                <td align="center">nnn</td>
            </tr>
    </body>
</html>

3.表格合并

行合并:rowspan

列合并:colspan

 4.iframe内联框架

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="https://www.baidu.com/ "  target="bi">点击打开百度</a><br />
        <a href="https://www.7788.com/"  target="bi">二手市场</a><br />
        <a href="index10.html"  target="bi">点击打开了一个HTML页面</a><br />
        <iframe src="index.html" width="600" height="400" name="bi" scrolling="no"frameborder="0">
            <!--name:名字
                scrolling=是否需要滚动条
                frameborder=是否取消边框
                src:路径
                注意:如果需要配合超链接使用,注意target必须是ifrane的name的属性值
            -->
    </body>
</html>

5.媒体元素

video:视频播放器 src

audio:音频播放器 src

公共属性:controls控制面板 autoplay自动播放 loop

解决视频格式无法播放问题

实例:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <video src="css/vedio.mp4"  controls></video>
        <video controls="controls" muted="muted" autoplay="autoplay" loop="loop">
                        <source src="css/vedio.mp4" type="video/mp4"/>
         <!--
             muted静音
             controls
         -->

        </video>

    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值