HTML5的笔记

最新推荐文章于 2024-09-30 23:36:44 发布

Lemonade429

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量163

点赞数

分类专栏：前端三件套文章标签： html5 vscode 前端

本文链接：https://blog.csdn.net/weixin_68536490/article/details/126061984

版权

前端三件套专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML 标签是由尖括号包围的关键词，比如 < html>
HTML 标签通常是成对出现的，比如 < b> 和 < /b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
有些特殊的标签必须是单个标签（极少情况），例如< br/>,我们称为单标签

双标签关系：包含关系和并列关系。
包含关系：

<head>
    <title></title>
</head>

并列关系：

<head></head>
<body></body>

####基本结构标签

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
    你我之间，黑马洗练，月薪过万，一飞冲天
    </body>
</html>

标签名	定义	说明
< html>< /html>	HTML标签	页面中最大的标签，称为根标签
< head>< /head>	文档头部	注意在head标签中我们必须要设置的标签是title
< title>< /title>	文档标题	让页面有一个属于自己的网页标题
< body>< /body>	文档主体	元素包含文档的所有内容，页面内容基本是放到body中

网页开发工具推荐：VScode

双击打开VScode
新建文件（ctrl+N）
保存（ctrl+S）,注意要保存为.html的文件
Ctrl+加号键，Ctrl+减号键可以放大缩小视图
生成页面骨架结构
输入！按下Tab键
利用插件（Open in Default Browser）在浏览器中预览也买你：单击鼠标右键，在弹窗中点击“Open in Default Browser” 。

VScode 插件推荐安装

插件	作用
Chinese(Simplified)Language Pack foe VS Code	中文（简体）语言包
Open in Browser	邮寄选择浏览器打开html文件
JS-CSS-HTML Foematter	每次保存，都会自动格式化js、css、html代码
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式

在VScode中写一个HTML代码

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    写代码是一件快乐的事情
</body>
</html>

< !DOCTYPE html>表示当前页面采取的是HTML5版本来显示网页，处于标签之前，它并不是HTML标签，而是文档类型声明标签
< html lang=“en”>用来定义当前文档显示语言，en定义为英文，zh-CN定义为中文，无论采用哪一个，中英文都可以显示。
< meta charset=“UTF-8”> charset字符集可以通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码其中UTF-8也被称为万国码，基本包含了所有国家所需要的字符。

####标签语义
根据标签的语义，在合适的地方给一个最为合适的标签，可以让页面结构更清晰

标题标签段落标签

*HTML提供了6个等级的标题标签，即< h1>-< h6>.它是一个双标签

<h1>我是一级标题</h1>

特点：1. 加了标题的文字变粗，从h1到h6字号也依次变小

一个标题独占一行
例如

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <h1>写代码是一件快乐的事情</h1>
    <h2>写代码是一件快乐的事情</h2>
    <h3>写代码是一件快乐的事情</h3>
    <h4>写代码是一件快乐的事情</h4>
    <h5>写代码是一件快乐的事情</h5>
    <h6>写代码是一件快乐的事情</h6>
</body>
</html>

####段落和换行标签
< p>我是一个段落标签< /p>

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <p>HTML的全称为超文本标记语言，是一种标记语言。
    它包括一系列标签．通过这些标签可以将网络上的文档格式统一，
    使分散的Internet资源连接为一个逻辑整体。
    HTML文本是由HTML命令组成的描述性文本，
    HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
    <p>超文本是一种组织信息的方式，
    它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
    这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，
    或是地理位置相距遥远的某台计算机上的文件。
    这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，
    为人们查找，检索信息提供方便。</p>
</body>
</html>

文本在一个段落中会根据浏览器窗口大小自动换行
段落和段落之间保有空隙

换行标签：
< br/> （br是break的缩写，意为打断、换行）,是单标签。
如：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <p>HTML的全称为超文本标记语言，是一种标记语言。<br/>
    它包括一系列标签．通过这些标签可以将网络上的文档格式统一，
    使分散的Internet资源连接为一个逻辑整体。
    HTML文本是由HTML命令组成的描述性文本，
    HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
    <p>超文本是一种组织信息的方式，
    它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
    这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，
    或是地理位置相距遥远的某台计算机上的文件。
    这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，
    为人们查找，检索信息提供方便。</p>
</body>
</html>

####文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果。这时就需要用文本格式化标签。

