HTML 常用标签

最新推荐文章于 2023-08-20 11:26:25 发布

DW超

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量373

点赞数

文章标签： html webview 前端

本文链接：https://blog.csdn.net/weixin_48678713/article/details/124650872

版权

注释注释的内容是不会在网页中显示出来

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释</title>
</head>
<body>
    <!--注释！！！-->
    6666666
    <!--最是一年春好处-->
</body>
</html>

网页中只会显示666 被注释内容是不可见的

插入图片插入背景图片

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入图片</title>
    <style>
        #t02{
           
            width: 400px;
            height: 400px;
            background-image: url(../img/05.jpg);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="t01"><img style="border-radius: 20px;" src="../img/01.jpg" alt="" width="450px" title="图片"></div>
    <div id="t02"></div>
</body>
</html>

t01里面是直接在div中插入图片，可以直接调整图片的位置、格式等 t02是将图片以背景的方式填充进去，可以调整平铺格式、平铺位置等信息

a标签超链接标签用来实现网页跳转的

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页跳转</title>
</head>
<body>
    <a href="https://www.bilibili.com/"><img src="../img/02.jpg" alt="" style="margin-top: 50px; margin-left:50px; "></a>
</body>
</html>

实现效果：在此代码生成的网页中点击图片就可跳转至B站

a标签也可以实现网页内部的跳转

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#01">狗</a><br>
    <a href="#02">猫</a><br><br>
    <img id="01" src="../img/01.jpg" alt="" style="margin-top: 2000px;"><br>
    <img id="02" src="../img/02.jpg" alt="" style="margin-top:2000px;">
</body>
</html>

实现效果：当点击文字“狗” 会跳转至图片01所在位置当点击文字“猫” 会跳转至图片02所在位置

表单

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="#" method="get">
       <span style="margin-left:20px;">账号</span><input type="text" id="username" value=""><br>
       <span style="margin-left:20px;">密码</span><input type="password" id="password" value=""><br>
       <input type="button" value="登录" style=" margin-left:20px;">
    </form>
</body>
</html>

有序列表和无序列表

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <ol type="1" start="3">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <br><br>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
</body>
</html>

ol是有序列表 type可以调整表头的格式，可以是数字也可以是英文 start调整列表的开始数字 ul是无序列表

选择类的标签

单选的实现

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选</title>
</head>
<body>
    性别:
    <label for="man" >男</label>
    <input type="radio" name="gender" value="0" id="man" checked> <--!checked 是默认该选项的意思-->
    <label for="woman">女</label>
    <input type="radio" name="gender" value="1" id="woman">

“男” 指向了id为man的标签这样可以通过点击“男”来实现勾选

多选的实现

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选</title>
</head>
<body>
    爱好:
    <label for="swim">游泳</label>
    <input type="checkbox" name="swim" id="swim">
    <label for="run">跑步</label>
    <input type="checkbox" name="run" id="run" checked>
    <label for="sky">滑雪</label>
    <input type="checkbox" name="sky" id="sky">

可以实现多个框同时勾选

下拉列表的实现

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表</title>
</head>
<body>
    课程:
    <select name="class" id="class">
        <option value="a1">数学</option>
        <option value="a2">英语</option>
        <option value="a3">历史</option>
    </select>
</body>
</html>

DW超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 常用标签

注释注释的内容是不会在网页中显示出来 <!DOCTYPE html><html lang="zn-CH"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