HTML笔记

ROOTS-

于 2022-07-24 17:08:50 发布

阅读量336

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/roods/article/details/125961305

版权

1.什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
元素描述了文档的标题
元素包含了可见的页面内容
元素定义一个大标题
元素定义一个段落

2.网页基本信息

<!DOCTYPE html> <!--告诉浏览器，使用html -->
<html lang="en">   <!-- 这是总标签，所有数据都在包括内写-->
<!-- head表示网页的头部-->
<head>
        <!--meta 描述性标签，用来描述网页的基本信息   -->
    <meta charset="UTF-8">
    <meta name="AnGeng" content="这是我第一个网页">
    <!--title 表示 网页标题-->
    <title>我的第一个网页</title>
</head>
<!-- ctrl+/ 注释-->
<!--body表示网页的主体 -->
<body>
  我的第一个网页
</body>

</html> <!--这是总标签 -->

3.网页的基本标签

1.标题标签

<body>
<!--标题标签-->
<h1> 一级标签</h1>
<h2> 二级标签</h2>
<h3> 三级标签</h3>
<h4> 四级标签</h4>

</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwhxnXDm-1658653208598)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005153229604.png)]$

2.段落标签

<!--段落标签-->
<!-- 生成快捷键，p+tab-->
<p>
  休言万事转头空，未转头时皆梦。（苏轼《西江月》）

  人生如逆旅，我亦是行人。（苏轼《临江仙》）

  古今如梦，何曾梦觉，但有旧欢新怨。（苏轼《永遇乐》）

  人生有情泪沾臆，江水江花岂终极。（杜甫《哀江头》）

  旧游无处不堪寻。无寻处、只有少年心。（章良能《小重山》）

  试上高峰窥皓月，偶开天眼觑红尘。可怜身是眼中人。（王国维《浣溪沙》）

  生灭元知色是空，可堪倾国付东风。唤醒绮梦憎啼鸟，罥入情丝奈网虫。雨里罗衾寒不耐，春阑金缕曲初终。返生香岂人间有，除奏通明问碧翁。（陈宝琛《落花》）
</p>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mC7JCZJj-1658653208599)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005153740990.png)]$

3.换行标签

<!-- 换行标签-->
休言万事转头空，未转头时皆梦。（苏轼《西江月》） </br>

人生如逆旅，我亦是行人。（苏轼《临江仙》） </br>

古今如梦，何曾梦觉，但有旧欢新怨。（苏轼《永遇乐》） </br>

人生有情泪沾臆，江水江花岂终极。（杜甫《哀江头》） </br>

旧游无处不堪寻。无寻处、只有少年心。（章良能《小重山》） </br>

试上高峰窥皓月，偶开天眼觑红尘。可怜身是眼中人。（王国维《浣溪沙》） </br>

生灭元知色是空，可堪倾国付东风。唤醒绮梦憎啼鸟，罥入情丝奈网虫。雨里罗衾寒不耐，春阑金缕曲初终。返生香岂人间有，除奏通明问碧翁。（陈宝琛《落花》） </br>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s7jThIql-1658653208600)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005153938234.png)]$

4.水平线标签

<hr/>
<hr/>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-17vS23mU-1658653208602)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005154051629.png)]$

5.字体样式标签

<!--字体样式标签-->
 粗体：<strong> 休言万事转头空，未转头时皆梦。</strong>
 斜体：<em>休言万事转头空，未转头时皆梦。</em>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsDyHzbM-1658653208604)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005154449123.png)]$

6.注释和特殊符号

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 </br>
大于 ：&gt </br>
小于 ：&lt </br>
版权：&copy;版权归

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mOaq6bd2-1658653208606)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005155253545.png)]$

7.所有代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>

</head>
<body>
<!--标题标签-->
<h1> 一级标签</h1>
<h2> 二级标签</h2>
<h3> 三级标签</h3>
<h4> 四级标签</h4>

