HTMLday3

最新推荐文章于 2024-07-03 09:38:36 发布

有在学习了

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量336

点赞数

分类专栏：微信小程序文章标签： html

本文链接：https://blog.csdn.net/qq_51213025/article/details/110915615

版权

这篇博客详细介绍了HTML5中新增的标签属性和表单类型，包括提醒输入框的灰色提示、自动记录、accesskey快捷定位、滚轮列表等。同时，通过多个综合案例，如彩色表格、视频音频的展示，以及钢琴课块和书本案例的实践，深入讲解了HTML5的运用。最后，提供了小测试以检验读者的理解。

摘要由CSDN通过智能技术生成

新增标签属性

<!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>
    <header>定义页面头部 页眉</header>
    <nav>定义导航栏</nav>
    <footer>定义页面底部 页脚</footer>
    <article>定义文章</article>
    <section>定义区域</section>
    <aside>定义侧边块</aside><br >

在这里插入图片描述

    <input type="text" value="输入人物" list="people"/>  <!--input里面用 list id链接-->
    <datalist id="people">                              <!-- datalist 里面用 id 来实现和 input 的链接-->
        <option>张飞</option>
        <option>张益达</option>
        <option>曹操</option>
        <option>蔡文姬</option>
    </datalist><br /><br /><br /><br />

在这里插入图片描述

~~（输入张会智能跳出张开头的名字）~~

    <fieldset>
        <legend>用户登录</legend>
        用户名：<input type="text"><br /><br />
        密&nbsp;&nbsp;&nbsp;码：<input type="password">
    </fieldset><br /><br /><br /><br />
    <!--  <fieldset> 配合 <legend>使用 -->

在这里插入图片描述

heml5新增的input type 类型表单

        <fieldset>
            <legend>heml5新增的input type 类型表单</legend>
            <form action="">           <!--表单要放到表带域 form 里-->
                邮箱email： <input type="email" /><br />
                手机tel： <input type="tel" /><br />
                数字number： <input type="number" /><br /> <!--只能输入数字-->
                网址url： <input type="url" /><br />
                搜索search： <input type="search" /><br />
                区域range： <input type="range" /><br />    <!--滑块拖动-->
                小时分钟time： <input type="time" /><br />      <!--具体时间-->
                年月日date： <input type="date" /><br />
                年月month： <input type="month" /><br />
                星期week： <input type="week" /><br />
                颜色color： <input type="color" /><br />
                <input type="submit" />
            </form>
        </fieldset><br /><br /><br /><br />

在这里插入图片描述

提醒输入框内容灰色，输入时自动消失

        用户名：<input type="text" placeholder="请输入用户名"  autofocus="autofocus"/> <br /><br />
        <!-- placeholder 定位符，显示灰色，当用户输入的时候里面文字消失，自动返回
             autofocus 光标自动定位-->
        上传文件：<input type="file" multiple /><!--上传多文件--><br /><br /><br /><br />

在这里插入图片描述

自动记录完成

     <fieldset>
        <legend>自动记录完成</legend><!--使用要求1.需要提交按钮
                                                2.要有name
                                                3.autocomplete="on"打开记录功能
                                                                off关闭-->
        <form action="">
            姓名：<input type="text" autocomplete="on"  name="username"/>
            <input type="submit" />
        </form>
    </fieldset><br

最低0.47元/天解锁文章

有在学习了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLday3

新增标签属性<!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> <he
复制链接

扫一扫