语义	标签	说明
加粗	< strong>< /strong>或者< b>< /b>	更推荐使用< strong>
倾斜	< em>< /em>或者< i>< /i>	更推荐使用< em>
删除线	< del>< /del>< s>< /s>	更推荐使用< del>
下划线	< ins>< /ins>< u>< /u>	更推荐使用< ins>
如：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
   我是<strong>加粗</strong>的文字<br/>
   我是<em>倾斜</em>的文字<br/>
   我是<del>删除线</del>文字<br/>
   我是<ins>下划线</ins>文字
</body>
</html>

####< div>和< span>标签
< div>和< span>使没有语义的，它们是一个盒子，用来装内容的
只要有盒子，我们就可以把文字放里面，图片放里面，就是这样来布局我们的网页的
div是division的缩写，表示分割、分区。span意为跨度、跨距。
######特点：

< div>标签用来布局，但现在一行只能放一个< div>(即独占一行)，大盒子。

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
   <div>我是<strong>加粗</strong>的文字<br/></div>123
   <div>我是<em>倾斜</em>的文字<br/></div>123
    <div> 我是<del>删除线</del>文字<br/></div>
    <div> 我是<ins>下划线</ins>文字</div>123
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

显示效果：
我是加粗的文字
123
我是倾斜的文字
123
我是~~删除线~~文字
我是下划线文字
123 百度新浪搜狐

####图像标签和路径

图像标签 是个单标签，用于定义HTML页面中的图像

< img src=“图像URL”/>

img是image的缩写，意为图像
src是< img>标签的必须属性，它用于指定图像文件的路径和文件名

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时用文本替代
title	文本	提示文本，鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像边框粗细
注意：若只修改width和height中的一个，则是按比例修改

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <strong>图像标签的使用：</strong>(将图片放在与该html文件同一文件夹下)
   <img src="星空.jpg"/>
   <img src="星空1.jpg" alt="找不到该图片，无法显示"/>
   <img src="星空1.jpg" alt="找不到该图片，无法显示" title="该图片是星空"/>
   <br />
   <img src="星空.jpg" title="该图片是星空" width="400"/>
   <br/>
   <img src="星空.jpg" title="该图片是星空" width="400" border="15"/>
</body>
</html>

注意点：

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格隔开
属性采取键值对的格式，即key="value"的格式，属性=”属性值“

路径
根目录：打开目录文件夹的第一层就是根目录

相对路径

图片相对于HTML页面的位置

相对路径分类符号说明
同一级位于该HTML文件同一级如< img src=“baidu.jpg”/>
下一级 / 位于该HTML文件下一级如< img src=“images/baidu.jpg”/>
上一级 …/ 位于该HTML文件上一级如< img src=“…/baidu.jpg”/>

绝对路径

通常是从盘符开始的路径
例如：“D:\web\img\logo.glf"或完整的网络地址"http://www.itcast.cn/images/logo.gif”。

相对路径分类	符号	说明
同一级		位于该HTML文件同一级如< img src=“baidu.jpg”/>
下一级	/	位于该HTML文件下一级如< img src=“images/baidu.jpg”/>
上一级	…/	位于该HTML文件上一级如< img src=“…/baidu.jpg”/>

####超链接标签
在HTML标签中，< a>< /a>标签用于定义超链接，作用是从一个页面链接到另一个页面链接。

语法格式：

< a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像< /a>

单词anchor的缩写，意为锚。
两个属性的作用如下：

属性	作用
href	用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的作用
target	用于指定链接页面的打开方式，其中_self(为默认值)在当前窗口打开，__blank为在新窗口中打开方式

链接分类

外部链接：例如：< a a href=“http://www.baidu.com” target=“_blank”>百度< /a>
显示：百度
内部链接：网站内部页面之间的相互链接，直接写内部页面名称即可，必须要在同一级目录下。
例如：< a href=“index.html”>首页< /a>
空连接：如果当时没有确定链接目标时，< a href=“#”>首页< /a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接
例如：< a href=“http://www.baidu.com”>< img src=“星空.jpg” width=“50”/></>
则点击这个图片就能跳转到相应页面啦
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为 #名字的形式，如< a href=“#two”>第2集< /a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如:< h3 id=“two”>第2集介绍< /h3>

####注释标签
HTML中的注释以"< !–“开头，以”–>"结束。

< !–注释语句–> 快捷键：ctrl + /

####特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