<!--段落标签-->
<!-- 生成快捷键，p+tab-->
<p>
  休言万事转头空，未转头时皆梦。（苏轼《西江月》）

  人生如逆旅，我亦是行人。（苏轼《临江仙》）

  古今如梦，何曾梦觉，但有旧欢新怨。（苏轼《永遇乐》）

  人生有情泪沾臆，江水江花岂终极。（杜甫《哀江头》）

  旧游无处不堪寻。无寻处、只有少年心。（章良能《小重山》）

  试上高峰窥皓月，偶开天眼觑红尘。可怜身是眼中人。（王国维《浣溪沙》）

  生灭元知色是空，可堪倾国付东风。唤醒绮梦憎啼鸟，罥入情丝奈网虫。雨里罗衾寒不耐，春阑金缕曲初终。返生香岂人间有，除奏通明问碧翁。（陈宝琛《落花》）
</p>

<!-- 换行标签-->
休言万事转头空，未转头时皆梦。（苏轼《西江月》） </br>

人生如逆旅，我亦是行人。（苏轼《临江仙》） </br>

古今如梦，何曾梦觉，但有旧欢新怨。（苏轼《永遇乐》） </br>

人生有情泪沾臆，江水江花岂终极。（杜甫《哀江头》） </br>

旧游无处不堪寻。无寻处、只有少年心。（章良能《小重山》） </br>

试上高峰窥皓月，偶开天眼觑红尘。可怜身是眼中人。（王国维《浣溪沙》） </br>

生灭元知色是空，可堪倾国付东风。唤醒绮梦憎啼鸟，罥入情丝奈网虫。雨里罗衾寒不耐，春阑金缕曲初终。返生香岂人间有，除奏通明问碧翁。（陈宝琛《落花》） </br>

<!--水平线标签-->
<hr/>
<hr/>
<!--字体样式标签-->
 粗体：<strong> 休言万事转头空，未转头时皆梦。</strong>
 斜体：<em>休言万事转头空，未转头时皆梦。</em>
</br>
</br>
</br>

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 </br>
大于 ：&gt </br>
小于 ：&lt </br>
版权：&copy;版权归安耿
</body>
</html>

4.图像标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRqSz5jG-1658653208607)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005155456840.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!-- alt 是如果图像没加载出来，那么就会出现文字-->
<img src="../resources/image/可爱萝莉.jfif" alt="可爱萝莉 " title="可爱萝莉" width="500" height="500">
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AalvNMkL-1658653208610)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005160834988.png)]$

5.链接标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLQYj1RK-1658653208611)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005161104299.png)]$

1.页面间链接

<!-- href 表示跳转到那个页面 -->
<!-- target表示在哪里打开标签 、_blank表示在新窗口打开 _self表示在当前页打开 -->
<a href="https://www.bilibili.com/" target="_blank">点击跳转页面</a>
<a href="https://www.bilibili.com/"  target="_self">
    <img src="../resources/image/可爱萝莉.jfif" alt="可爱萝莉 " title="可爱萝莉" width="100" height="100">
</a>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI4yWxJF-1658653208613)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005163857246.png)]$

2. 锚链接

<!-- 锚标记-->
<a name="top">top</a>


<!--锚链接-->
<!-- 1.需要一个标记 ，2.跳转到标记-->
<a href="#top">回到顶部</a>
<!--跳转到别的页面的down-->
<a href="2.基本标签.html#down">点击跳转</a>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9hyTy6f-1658653208615)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005171543599.png)]$

3.功能性链接

邮件链接：

<!-- 邮箱链接-->
<a href="mailto:365241">邮箱联系</a>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16hFsDpa-1658653208616)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005171902371.png)]$

qq链接：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGpdAuzm-1658653208618)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005172111488.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0DkGe80p-1658653208621)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005172254150.png)]$

