HTML5---》主要要知道的几个控件

表格操作，合并列与行：

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0" cellpadding="30">
        <caption>个人简介</caption>
        <tr>
            <td>姓名：王者荣耀</td>
            <td>性别：男</td>
            <td>年龄：23</td>
            <td rowspan="2">照片</td>
        </tr>
        <tr>
            <td>姓名：英雄联盟</td>
            <td>年龄：10</td>
            <td>类别：电子竞技</td>
        </tr>
        <tr>
            <td>姓名：穿越火线</td>
            <td colspan="3">狙神</td>

        </tr>
        <tr>
            <td>姓名：和平精英</td>
            <td colspan="3">鸡王</td>
        </tr>
    </table>
</body>

</html>
复制代码

自定义列表：

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>本科</dt>
        <dd>重本</dd>
        <dd>二本</dd>

    </dl>
    <dl>
        <dt>专科</dt>
        <dd>大专</dd>
        <dd>高职</dd>
    </dl>
</body>

</html>
复制代码

常用标签：借用纵横盗取p标签

复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>郭童不是神</title>
</head>

<body>
    <h1>登高</h1>
    <h2>
        风急天高猿啸哀，渚清沙白鸟飞回。</h2>
    <h3>
        无边落木萧萧下，不尽长江滚滚来。</h3>
    <h4>
        万里悲秋常作客，百年多病独登台。</h4>
    <h5>
        艰难苦恨繁霜鬓，潦倒新停浊酒杯。</h5>
    <!-- 水平线标签 -->
    <hr>

    <h6> ------杜甫</h6>
    <p> 登高<br> 风急天高猿啸哀，渚清沙白鸟飞回。
        <br> 无边落木萧萧下，不尽长江滚滚来。
        <br> 万里悲秋常作客，百年多病独登台。
        <br> 艰难苦恨繁霜鬓，潦倒新停浊酒杯。
        <br> 　　 ------杜甫</p>
    <!-- bai= -->
    <div class="content" itemprop="acticleBody">
        <p> 残破的大地蔓延出无数条裂缝，黑色硝烟遮蔽夕阳的余光，泥泞的道路上，无数人艰难行走着，脸上布满了绝望与恐惧，不时有人跌入裂缝，哭喊声从未停止过。</p>
        <p>　　延绵数万人的队伍排成长龙，两旁，每隔一段距离都有一名身体得到强化的战士保护，这种人被称为进化者。</p>
        <p>　　自从半年前地球突发灾变后，进化者陆续出现。</p>
        <p>　　队伍后方，陆隐抬头看向远处，耳畔听到了令人头皮发麻的咀嚼声，随着一声嘶吼，焚烧的大树后冲出一只散发猩红双目足有两米长的变异犬，嘴角流着血水咆哮着冲向队伍。</p>
        <p>　　队伍内不少幸存者看到这一幕惊恐尖叫，陆隐目光一凛，从腰间抽出一把古怪的武器，看起来应该是铁棍，但一侧被削尖，宛如刀锋。</p>
        <p>　　陆隐跳起来单手下劈，毫无阻碍的斩断变异犬头颅，血水喷洒在地，染红了草丛。</p>
        <p>　　看到变异犬死亡，队伍这才安静下来，恐惧的继续向前方走去。</p>
        <p>　　陆隐收回铁棍，看了看，上面有几丝裂缝，“看来用不长久了”。</p>
        <p>　　随着夕阳西下，大地陷入黑暗，所有进化者点燃火焰，顺着队伍一路蔓延，妄图利用这种方式驱赶变异兽，而队伍也停止前进。</p>
        <p>　　在黑暗中去陌生的地方等于找死。</p>
        <p>　　沙哑的电流声响起，陆隐腰间对讲机传出声音，“尾号为三的进化者寻找食物，范围方圆一公里”。</p>
        <p>　　陆隐的进化者代号为一百零三，抬头，看向那头被斩杀的变异犬，拎起来甩到队伍前，“吃吧”。</p>
        <p>　　队伍内传出阵阵喧哗，紧接着几名男子上前处理，早已习惯的样子，哪怕那头变异犬嘴角还有人的骨头残渣。</p>
        <p>　　一头变异犬只够二十多人吃的，陆隐走出火堆，握紧铁棍，向远处走去。</p>
        <p>　　耳边咀嚼声从来没停过，黑暗中，一双双散发绿光的眼睛盯向陆隐，这是变异老鼠，样子虽然难看，但肉质可以吃。</p>
        <p>　　陆隐甩起铁棍砸死了十多只变异老鼠，扛着扔向队伍，他这边够了。</p>
        <p>　　突然一声惨叫，陆隐不用看就知道是进化者死了，他也没打算去救，谁知道攻击进化者的是什么，或许是剧毒的蛇，吸血的蚊子，或者能咬碎钢铁的强大变异老鼠，这些生物在野外不难遇到。</p>
        <p>　　队伍很安静，所有人都躲在火焰后面，仿佛一层薄薄的火焰真的可以保护他们。</p>
        <p>　　陆隐怜悯的看着这些人，随后抬头望天，星空那么璀璨，明亮，曾经被污染的空气在半年前完全恢复，与之相伴的是无数生物变异，包括人类本身。</p>
        <p>　　没人知道那场变异是因为什么，仿佛一夜之间，生物都变得很恐怖，而很多人也变成了行尸走肉，没有理智，到处吞噬活物，这种人被称为丧尸。</p>
        <p>　　剩余的幸存者身体都变强壮了一些，虽然变化不大，但却可以通过吞服变异生物体内的晶体变强，这就是进化者。</p>
        <p>　　地球一夜间仿佛回到了远古时代，弱肉强食，曾经统治地球的庞大武器库几乎都毁了，陆隐亲眼看到他所在城市的武器库发生爆炸，仿佛那些现代化武器不容于如今的时代。</p>
        <p>　　狂风吹过，地面，染血的报纸被石块压住，发出飒飒的声响。</p>
        <p>　　陆隐捡起报纸，看着头条‘2200年2月3号，一个载入史册的日子，那一天，华夏天空五号登入海王星，白浅成为地球第一个探索海王星的宇航员，海王星为气态星球，那一天…’，陆隐扔掉报纸，一个小女孩小心递给他一块烤好的兽腿。</p>
        <p>　　陆隐接过兽腿，淡笑道“谢谢”。</p>
        <p>　　小女孩腼腆的笑了笑，跑回了队伍中。</p>
        <p>　　兽腿很难吃，虽然撒上了调料，但依然非常难吃，不过陆隐吃的很满足，吃饱了才有力气。</p>
        <p>　　火焰突然波动了一下，陆隐猛地抽出铁棍狠狠砸下，将一只穿过火焰的变异螳螂砸死，这种变异螳螂一旦冲入队伍内会造成非常大的伤亡，那对刀锋反射着红光，不比陆隐的铁棍差。</p>
        <p>　　一夜的时间，陆隐只休息了两个小时，期间，杀死了十多只妄图冲击队伍的变异生物。</p>
        <p>　　他这边没什么人伤亡，但其它地段就不同了，其中一段幸存者连同进化者足有数十人被杀，被一头巨大的变异野猪屠杀，那头变异野猪可以发射坚硬的鬃毛，一轮攻击下来就能带走不少人性命，如果不是较为强大的几个进化者出手，伤亡还会更大。</p>
        <p>　　随着朝阳升起，队伍继续朝南方前进，他们要去金陵，去那个苏省地界最大的聚集地，那里有军队，有很多进化者，还有被称之为华夏刑圣的周山。</p>
        <p>　　半年的末日灾变，诞生了不少进化者，更诞生了被称之为七圣的绝顶强者。</p>
        <p>　　如今信息虽然不通畅，但还是可以互相联络的，前不久，进化者被明确划分出了等级，分别为刚刚吞服晶体的普通进化者，拥有碾压普通进化者力量的人级强者，再之上则是拥有破坏城市力量，被称为撼地级强者，也可以称之为地级。</p>
        <p> 最顶层则是飞天级强者，顾名思义，可以飞天，也被称之为天级强者，而华夏七圣，就是七位天级强者。</p>
        <p>　　末日半年，也只能如此划分，或许再过一段时间会有更系统的划分，但那七位可以飞天的强者只要不死，永远屹立顶端，这也是圣之一字的由来，或许也可能是无数幸存者期盼他们的保护，所以称之为圣。</p>
        <p>　　金陵聚集地，就拥有一位圣，刑圣周山。</p>
        <p>　　队伍继续前进，他们距离金陵还有一百多公里，和平年代数小时的路程，放在如今，至少要好几天。</p>
        <p>　　距离队伍长龙数里外，无数游荡的丧尸缓缓接近，仿佛闻到了活物的味道。</p>
        <p>　　队伍两旁进化者紧张戒备，不少进化者都目光恐惧，这些丧尸速度虽然不快，但力气很大，血液中含有剧毒，一旦触碰到即便进化者都会皮肤溃烂，直至神智消失，变得跟他们一样，这才是最恐怖的。</p>
        <p>　　陆隐眼睛眯起，握紧铁棍，跟丧尸战斗并不难，他们永远都那个样子，不像进化者可以变强，这也是无数幸存者庆幸的，如果丧尸也可以变强，他们就真的没有活路了。</p>
        <p> 当前幸存者最大的敌人是变异兽。</p>
        <p>　　就在陆隐等人准备跟尸群一战的时候，那些丧尸突然顿住，然后转身就走，陆隐心中一跳，涌起不好的预感。</p>
        <p>　　地面忽然震动，队伍前方，一株巨大的藤蔓自地底升腾，枝叶宛如有灵性一般抓住不少幸存者，随着绝望的哀嚎，所有被抓住的幸存者被碾成血水，浇灌在藤蔓扎根的土里。</p>
        <p>　　所有幸存者恐惧逃离，连不少进化者都一样。</p>
        <p>　　陆隐眼皮直跳，这株变异藤蔓绝对达到了地级程度，不是普通进化者可以媲美的，哪怕他们队伍中有人级强者。</p>
        <p>　　队伍中的进化者根本没打算硬拼，全部向后方逃离，避开藤蔓范围。</p>
        <p>　　过了好一会，藤蔓才仿佛吃饱了一般缩回地底。</p>
        <p>　　无数幸存者痛哭，绝望的呐喊，很多人在这种环境下会精神崩溃，连一些进化者都一样。</p>
        <p>　　很快，沙哑的电流声传来，腰间，对讲机传出声音，“原地休整，刑圣将亲自来接我们”。</p>
        <p>　　听到这个消息，无数人欢呼，对如今的幸存者来说，天级强者就像神，仿佛只要天级强者出现，什么事都可以解决一般。</p>
        <p>　　陆隐面露嘲讽，圣？他单手捂住左臂，直到现在，他的半边身体都还在疼痛，刺骨的疼痛，仿佛永远提醒他那一夜的事情。</p>
        <p> 一整座城市被抛弃，所有未毁灭的热武器宣泄到了城市内，哀嚎遍地，自己半边身体被焚烧，回头看到的是那对高高在上的眼眸和刺目金光。</p>
        <p> 刘少歌，他永远忘不了那个被称为光圣的男子，七圣之一，让他体验到了极致的痛苦，这份痛苦，陆隐发誓绝对十倍偿还。</p>
        <p>　　随着火焰升起，天色变得黑暗，陆隐正准备休息，不远处传出尖叫和哭喊声。</p>
        <p>　　陆隐皱眉，转头望去，百米外，几个女孩子被十多名进化者包围，肆意调笑，其中好几个女孩子衣服都只剩一点点，无声流泪。</p>
        <p>　　这一幕不陌生，末日灾变，人性沉沦，很正常，陆隐看过不少次，怎么说呢，在这种环境下想要得到保护，不付出一点代价也不可能。</p>
        <p>　　陆隐闭上双眼，精神稍微放缓。</p>
        <p>　　远处，一名少女尖叫一声被一巴掌拍在地上，“妈的，老子不要命的保护你们，玩玩怎么了，别给脸不要脸，前两天还有个小明星被老子玩过，现在求老子玩老子都不玩，起来”。</p>
        <p>　　少女愤恨的瞪着进化者，目光通红。</p>
        <p>　　四周围进化者咧嘴大笑，他们喜欢这个时代，可以放肆的玩，没人能管他们。</p>
        <p>　　呼的一阵风刮过，进化者眼前多出了一个人，正是陆隐，此刻，陆隐手中铁棍架在这名进化者脖子上，淡淡道“滚”。</p>
        <p>　　四周围寂静无声，只有那几名少女无声的哭泣。</p>
        <p>　　被陆隐威胁的进化者脸色极其难看，咬牙道“姓陆的，这件事跟你无关，她们归我保护”。</p>
        <p>　　“你吵到我了”陆隐淡淡说了一句，铁棍锋利的一面下压，顿时，那名进化者皮肤开裂，血液顺着铁棍流淌。</p>
        <p>　　进化者骇然，“好，好，你狠，她们归你，我不动了”。</p>
        <p>　　陆隐收起铁棍，冷漠走回原地，队伍内不少人静静看着这一幕，他们早已习惯，哪怕刚刚那几名少女被杀也没人帮忙，陆隐在他们看来显得很怪。</p>
        <p>　　那十几名进化者愤怒对视，却没有妄动，陆隐，很强，这点他们知道。</p>
        <p>　　那几名少女跑到陆隐身后想要说些什么，陆隐闭着眼，没搭理她们，她们只能感激的看着陆隐，小心坐下。</p>
        <p>　　过了没多久，一个容貌艳丽，衣着暴露的年轻女子笑眯眯来到陆隐身旁，凌厉的目光扫过那几名少女，吓得她们立刻后退，恐惧低头。</p>
        <p>　　艳丽女子这才满意，坐到陆隐身侧，对着他耳朵吹了口气。</p>
        <p>　　陆隐抬手捏住女子脖颈，睁眼双眼，冷声道“再有下一次，死”。</p>
        <p>　　艳丽女子目光阴冷，勉强露出一丝媚笑，“你还是这么无情”。</p>
        <p>　　陆隐放开手，冷漠盯着女子，“什么事？”。</p>
        <p>　　女子揉了揉脖颈，白了陆隐一眼，“你得罪人了知不知道”。</p>
        <p>　　陆隐没回答。</p>
        <p>　　女子继续道“张桐那几个人在密谋对付你，他们十多个进化者，你只有一个人，对付不来的，小心点”。</p>
        <p>　　“谢谢”陆隐淡淡回了一句。</p>
        <p>---</p>
        <p>《踏星》出来了，更恢弘的星空画卷即将展开！！谢谢各位的支持！！</p>
    </div>
    <a href="https://www.baidu.com" target="self">百度一下</a>
    <img src="../案例/images/yu1.jpg" alt="图片" title="庆余年">

