HTML5学习第一天

最新推荐文章于 2024-09-05 23:48:57 发布

你还要我怎样？

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量62

点赞数

分类专栏： HTML学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_46563235/article/details/127190753

版权

HTML学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、HTML5发展史

2、HTML5的浏览器兼容

3、HTML5语法

4、HTML5新增语义化标签

5、Video和audio的应用

6、增强表单-input

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- 颜色选择 -->
    <form action="">
        <div>
            颜色选择：<input type="color" name="color">
        </div>
        
        <div>
            邮箱：<input type="email" name="myemail">
        </div>

        <div>
            url地址（完整地址）：<input type="url">
        </div>

        <div>
            电话号码：<input type="tel">
        </div>

        <div>
            <!-- 
                默认值value100
                step：步长，滑动一次改变10
            -->
            滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10">
        </div>
        
        <div>
            <!-- 输入内容的必须是数字才行 -->
            数字类型：<input type="number" min="0" max="10" value="4" step="2">
        </div>

        <div>
            搜索：<input type="search">
        </div>

        <div>
            日期选择<input type="date">
            月份选择<input type="month">
            周数选择<input type="week">

            本地时间：<input type="datetime-local" name="datetime">
        </div>
        <input type="submit">
    </form>
</body>
</html>

7、增强表单-数据列表

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<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>
    <input type="text" list="mylist">
    
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>
</body>
</html>