HTML
JavaWeb基础体系
HTML前端开发流程
网页的组成部分
网页由三部分组成**： 内容（结构）、表现、行为**
内容（结构）：是我们在页面中可以看到数据，我们就称为内容，一般内容使用—》HTML技术展示
表示：指的是这些内容在页面上展示的形式：比如：布局，颜色，大小等等 —》 CSS技术展示
行为： 指的是页面中元素与输入设备之间的交互相应 。一般使用 —》 JavaScript技术实现
什么是网页？
网页,网站中的一个页面，通常是网页是构成网站基本元素，是承载各种网站应对平台，通俗的说，网站就是由网页组成
HTML简介
HTML全称 Hyper Text Markup Language(超文本标记语言)
超文本标记语言是标准通用标记语言（SGML）下一个应用，也是一种规范和标准，它通过标记符号来展示网页中需要展示内容部分
HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在这个文本文件中添加标记符号，可以实现HTML语言提供展示效果，例如：文件如何处理，页面如何排版，图片如何展示，音频，视频等等
简单一句话：HTML是一门用创建网页的标记语言
HTML特点
主要特点如下：
1.简易性：超文本标记语言版本升级采用超级方式，从而个更加灵活方便。
2.可扩展性：超文本标记语言采取了元素标签的形式，为系统扩展带来方便
3.平台性无关：超文本标记语言可以使用在广泛的平台，这个也是为什么万维网（www）盛行的一个原因
4.通用性：HTML是网络通用语言，一种简单、通用的标记语言
HTML的发展
超文本标记语言 --》 在1993年6月诞生的一个版本
HTML2.0 --》1995年11月，已经是一个标准
HTML3.2 --》 1997年1月 W3C标准
HTML4.0 --》 1997年12月 W3C标准
HTML 4.01–》 1999年12月 提供微小的改进 W3C标准
PS: W3C表中：XHTML1.0 --> XHTML1.1 -->XHTML2.0 -->XML
HTML 5 —》 2014年10 W3C标准
如何创建HTML工程
HTML第一个程序和结构
<!--HTML语言注释兼容XML-->
<!--声明约束， 文档声明：告诉浏览器使用是HTML5版本-->
<!DOCTYPE html>
<!--html标签，表示html的开始， lang="zh_CN"表示中文（可以省略不写）
html 表中中一般分为两个部分 分别是head和boby-->
<html lang="en">
<!--HTML标签分为两种 一种是双标签（又开始有结束） 一种是单标签（有结束）-->
<!--head表示是网页的头部，表示头部的信息，一般包含三个部分
title标签
css标签
js 代码-->
<head>
<!--meta表示可以对网页进行一些特殊设置，其中就包含网页页面编码集
表示当前网页使用UTF-8编码集-->
<meta charset="UTF-8">
<!--设置页面的标题，标题展示-->
<title>第一个页面</title>
</head>
<!--网页的主体，所有展示空白位置都是boby 即从<boby>开始 到 </boby>-->
<body>
<!--需要展示的页面信息-->
第一个页面：内容是 你好！！！
</body>
</html>
总结：
1.HTML页面包含头部head和主体boby
2.HTML标签通常是成对出现，有开始就要有结束，这样的标签称为【双标签（成对标签）】，没有结束标签称之为【空标签】
3.HTML标签通常都【属性】，以便是写在标签名后面<>里面 格式： 属性名= 属性值，多个属性之间使用【,】分隔
4.HTML标签不区分大小写，但是建议小写
5.文件的后缀名为.html或.htm 但是建议写 .html
特别说明：
Java文件需要编译再由java虚拟机跑起来，但HTML文件它不需要编译，直接由浏览器进行解析和执行
运行HTML文件
HTML标签介绍
标签说明
1.标签的格式： <标签名>封装的数据(标签中可以展示什么)</标签名>
已知标签
<html></html> : 跟标签【表示是HTML文件】
<head></head> : 头标签
<title></title> : 网页标题标签
<boby></boby> : 主体标签：网页所展示的内容
2.标签大小写不敏感【建议小写】，标签拥有自己的属性。
2.1 基础属性 例如：
可以简单的样式效果
2.2 事件属性 例如：
可以直接设置事件相应代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签展示介绍</title>
</head>
<!--属性 bgcolor 背景颜色 background 背景图片-->
<body bgcolor="green",background="相对路径相对于工程">
<!--font 字体标签--> <!--这个标签在HTML5中被CSS代替了，不建议直接使用font-->
<!--属性: color 文本颜色
颜色表示一种是 颜色单词 另外一种RGB模式 #十六进制【6位置】#R（2位）G(2位)B（2位）
size 文本的大小【字号】 -->
<font color="red">内容</font>
<font size="30">内容</font>
</body>
</html>
3.标签样式
3.1单标签 <标签名/ > --》 br换行 hr水平线
3.2 双标签**<标签名> 封装的数据 </标签名>**
标签语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签语法</title>
</head>
<body>
<!--1.标签不能交叉-->
正确：<div><span> 千锋 Java is best NO.1</span></div>
错误：<div><span> 千锋 Java is best NO.1</div></span>
<hr />
<!--在编译器中语法出现错误，但是浏览器还能展示展示出来？-->
<!--
这是因为浏览器会扫描这些标签并对这个些标签进行自动修复，我们不能因为浏览器可以自动修复就任意写标签
浏览器只能修复简单标签，但是复杂的浏览器是不能修复
以上才是页面正产展示的原因
PS：标签使用有问题，浏览器展示如何报错，标签内的内容无法显示出正常的效果
-->
<!-- div标签【双标标签】， 称为区隔标记，可以定义在范围内拜访的任意标签-->
<!-- span标签【双标标签】， 在行内定义一个区域，也就是一行内容可以被span划分为几个区域，从而得到某种特定效果
span标签没有属性-->
<!--span和div一起使用 相当于span在css中一个行内属性 div属于一个块级元素，div即是一个大容器 sapn即是一个小的容器-->
<!--1.标签必须正确的闭合-->
正确：<div>千锋 Java is best NO.1</div>
错误：<div>千锋 Java is best NO.1
<hr />
<!--2.没有文本内容标签-->
正确：<br/> 我是一个换行
错误：<br> 我是换行
<hr />
<!--3.标签属性必须有值，属性值必须加双引号-->
正确：<font color="red">千锋 Java is best NO.1</font>
<!--因为HTML5中对语法要求有所简化 所以这个颜色也可以这样传递，但是不建议-->
错误：<font color=red>千锋 Java is best NO.1</font>
错误：<font color>千锋 Java is best NO.1</font>
<hr />
<!--4.注释不能嵌套-->
正确：<!--我是一个注释--><br/>
错误：<!--我是一个注释<!--我是一个注释-->--><br/>
<hr />
</body>
</html>
HTML基础标签
结构标签
<html></html> : 跟标签【表示是HTML文件】
<head></head> : 头标签
<title></title> : 网页标题标签
<boby></boby> : 主体标签：网页所展示的内容
font 设置字体 boby上可以设置颜色和背景图片
排版标签
1.注释标签<!--注释--> 存在于文件的任何位置
2.换行标签<br/> 存在boby中
3.段落标签<p>文本文字</p> 存在在boby中
属性 align 对齐方式(left 左对齐， center 居中 right 右对齐)
4.水平标签 <hr/> 存在boby中
属性"
width ： 水平线长度（两种： 1.像素px 2.百分比 10%）
size ： 水平线的粗细（像素 10px）
color ： 水平线的颜色
align : 对齐方式(left 左对齐， center 居中 right 右对齐)
<p align="center">文本文字</p>
<hr width="100px" size="30px" color="red" align="center"/>
标题标签
<h1></h1> ~ <h6></h6>
随着数字文字逐渐表现， 字体是加粗的，内置字号，默认占一行
<h1>1号标签</h1>
<hr/>
<h2>2号标签</h2>
<hr />
<h3>3号标签</h3>
<hr />
<h4>4号标签</h4>
<hr />
<h5>5号标签</h5>
<hr />
<h6>6号标签</h6>
<hr />
容器标签
<div></div> 块级标签，独占一行，换行
<sapn></sapn> 行级标签，所有内容都是在同一行
<div>
主要结合CSS进行页面分块布局
<span>主要是进行友好提示使用</span>
</div>
列表标签【必须会用】
无需列表（使用是符号）
ul （unorder list）
无序列表标签 <ul></ul>
属性： type 三个值 circle（圆心） disc （实体圆心（默认））,square(黑色方块)
列表选项列 <li></li>
<div >
<ul type="square"> 无序列表
<li>冷面</li>
<li>拌饭</li>
<li>烤肉</li>
</ul>
</div>
有序列表（代编号）
ol（order list）
有序列表属性 <ol></ol>
属性： type ： 1 、A 、a、I、i（数字，大小写字母，大小写罗马数字）。默认标号是数字
start ：整数值，设置编号其实位置 默认是1
reversed ： 反向排序， 数字改为由大到小【IE9不支持】
列表项<li></li>
属性 value 整数值，设置列开始值，只能使用在编号列表中（当前列修改，后续列都会被修改）
<ol type="I"> 有序列表
<li>冷面</li>
<li>拌饭</li>
<li>烤肉</li>
</ol>
定义列表
dl 定义列表
dt 定义标题
dd 定义描述
PS：主要适用于主体与内容两段文字
</ol>
<dl > 定制列表
<dt>标题</dt>
<dd>内容</dd>
</dl>
</div>
列表嵌套
<div>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
图片标签【记住】
<img/> 独立（单）标签：
src： 图片路名 相对路径（同一个网站内） 绝对路径（不同网站）
width：宽度 height：高度 border：边框
align 对齐方式【代表图片与相邻文件的相对位置】（三个属性值：top、middle、bottom）
alt：图片的文字说明
title：图片的悬停显示
hspace和vspace 设定图片边沿 上下左右空白 【以免图片和文字太近了】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- File 提供对文件或文件夹封装使其成为一个文件类对象，可以对其操作
JavaSE中路径需要分为 相对路径和绝对路径
相对路径： 从工程开始算【相对工程】
绝对路径： 从系统盘符开始的路径 盘符：/目录/文件
在web工程路径也是分为了相对路径和绝对路径两种
相对路径：
. 表示当前文件所在目录
.. 表示当前文件所在的上一层目录
如果想表示当前文件所在目录 可以这样的形式表示 ./文件名--》表示在当前目录下的一个文件 默认 ./可以省略
ps：IDEA中是可以帮组编程者进行一个相对路径查找
绝对路径 ：
正确格式： http://ip地址：port端口号/工程名字/资源路径
错误格式： 盘符：/目录/文件名
-->
<!--路径错误，无法找到资源文件-->
<img src="1.jpg" width="200" height="260" border="10" alr="美女没有找到">
<!--相对路径-->
<img src="imgs/3.jpg" width="200" height="260" border="1">
<img src="imgs/4.jpg" width="200" height="260" border="1">
</body>
</html>
连接标签【记住】
超链接 它可以是一个文本，也可以是图像，可以点击这个内容进行跳转，可以跳转到指定的路径【绝对路径/相对路径】
1.页面跳转
<a> 文本或图片 </a>
属性:
href:跳转页面的地址
target：打开网页的方式 _self当前窗口打开（默认）_blank 会在新窗口打开
_parent 当前窗口打开，如果子框架网页中，则会在上一层框架中打开目标网页
_top 会在浏览器窗口打开，如果在框架的使用，网页所在框架会被删除
<body>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度_self</a><br/>
<a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>
</body>
2.锚连接
在同一个页面中进行跳转
name：名称【锚点】（顶部（#top）、底部（#bottom）、中部（#center））
<body>
<a name ="top" href="#center">跳转到中间</a><br/>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<a name = "center" href="#bottom">跳转到底部</a><br/>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<p>页面内容</p>
<a name = "bottom" href="#top">跳转到顶部</a><br/>
</body>
表格标签【非常重要】
表格在页面中展示是由【表格标签定义】
每个表格有若干行【表格标签定义】，每行被分隔为若干单元格【表格定义】
数据单元格可以包含：文本、图片、列表、段落、表单、水平线、表格等等
普通表格
table 标签【表示表格】
tr 标签【表示行】
td 标签【单元格】
整体属性设置
table 可以设置
border：边框的宽度， bordercolor 边框的颜色 cellspacing 单元格距离 width 宽度 height 高度
ps: cellspacing <单元格和外边框相邻但重合>
align 控制当前表格的对其形式 left center right
tr align属性控制内容的对齐方式 left center right 【整体（一行内）】
td align属性控制内容对对齐方式 left center right 【单元格（一个）】
td valign属性控制内容对对齐方式 top middle bottom 【单元格（一个）】
PS： 表中可以使用b标签，是一个成对的标签，它可以加粗表格内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td><b>10086</b></td>
<td>中国移动</td>
</tr>
</table>
</body>
</html>
表头标签
th 表头标签
表头标签的作用就是代替 <td align="center"><b></b></td> 居中加粗
一般表格的时候默认第一行都是居中加粗，所以一般就是用th代替td做第一行
<body>
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>10086</td>
<td>中国移动</td>
</tr>
</table>
表格合并
表格列的合并
colspan 属性设置跨列
标准版本表格：
<body>
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学生成绩表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>各科成绩</td>
</tr>
<tr>
<td>10086</td>
<td>中国移动</td>
<td>90</td>
<td>100</td>
</tr>
</table>
</body>
修改将学生成表这一行拉满，各科成绩拉满，以最多的单元格类为基准，所以当前表格是一个3行4列的一个效果，学生成绩表如果想拉满，需要拉倒第4列（4个单元格）， 各科成绩拉满。需要拉2个单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签合并</title>
</head>
<body>
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<!--对td单元格进行属性设置-->
<td colspan="4" align="center">学生成绩表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2" align="center">各科成绩</td>
</tr>
<tr>
<td>10086</td>
<td>中国移动</td>
<td>90</td>
<td>100</td>
</tr>
</table>
</body>
</html>
表格行合并
rowspan属性设置跨行
第三行和第四行 学号和姓名都是同一个，除了各科成绩不同之外，剩余第三行的内容和第四行内容只要展示一个即可 一个10086 和一个中国移动， 就可以展示 不同成绩
修改代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签合并</title>
</head>
<body>
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<!--对td单元格进行属性设置-->
<td colspan="4" align="center">学生成绩表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2" align="center">各科成绩</td>
</tr>
<tr>
<td rowspan="2">10086</td>
<td rowspan="2">中国移动</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<!--删除两个单元格数据-->
<td>95</td>
<td>99</td>
</tr>
</table>
</body>
</html>
总结：如果表格中需要列合并 colspan 如果表格需要行合并 rowspan
练习：新建一个五行，五列的表格，第一个行，
第一列的单元格要跨两列
第二行第一列的单元格要跨两行，
第四行第四列的单元格要跨两行两列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签合并</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500" height="500">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>
文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化标签</title>
</head>
<body>
<b>大宝</b> <!-- 定义粗体文字 --><br/>
<big>大宝</big> <!-- 定大字号 HTML5中过时，但是HTML4可以使用--><br/>
<em>大宝</em> <!-- 定义重文字 --><br/>
<i>大宝</i> <!-- 定义斜体 --><br/>
<small>大宝</small> <!--定义小号字--><br/>
<strong>大宝</strong> <!--定义加强语义--><br/>
O<sub>2</sub> <!--定义下标文字--><br/>
2<sup>2</sup> <!--定义上标文字--><br/>
<!--
b标签和i标签 与 em和strong 在浏览器中展示的效果是一样，后面着两个主要是语气词
ps：其实用户看到的效果都是一样，所以不需要过度区分
-->
</body>
</html>
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例</title>
</head>
<body>
<!--顶部视图：第一个div块-->
<div>
<!--将第一行内容的输出看做时一个表格-->
<table>
<tr>
<td>千锋教育-稀有的坚持全程面授品质的大型IT教育机构</td>
<td width="880px"></td>
<td align="right">
<!-- 表示一个空格-->
<a> 好程序员特训营 </a>
<a> 扣丁学堂 </a>
<a> 联系我们 </a>
<a> 加入收藏 </a>
</td>
</tr>
</table>
</div>
<!--logo图标-->
<div>
<table>
<tr>
<td><img src="综合案例素材/new_logo.png" /></td>
<td width="1000px"></td>
<td><img src="综合案例素材/nav_r_ico.png" /></td>
</tr>
</table>
</div>
<!--菜单视图-->
<div align="center">
<hr/>
<span> 首页 </span>
<span> 课程培训 </span>
<span> 教学保证 </span>
<span> 免费视频 </span>
<span> 企业合作 </span>
<span> 免就业喜报 </span>
<span> 学员天地 </span>
<span> 关于千锋 </span>
<span> 学员论坛 </span>
<hr/>
</div>
<!--导航视图-->
<div align="right">
<!--大于号的符号>-->
首页>课程培训>JavaEE列表
</div>
<!--分类名称-->
<div >
<h2><strong>课程培训</strong></h2>
<h4><strong>共XX种课程视频</strong></h4>
<hr/>
</div>
<!--分隔图片-->
<div>
<img src="综合案例素材/001.png">
</div>
<!--图书模块展示-->
<div>
<table width="100%">
<tr align="center">
<td>
<img src="综合案例素材/002.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/003.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/004.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/005.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/006.png"><br/>
书名：XX<br/>
售价：XX
</td>
</tr>
<tr align="center">
<td>
<img src="综合案例素材/007.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/008.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/009.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/010.png"><br/>
书名：XX<br/>
售价：XX
</td>
<td>
<img src="综合案例素材/011.png"><br/>
书名：XX<br/>
售价：XX
</td>
</tr>
</table>
</div>
<!--底部内容-->
<div>
<table bgcolor="#efeedc" width="100%">
<tr>
<td><img src="综合案例素材/new_logo.png"/></td>
<td width="1000px"></td>
<td align="center">CONTACT US<br/>
©2008 ®千锋教育
</td>
</tr>
</table>
</div>
</body>
</html>
HTML表单标签【必须必须必须要会】
什么是表单？
表单就是HTML页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
form标签
<!--
form标记就像是一个容器，其中会放置各种表单组件
常用属性：
action： 表示动作， 指向服务器的地址，把表单数据提交到地址上进行处理
method： 请求方式 get 和 post
enctype：表单提交数据类型
默认值： appliaction/x-www-form-urlencoded 普通表单文件
multipart/form-data 多部分表单【一般用于文件上传】
text/plain 普通为本
-->
ps：
1.get请求将数据存储在【地址栏】中，请求参数都在地址后拼接
例如 http://baidu.com/?name="zhangsan"&password=1234
get请求不安全，但是效率高，get请求大小有限制，不同浏览器有不同的限制，大于是2KB
使用情况： 一般是查询数据的时候，使用get请求
2.post请求地址栏中没有数据，请求参数是单独处理，安全，效率低，post请求大小理论中是无上限
使用情况： 一般是用于插入，修改等操作
form表单中Input标签
<!--
form标记就像是一个容器，其中会放置各种表单组件,在这里可以使用到 input标签了
畅通属性
type： 根据type输出不同组件名称可以得到不同表单组件
text 文件输入框 password 密码输入框 radio 单选框 checkbox 复选框
reset 重置按钮 会将表中中所有组件中值，回复到默认
submit 提交按钮 会将表单中的数据按照form标签中action设置的地址进行方
button 普通按钮 通常会搭配JS使用
file 文件上传域
hidden 隐藏域 当要发送某些信息的时候，这些信息是不需要用户参与，就可以进行隐藏
当你点击提交的时候数据就会发送给服务器
name 文本框的名字，方便表单处理程序时可以辨别是哪个文本框
value 文本框的默认值，可以省略不写，文本框默认是白色，也可以添加
size 文本框长度，数字越大，文本框越长，可以省略，默认是20
maxlength 文本框中字数限制，默认可以省略，最大就是255字符
autofocus 自动获得焦点，也就是网页加载之后会自动将光标移动到这个文本框
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>from表单之Input标签</title>
</head>
<body>
<form>
用户名：<input type="text" name="username" value="默认值" size="10" maxlength="10"/> <br/>
密码： <input type="password" name="password" size="10"><br/>
<!--checked默认选中状态-->
性别: <input type="radio" name="gender" value="男" />男生
<input type="radio" name="gender" value="女"/>女生
<br/>
爱好: <input type="checkbox" name="interest" value="吃饭" size="10" checked />吃饭
<input type="checkbox" name="interest" value="睡觉" size="10" />睡觉
<input type="checkbox" name="interest" value="打豆豆" size="10" />打豆豆
<br/>
<input type="submit" name = "s1" value="提交"/>
<input type="reset" name = "s1" value="重置"/>
<input type="button" name = "b1" value="按钮"/>
<input type="file" name="upload"/>
<input type="hidden"/>
</form>
</body>
</html>
form表单中select标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>from表单之Select标签</title>
</head>
<body>
<form>
<!--select 是一个双标签
属性：
name列表的名字
size 列的行数， 当size=1时是下拉式 当size=选项总数的时候选择式列表
当size>=1 并且 <= 选项总数的时候【滚动式】
默认值是1
-->
<!--
<option>列表选项</option> 属性是value 这个值会上传到服务器端 selected 默认选中
-->
<select size="1" name="sport">
<option value="游泳">游泳</option>
<option value="蓝球">蓝球</option>
<option value="足球" selected>足球</option>
<option value="排球">排球</option>
</select>
</form>
</body>
</html>
form表单中textarea标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单textarea标签</title>
</head>
<body>
<!--textarea多行文本框
name 文本框的名字 clos 文本框的宽度 rows 文本框的行数【高】
wrap 设置文本框提交是的数据换行 hard会在输入超过cols宽度自动换行 soft是不换行（默认值）-->
<textarea name="rename" cols="15" rows="20"></textarea>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
