web前端--HTML入门学习(二)

本次内容:表单,加载图片等

一、表单

包括三种按钮的区别,单选按钮,下拉列表及提交按钮。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<form>
9
    <input type="button" value="按钮">普通按钮<br>
10
    <button>按钮</button> 与js合作绑定事件<br>
11
    <input type="submit" value="按钮"> 用于提交表单<br>
12
    <input type="range" min="20" max="60" step="2" value="30"><br>步长和初始值
13
    <input type="number" min="-15" max="100" value="0"><br>
14
    <input type="radio" value="vivo" name="a">
15
    <input type="radio" value="oppo" name="a" checked>oppo
16
    <input type="radio" value="mi" name="a">mi<br>
17
    <select name="phone">
18
        <option value="vivo">vivo</option>
19
        <option value="huawei" selected>huawei</option> <!--预选-->
20
        <option value="mi">xiaomi</option>
21
    </select>
22
    <input list="phones" name="phone">
23
    <datalist id="phones">
24
        <option value="vivo">vivo</option>
25
        <option value="huawei">huawei</option>
26
        <option value="mi">xiaomi</option>
27
    </datalist>
28
    <input type="submit">
29
</form>
30
</body>
31
</html>

运行结果:

二、表单(续)

包括:邮件,日期,颜色,上传文件

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>09biaodan</title>
6
<body>
7
<form>
8
   <input type="email"><!-- 能正确识别邮箱,格式不对要重新输入-->
9
    <input type="tel">
10
    <input type="date"><!--在谷歌浏览器中有展示框,IE火狐等无框-->
11
    <input type="color">
12
    <input type="hidden" value="hzx" name="hzxz">
13
<!--    在浏览器中不展示,但是仍然存在,作用类似密码-->
14
    <input type="image" src="404.png" width="100px">
15
   <input type="file" multiple><!-- 或者Required单个文件-->
16
    <input type="url">
17
18
</form>
19
20
</body>
21
</head>
22
</html>

运行结果:

三、添加图片

点击图片跳转

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>图片image</title>
6
</head>
7
<body>
8
<a href="04初步.html" target="_blank">
9
<img src="404.png" width="256px" height="128px" alt="找不到"><br>
10
<!--当图片不存在时展示alt的内容-->
11
</a>
12
<img src="10img.png" usemap="#map1">
13
<!---->
14
<map name="map1">
15
    <area href="Rili.html" shape="rect" coords="6,11,103,108" target="_blank">
16
<!--    图片中的位置,矩形(左x,上y,右x,下y)-->
17
    <area href="00.html" shape="circle" >
18
</map>
19
</body>
20
</html>