Web 第一次作业 初探html 使用VSCode工具开发

m0_748250032024-12-25 11:40

目录

初探html?

代码展示：

初探html 大多数代码都比较冗长 不是很简洁 还有许多标签功能不会使用 记录一下成长过程 哈哈哈哈哈！<--_-->

代码展示：

12.10首次确定书写对象 牢9门

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>牢九门展示</title>
</head>
? ? <style>
? ? #tr0{background-color:rgba(71, 199, 64, 0.674);color:rgb(46, 16, 212);}
? ? #tr1{width:100px;height:100px;background-color:rgba(173, 38, 78, 0.926);color:rgb(12, 9, 208);}
? ? html,body{width:100%;height:100%;background-image:url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HvCUbtJ9dpjmrJRFY4ryMAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.4&pid=1.7')}
? ? </style>
?
? ? <table border="1" align="center" id="tr0"
? ? cellspacing="0" cellpadding="10" width="1200"> <!--table 是制作表格的标签-->
? ? ? ? <tr>
? ? ? ? ? ? <td id="tr1" align="center" colspan="5"><h1>*王者荣耀牢九门介绍*</h1></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td heigth="1000" align="center" ><h3>类型</h3></td>
? ? ? ? ? ? <td heigth="20" align="center"><h3>名称</h3></td>
? ? ? ? ? ? <td width="350" align="center" heigth="20"><h3>图片</h3></td>
? ? ? ? ? ? <td heigth="100" align="center"><h3>被动</h3></td>
? ? ? ? ? ? <td heigth="100" align="center"><h3>技能</h3></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="18"><h3>牢弟</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>吕布</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bbICpbwE0zT4gB75WLIqMgHaFj?w=205&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>

? ? ? ? ? ? <td align="center" rowspan="2"><h3>前期只能在塔下很安全</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>没有附魔就没有技能</h3></td>
? ? ? ? </tr>
? ? ? ? <tr> </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>达摩</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.rqM5TETHVbMq0v8bVuEMHwHaEo?w=238&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>

? ? ? ? ? ? <td align="center" rowspan="2"><h3>拳头确实很硬</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>原地打拳这个技能可以删掉</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>关羽</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.kZfc0ghD3_OFDbV29p5XugAAAA?w=170&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>跑得快吧</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>遍地三体人的时代很难发挥技能优势</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>蒙恬</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.CMLPEq_uj4IjHjG31p6dmAAAAA?w=282&h=172&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>多几个人陪着坐牢</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>手这么短 打团只能吃伤害</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>杨戬</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.MrdSX2PQAX-72Tt_YBHFkQHaEK?w=271&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan><h3>任性大王的被动可以忽略</h3></td>
? ? ? ? ? ? <td align="center" rowspan><h3>开! 开! 开!</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>元哥</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ZGR_BNZSNPb1odJjMJnFNgHaEK?w=279&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>不知道有什么用 凑字数吧</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>我靠 就这身板 技能还没有出来就没了</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>司空震</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.aBYBMg8cnxkBuwXDkfvn7wHaFA?w=266&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>掌握雷电质量</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>别以雷霆击碎黑暗了 不坠机就是胜利</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>赵怀真</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.vj67joeOdPTHcKjWkJSQ5gHaD0?w=338&h=179&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>不知道 没玩过 反正没什么用</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>三千雷动挺好看 不过没什么鸟用</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>李信</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2">
? ? ? ? ? ? ? ? <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.-4j7Qg2lMnWUo8BWfEQfEQHaDx?w=288&h=178&c=7&r=0&o=5&dpr=1.4&pid=1.7"
? ? ? ? ? ? ? ? width="250px" height="200"/></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>打人加经验 不是前期能碰到人家吗?</h3></td>
? ? ? ? ? ? <td align="center" rowspan="2"><h3>光信?!!! 还有人玩吗?</h3></td>
? ? ? ? </tr>
? ? ? ? <tr></tr>
? ? ? ? <tr>
? ? ? ? ? ? <td id="tr1"align="center" colspan="5"> <h1>不足之处太多 代码重复且冗长杂乱!!! 就当记录一下成长过程吧! |*-_-*|</td></h1>
? ? ? ? </tr>
? ? </table>
<body>
? ? <marquee>
? ? <h4>使用VSCode工具开发 </h4>
? ? <h4>2024.12.10</h4>
? ? </marquee>
</body>
</html>

12.11 第一次改进

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牢九门展示</title>
</head>
    <style>
    #tr0{background-color:rgba(71, 199, 64, 0.674);color:rgb(46, 16, 212);}
    #tr1{width:100px;height:100px;background-color:rgba(173, 38, 78, 0.926);color:rgb(12, 9, 208);}
    html,body{width:100%;height:100%;background-image:url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HvCUbtJ9dpjmrJRFY4ryMAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.4&pid=1.7')}
    </style>
    
    <table border="1" align="center" id="tr0" 
    cellspacing="0" cellpadding="10" width="1200"> <!--table 是制作表格的标签-->
        <tr>
            <td id="tr1" align="center" colspan="5"><h1>*王者荣耀牢九门介绍*</h1></td>
        </tr>
        <tr>
            <td heigth="1000" width="50" align="center" ><h3>类型</h3></td>
            <td heigth="20" align="center"><h3>名称</h3></td>
            <td width="350" align="center" heigth="20"><h3>图片</h3></td>
            <td heigth="100" align="center"><h3>被动</h3></td>
            <td heigth="100" align="center"><h3>技能</h3></td>
        </tr>
        <tr>
            <td align="center" rowspan="18"><h3>牢弟</h3></td>
            <td align="center" rowspan="2"><h3>吕布</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/lvbu.shtml" target="_blank">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bbICpbwE0zT4gB75WLIqMgHaFj?w=205&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td>

            <td align="center" rowspan="2"><h3>前期只能在塔下很安全</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>方天画斩：吕布向前挥斩方天画戟，造成超级高的伤害，砍到人会附魔，变得更厉害</li><br>
                    <li>贪狼之握：吕布夺取范围内敌人的魂灵，造成高额物理伤害和30%减速，持续3秒，还有护盾，吸的人越多越厚</li><br>
                    <li>魔神降世：吕布从天而降，对范围内的敌人造成1秒击飞，还会转一圈，打到人会回血...</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr> </tr>
        <tr>
            <td align="center" rowspan="2"><h3>达摩</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/damo.shtml" target="_blank">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.rqM5TETHVbMq0v8bVuEMHwHaEo?w=238&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td>

            <td align="center" rowspan="2"><h3>拳头确实很硬</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>真言·无相：达摩冲刺挥出冲拳，对路径上的敌人造成物理伤害并击飞目标0.5秒。</li><br>
                    <li>真言·明王：速打出5拳，持续4秒，一共20拳。每一拳都有伤害</li><br>
                    <li>真言·无相：挥出超强一拳，对范围内敌人造成物理伤害和击退如果被击退的敌人碰撞到墙体将会再次受到物理伤害并晕眩1秒。</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>关羽</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/guanyu.shtml" target="_blank">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.kZfc0ghD3_OFDbV29p5XugAAAA?w=170&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td>
            <td align="center" rowspan="2"><h3>跑得快吧</h3></td> 
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>单刀赴会：转大刀对敌人造成物理伤害 冲锋状态更牛逼</li><br>
                    <li>青龙偃月：关羽解除自身控制效果并增加移速 冲锋状态更牛逼</li><br>
                    <li>刀锋铁骑：关羽减少75%的冲锋准备距离，持续10秒 冲锋状态更牛逼</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>蒙恬</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/mengtian.shtml" target="_blank">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.CMLPEq_uj4IjHjG31p6dmAAAAA?w=282&h=172&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan="2"><h3>多几个人陪着坐牢</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>方阵突刺：朝指定方向突刺冲锋，对路径上的敌人造成物理伤害</li><br>
                    <li>以守为攻：举盾踏步进入防御姿态，击退周围的敌人并造成物理伤害</li><br>
                    <li>玄雍众将：召唤4名玄雍士兵跟随自身作战，持续20秒，士兵从选择的方向冲向蒙恬并对路径上的敌人造成物理伤害和1秒减速。</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>杨戬</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/yangjian.shtml" target="_blank">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.MrdSX2PQAX-72Tt_YBHFkQHaEK?w=271&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan><h3>任性大王的被动可以忽略</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>逆转乾坤：杨戬召唤哮天犬冲锋，对首个敌人造成物理伤害，如果命中敌人，标记期间获取目标视野</li><br>
                    <li>虚妄破灭：横扫，对范围内敌人造成2物理伤害并减少50%移速，持续2秒。</li><br>
                    <li>根源之目：释放3次激光，前两次一道，第三次三道激光，对路径上的敌人造成物理伤害，并回复自身生命</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>元哥</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/yuange.shtml" target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ZGR_BNZSNPb1odJjMJnFNgHaEK?w=279&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan="2"><h3>不知道有什么用 凑字数吧</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>秘术·影：元歌掷出傀儡对路径上敌人造成物理伤害和击飞效果</li><br>
                    <li>秘术·纸雏鸾：掷出4枚暗器对路径上敌人造成物理伤害，暗器可以连续命中，但伤害将折减70%。</li><br>
                    <li>秘术·十字闪：甩出丝线向后拉扯，每根丝线对命中目标造成物理伤害，被两条丝线命中的单位将会受到额外16%已损生命的物理伤害和50%减速持续2秒。</li><br>
                    <li>秘术·散：立即消失清除控制效果 并且位移一个闪现的距离</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>司空震</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/sikongzhen.shtml" target="_blank">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.aBYBMg8cnxkBuwXDkfvn7wHaFA?w=266&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan="2"><h3>掌握雷电质量</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>奔雷疾：向前疾行，对路径上敌人造成法术伤害并获得护盾，持续2秒</li><br>
                    <li>狂雷击：释放出一道狂雷之力，达到最大射程，或触碰到单位短暂延迟后爆炸，造成击退和法术伤害。</li><br>
                    <li>雷霆万钧：司空震升入空中，化身为雷霆之王。。。。。。</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>赵怀真</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/zhaohuaizhen.shtml" target="_blank">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.vj67joeOdPTHcKjWkJSQ5gHaD0?w=338&h=179&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan="2"><h3>不知道 没玩过 反正没什么用</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>拨云见明：提起真气，出拳成风，风卷裹挟敌人一起移动并造成物理伤害</li><br>
                    <li>气定神凝：进入招架姿态持续获得护盾，结束招架姿态时周围造成物理伤害以及减速效果。</li><br>
                    <li>阴阳逆转：持续霸体，在身边形成气旋保护自身并对周围敌人造成物理伤害</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td align="center" rowspan="2"><h3>李信</h3></td>
            <td align="center" rowspan="2">
                <a href="https://pvp.qq.com/web201605/herodetail/lixin.shtml" target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.-4j7Qg2lMnWUo8BWfEQfEQHaDx?w=288&h=178&c=7&r=0&o=5&dpr=1.4&pid=1.7"
                width="250px" height="200"/></a></td> 
            <td align="center" rowspan="2"><h3>打人加经验 不是前期能碰到人家吗?</h3></td>
            <td  rowspan="2">
                <h3>
                <ul>
                    <li>急速突进：向指定方向进行突进</li><br>
                    <li>强力斩击：向指定方向斩出剑气，对路径上的敌人造成物理伤害和持续2秒的50%减速。</li><br>
                    <li>力量觉醒·暗：有点用</li><br>
                    <li>力量觉醒·光：纯坐牢。。。。</li>
                </ul>
                </h3>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td id="tr1"align="center" colspan="5"> <h1>不足之处太多 代码重复且冗长杂乱!!! 就当记录一下成长过程吧! |*-_-*|</td></h1>
        </tr>
    </table>
<body>
    <marquee>
    <h4>使用VSCode工具开发 </h4>
    <h4>2024.12.10 第一次写 确定基本框架</h4>
    <h4>2024.12.11 第二次改写 加入图片超链接 无序列表 进一步扩展技能</h4>
    </marquee>
</body>
</html>
加入图片超链接 用无序列表 进一步扩展技能解释 《*_*》!

12.12 第二次小改 使用了音频和视频标签 加入了杨戬的音频 和视频用到了以下标签

复制代码 
    <!--controls 是控制音频播放的按钮； loop 是单曲循环 ；autoplay 是自动播放 可是谷歌禁止了这个功能-->
    <!--<audio> 是音频标签；<video> 是视频标签-->
    <!--src 是音频和视频的地址 其中 width 和 heigth 可以调整视频高度和宽度-->    
    <audio src="audio/杨戬 (28)_爱给网_aigei_com.mp3" controls autoplay></audio>
    <audio src="audio/将大局逆转吧！_爱给网_aigei_com.mp3" controls loop></audio>
    <video src="video/ea6d1b9f1f7c4a7494a3895d2ec44620.mp4"
         width="1500px" height="1000px" controls></video>
相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07Mac cursor设置jdk、Maven版本08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10纯离线部署本地知识库LLM大模型