HTML笔记整理

HTML笔记

HTML

  • Hyper Text Markup Language（超文本标记语言）

W3C

  • World Wide Web Consortium（万维网联盟）

W3C标准包括：

  • 结构化标准语言

  • 表现标准语言

  • 行为标准

成对存在的标签<body></body>分别叫开放标签和闭合标签，单独的标签叫自闭合标签

html中注释：

  • <!-- -->

  • 注释快捷键Ctrl+/

标题标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>标签介绍</title>
 </head>
 <body>
 <!--//标题标签-->
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 <hr/>
 <!--//段落标签-->
 <p>两只老虎 - 贝瓦儿歌</p>
 <p>两只老虎两只老虎</p>
 <hr/>
 <!--//换行标签-->
 一级标题 <br/>
 二级标题 <br/>
 三级标题 <br/>
 四级标题 <br/>
 五级标题 <br/>
 六级标题 <br/>
 <!--//字体标签-->
 <strong>字体变粗</strong>
 <!--//斜体-->
 <em>斜体</em>
 <br>
 <!--//特殊符号-->
 空 格：普通空格只能空一格
 <br>
 空 &nbsp; 格
 <br>
 <!--//大于号-->
 &gt;
 <br/>
 <!--//小于号-->
 &lt 
 <br/>
 &copy;    //版权
 </body>
 </html>

图像标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图片标签</title>
 </head>
 <body>
 <!--
 src：为图片的路径  （必填）
 alt: 图片的名称，     （必填）
 title :鼠标悬停显示名称  （可选）
 路径分为：
 绝对路径
 相对路径  （推荐使用）
 ../返回上一级目录
 -->
 <h1>图片标签</h1>
 <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王">
 </body>
 </html>

超链接

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>超链接</title>
 </head>
 <body>
 <!--
 超链接
 href  ：表示要跳转的位置（必填）
 -->
 <a name="top">顶部</a>
 <a href="https://www.baidu.com/">百度</a>
 <a href="图像标签.html">链接第一个网页</a>
 <br>
 <!--
 target :表示窗口在哪里打开
 _blank：在新标签中打开
 _self ： 在自己打的网页中打开
 -->
 <a href="图像标签.html" target="_blank">点我跳转到页面</a>
 <a href="https://www.baidu.com/" target="_self">点我跳转到页面</a>
 <br>
 ​
 <a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p>
 <p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html">
     <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px">
 </a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p><p><a href="图像标签.html"> 
    <img src="../resources/image/1.jpg" alt="风景照" title="你的寒王" width="100px" height="100px"> 
</a></p> 
​ 
​ 
​ 
​ 
​ 
<!-- 
锚链接 
1.需要一个锚标记 
2.跳转到标记 
# 
--> 
<a href="#top">回到顶部</a> 
​ 
<a name="down">down</a> 
<br> 
​ 
​ 
<!-- 
功能性链接 
邮件链接：mailto: 
qq链接 
--> 
<a href="mailto:1622517097@qq.com" target="_blank">点击联系我</a> 
<br> 
<br> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> 
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好" title="你好"/> 
</a> 
</body> 
</html>

行内元素和块元素

  • 块元素

无论内容多少，该元素独占一行

（p、h1-h6...）

  • 行内元素

    内容撑开宽度，左右都是行内元素的可以排在一行

    (a . strong . em ...)

列表

  • 列表分类

    1. 无序列表

    2. 有序列表

    3. 定义列表

  •  <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>列表学习</title>
     </head>
     <body>
     <!--有序列表-->
     <ol>
         <li>Java</li>
         <li>PHP</li>
         <li>PHP</li>
         <li>PHP</li>
         <li>PHP</li>
     </ol>
     ​
     <hr/>
     <!--无序列表-->
     <ul>
         <li>qianduan</li>
         <li>qianduan</li>
         <li>qianduan</li>
         <li>qianduan</li>
         <li>qianduan</li>
     </ul>
     <hr/>
     ​
     <!--自定义列表
     dl  :自定义列表
     dt :名称
     dd:列表内容
     -->
     <dl>
         <dt>位置</dt>
         <dd>内蒙古</dd>
         <dd>海拉尔</dd>
         <dd>重庆</dd>
         <dd>上海</dd>
     </dl>
     ​
     </body>
     </html>