<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=395271575&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:395271575:52" alt="点击登录qq" title="点击登录qq"/></a>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ze5MuUdg-1658653208623)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005172401641.png)]$

4.所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!-- 锚标记-->
<a name="top">top</a>
<!-- href 表示跳转到那个页面 -->
<!-- target表示在哪里打开标签 、_blank表示在新窗口打开 _self表示在当前页打开 -->
<a href="https://www.bilibili.com/" target="_blank">点击跳转页面</a>
<a href="https://www.bilibili.com/"  target="_self">
    <img src="../resources/image/可爱萝莉.jfif" alt="可爱萝莉 " title="可爱萝莉" width="500" height="500">
</a>

</a>
</br>
<!--锚链接-->
<!-- 1.需要一个标记 ，2.跳转到标记-->
<a href="#top">回到顶部</a>
<!--跳转到别的页面的down-->
<a href="2.基本标签.html#down">点击跳转</a>

<!-- 邮箱链接-->
<a href="mailto:365241">邮箱联系</a>

<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=395271575&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:395271575:52" alt="点击登录qq" title="点击登录qq"/></a>

</body>
</html>

6.行内元素和块元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NE09wOym-1658653208625)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005172831791.png)]$

7.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<h4> 有序列表</h4>
<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

<h4> 无序列表</h4>
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<!-- dt 列表名称-->
<!-- dd 列表内容-->
<h4> 自定义列表列表</h4>
<dl>
  <dt>小萝莉</dt>
  <dd>a</dd>
  <dd>b</dd>
  <dd>c</dd>
</dl>



</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7wsoQOt-1658653208627)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005181155142.png)]$

8.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--   tr行  td列-->
<table border="1px">     <!--有网格 -->
  <tr>        <!--跨列 -->
    <td colspan ="4">a</td>
    <td >b</td>
  </tr>
  <tr>              <!--跨行 -->
    <td rowspan="2">a</td>
    <td >b</td>
    <td >b</td>
    <td >b</td>
    <td >b</td>
  </tr>
  <tr>
    <td >b</td>
    <td >b</td>
    <td >b</td>
    <td >b</td>
  </tr>
</table>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTsN3JrM-1658653208629)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005183057416.png)]$

9.媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--controls 控制条 autoplay 自动播放-->
<video src="../resources/video/lol出征.mp4" controls autoplay></video>
<audio src="../resources/audio/搁浅.mp3" controls autoplay></audio>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6a3SaZd-1658653208631)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005184410900.png)]$

10.页面结构分析

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HJxyXVcx-1658653208632)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005185107408.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header> <h2> abc</h2></header>

<footer> <h3>abc</h3></footer>

<section><h2>abc</h2></section>
<aside> <h2>abc</h2></aside>

</body>
</html>

11.iframe 内联框架

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03TDIP7x-1658653208633)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005191332916.png)]$

<iframe src="https://www.bilibili.com/" frameborder="0" height="800px" width="800px"></iframe>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iQxBxUsV-1658653208635)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005191658957.png)]$

12.表单登录

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qOJg9pGY-1658653208637)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005193420724.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="1.我的第一个网页.html" method="get">
<!--   文本输入框-->
  <p>名字：<input type="text"  name="username"> </p>
<!-- 密码框-->
<p>密码：<input type="text" name="pwd"></p>

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


</body>
</html>

在这里插入图片描述

13.文本框和单选框

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ct9ksqDF-1658653208643)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005204315493.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="https://www.bilibili.com/" method="get">
<!--   文本输入框     value 表示默认值，maxlenth 最长能写几个字符  size 文本框的长度-->
  <p>名字：<input type="text"  name="username" value="AnGeng" maxlength="10" size="20"> </p>
<!-- 密码框-->
<p>密码：<input type="text" name="pwd" maxlength="10" size="20"></p>

<!--   性别  单选框 -->
    性别：
    <input type="radio" value="boy" name="性别">男
    <input type="radio" value="女" name="性别">女
