WEB个人笔记向之HTML
Web 标准的构成
主要包括结构（Structure），表现（Presentation），和行为（Behavior）三个方面
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的版式，颜色，大小等外观样式。主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是javascript |
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中
1.HTML语法规范
1.1 基本语法概述
1.html标签是由尖括号保卫的关键词，例如
2.html标签通常是成对出现的，例如和，我们称为双标签，第一个标签是开始标签，第二个标签是结束标签
3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签
1.2 标签关系
双标签关系可以分为两类：包含关系和并列关系
2. HTML基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写
这里给个由上述标签形成的例子
将文本后缀txt改为html后显示效果如下
总结：
3. 骨架标签新增代码
先输入！后按tab将会直接跳出以下代码，这里将一个一个解释过去
<！DOCTYPE>：文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页，这句代码的意思是：当前页面采取的是HTML5版本来显示网页，值得注意的是他声明位于文档中最前面的位置，处于标签之前
< html lang=“en”>：用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
这个属性对浏览器和搜索引擎（百度，谷歌等）是有些许作用的，可能会给予提供是否全文翻译的功能。
< meta charset=" UTF-8">:5
在< head >标签内，可以通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
charset常用的值有：GB2312,BIG5,GBK和UTF-8，其中UTF-8也被称为万国码，其中包含了全世界所有国家需要用到的字符
4. HTML 常用标签`
4.1 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题，即< h1> 到< h6> 。
例如：
< h1> 我是一级标题 < /h1>
标签语义：作为标题使用，并且依据重要性递减，h1为最主要的标题标签，h2其次，以此类推。
特点：
1.加了标题的文字会变得加粗，字号也会依次变大
2.一个标题独占一行
例子：
4.2 段落标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在html标签中，
标签用于定义段落，它可以将整个网页分为若干段落，p是单词paragraph的缩写，意为段落。
<p> 我是一个段落标签 </p>
<p> 我是另一个段落标签 </p>
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一段段落</p>
<p>这是第二段段落</p>
</body>
</html>
显示效果如下：
4.3 换行标签
在HTML中，一个段落的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文字强制换行显示，就需要使用到换行标签< br/>，为break的缩写，意为打断，换行。
<br/>
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一段<br/>段落</p>
<p>这是第二段段落</p>
</body>
</html>
显示效果如下：
4.4 文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 |
|---|---|
| 加粗 | < strong>< /strong> 或者 < b>< /b> |
| 倾斜 | < em>< /em> 或者 < i>< /i> |
| 删除线 | < del>< /del> 或者 < s>< /s> |
| 下划线 | < ins>< /ins> 或者 < u>< /u> |
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>这是标题</h1>
<p>这是<strong>第一段</strong><em>段落</em></p>
<p>这是<del>第二段</del><ins>段落</ins></p>
</body>
</html>
显示效果如下：
4.5 div和span标签
< div>和< span> 是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
例子：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div>我是一个div标签，一个人占一行</div>
<div>我是一个div标签，一个人占一行</div>
<span>我是span标签</span>
<span>我是span标签</span>
</body>
</html>
显示效果如下：
特点：
1.< div>标签用来布局，但是现在一行只能放一个< div>，不会容纳其他东西。
2.< span>标签也是用来布局，一行上可以拥有多个< span>
4.6 图像标签
在HTML标签中，< img>标签用于定义HTML页面中的图像，值得注意的是，如果你要使用图片，记得HTML文件要和图片文件放在一起，或者等到后面学习路径的使用。
<img src="图像URL"/>
src是< img>标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，当图像无法正常显示时用文字代替 |
| title | 文本 | 提示文本，鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
例子如下：
在html文件旁边放了一个anime.jpg的图片
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<img src="anime1.jpg" alt="加载失败"/><br/>
<img src="anime.jpg" title="这是重新加载的纸片人图片" width="500" height="500" border="15">
</body>
</html>
显示效果如下：
4.7 路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些写图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置
4.7.1 相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目的路径，简单来说，图片相对于HTML页面的位置。
| 相对路劲分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如 < img src=“anime.jpg” /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 < img src=“images/anime.jpg” /> |
| 上一级路径 | . ./ | 图像文件位于HTML文件上一级 如 < img src=“. ./anime.jpg” /> |
相对路径是从代码所在的这个文件出发，去寻找目标文件的，这里的上一级，下一级，同一级就是图片相对于HTML文件的位置。
例子（在html文件分别设置了上下同级文件的图片）：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<img src="anime.jpg" width="100" height="100"/>
<img src=" images/anime.jpg" width="100" height="100"/>
<img src="../anime.jpg" width="100" height="100"/>
</body>
</html>
显示效果如下：
4.7.2 绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例如：“D:\web\images\anime.jpg”或完整的网络地址“http：//www.itcast.cn/images/logo.gif”。
4.8 超链接标签
在HTML标签中，< a >标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式如下：
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值,用本页面加载新网页，_blank则是创建新窗口加载页面的打开方式 |
现在了解下链接的分类来了解代码的使用：
4.8.1 外部链接
例如< a href=“http://www.baidu.com”>百度< /a >
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
即在网页中点击百度的时候将创建新窗口并且新窗口将跳转至百度页面
4.8.2 内部链接
网站内部页面之间的互相链接，直接链接内部页面名称即可，例如< a href=“index.html”> 首页 < /a>。
代码如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="index.html" target="_blank">首页</a>
</body>
</html>
点击首页跳转到自己写的另一个网页中去。
4.8.3 空链接
即没有链接可以跳转的链接
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="#" target="_blank">空链接</a>
</body>
</html>
4.8.4 下载链接
如果href里面地址是一个文件或者压缩包，则会下载这个文件，地址链接的是文件.exe或者是zip等压缩包形式
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="images/anime.rar">下载压缩包</a>
</body>
</html>
显示效果如下：
4.8.5 网页元素链接
在网页中的各种网页元素，如文本，图像，表格，银屏，视频等，都可以添加超链接
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="images/anime.jpg">查看图片</a>
</body>
</html>
4.8.6 锚点链接
第一步是在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two"> 第二集 < /a >
第二步是找到目标位置标签，在里面添加一个id属性=刚才的名字，如< h3 id=“two”> 第二集介绍 < /h3 >
通过这两步的设置即可做到在点击链接时，快速移动到某一个特殊的位置
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<a href="#t">开始寻找目标</a>
<p id="t">这里是目标</p>
</body>
</html>
4.9 注释标签
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
HTML中的注释格式如下：
以"<!--"开头，以"-->"结束
快捷键为 ctrl+ /
4.10 特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
讲 究
</body>
</html>
显示效果如下：
4.11 表格
4.11.1 表格标签
表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
< table > < /table > ：用于定义表格的标签
< tr > < /tr > ：用于定义表格中的行，必须嵌套在< table > < /table >标签中。
< td > < /td > ：用于定义表格中的单元格，必须嵌套在< tr > < /tr > 标签中。
案例如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>总成绩</td>
<td>性别</td>
</tr>
<tr>
<td>1912120315</td>
<td>Kobayashi</td>
<td>495分</td>
<td>男</td>
</tr>
<tr>
<td>1912120344</td>
<td>SatoSakura</td>
<td>521分</td>
<td>女</td>
</tr>
</table>
</body>
</html>
演示效果如下：
4.11.2 表头单元格标签
语法格式：
<th>表头单元格标签</th>
让单元格的内容居中并且黑体，使整体的表格有个显目的表头，例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>总成绩</th>
<th>性别</th>
</tr>
<tr>
<td>1912120315</td>
<td>Kobayashi</td>
<td>495分</td>
<td>男</td>
</tr>
<tr>
<td>1912120344</td>
<td>SatoSakura</td>
<td>521分</td>
<td>女</td>
</tr>
</table>
</body>
</html>
显示效果如下：
4.11.3 表格的属性
这些属性要写到表格标签 table 里面去
例子如下：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<table align="center" border="1">
<tr>
<th>学号</th>
<th>姓名</th>
<th>总成绩</th>
<th>性别</th>
</tr>
<tr>
<td>1912120315</td>
<td>Kobayashi</td>
<td>495分</td>
<td>男</td>
</tr>
<tr>
<td>1912120344</td>
<td>SatoSakura</td>
<td>521分</td>
<td>女</td>
</tr>
</table>
</body>
</html>
显示效果如下：
4.11.4 表格结构标签
因为表格可能很长，为了更好的表达表格的语义，可以将表格分割成表格头部和表格主体两大部分，在表格标签中，分别使用 < thead> 标签 为表格的头部局域， < tbody >标签为表格的主体区域，以此更好的分清表格结构
4.11.5 合并单元格
合并单元格方式：
跨行合并：rowspan=’合并单元格的个数‘
跨列合并：colspan=’合并单元格的个数‘
这里要说明目标单元格，即写合并代码的地方
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三步曲：
1.先确定是跨行还是跨列合并。
2.找到目标单元格，写上合并方式=合并的单元格数量，比如：
< td colspan="2"> </td>
3.删除多余的单元格
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<table border="1">
<tr><th colspan="3">标题 </th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</body>
</html>
显示效果如下：
4.12 列表
列表是用来布局的，最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便，根据使用情景不同，列表可以分为三大类：无序列表，有序列表和自定义列表
4.12.1 无序列表
< ul > 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用< li > 标签定义。
无序列表的基本语法格式如下：
<ul>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
...
</ul>
例子如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<ul>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ul>
</body>
</html>
显示效果如下:
**
**
无序列表的特点：
1.各个链表项之间没有顺序级别之分，是并列的
2.< ul > < /ul >中只能嵌套< li >< /li >,直接在< ul > < /ul >标签中输入其它标签或者文字的做法是不被允许的
3.< li > 与 < /li > 之间相当于一个容器，可以容纳所有元素
4.无序列表会带自己的样式属性，但在实际使用时，我们会使用CSS来设置
4.12.2 有序列表
有序列表即为有排序顺序的列表，其各个列表项会按照一定的顺序排列定义
在HTML标签中，< ol >标签用于定义有序列表，排序列表以数字来显示 ，并且使用< li >标签来定义列表项
有序列表的基本语法格式如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<ol>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ol>
</body>
</html>
显示效果如下：
1.< ol > < /ol >中只能嵌套< li > < /li >,直接在 < ol > < /ol> 标签中输入其他标签或者文字的做法是不被允许的
2.< li > 与 < /li > 之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用css来设置
4.12.3 自定义列表
在HTML标签中，< dl >标签用于定义描述列表（或定义列表），该标签会与< dt > （定义项目/名字）和< dd >（描述每一个项目/名字）一起使用
其基本语法如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
</body>
</html>
显示效果如下：
- < dl >< /dl >里面只能包含< dt > 和 < dd >。
- < dt >和< dd >个数没有限制，经常是一个< dt >对应多个< dd >。
4.13 表单标签
在HTML中，一个完整的表单通常由表单域，表单控件(也称为表单元素)和提示信息3个部分构成
4.13.1 表单域
表单域是一个包含表单元素的区域。
在HTML标签中，< from >标签用于定义表单域，以实现用户信息的收集和传递
< form >会把它范围内的表单元素信息提交给服务器
其语法格式如下：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值诶get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域= |
4.13.2 表单控件(表单元素)
在表单域中可以定义各种表单元素，这些表单元素就是用户在表单中输入或者选择的内容控件
4.13.2.1 < input >表单元素
在< input >标签中，包含一个type属性，根据不同的trpe属性值，输入字段拥有很多种形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等)
<input type="属性值" />
- < input />是单标签
- type设置不同的属性值来指定不同的控件类型
name是区分input 控件的属性,要求同类型单选框和复选框要有相同的name值
checked更多应用于单选和复选框，即打开网页的时候默认就已经选上了
maxlength规定的是文本框和密码框等他们最大可输入长度
文本框密码框例子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
p>用户名：</p><input type="text" name="uer" value="请输入值">
<p>密码：</p><input type="password" name="psw"><
/form>
</body>
</html>
name是区分同类不同个的input控件，value对文本密码框来说是默认值
显示效果如下：
单选复选框例子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
<p>用户名：</p><input type="text" name="uer">
<p>密码：</p><input type="password" name="psw">
<p>性别：</p> 男 <input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" vlaue="女">
<p>爱好：</p> 动漫 <input type="checkbox" name="cbox" value="动漫"> 游戏<input type="checkbox" name="cbox" value="游戏"> 小说<input type="checkbox" name="cbox" value="小说">
</form>
</body>
</html>
</form>
</body>
</html>
要使单选框能做到多选一的选过，则需要将他们的name属性同一，让他们成为同一个控件，而单选框复选框他们不像是文本那样可以接受什么数据，所以需要在控件中加入value属性，这样当选择完后传输服务器数据，也知道用户选择了什么哪个选项
显示效果如下：
提交按钮和重置按钮例子（submit）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
<p>用户名：</p><input type="text" name="uer">
<p>密码：</p><input type="password" name="psw">
<p>性别：</p> 男 <input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" vlaue="女">
<p>爱好：</p> <p>动漫 <input type="checkbox" name="cbox" value="动漫"> 游戏<input type="checkbox" name="cbox" value="游戏"> 小说<input type="checkbox" name="cbox" value="小说"></p>
<p><input type="submit" name="sub1" value="确定">
<input type="reset" name="res1" value="清空"></p>
</form>
</body>
</html>
显示效果如下：
文件上传按钮例子（file）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
<p>用户名：</p><input type="text" name="uer">
<p>密码：</p><input type="password" name="psw">
<p>性别：</p> 男 <input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" vlaue="女">
<p>爱好：</p> <p>动漫 <input type="checkbox" name="cbox" value="动漫"> 游戏<input type="checkbox" name="cbox" value="游戏"> 小说<input type="checkbox" name="cbox" value="小说"></p>
<p>上传本人有效证件:</p>
<p><input type="file" name="file1" value="上传"></p>
<p><input type="submit" name="sub1" value="确定">
<input type="reset" name="res1" value="清空"></p>
</form>
</body>
</html>
显示效果如下:
lable标签
< label > 标签为input元素定义标注
< label> 标签用于绑定一个表单input元素，当点击 < label >标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单input元素上，用来增加用户体验
语法：
<label for="sex"> 男 </label>
<input type="radio" name ="sex1" id="sex">
lable标签是根据input的 id 属性来进行绑定的，当点击男的时候，就可以做到选择了该单选框。
4.13.2.2 select 下拉表单元素
在页面中，如果有一个问题多个选项让用户选择，并且想要节约页面空间时，就可以使用< select >标签控件定义下拉列表
语法规范如下：
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
....
</select>
值得注意的是：
- < select > 中包含一对 < option >
- 在< option > 中定义selected =“selected”时，当前项即为默认选中项
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
籍贯：
<select>
<option>福建</option>
<option>湖北</option>
<option>湖南</option>
<option>北京</option>
<option>上海</option>
<option>广东</option>
</select>
</form>
</body>
</html>
显示效果如下：
4.13.2.3 textarea 文本域元素
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 < textarea >标签，在表单元素中，该标签时用于定义多行文本输入的控件，该控件常见于留言板，评论等。
语法规范如下：
<textarea rows="3" cols="20">
请在一百字内结束介绍
</textarea>
1.通过 < textarea >标签可以轻松地创建多行文本输入框
2.cols =“ 每行中的字符数” ,rows=“显示的行数”，我们在实际开发中不会使用，都是用css来改变大小
例子如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form name="name1"action="/" method="get">
请自我介绍： <br>
<textarea rows="3" cols="20">请在一百字内结束介绍</textarea>
</form>
</body>
</html>
显示效果如下：
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
