web前端--HTML入门学习（二）

最新推荐文章于 2023-10-14 22:07:32 发布

前端小窝

最新推荐文章于 2023-10-14 22:07:32 发布

阅读量245

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/weixin_44105459/article/details/100939221

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本次内容：表单，加载图片等

一、表单

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="button" value="按钮">普通按钮<br>
    <button>按钮</button> 与js合作绑定事件<br>
    <input type="submit" value="按钮"> 用于提交表单<br>
    <input type="range" min="20" max="60" step="2" value="30"><br>步长和初始值
    <input type="number" min="-15" max="100" value="0"><br>
    <input type="radio" value="vivo" name="a">
    <input type="radio" value="oppo" name="a" checked>oppo
    <input type="radio" value="mi" name="a">mi<br>
    <select name="phone">
        <option value="vivo">vivo</option>
        <option value="huawei" selected>huawei</option> <!--预选-->
        <option value="mi">xiaomi</option>
    </select>
    <input list="phones" name="phone">
    <datalist id="phones">
        <option value="vivo">vivo</option>
        <option value="huawei">huawei</option>
        <option value="mi">xiaomi</option>
    </datalist>
    <input type="submit">
</form>
</body>
</html>

运行结果：
在这里插入图片描述

二、表单（续）

包括：邮件，日期，颜色，上传文件

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

</form>

</body>
</head>
</html>

运行结果：
在这里插入图片描述

三、添加图片

点击图片跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片image</title>
</head>
<body>
<a href="04初步.html" target="_blank">
<img src="404.png" width="256px" height="128px" alt="找不到"><br>
<!--当图片不存在时展示alt的内容-->
</a>
<img src="10img.png" usemap="#map1">
<!---->
<map name="map1">
    <area href="Rili.html" shape="rect" coords="6,11,103,108" target="_blank">
<!--    图片中的位置，矩形（左x，上y，右x，下y）-->
    <area href="00.html" shape="circle" >
</map>
</body>
</html>```

前端小窝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端--HTML入门学习（二）

本次内容：表单，加载图片等一、表单包括三种按钮的区别，单选按钮，下拉列表及提交按钮。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...
复制链接

扫一扫