html 标签

a anchor 锚点

超链接

<!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>
    <a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
</body>
</html>

href属性：超链接指定跳转网页地址

title属性：提示

target属性：_self 在当前页打开_页面 _blank_在新页面打开

<!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>
    <p id='top'></p>
    <a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <p id=>小猿圈</p>
    <a href="#top">回到顶部</a>
</body>
</html>

当a标签的href属性设置为指定标签的id时，点击a标签会直接跳到置顶标签的位置

发送邮箱

<!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>
    <a href="mailto:pythonliuwei@gmail.com">联系我们</a>
</body>
</html>

a标签的href属性设置为mailto:你的邮箱可以启动邮箱发送

<!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>
    <img src="图片指定的位置" alt="">
    <img src="如果图片在同级目录下直接写图片名称" alt="">
    <img src="如果图片在同级文件夹里直接写同级文件夹/图片名称" alt="">
</body>
</html>

img属性

<!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>
    <img src="图片指定的位置" alt="" width="200" height="200">
</body>
</html>

img标签 width属性宽度

img标签 height属性高度

img标签 alt属性图片加载失败指定提示文本内容

<!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=" 	规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
        <input type="text" placeholder="这里写提示信息">
        <input type="password">
        <input type="submit" value="立即注册">
    </form>
</body>
</html>

input标签 type属性设置text 文本内容

input标签 type属性设置password 输入时密码以点显示

input标签 placeholder属性提示信息

from标签 action 属性将标签内容向服务器提交数据

from标签 method属性请求方法：get 或者 post

form表单结构改变

通过P标签包裹input标签来实现

<!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=" 	规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
        <p>
            <input type="text" placeholder="这里写提示信息">
        </p>
        <p>
            <input type="password">
        </p>
        <p>
            <input type="submit" value="立即注册">
        </p>
    </form>
</body>

</html>

input 更改type属性变为单选按钮

<!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=" 	规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
        <p>
            男：<input type="radio" name="sex" checked="checked">
        </p>
        <p>
            女：<input type="radio" name="sex">
        </p>
    </form>
</body>

</html>

input标签更改type属性为radio 设置为选择框

input标签更改name属性为相同的属性值可以起到互斥效果！实现单选框的效果

input标签 checked 属性默认选中属性值写checked

复选框

<!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=" 	规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
        <p>
            web前端：<input type="checkbox" checked="checked">
            java：<input type="checkbox">
            python：<input type="checkbox">
        </p>
    </form>
</body>

</html>

input标签type属性更改为checkbox 设置为复选框

复选框就是多选

单选下拉框

<!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>
    <p>
        <select name="class" id="">
            <option value="a" selected='selected'>html</option>
            <option value="b">css</option>
            <option value="c">js</option>
        </select>
    </p>
</body>

</html>

option标签 selected属性设置为selected 表示默认选中

多选下拉框

<!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>
    <p>
        <select name="class" id="" multiple="multiple">
            <option value="a" selected='selected'>html</option>
            <option value="b">css</option>
            <option value="c">js</option>
        </select>
    </p>
</body>

</html>

select 标签 multiple属性设置为multiple 为多选

文本域表面

可以让用户输入多行文字

<!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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

textarea标签 cols属性设置宽度

textarea标签 rows属性设置高度

重置按钮

当用户输入完信息按到重置按钮后！用户输入的信息会被清空

<!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="">
        <p>
            <input type="text">
        </p>
        <p>
            <input type="reset" value='重置'>
        </p>


    </form>
    
</body>

</html>

input标签type属性设置为reset 实现点击重置按钮后实现清空输入用户已内容

label标签

<!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="">
        <p>
            <label for="username">用户名：</label>
            <input type="text" id='username'>
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id='password'>
        </p>


    </form>
    
</body>

</html>

label 标签for属性的属性值设置为input标签的id属性的属性值可以进行关联。

div标签

可以把div标签看作一个区域

<!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>
    <div>
        <p>老王家的地</p>
    </div>
    <div>
        <p>老李家的地</p>
        <div>
            <p>老王儿子的地</p>
        </div>
    </div>
    <div>
        <p>老孙家的地</p>
        <div>
            <p>老李家的地</p>
        </div>
    </div>
    <div>
        <p>一个div相当于页面上的一块区域，你要问我老王儿子的地为什么在老李家！你得去问老王</p>
    </div>    
</body>

</html>

posted @ 2020-06-30 17:20 pythonliuwei 阅读(178) 评论(0) 编辑收藏举报

刷新页面返回顶部

Pythonliuwei