<b></b>加粗<i></i>倾斜、
2<sup>2</sup>上标签，2的平方
2<sub>2</sub>下标签
【标注】
✕
<b></b>加粗<i></i>倾斜、
2<sup>2</sup>上标签，2的平方
2<sub>2</sub>下标签
【标注】
align对齐属性
<p align="right">居右对齐
center居中
left居左
<br/>换行
<hr/>横线
<h1>字体增大加粗
<h2><h3>.....<h6>字体大小一次减小，且独占一行
<p></p>段落标签
1.html语法不区分大小写，但是语法规范一般用小写。
2.有开始必须有结束。
3.单个标记<hr/>这为一条线
HTML CSS Js
HTML是什么？
百度百科：https://baike.baidu.com/item/HTML/97049
总结：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言。HTML是用来开发网页的。（网页后缀 html，htm）html是标记语言不是编程语言。
超文本：超级文本，比文本更加牛逼，可以更加丰富的呈现文字信息。
标记：也叫做标签，这个是html里面的一个基本语法，所有的结构都是通过标记来控制的。
为什么学习HTML？
HTML网页开发在JavaEE开发中的承担的部分。（网页设计师+JavaEE工程师）
在团队中会有专门的人，做网页开发，那我们为什么还需要学习HTML？虽然我们不需要能够开发精美的网页，因为我们需要拿到人家开发好的网页，并且能看到人家的网页代码，后后续的开发，所以我们需要掌握HTML和其他网页前端的知识。
本课程的适用对象?
网页零基础入门课程
Web前端工程师
JavaEE工程师
PHP Web工程师
Python Web工程师
.net Web工程师
html xhtml html5
使用什么开发工具？
notepad++
记事本 word sublime dreamweaver
学习方法？
一定要跟着老师练习，不要认为看了一眼简单，就不练了。
遇到不会的单词怎么办？
自己查询词典（有道词典），记录笔记！
html的版本：html xhtml html5
http://www.w3school.com.cn/h.asp
创建第一个HTML文件？
里面显示Hello World。
显示其他内容。
如何更加丰富的控制这个网页？
通过标记
什么是标记？
<xxx></xxx>
<xxx>是开始标记</xxx>是结束标记，xxx是标记名
标记的语法
成对的标记，必须有开始标记，必须有结束标记。
单个的标记<xx/> 直接结束，xx是标记名。
不区分大小写 <Html></Html>
所有标记和标记的属性都是英文输入法
(html的语法不严谨，在很多种情况，下都可以识别出来，
比如大小写，标记里面加空格，不写结束标记
我们编写的时候，尽量严谨一点！)
html语法比较随意，在很多时候，可以自行测试效果。
基本网页结构
<html>
<title>标题</title>
<body>身体</body>
</html>
文档类型声明
<!DOCTYPE html>放在第一行
http://www.w3school.com.cn/tags/tag_doctype.asp
网页编码声明
<meta ="Content-Type" content="text/html;charset=utf-8"/>
放在head标签里面
(支持中文的utf-8 gbk gb2312)
标题标签
<hn></hn> n从1到6，逐渐变小。（加速，行距，单独一样）
注释
<!--这里是注释-->
水平线
<hr/>
换行
<br/>
段落标签（分段落，自动换行，跟其他段落间距）
<p alight="left center right justify"></p>
预格式标签
<pre></pre>
标记的属性（可以有多个属性，不分先后顺序）
<xxx name="value"></xxx>
<xxx name="value"/>
字体
<font></font>
<font color="red" size="1~7" face="字体幼圆"></font>
修饰标签
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下标 <sub></sub> <sup></sup>
显示特殊符号
http://www.w3school.com.cn/html/html_entities.asp
图片
<img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx 90%" height = "xxxpx 10%" alt="解释" />
如果使用百分比的时候，是相对于父容器大小的百分比
alt的作用：http://www.w3school.com.cn/tags/att_img_alt.asp
alt利于搜索引擎的搜索
相对路径和绝对路径
path =
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg (相对路径就是从当前路径寻找，当前路径只的是当前html所在路径)
下一级路径 xx/xx.jpg
path="C:\Users\souke\Desktop\web01\01.jpg"
一般在项目中都使用相对路径
w3dschool HTML教程（可以当做字典来查询）
http://www.w3school.com.cn/html/index.asp
可自行搜索w3cschool离线手册
无序列表
<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>
超级链接
<a href="http://www.baidu.com" target="">百度</a>
<a href="web02.html">百度</a>
可以是本机页面，也可以是任意的网页地址(内部链接或者外部链接)
空链接
href="#"
超级链接可以给文字或者图片添加
target
_self _blank _top _parent
title属性
手放在链接上的时候显示的提示文字
name属性
定义锚名称
跳转到锚点
（可以使用某个文字或者某个图片作为锚点，也可以定义一个空的锚点）
href="#锚名"
跳转到别的页面的锚点位置
href="xxx.html#锚名"
邮件链接
<a href="mailto:admin@sikiedu.com">给我发</a>
文件下载
<a href="xxx.zip">下载</a> 浏览器会根据链接类型，决定是否下载。
空格
--------------------------------------------第二章
表格 tr:table row td table data
<table border="1px" width="34px xx%" height="12px" align="center" bgcolor="red" cellspacing="3px" cellpadding="10px">
<tr height="23px" bgcolor="#00ee90">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
table上的属性 border width height align bgcolor cellspacing cellpadding
tr上的属性 align水平对齐方式 valign垂直对齐方式 bgcolor width height
td上的属性 height bgcolor
表格合并操作
合并多列
<td colspan="2">row 1, cell 1</td>
合并多行
<td rowspan="2">row 1, cell 1</td>
多列多行合并
<td colspan="2" rowspan="2">row 1, cell 1</td>
商品上月本月销量销售额销量销售额手机100500200400笔记本20045045700
百分比
单元格里面可以嵌套子表格
被嵌套的表格是一个完整的表格
要放在td，某个单元格里面
表格的表头
效果：内容居中，加粗显示
注意：可以有多个表头
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的标题
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
表格的布局
做siki学院的课程页面的布局
如何查看网页源代码
F12调试
------------------------------------------------表单
自己写一遍，有个印象就可以了，不用背不用记，后续遇到了再查询
表单的作用
注册账号
登录账号
发表话题
发表问题
总结：需要输入信息，并提交给服务器的地方
表单的作用就是把用户输入的信息，发送给服务器处理。
表单标签
<form></form>
在表单标签里面可以包含各种其他标签
文本框，文本域，列表，单选框，多选框，按钮......
上述一个或者多个来组成一个表单
input 输入
textarea 文本域
select 下拉列表
option 下拉列表的项
button 按钮
......
input 可以做文本输入框，按钮，文件，单选按钮，复选按钮
<input type="" name="" />
text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片
<input type="text" /> text和password
其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息
单选框
<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>
复选框
<input type="checkbox" name="hobby" value="reading" checked />
按钮(普通按钮，提交按钮，重置按钮)
<input type="button" name="" value="普通按钮" />
<input type="submit" name="" value="" />
<input type="reset" name="" value="" />
图片提交按钮按钮
<input type="image" name="image_submit" src="xxx.jpg" />
隐藏域
<input type="hidden" name="" value=""/>
下拉列表
<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
例子：月份选择，城市选择
文本域
<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>
form表单属性
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）
name 表单名字
target _self _blank
提交一个表单，相当于点击了一个超链接，打开了一个新的网页，不过通过表单的方式请求
网页的时候，这个请求里面是带有数据的。
enctype http://www.w3school.com.cn/tags/att_form_enctype.asp
---------------------------框架
<frameset cols="25%,75%"> rows上下划分 cols 左右划分
<frame src="frame_a.htm"/>
<frame src="frame_b.htm" name="myname"/>
</frameset>
frame的name，可以作为超链接的target（目标）
注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
403-使用框架实现后台管理系统的布局.html
<html>
<frameset rows="10%, *">
<frame src="top.html" name="top" />
<frameset cols="10%, *">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<title>top</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body align="center">
<br />
欢迎进入SiKi学院后台管理系统
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<title>left</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body align="center">
<a href="商品管理.html" target="right">商品管理</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<title>right</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body align="center">
今天新增了10000个学员，有900个用户新注册。
</body>
</html>
商品管理.html
<!DOCTYPE html>
<html>
<head>
<title>商品管理</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body align="center">
这个是商品管理界面。
</body>
</html>
<html>
<frameset rows="25%, *">
<frame src="frame_a.html" name="top" />
<frameset cols="25%, *">
<frame src="frame_b.html" />
<frame src="frame_c.html" />
</frameset>
</frameset>
</html>
401-使用框架切分网页.html
<html>
<frameset rows="25%, 75%">
<frame src="frame_a.html" name="top" />
<frame src="frame_b.html" name="bottom" />
</frameset>
</html>
frame_a.html
<!DOCTYPE html>
<html>
<head>
<title>frame a</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body>
frame a
</body>
</html>
frame_b.html
<!DOCTYPE html>
<html>
<head>
<title>frame b</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body>
frame b
</body>
</html>
frame_c.html
<!DOCTYPE html>
<html>
<head>
<title>frame b</title>
<meta ="Content-Type" content=
"text/html;charset=utf-8"/>
</head>
<body>
frame b
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>311-文件上传</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<!-- HTML <form> 标签的 enctype 属性 -->
<!-- https://www.w3school.com.cn/tags/att_form_enctype.asp -->
<form action="210-表格布局实战三控制课程介绍的布局.html" method="post" name="registerform" enctype="multipart/form-data"> <!-- Jsp Servlet method="get","post" -->
<input type="hidden" name="id" value="100" />
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr>
<td>生日</td><td>
<select name="month" size="3" multiple>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day">
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
</select>
</td>
</tr>
<tr>
<td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由！" rows="10" cols="100">放置默认值的地方AAAAAAAAAAAAABBBBBBBBBBBB</textarea></td>
</tr>
<tr>
<td>文件上传</td><td><input type="file" name="resume" /></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
<tr><td colspan="2" align="center"><input type="image" src="Img/register.png" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>310-表单的属性</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<!-- HTML <form> 标签的 enctype 属性 -->
<!-- https://www.w3school.com.cn/tags/att_form_enctype.asp -->
<form action="210-表格布局实战三控制课程介绍的布局.html" method="post" name="registerform"> <!-- Jsp Servlet method="get","post" -->
<input type="hidden" name="id" value="100" />
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr>
<td>生日</td><td>
<select name="month" size="3" multiple>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day">
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
</select>
</td>
</tr>
<tr>
<td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由！" rows="10" cols="100">放置默认值的地方AAAAAAAAAAAAABBBBBBBBBBBB</textarea></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
<tr><td colspan="2" align="center"><input type="image" src="Img/register.png" /></td></tr>
</table>
</form>
</body>
</html>
https://www.w3school.com.cn/tags/att_form_enctype.asp
<!DOCTYPE html>
<html>
<head>
<title>309-文本域完成大段文本的输入</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<input type="hidden" name="id" value="100" />
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr>
<td>生日</td><td>
<select name="month" size="3" multiple>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day">
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
</select>
</td>
</tr>
<tr>
<td>交友宣言</td><td><textarea name="message" placeholder="可以说一下你的交友理由！" rows="10" cols="100">放置默认值的地方AAAAAAAAAAAAABBBBBBBBBBBB</textarea></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
<tr><td colspan="2" align="center"><input type="image" src="Img/register.png" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>308-下拉列表</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<input type="hidden" name="id" value="100" />
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr>
<td>生日</td><td>
<select name="month" size="3" multiple>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day">
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
</select>
</td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
<tr><td colspan="2" align="center"><input type="image" src="Img/register.png" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>307-图片提交按钮和隐藏控件</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<input type="hidden" name="id" value="100" />
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
<tr><td colspan="2" align="center"><input type="image" src="Img/register.png" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>306-提交按钮、重置按钮和普通按钮</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<table>
<tr><td>账号</td><td><input type="text" name="username" value="sikiedu" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="普通按钮" /><input type="reset" name="reset" value="设置为默认" /><input type="submit" name="register" value="注册" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>305-多选按钮（爱好选择）</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<table>
<tr><td>账号</td><td><input type="text" name="username" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
<tr><td>是否是中国人</td><td>是<input type="radio" name="ischinese" value="true" checked />不是<input type="radio" name="ischinese" value="false" /></td></tr>
<tr>
<td>爱好</td><td>读书<input type="checkbox" name="hobby" value="1" checked />游泳<input type="checkbox" name="hobby" value="2" />旅游<input type="checkbox" name="hobby" value="3" checked />玩游戏<input type="checkbox" name="hobby" value="4" /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>304-单选按钮</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<table>
<tr><td>账号</td><td><input type="text" name="username" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr>
<tr><td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="sex" value="man" checked />女<input type="radio" name="sex" value="woman" />不男不女<input type="radio" name="sex" value="manwoman" /></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>303-文本输入控件的一些属性</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<table>
<tr><td>账号</td><td><input type="text" name="username" maxlength="6" placeholder="请输入你的用户名" /></td></tr>
<tr><td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td></tr> <!-- value="123" -->
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>302-文本和密码输入框</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<table>
<tr><td>账号</td><td><input type="text" /></td></tr>
<tr><td>密码</td><td><input type="password" /></td></tr>
</table>
</form>
</body>
</html>
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
<!DOCTYPE html>
<html>
<head>
<title>我是标题</title>
<meta ="Content-Type" content="text/html;charset=utf-8"/>
<!-- utf-8 gbk gb2312 -->
</head>
<body>
<table width="100%" bgcolor="#EEEEEE">
<tr bgcolor="#242424" height="70px" cellspacing="0" cellpadding="0">
<td>
<table width="100%" height=100%><tr height="100%" align="center">
<td width="100px"><Img src="Img/logo.png" height="50px" /></td>
<td width="70px"><font size="2" color="#DDDDDD">首页</font></td>
<td width="70px"><font size="2" color="#DDDDDD">全部课程</font></td>
<td width="70px"><font size="2" color="#DDDDDD">Unity</font></td>
<td width="70px"><font size="2" color="#DDDDDD">Unreal</font></td>
<td width="70px"><font size="2" color="#DDDDDD">关于我们</font></td>
<td></td>
<td width="70px"><font size="2" color="#DDDDDD">登录</font></td>
<td width="70px"><font size="2" color="#DDDDDD">注册</font></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table width="1000px" align="center"><tr><td><font size="2">首页 / JavaEE / Java编程学习第四季 / 默认教学计划</font></td></tr></table>
</td>
</tr>
<tr>
<td>
<table width="1000px" align="center">
<tr height="100px" bgcolor="white"><td colspan="3" align="center">已完成 0/58 任务学习有效期 永久有效</td></tr>
<tr height="15px"><td colspan="3"></td></tr>
<tr height="700px"><td width="600px" bgcolor="white">
<ul>
<li>101-课程简介</li>
<li>102-代码执行的先后顺序</li>
<li>103-断点调试（单步执行程序）</li>
<li>104-进程和线程是什么</li>
<li>105-创建线程的第一种方法</li>
<li>106-CPU是如何处理多线程的运行的</li>
<li>107-线程调度规则</li>
<li>108-设置优先级（抢占式调度规则）</li>
<li>109-多个线程的开启和名字设置</li>
<li>110-线程的各种设置</li>
<li>111-线程的生命周期</li>
<li>112-实现Runnable接口（创建线程第二种方式）</li>
<li>113-两种创建多线程的区别</li>
<li>114-匿名内部类创建线程</li>
<li>115-使用Thread实现卖票</li>
<li>116-使用Runnable实现卖票</li>
</ul>
</td><td width="20px"></td><td width="280px" bgcolor="white"></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr height="200px" bgcolor="#000000" align="center">
<td>
<font size="2" color="#DDDDDD">课程存档</font><br/><br/>
<font size="2" color="#DDDDDD">课程内容版权均归 SiKi学院 所有 京ICP备16046985号</font>
</td>
</tr>
</table>
</body>
</html>