<p>
<!--    提交按钮-->
    <input type="submit">
<!--    重置按钮-->
    <input type="reset">
</p>
</form>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-If1vAH41-1658653208643)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005205331863.png)]$

14.多选框和按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="https://www.bilibili.com/" method="get">
<!--   文本输入框     value 表示默认值，maxlenth 最长能写几个字符  size 文本框的长度-->
  <p>名字：<input type="text"  name="username" value="AnGeng" maxlength="10" size="20"> </p>
<!-- 密码框-->
<p>密码：<input type="text" name="pwd" maxlength="10" size="20"></p>

<!--   性别  单选框 -->
    性别：
    <input type="radio" value="boy" name="性别">男
    <input type="radio" value="女" name="性别">女

<!--   多选框-->
    <p>爱好：
        <input type="checkbox" value="Lori" name ="hobby">萝莉
        <input type="checkbox" value="Sister-in-law" name ="hobby">御姐
        <input type="checkbox" value="Woman" name ="hobby">少妇
    </p>
<!--    按钮-->
    <p>
        <input type="button" name="1" value="喜欢就点击把🤭">
        <input type="image" src="../resources/image/可爱萝莉.jfif" height="100" width="100">
    </p>
<p>
<!--    提交按钮-->
    <input type="submit" value="登录">
<!--    重置按钮-->
    <input type="reset" value="清空">
</p>
</form>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIc7lRNL-1658653208644)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005210552849.png)]$

15. 列表框文本域文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="https://www.bilibili.com/" method="get">
<!--   文本输入框     value 表示默认值，maxlenth 最长能写几个字符  size 文本框的长度-->
  <p>名字：<input type="text"  name="username" value="AnGeng" maxlength="10" size="20"> </p>
<!-- 密码框-->
<p>密码：<input type="text" name="pwd" maxlength="10" size="20"></p>

<!--   性别  单选框 -->
    性别：
    <input type="radio" value="boy" name="性别">男
    <input type="radio" value="女" name="性别">女

<!--   多选框  列表框-->
    <p>爱好：
        <input type="checkbox" value="Lori" name ="hobby">萝莉
        <input type="checkbox" value="Sister-in-law" name ="hobby">御姐
        <input type="checkbox" value="Woman" name ="hobby">少妇
    </p>

<!--    下拉框-->
    <p>国家:
        <select name="列表名称" id="">
            <option value="us">美国</option>
            <option value="China">中国</option>
            <option value="jpa">日本</option>
        </select>
    </p>
<!--    按钮-->
    <p>
        <input type="button" name="1" value="喜欢就点击把🤭">
        <input type="image" src="../resources/image/可爱萝莉.jfif" height="100" width="100">
    </p>

<!--    文本域 反馈-->
    <p>反馈：
        <textarea name="textarea" id="反馈" cols="5" rows="1"></textarea>
    </p>
<p>
<!--    文件域 选择文件-->
    <p>
    <input type="file" name="选择文件">
</p>
<!--    提交按钮-->
    <input type="submit" value="登录">
<!--    重置按钮-->
    <input type="reset" value="清空">
</p>
</form>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNrqSMbV-1658653208647)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005212141198.png)]$

16.验证滑块搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="https://www.bilibili.com/" method="get">
<!--   文本输入框     value 表示默认值，maxlenth 最长能写几个字符  size 文本框的长度-->
  <p>名字：<input type="text"  name="username" value="AnGeng" maxlength="10" size="20"> </p>
<!-- 密码框-->
<p>密码：<input type="text" name="pwd" maxlength="10" size="20"></p>

<!--   性别  单选框 -->
    性别：
    <input type="radio" value="boy" name="性别">男
    <input type="radio" value="女" name="性别">女

<!--   多选框-->
    <p>爱好：
        <input type="checkbox" value="Lori" name ="hobby">萝莉
        <input type="checkbox" value="Sister-in-law" name ="hobby">御姐
        <input type="checkbox" value="Woman" name ="hobby">少妇
    </p>