特殊字符	描述	字符的代码
	空格符	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp;
￥	人民币	& yen;
©	版权	& copy;
	注册商标	& reg;
℃	摄氏度	& deg;
±	正负号	& plusmn;
×	乘号	& times;
➗	除号	& divide;
²	平方2	& sup2;
³	立方3	& sup3;
（前三个比较常用）
例如：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
   讲&nbsp;&nbsp;&nbsp;&nbsp;究
</body>
</html>

####表格标签

< table>
< tr>
< td>单元格内的文字< /td>
…
< /tr>
…
< /table>

< table>< /table>是用于定义表格的标签
< tr>< /tr>标签用于定义表格中的行，必须嵌套在< table>< /table>标签中
< td>< /td>用于定义表格中的单元格，必须嵌套在< tr>< /tr>标签中
字母td指表格数据(table data),即数据单元格的内容

表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
< th>< /th>标签表示HTML表格的表头部分(table head的缩写)

< table>
< tr>
< th>姓名< /th>
…
< /tr>
…
< /table>

例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <table>
        <tr><th>姓名</th> <th>年龄</th> <th>性别</th></tr>
        <tr><td>邓紫棋</td> <td>18</td> <td>女</td></tr>
    </table>
    </table>
</body>
</html>

表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中显示

表格属性
表格标签这部分属性实际开发中不常用，因为后面会通过CSS来设置

属性名	属性值	描述
align	left、center、right	规定整个< table>< /table>表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

这些属性一定要写到< table>里面去，如：< table align=“center”>< /table>
例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th> <th>年龄</th> <th>性别</th></tr>
        <tr><td>邓紫棋</td> <td>18</td> <td>女</td></tr>
    </table>
    </table>
</body>
</html>

表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分:
在表格标签中，分别用： < thead>标签表格的头部区域、< tbody>标签表格的主体区域，这样可以更好的分清表格结构
表格结构标签一定要放在< table> < /table>里面
例如：

 < table>
   < thead>
       < tr>
           < th>< /th>
           < th>< /th>
       < /tr>
   < /thead>
 
   < tbody>
       < tr>
           < th>< /th>
           < th>< /th>
       < /tr>
       < tr>
           < th>< /th>
           < th>< /th>
       < /tr>
   < /tbody>
 < /table>

案例：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0" cellpadding="20">
      <thead>  
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
       </thead> 
       <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down1.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="down2.jpg"></td>
            <td>320</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </tbody>
    </table>
</body>
</html>

合并单元格

合并单元格的方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写代码合并
跨列：最左侧单元格为目标单元格，写代码合并

合并单元格的三部曲：

1.先确定是跨行合并还是跨列合并
2.找到目标单元格：合并代码方式=合并的单元格个数，比如：< td colspan=“2”>< /td>
3. 删除多余的单元格

例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
   <table align="center" width="500" height="249" border="1" cellspacing="0" cellpadding="20">
     <tr>
         <td></td>
         <td colspan="2"></td>
         
     </tr>
     <tr>
       <td rowspan="2"></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       
       <td></td>
       <td></td>
   </tr>
   </table>
</body>
</html>

####列表标签
表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点是整齐、整洁、有序，它作为布局会更加自由和方便
根据使用场景不同，列表可以分为三大类：无序列表、有序列表、自定义列表

无序列表

< ul>< /ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用< li>< /li>标签定义

无序列表基本语法格式：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li><p>列表项3</p></li>
    .....
</ul>

注意：

无序列表的各个列表项之间没有顺序级别之分，是并列的
< ul>< /ul>中只能嵌套< li>< /li>，直接在< ul>< /ul>标签中输入其他标签或文字的做法都是不允许的
< li>与< /li>之间相当于一个容器，可以容纳所有元素，如：< p>< /p>

有序列表

在HTML标签中，< ol>< /ol>标签用于定义有序列表，列表顺序以数字来显示，并且用< li>< /li>标签来定义列表项

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ....
</ol>

注意：

< ol>< /ol>中只能嵌套< li>< /li>，直接在< ul>< /ul>标签中输入其他标签或文字的做法都是不允许的
< li>与< /li>之间相当于一个容器，可以容纳所有元素，如：< p>< /p>
有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置

自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在HTML标签中，< dl>< /dl>标签用于定义描述列表（或定义列表），该标签会与< dt>< /dt>（定义项目/名字）和< dd>< /dd>（描述每一个项目/名字）一起使用。