表格

  • 为什么使用表格

    • 简单通用

    • 结构稳定

  • 基本结构

    • 单元格

    • 行

    • 列

    • 跨行

    • 跨列

  •  <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>表格学习</title>
     </head>
     <body>
     <!--
     表格  table
     tr 行    rows:行
     td 列
     -->
     <table border="1px">
         <tr>
     <!--  colspan  跨列 -->
             <td colspan="4">1-1</td>
         </tr>
         <tr>
     <!--   rowspan 跨行    -->
             <td rowspan="2">1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
         </tr>
         <tr>
             <td>1-1</td>
             <td>1-2</td>
             <td>1-3</td>
         </tr>
         <tr>
             <td>1-1</td>
             <td>1-2</td>
             <td>1-3</td>
             <td>1-4</td>
         </tr>
     ​
     </table>
     </body>
     </html>

视频和音频

  • video:视频

  • audio:音频

  •  <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>音频和视频</title>
     </head>
     <body>
     <!-音频video
     src：路径
     autoplay:自动播放
     controls:进度条，可以控制播放，暂停
     -->
     <video src="" controls autoplay>视频</video>
     <!--
     音频 audio
     src :路径
     autoplay:自动播放
     controls:进度条，可以控制播放，暂停
     -->
     <audio src="" controls autoplay>音频</audio>
     </body>
     </html>

页面结构分析

image-20200416104353713

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>页面结构</title>
 </head>
 <body>
 <!-- 页面结构常用的三种标签-->
 <header>
     <h2>头部</h2>
 </header>
 <footer>
     <h2>底部</h2>
 </footer>
 <nav>
     <h2>导航类辅助内容</h2>
 </nav>
 </body>
 </html>

iframe内联框架

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>内联框架</title>
 </head>
 <body>
 <iframe src="" name="hello" frameborder="0" width="1000px" height="800px"> </iframe>
 <a href="3.图像标签.html" target="hello">点击跳转</a>
 <!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
         scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
 </iframe>-->
 </body>
 </html>

表单语法

image-20200416112448757

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="post">
    <h2>注册</h2>
    <p><input type="text" name="username"></p>
    <p><input type="password" name="pwd"></p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

image-20200416115317578

文本框单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="post">
    <h2>注册</h2>
<!--    文本输入框
value="陈磊"  :初始值
size="30"  ： 文本框长度
 maxlength="8"   输入文本框最大值
-->
    <p><input type="text" name="username" value="陈磊" size="30" maxlength="8"></p>
    <p><input type="password" name="pwd" maxlength="8"></p>
<!--
radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
-->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="post">
    <h2>注册</h2>
<!--    文本输入框
value="陈磊"  :初始值
size="30"  ： 文本框长度
 maxlength="8"   输入文本框最大值
-->
    <p><input type="text" name="username"maxlength="8"></p>
    <p><input type="password" name="pwd" maxlength="8"></p>
<!--
radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
-->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
<!--    多选框-->
    <p>爱好：
        <input type="checkbox" value="music" name="hobby">听歌
        <input type="checkbox" value="process" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

<!--   按钮
    submit:提交按钮
    reset：重置按钮
    button: 普通按钮
    image ： 照片按钮
-->
    <p>按钮：
        <input type="button" value="点击变长">
        <input type="image" src="../resources/image/1.jpg">
    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