</body>

</html>
复制代码

表单控件：

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="https://www.baidu.com" method="GET">
        姓名:<input type="text" value="姓名"> <br> 邮箱: <input type="email" value="邮箱"> <br> 数字:
        <input type="number" value="数字"><br>
        <hr>
        <label for="sex">
        性别
    </label>
        <input type="radio" name="woman" id="sex"> <span> 男 </span>
        <input type="radio" name="man" id="123"><span> 女</span>
        <hr>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
    <label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>
    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option selected>默认选中</option>
        ...
      </select>
    <textarea>
        文本内容
      </textarea>
</body>

</html>
复制代码

表单案例：

 

 

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="https://www.baidu.com" method="GET">
        <table align="center" border="0px" cellspacing="5" cellpadding="0px">

            <caption>
                <h1>英雄联盟：用户注册</h1>
            </caption>
            <tr>
                <td>&lowast;<label for="ipnoe">手机号码:</label></td>
                <td> <input type="tel" name="iphone" id="iphnoe">@163.com</td>
            </tr>
            <tr>
                <td></td>
                <td>请填写手机号码。。。。</td>
            </tr>
            <tr>
                <td>&lowast;<label for="num">图片验证码:</label></td>
                <td> <input type="number" name="num" id="num"><img src="22c.png" alt="验证码"></td>
            </tr>
            <tr>
                <td></td>
                <td>请填写图片中的验证码。。。。</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="免费获取验证码"></td>
            </tr>
            <tr>
                <td>&lowast;<label for="dx">短信验证:</label></td>
                <td> <input type="number" name="dx" id="dx"></td>
            </tr>
            <tr>
                <td></td>
                <td>在手机上查收验证码，填写入验证码</td>
            </tr>
            <tr>
                <td>&lowast;<label for="mima">密码:</label></td>
                <td> <input type="text" name="mima" id="mima"></td>
            </tr>
            <tr>
                <td></td>
                <td>6-16为，字母数字下户线组成</td>
            </tr>
            <tr>
                <td>&lowast;<label for="mima2">确认密码:</label></td>
                <td> <input type="text" name="mima2" id="mima2"></td>
            </tr>
            <tr>
                <td></td>
                <td>请再次输入密码</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox">同意服务<span style="color:rebeccapurple">条款，</span>马化腾不用吃饭啊，<span style="color: red;">欢迎您</span></td>
            </tr>
            <tr>
                <td></td>
                <td><button><strong style="color: blue;">立即充钱：VIP8</strong></button></td>
            </tr>

        </table>
    </form>
</body>

</html>
复制代码

 

posted on   白嫖老郭  阅读(152)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae