前端api:https://www.w3school.com.cn/

HTML入门

1.前端知识介绍(了解)

网站 = 后台+前端网页

html入门 - 图1

2.HTML的概述(了解)

1）HTML应用场景

各大门户网站的网页都是由html编写的

html入门 - 图2
html入门 - 图3
html入门 - 图4

京东网站的html代码

html入门 - 图5

2）HTML介绍

HTML 指的是超文本标记语言（ Hyper Text Markup Language ）
1) 超文本：
超过普通文本。普通文本是.txt,普通文本只能书写字符数据。超文本是除了可以存放字符数据，还可以存放视频、音频图片等
2）标记：
标签。主要用来标识的。超链接标签：a 图片标签：img 输入框标签：input
HTML作用 使用标记标签来描述网页 。即写网站网页的。相当于整个网页的架构。

3）HTML5介绍（了解）

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。

HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以其能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari(苹果系统)，Opera等。不同的浏览器之间是有差异，同一个网页运行可能会不同。

注意：我们使用html书写的网站都是静态网页，就是什么时候打开网页都一样（数据不是动态获取的）。

3. HTML语言特点 (了解)

  1. 不需要编译，直接使用浏览器运行
  2. 在任何地方都可以创建html文件，文件后缀名是.html或者.htm
  3. HTML的标签有两种：
    • 1）双标签：<标签名 属性名=”属性值” 属性名=”属性值” 。。。>文本</标签名>
    • 2）单标签：<标签名 属性名=”属性值” 属性名=”属性值” 。。。/>
  4. 标签是预定义的，不要随便定义。
  5. html就是书写网页的，用来显示页面的
  6. html页面整体结构：
    1. <!--根标签-->
    2. <html>
    3. <!--头标签-->
    4. <head>
    5.   .......
    6. </head>
    7. <!--体标签-->
    8. <body>
    9.   .....
    10. </body>
    11. </html>

    4.HTML快速入门

    使用记事本书写html
  1. 在桌面创建文件，文件后缀名是.html或者.htm
  2. 使用记事本打开文件，书写html标签
    1. <!--根标签-->
    2. <html>
    3.  <!--头标签-->
    4.  <head>
    5.       <!--页面的标题-->
    6.       <title>Hello HTML</title>
    7.  </head>
    8.   <!--体标签-->
    9.  <body>
    10.        乾坤未定，你我皆是黑马！！
    11.  </body>
    12. </html>
    3.使用浏览器运行查看显示的数据
    image.png

:::warning 小结：
1.创建的html文件的后缀名是：.html或者.htm
2.标签的文本内容显示到页面的最上边，表示标题 :::

5. html编辑器-vscode

1 介绍

官网：https://code.visualstudio.com/
VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，是目前前端开发最常用的软件开发工具之一。
（找到资料\VSCodeUserSetup-x64-1.55.2.exe, 或者自己下载后，双击下一步安装即可）

附件：VSCodeUserSetup-x64-1.55.2.exe.zip

:::tips html入门 - 图7 :::

2 插件安装

插件安装完成后要重启下软件才能用。
chinese 汉化插件 :::tips html入门 - 图8
html入门 - 图9 :::

Preview on Web Server 插件 :::tips image.png
可以让我们去查看写好的网页
快捷键：
Ctrl+Shift+L：默认浏览器打开网页
Ctrl+Shift+V: VS 内置浏览器查看

:::

vetur插件 :::tips 这个是vuecli中会用到的(.vue文件会有提示)

html入门 - 图11 :::

配置成功后，关闭vscode,重启。

3 修改主题

:::tips 快捷键：先按Ctrl+K ，再按 Ctrl+T 或者在文件 —>首选项—>颜色主题 中选取
html入门 - 图12
html入门 - 图13 :::

4 修改快捷键

:::tips html入门 - 图14
html入门 - 图15 :::

5 vscode创建html文件快速入门

1）打开在硬盘上创建好的一个文件夹作为项目名 :::info 步骤 1 步骤 2步骤 3 :::

2）创建模块 :::tips html入门 - 图19html入门 - 图20 :::

3）在模块名上创建html文件 :::tips html入门 - 图21 :::

4）书写html文件代码 :::tips html入门 - 图22 ::: 代码演示

  1. <!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
  2. <!DOCTYPE html>
  3. <!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，但也可以书写中文 -->
  4. <html lang="en">
  5. <head>
  6.     <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <!-- 标题标签 -->
  11.     <title>第一个html页面</title>
  12. </head>
  13. <body>
  14.     乾坤未定，你我皆是黑马！   
  15. </body>
  16. </html>

5）运行页面 :::tips 写完html文件之后一定保存，然后使用浏览器查看。
image.png

:::

6）效果 :::tips image.png :::

7）设置自动保存 :::tips 文件修改后一定要保存，才能看到效果。vscode 默认不会自动保存，我们需要可以设置为自动保存。
在 文件 --> 自动保存
image.png :::

6 常见快捷键

:::warning

  1. 新建文件：ctrl+N
    2. ctrl+加号键：放大，ctrl+减号键：缩小
    3. 新开窗口：ctrl+shift+n
    4. 关闭当前窗口：ctrl+w
    5. 显示/隐藏左侧边栏：ctrl+b
    6. 文件重命名：鼠标选中+f2
    7. 自动换行：alt+z（标签过长需要拖动编辑器下方滚动条阅读时不太方便，可以一键换行）
    8. 注释：ctrl+/
    9. 多行编辑：alt+鼠标左键 ，鼠标中键按下拖拉
    10. 查找并打开文件：ctrl+p
    11. 移动当前行，向上alt+up（方向键↑） 向下 alt+down
    12. 在当前行上方插入一行：ctrl+shift+enter
    13. 向下复制一行:shift+alt+向下键
    14. 删除一行，剪切一行：ctrl+x
    15 格式化 ：Alt+Shift+F *     :::

6 基础标签学习

需求：使用html代码完成页面显示效果，效果如下： :::tips image.png :::

1 基础标签

  1. 1.标题标签:<h>
  2.      1）格式：<hn></hn>  n的范围是1-6，依次递减
  3.      2）标题标签特点：
  4.          a:单独占一行
  5.          b:自动加粗
  7. 2.字体标签:<font>
  8.      1）格式：<font></font>
  9.      2）属性：
  10.          size:字体大小 ,属性值范围：1-7 ，依次递增，默认是3。如果超过7px按照7px显示。
  11.              如果小于1px按照1px显示
  12.          face:字体样式，比如 楷体，宋体 
  13.          color:字体颜色，属性值有两种表示方式：
  14.              【1】英文字母：推荐使用
  15.              【2】使用十六进制表示:
  16.               #xxxxxx 表示使用红绿蓝三原色设置颜色
  17.               红绿蓝分别取值 0~255，此处使用16进制表示即 00 ~ FF 。
  18.               #FF 00 00
  19.                红  绿 蓝
  20.               注意：如果每组两个数字是一样的可以只书写一个数字
  21.               #FF 00 00可以简写为：#F00
  25. 3.字体格式标签
  26.   加粗标签：<b>
  27.   倾斜标签：<i>
  28.   下划线标签：<u>
  29.   格式化标签可以组合在一起使用:哪个标签位于外面都可以
  32. 4.内容居中标签：<center>
  35. 4.段落标签：<p>
  36.   段落之间具有留白
  40. 6.换行标签: <br/>
  41.   行之间没有空行
  43. 7.水平线:hr
  44.      1）格式：<hr/>
  45.      2)属性：
  46.          a: noshade 的属性值是noshade，表示没有阴影即实心
  47.          b: size    表示水平线粗细
  50. 8.特殊字符表示
  51.   <                          &lt;     (less than)
  52.   >                          &gt;  (greate than)
  53.   空格                 &nbsp;
  54.   人民币           &yen;
  55.   版权符号         &copy;

2 案例实现(每个人必须完成)

根据素材，使用所学基础标签完成

  1.  企业简介
  3.     传智教育(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
  5.     民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
  6.     著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。
  8.     探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“探索教育本源，开辟教育新生态”便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
  10.     江苏传智播客教育科技股份有限公司
  11.     版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882

image.png

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>企业简介</h1>
  9. <hr size="1px" color="yellow"/>
  10. <p><font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，
  11.     公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、
  12.     网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，
  13.     负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。</p>
  14. <p>民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
  15.     著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b>></p>
  16. <p>探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，
  17.     让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“<b>探索教育本源，开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景，
  18.     也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。</p>
  19. <hr size="1px" color="yellow"/>
  20. <center>江苏传智播客教育科技股份有限公司</center>
  21. <center>版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882</center>
  22. </body>
  23. </html>

7. 图片、音频、视频标签(掌握)

:::warning 1 图片标签：html入门 - 图28
属性：
src：规定显示图像的 URL（统一资源定位符）
height：定义图像的高度(单位可以是像素px或者百分比%)
width：定义图像的宽度，若宽高设置其中一项那么图片会等比例缩放
title: 鼠标悬停在图片上方会出现的文字信息
alt: 图片加载失败的时候才会出现的文字信息

2 定义音频： 支持的音频格式：MP3、WAV、OGG
属性：
src：规定音频的 URL
controls：显示播放控件

3 视频标签：

支持的音频格式：MP4, WebM、OGG
属性：
src：规定视频的 URL
controls：显示播放控件

:::

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9.     <img src="../img/mm.jpg" width="500px" height="400px" title="这是一个很性感的美女">
  10.     <img src="../img/美女.jpg" width="500px" height="400px" title="这是一个很性感的美女" alt="这里曾经是一个美女" border="5px">
  11.     <audio src="b.mp3" controls></audio>
  12.     <video src="c.mp4" controls width="500" height="300"></video>
  13. </body>
  14. </html>

8 超链接标签

:::warning 超链接标签：
属性：
href：指定访问资源的URL 例如：http://www.baidu.com 或者 # 表示空链接
target：指定打开资源的方式，_self：默认值，在当前页面打开，_blank：在空白页面打开

:::

代码示例

  1. <a href="http://www.baidu.com">百度</a>

image.png

9 列表标签

1 无序列表标签ul

:::warning

    ：无序列表标签，表示一个内可含多个元素的无序列表或项目符号列表。需要配合子标签
  • 使用
    属性：
    type：表示类型，具有三个属性值：
    a:disc 实心圆 默认的
    b:circle 空心圆
    c:square 实心正方形
    注意：type属性如果使用在ul上面对所有的子标签li都起作用，如果作用在某个li标签上，那么只对当前li标签起作用

  • ：列表项标签，用于表示列表里的条目。它必须包含在一个父元素里：有序列表(
      )，无序列表(
        )

        使用时必须借助于子标签 li，如下 :::

        1.   <ul type="circle">
        2.     <li>百度</li>
        3.     <li>必应</li>
        4.     <li>谷歌</li>
        5.   </ul>

        image.png

        2 有序列表标签ol

        :::warning

          ：有序列表标签，表示多个有序列表项，通常渲染为有带编号的列表
          属性：
          type：表示类型，具有以下几种属性值：
          【1】:1 数字 默认的
          【2】:a 小写字母
          【3】:A 大写字母
          【4】：罗马数字 i I

          注意：
          必须借助于子标签li
          使用技巧：vs code 中 ol>li*4 按tab可以快速生成四个li标签

          :::

          1.   <ol type="A">
          2.     <li>百度</li>
          3.     <li>必应</li>
          4.     <li>谷歌</li>
          5.   </ol>

          image.png

          3. 案例实现(课下必须完成)

          html入门 - 图32

          1.   <ul type="square">
          2.     <li>
          3.       <a href="http://www.itcast.cn" target="_blank">传智教育</a>
          4.     </li>
          5.     <li>
          6.       <a href="http://www.baidu.com">百度</a>
          7.     </li>
          8.     <li>
          9.       <a href="http://www.163.com">网易</a>
          10.     </li>
          11.     <li>
          12.       百合
          13.     </li>
          14.   </ul>

          10.表格table标签(掌握)

          1 表格标签学习

          :::tips 示例：
          image.png :::

          1.   <table width="50%" border="1" cellspacing="0">
          2.     <tr height="50">
          3.       <th>序号</th>
          4.       <th>品牌logo</th>
          5.       <th>品牌名称</th>
          6.       <th> 企业名称</th>
          7.     </tr>
          8.     <tr align="center">
          9.       <td>010</td>
          10.       <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
          11.       <td>
          12.         三只松鼠</td>
          13.       <td>三只松鼠</td>
          14.     </tr>
          15.   </table>

          :::warning table：表格标签
          tr: 行标签
          th:表头标签
          td:列标签

          table标签单独存在没有意义，必须借助于子标签tr td th :::

          1）table标签的属性：

          名称 作用
          border 表格边框
          width 表格的宽度
          height 表格的高度
          cellpadding 单元格边沿与其内容之间的空白
          cellspacing 单元格之间的空白
          bgcolor 表格的背景颜色

          2）tr属性(行)：

          名称 作用
          align 单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中

          3）td(th)列属性:

          名称 作用
          colspan 单元格可横跨的列数(横向合并单元格) column
          rowspan 单元格可横跨的行数(纵向合并单元格)
          align 单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中

          2.简单的表格

          :::tips 需求：在页面上显示若干个用户的编号、姓名、年龄、性别。
          image.png ::: 代码参考：

          1.   <table border="1px" width="50%" cellspacing="0px" cellpadding="0px" bgcolor="green" align="center">
          2.     <tr align="center">
          3.       <th>编号</th>
          4.       <th>姓名</th>
          5.       <th>年龄</th>
          6.       <th>性别</th>
          7.     </tr>
          9.     <tr align="center">
          10.       <td>001</td>
          11.       <td>杨幂</td>
          12.       <td>18</td>
          13.       <td>女</td>
          14.     </tr>
          15.     <tr align="center">
          16.       <td>002</td>
          17.       <td>刘德华</td>
          18.       <td>18</td>
          19.       <td>男</td>
          20.     </tr>
          21.   </table>

          3.合并单元格

          :::tips 需求1: 实现跨行，制作电话本
          html入门 - 图35
          分析：
          上述案例有4行，先查看多的行数，2列。对于张三是跨2行的。
          跨行使用td标签中的 **rowspan **属性可以实现纵向合并单元格。 :::

          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4.     <meta charset="UTF-8">
          5.     <title>Title</title>
          6. </head>
          7. <body>
          8.     <!--
          9.         练习2：实现跨行
          10.     -->
          11.     <table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
          12.         <tr>
          13.             <th>姓名</th>
          14.             <th>手机号</th>
          15.         </tr>
          16.         <tr>
          17.             <!--
          18.                 rowspan="2" 表示跨2行
          19.             -->
          20.             <td rowspan="2">张三</td>
          21.             <td>13800000011</td>
          22.         </tr>
          23.         <tr>
          24.             <!--<td>张三</td>-->
          25.             <td>13800000022</td>
          26.         </tr>
          27.         <tr>
          28.             <td>李四</td>
          29.             <td>139000000001</td>
          30.         </tr>
          31.     </table>
          32. </body>
          33. </html>

          :::tips 需求2: 实现跨列,制作电话本
          html入门 - 图36
          分析：
          上述案例有3行，3列。查看多的列，对于手机号是跨2列的。
          跨列使用td标签中的colspan(横向合并单元格)。 :::

          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4.     <meta charset="UTF-8">
          5.     <title>Title</title>
          6. </head>
          7. <body>
          8.     <!--
          9.         跨列表格：
          10.     -->
          11.     <table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
          12.         <tr>
          13.             <th>姓名</th>
          14.             <!--
          15.                 表示第2列跨2列，占第2 3列
          16.             -->
          17.             <th colspan="2">手机号</th>
          18.             <!--<th>手机号</th>-->
          19.         </tr>
          20.         <tr>
          21.             <td>张三</td>
          22.             <td>1380000191</td>
          23.             <td>1380000191</td>
          24.         </tr>
          25.         <tr>
          26.             <td>李四</td>
          27.             <td>1390000191</td>
          28.             <td>1390000191</td>
          29.         </tr>
          30.     </table>
          31. </body>
          32. </html>

          4.小结

          :::info 1.表格标签使用的是table作为父标签，作用。使页面显示更加规整
          2.table标签的子标签：
          1）tr : 表格的行
          2）td : 表格的列
          3）th : 表格的列，表示这一列是自动居中加粗
          4）caption：表示表格标题，居中显示
          5）tbody:表示表格主体标签,我们不书写，浏览器也会添加，书写就不会添加
          3.table标签的属性：
          1）border:表格边框
          2）width:表格宽度
          3）height:表格高度
          4）cellspacing:单元格之间的距离 外部
          5）cellpadding:内容和单元格距离 内部
          6）bgcolor:表格背景颜色
          4.tr属性：
          1）align: left 内容靠左 center : 内容居中 right：内容靠右
          5.td属性：
          1）align: left 内容靠左 center : 内容居中 right：内容靠右
          2）rowspan:跨行 row
          3）colspan:跨列 column :::

          11. div & span(掌握)

          HTML 元素根据其表现形式可以分为 2 种：

          • 块级元素
          • 行内元素

          块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

          块级元素 说明
          div 最典型的块元素
          p 表示段落
          h1-h6 表示1-6级标题（默认加粗）
          br 表示换行
          ol 有序列表
          ul 无序列表

          行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

          行内元素 说明
          a 超链接
          span 常用行级
          strong 加粗，强调
          b 加粗，不强调
          em 斜体，强调
          i 斜体，不强调
          img 图片
          input 输入框
          select 下拉列表


          1. div

          div属于html中的块级标签，单独占一行。单独使用没有意义，通常用来做页面的布局的。它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组，后续会经常见面

          1. <!--1.div标签 -->
          2. <div>div1</div>
          3. <div>div2</div>
          4. <div>div3</div>
          5. <p>我是p1</p>
          6. <p>我是p2</p>

          p标签作为块级标签每个段落之间具有留白，而div标签作为块级标签没有留白。
          html入门 - 图37

          2. span

          元素是片段内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性）应该在没有其他合适的语义元素时才使用它。 与

          元素很相似，但
          是一个 块元素 而 则是 行内元素.

          从html5后开始使用span标签取代了字体标签font，但是span标签必须结合css一起使用设置字体效果，后面学习了样式后就可以控制显示效果了。

          1. <span>span1</span>
          2. <span>span2</span>
          3. <span>span3</span>

          image.png

          12.表单标签(掌握)

          :::tips HTML 表单用于收集用户输入。
          image.png :::

          1）form 表单标签

          自定义一个百度搜索框：

          1.   <form action="http://baidu.com/s" method="get">
          2.     <input type="text" name="wd">
          3.     <input type="submit" value="搜索">
          4.   </form>

          :::warning form 标签属性：
          action：规定当提交表单时向何处发送表单数据，URL 。就是你后台的地址。
          method：规定用于发送表单数据的方式，不写默认是get请求方式
          get：浏览器会表单将数据直接附在 URL 之后，以问号拼接。不同浏览器有限制 参考网络资源
          post：浏览器会将数据放到http请求消息体中。大小无限制 ::: 百度搜索java时，就是get请求，地址栏中可以看到参数：https://www.baidu.com/s?wd=java

          2）form子标签：input标签

          通过以下表单的实现来学习input标签
          image.png
          input标签常用属性
          html入门 - 图41

          代码实现

          1.     <!-- 假设百度是我们的后台，提交数据给后台-->
          2.     <form action="http://wwww.baidu.com" method="get">
          4.         用户名称：<br />
          5.         <input type="text" name="username" /><br>
          6.         用户密码：<br />
          7.         <input type="password" name="password" /><br>
          8.         性别：
          9.         <input type="radio" name="sex" value="男" checked="checked">男
          10.         <input type="radio" name="sex" value="女">女 <br>
          11.         爱好：
          12.         <input type="checkbox" name="hobby" value="登山" checked>登山
          13.         <input type="checkbox" name="hobby" value="游泳">游泳
          14.         <input type="checkbox" name="hobby" value="打球">打球
          15.         <br>
          16.         上传头像：<br /><input type="file" name="profile" /> <br><br>
          17.         <input type="reset">
          18.         <input type="button" value="登录">
          19.         <input type="submit" value="注册">
          20.     </form>

          3） 表单子元素：下拉列表 select

          image.png :::warning 下拉列表标签：select需要和子标签option一起使用。
          1、子标签 option表示下拉框的选项
          2. 子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，
          那么提交后台的就是文本值
          3.子标签option的selected属性表示被选中
          4.select标签的属性：
          1） name：name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
          2) size=”2”： 每次select标签中显示2个子标签option
          3） multiple： 表示可以显示多个option :::

          提交数据给百度后台搜索

          1. <form action="http://wwww.baidu.com/s">
          2.     <!--
          3.         1.select下拉项：需要结合子标签option一起使用，有几个下拉项就有几个option
          4.         2.提交到后台的数据是用户当前选中的下拉项的option的value值
          5.         3.option的属性selected表示当前下拉项被选中
          6.     -->
          7.     职业
          8.     <select name="wd">
          9.         <option value="未选择">--请选择--</option>
          10.         <option value="程序猿">程序猿</option>
          11.         <option value="教师">教师</option>
          12.         <option value="环保">环保</option>
          13.         <option value="扫地僧">扫地僧</option>
          14.     </select>
          16.     <input type="submit" value="百度一下"/>
          18. </form>

          4）form子标签：文本域标签：<textarea>

          由行rows和列cols组成
          image.png

           <form action="http://wwww.baidu.com/s">
        <!--
          textarea文本域：由行和列组成
        -->
        <!--文本域标签：<textarea> -->
        个人简介：
        <br>
        <textarea rows="5" cols="20" name="个人简介"></textarea>
        <br>
        <br>
        <input type="submit" value="完成">