<!--    下拉框-->
    <p>国家:
        <select name="列表名称" id="">
            <option value="us">美国</option>
            <option value="China">中国</option>
            <option value="jpa">日本</option>
        </select>
    </p>
<!--    按钮-->
    <p>
        <input type="button" name="1" value="喜欢就点击把🤭">
        <input type="image" src="../resources/image/可爱萝莉.jfif" height="100" width="100">
    </p>

<!--    文本域 反馈-->
    <p>反馈：
        <textarea name="textarea" id="反馈" cols="5" rows="1"></textarea>
    </p>
<p>
<!--    文件域 选择文件-->
    <p>
    <input type="file" name="选择文件">
</p>

<!--    邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--    网页验证-->
    <p>网页：
        <input type="url" name="网页验证">
    </p>
<!--    数量大小-->
    <p>数字：
        <input type="number" name="number" max="1000" min="0" step="1">
    </p>
<!--    滑块-->
    <p>好色值：
        <input type="range" name="se" max="100" min="0" step="5">
    </p>
<!--   搜索框-->
    <p>搜索：
        <input type="search" name="搜索">
    </p>

<!--    提交按钮-->
    <input type="submit" value="登录">
<!--    重置按钮-->
    <input type="reset" value="清空">
</p>
</form>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPWTLh3k-1658653208649)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005212935254.png)]$

17.表单的应用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9TW61e7-1658653208650)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211005213525146.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action 表单提交后，会转移到那个位置   get 能看见我们提交的信息，不安全  post 安全-->
<form action="https://www.bilibili.com/" method="post">
<!--   文本输入框     value 表示默认值，maxlenth 最长能写几个字符  size 文本框的长度    readonly 只让读-->
  <p>名字：<input type="text"  name="username" value="AnGeng" maxlength="10" size="20" readonly> </p>
<!-- 密码框               disabled 禁用                  -->
<p>密码：<input type="text" value="123456" name="pwd" maxlength="10" size="20" disabled></p>

<!--   性别  单选框 -->
    性别：
    <input type="radio" value="boy" name="性别">男
    <input type="radio" value="女" name="性别">女

<!--   多选框-->
    <p>爱好：
        <input type="checkbox" value="Lori" name ="hobby">萝莉
        <input type="checkbox" value="Sister-in-law" name ="hobby">御姐
        <input type="checkbox" value="Woman" name ="hobby">少妇
    </p>

<!--    下拉框-->
    <p>国家:
        <select name="列表名称" id="">
            <option value="us">美国</option>
            <option value="China">中国</option>
            <option value="jpa">日本</option>
        </select>
    </p>
<!--    按钮-->
    <p>
        <input type="button" name="1" value="喜欢就点击把🤭">
        <input type="image" src="../resources/image/可爱萝莉.jfif" height="100" width="100">
    </p>
<!---->
<!--    文本域 反馈-->
    <p>反馈：                                             <!--hidden 隐藏 看不见文件框-->
        <textarea name="textarea" id="反馈" cols="5" rows="1" hidden></textarea>
    </p>
<p>
<!--    文件域 选择文件-->
    <p>
    <input type="file" name="选择文件">
</p>

<!--    邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--    网页验证-->
    <p>网页：
        <input type="url" name="网页验证">
    </p>
<!--    数量大小-->
    <p>数字：
        <input type="number" name="number" max="1000" min="0" step="1">
    </p>
<!--    滑块-->
    <p>好色值：
        <input type="range" name="se" max="100" min="0" step="5">
    </p>
<!--   搜索框-->
    <p>搜索：
        <input type="search" name="搜索">
    </p>

<!--    提交按钮-->
    <input type="submit" value="登录">
<!--    重置按钮-->
    <input type="reset" value="清空">
</p>
</form>


</body>
</html>