列表框文本域和文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="post">
    <h2>注册</h2>
    <!--    文本输入框
    value="陈磊"  :初始值
    size="30"  ： 文本框长度
     maxlength="8"   输入文本框最大值
    -->
    <p><input type="text" name="username" maxlength="8"></p>
    <p><input type="password" name="pwd" maxlength="8"></p>
    <!--
    radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
    checked:默认选择难
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--    多选框
    checked:默认勾选
    -->
    <p>爱好：
        <input type="checkbox" value="music" name="hobby" checked>听歌
        <input type="checkbox" value="process" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

    <!--   按钮
        submit:提交按钮
        reset：重置按钮
        button: 普通按钮
        image ： 照片按钮
        file  ：上传文件
    -->
    <p>按钮：
        <input type="button" value="点击变长" >
        <!--        <input type="image" src="../resources/image/1.jpg">-->
        <br>
        <input type="file" name="files">
        <input type="button" value="上传" name="uploads">
    </p>
    <!--    下拉框
    selected :默认显示哪个
    -->
    <p>国家：
        <select name="country">
            <option value="china" selected>中国</option>
            <option value="jp">日本</option>
            <option value="us">美国</option>
            <option value="india">印度</option>
        </select>
    </p>
<!--    -->
    <p>反馈：
        <textarea name="text" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="get">
    <h2>注册</h2>
    <!--    文本输入框
    value="陈磊"  :初始值
    size="30"  ： 文本框长度
     maxlength="8"   输入文本框最大值
      readonly :只读 不能修改
      hidden:隐藏域，看不到了，但是还存在
    -->
    <p><input type="text" name="username" value="admin" maxlength="8" readonly ></p>
    <p><input type="password" name="pwd" maxlength="8" hidden></p>
    <!--
    radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
    checked:默认选择男
    disabled：不能选择男，不允许勾选
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--    多选框
    checked:默认勾选
    -->
    <p>爱好：
        <input type="checkbox" value="music" name="hobby" checked>听歌
        <input type="checkbox" value="process" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

    <!--   按钮
        submit:提交按钮
        reset：重置按钮
        button: 普通按钮
        image ： 照片按钮
        file  ：上传文件
    -->
    <p>按钮：
        <input type="button" value="点击变长">
        <!--        <input type="image" src="../resources/image/1.jpg">-->
        <br>
        <input type="file" name="files">
        <input type="button" value="上传" name="uploads">
    </p>
    <!--    下拉框
    selected :默认显示哪个
    -->
    <p>国家：
        <select name="country">
            <option value="china" selected>中国</option>
            <option value="jp">日本</option>
            <option value="us">美国</option>
            <option value="india">印度</option>
        </select>
    </p>
    <!--    -->
    <p>反馈：
        <textarea name="text" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    <!-- 邮箱验证-->
    <p>email:
        <input type="email" name="email">
    </p>
    <!--    URl-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--    数字
    step:以十进行加减
    max：最大值
    min：最小值
    -->
    <p>数字：
        <input type="number" name="num" max="100" min="-10" step="10">
    </p>
    <!--   滑块
     range:滑块
    -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!-- 搜索框-->
    <p>搜索文件
        <input type="search" name="serach">

    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

表单的应用

隐藏：hidden

只读：readonly