</form>

          5）form子标签：label标签(掌握)

          给某个输入框指定显示标签，可以实现当点击标签时自动让指定标签（通常是输入框）获得焦点。

          <label for="某个标签的id属性值">用户名</label><br>
<input  id="username" type="text" name="username">

          13.HTML5中新增的type类型的属性值(掌握)

          值 描述
          color 定义拾色器
          date 定义日期字段（带有 calendar 控件）
          datetime-local 定义日期字段（带有 calendar 和 time 控件）
          month 定义日期字段的月（带有 calendar 控件）
          week 定义日期字段的周（带有 calendar 控件）
          time 定义日期字段的时、分（带有 time 控件）
          email 定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
          number 定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
          search 定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。 
          <!--
        HTML5中新增的type类型的属性值
            1.color:取色器
            2.date:年月日
            3.datetime-local：定义日期字段（带有 calendar 和 time 控件）年月日 时分
            4.time定义日期字段的时、分（带有 time 控件）
            5.email定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
            6.number定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
            7.search定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
 -->
<form action="#">
    喜欢的颜色 <input type="color"> <br>
    活动开始时间<input type="datetime-local"> <br>
    几点起床<input type="time"> <br>
    个人邮箱<input type="email"> <br>
    你的年龄<input type="number"> <br>
    搜索文本框<input type="search"> <br>
    普通文本框<input type="text"> <br>
    <input type="submit">
</form>

          附：w3c（万维网联盟）官方资料字典

          https://www.w3cschool.cn/html/dict
          image.png