<dl>
    <dt>名词1</dt>
    <dd>名词1的解释1</dd>
    <dd>名词1的解释2</dd>
</dl>

注意：

< dl>< /dl>里面只能包含< dt>< /dt>和< dd>< /dd>,不能有其他标签
但是< dt>< /dt>和< dd>< /dd>里面可以放任何标签
< dt>< /dt>和< dd>< /dd>个数没有限制，一般是一个< dt>< /dt>对应多个< dd>< /dd>

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
   <dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
   </dl>
</body>
</html>

####表单标签
使用表单目的是为了收集用户信息
在我们的网页中，也需要跟用户进行交互，收集用户资料，此时就需要表单

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3个部分构成
傻瓜这里没有

表单域
表单域就是一个包含表单元素的区域

< form>< /form>标签会把它范围内的表单元素信息提交给服务器

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

表单控件（表单元素）
表单元素就是允许用户在表单中输入或者选择的内容控件

< input/>输入表单元素
< select>下拉表单元素
< textarea>文本域元素

1. < input/>输入表单元素
在< input/>标签中，包含一个type属性，根据不同type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

< input type=“属性值”/>

type的属性值有：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过javaScript启动脚本）
checkbox	定义复选框，多选按钮
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除了type属性外，< input/>标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中(即默认选中)
maxlength	正整数	规定输入字段中的字符的最大长度

注意：

name和value是每个表单元素都有的属性值，主要给后台人员使用
name主要作用是用于区别不同的表单元素
name表单元素的名字，要求单选按钮和复选框要有相同的name值

例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
  <form action="XXX.php" method="get">
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/> <br/>
    密码：<input type="password" name="pwd"/><br/>

    <!--name是表单元素名，这里性别单选按钮必须有相同名字name 才可以实现多选一-->
    <!--value定义input的值，这样可以把value的值送到后台服务器-->
    性别：男<input type="radio" name="sex" value="男"/>女<input type="radio" name="sex" value="女"/><br/>

    爱好：吃饭<input type="checkbox" name="hobby" checked="checked"/>睡觉<input type="checkbox" name="hobby"/>打游戏<input type="checkbox" name="hobby"/>
    <br/>
    <input type="submit" value="免费注册"/>
    <input type="reset" value="重新填写"/>
    <input type="button" value="获取短信验证码"/><!--后期搭配javaScript使用-->
    <br/>
    上传头像：<input type="file"/>
  </form>
</body>
</html>

< label>< /label>标签
< label>< /label>标签为input元素定义标注（标签）
< label>< /label>标签用于绑定一个表单元素，当点击< label>< /label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

注意：
< label>< /label>标签的for属性应当与相关元素的id属性相同
例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
  <form action="XXX.php" method="get">
    <label for="text">用户名：</label>
    <input type="text" id="text" name="username" value="请输入用户名" maxlength="6"/> <br/>
    <input type="radio" id="nan" name="sex"/><label for="nan">男</label><br/>
    <input type="radio" id="nv" name="sex"/><label for="nv">女</label>
  </form>
</body>
</html>

2. < select>< /select>下拉表单元素
语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ....
</select>

注意：

< select>< /select>中至少包含一对< option>< /option>
在< option>< /option>中定义selected="selected"时，当前项即为默认选中项
例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
  <form action="XXX.php" method="get">
    <label for="text">用户名：</label>
    <input type="text" id="text" name="username" value="请输入用户名" maxlength="6"/> <br/>
    <input type="radio" id="nan" name="sex"/><label for="nan">男</label><br/>
    <input type="radio" id="nv" name="sex"/><label for="nv">女</label><br/>
    籍贯：
    <select>
        <option>广东</option>
        <option>四川</option>
        <option selected="selected">湖南</option>
    </select>
  </form>
</body>
</html>

3. < textarea>< /textarea>文本域元素
< textarea>< /textarea>标签用于定义多行文本输入的控件
语法：

<textarea rows="3" cols="2">
   (默认文本)
</textarea>

cols=“每行中的字符数”，rows=“显示的行数”，实际开发中不会使用，都是用CSS来设置
例子：

<!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>我利用VScode创建第一个页面</title>
</head>
<body>
  <form action="XXX.php" method="get">
    今日反馈：
    <textarea>
        （默认文字）
    </textarea>
  </form>
</body>
</html>