禁用：disbaled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="get">
    <h2>注册</h2>
    <!--    文本输入框
    value="陈磊"  :初始值
    size="30"  ： 文本框长度
     maxlength="8"   输入文本框最大值
      readonly :只读 不能修改
      hidden:隐藏域，看不到了，但是还存在
    -->
    <p><input type="text" name="username" value="admin" maxlength="8" readonly ></p>
    <p><input type="password" name="pwd" maxlength="8" hidden></p>
    <!--
    radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
    checked:默认选择男
    disabled：不能选择男，不允许勾选
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--    多选框
    checked:默认勾选
    -->
    <p>爱好：
        <input type="checkbox" value="music" name="hobby" checked>听歌
        <input type="checkbox" value="process" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

    <!--   按钮
        submit:提交按钮
        reset：重置按钮
        button: 普通按钮
        image ： 照片按钮
        file  ：上传文件
    -->
    <p>按钮：
        <input type="button" value="点击变长">
        <!--        <input type="image" src="../resources/image/1.jpg">-->
        <br>
        <input type="file" name="files">
        <input type="button" value="上传" name="uploads">
    </p>
    <!--    下拉框
    selected :默认显示哪个
    -->
    <p>国家：
        <select name="country">
            <option value="china" selected>中国</option>
            <option value="jp">日本</option>
            <option value="us">美国</option>
            <option value="india">印度</option>
        </select>
    </p>
    <!--    -->
    <p>反馈：
        <textarea name="text" id="" cols="30" rows="10">文本内容</textarea>
    </p>
    <!-- 邮箱验证-->
    <p>email:
        <input type="email" name="email">
    </p>
    <!--    URl-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--    数字
    step:以十进行加减
    max：最大值
    min：最小值
    -->
    <p>数字：
        <input type="number" name="num" max="100" min="-10" step="10">
    </p>
    <!--   滑块
     range:滑块
    -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!-- 搜索框-->
    <p>搜索文件
        <input type="search" name="serach">

    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>

表单初级验证

为什么要进行表单验证：

安全，减轻服务器压力

常用方式：

  • placeholder 默认提示字段

  • required 判断是否为空

  • pattern 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post    get     提交方式
get方式提交：我们可以在url中可以看到我们提交的信息，不安全，但是高效
post ：比较安全，传输大文件
-->
<form action="2.标题标签.html" method="get">
    <h2>注册</h2>
    <!--    文本输入框
    value="陈磊"  :初始值
    size="30"  ： 文本框长度
     maxlength="8"   输入文本框最大值
      readonly :只读 不能修改
      hidden:隐藏域，看不到了，但是还存在
      placeholde:框内默认提示字段
      required：加此单词，代表此文本不能为空
    -->
    <p><input type="text" name="username" placeholder="请输入用户名" required ></p>
    <p><input type="password" name="pwd" maxlength="8" required></p>
    <!--
    radio（单选按钮）：必须加value值  男女必须name相同，代表把他两分到一个组里面了，这样就能达到男和女只能选一个
    checked:默认选择男
    disabled：禁用
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--    多选框
    checked:默认勾选
    -->
    <p>爱好：
        <input type="checkbox" value="music" name="hobby" checked>听歌
        <input type="checkbox" value="process" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

    <!--   按钮
        submit:提交按钮
        reset：重置按钮
        button: 普通按钮
        image ： 照片按钮
        file  ：上传文件
    -->
    <p>按钮：
        <input type="button" value="点击变长">
        <!--        <input type="image" src="../resources/image/1.jpg">-->
        <br>
        <input type="file" name="files">
        <input type="button" value="上传" name="uploads">
    </p>
    <!--    下拉框
    selected :默认显示哪个
    -->
    <p>国家：
        <select name="country">
            <option value="china" selected>中国</option>
            <option value="jp">日本</option>
            <option value="us">美国</option>
            <option value="india">印度</option>
        </select>
    </p>
    <!--    -->
    <p>反馈：
        <textarea name="text" id="" cols="30" rows="10" required placeholder="填写内容"></textarea>
    </p>
    <!-- 邮箱验证-->
    <p>email:
        <input type="email" name="email">
    </p>
<!--    自定义邮箱
patten：正则表达式
-->
    <p>邮箱：
        <input type="email" name="diyemail" placeholder="例如xxx@qq.con" required pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

    </p>
    <!--    URl-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--    数字
    step:以十进行加减
    max：最大值
    min：最小值
    -->
    <p>数字：
        <input type="number" name="num" max="100" min="-10" step="10">
    </p>
    <!--   滑块
     range:滑块
    -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!-- 搜索框-->
    <p>搜索文件
        <input type="search" name="serach">

    </p>
    <p>
        <!--提交-->
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>
posted @ 2020-04-24 23:44  Crazylearningjava  阅读(420)  评论(0)    收藏  举报