整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为了不再被疑似涉嫌低俗，我只能给大家提供这种图片了，耐得住寂寞才能学有所成！吸引人的东西未必珍贵。
昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换<input/>标签中的type属性的值为表单赋予不同的功能，例如输入文本和建立多选表单。期间，对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。
建立单选表单：单选表单把<input/>标签的type属性修改为"radio"（收音机），为什么单选表单使用"收音机"这个词呢？其实道理很简单，收音机调频旋钮是对应角度对应相应调频，不可能一个角度对应两个调频，所以选这个就不能选其他的表单中的type属性使用"radio"这个词表示，是不是很形象。
示例代码如下：
<form>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因为描写的是最高学历，一般人最高学历只有一个，不可能又是学士又是博士，因此使用单选表单。
向服务器提交时，name叫做"education"（教育），value对应不同层次。
页面效果如下：
大家可以点点试试，每次只能有一个被选中。如图：
综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
<form>
会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
会员密码：
<input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
兴趣爱好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>读书
<input type = "checkbox" name = "hobby" value = "film"/>电影
<input type = "checkbox" name = "hobby" value = "painting"/>绘画
<input type = "checkbox" name = "hobby" value = "music"/>音乐
<br>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>页面效果如下：
密码输入：我们在使用上述表单输入密码时发现，密码时实时显示在输入框中，这一点是不安全的，如图：
如何让密码隐藏呢？其实看过上一篇中type属性列表的小伙伴肯定猜到了，把type从"text"改为password。示例代码如下：
会员密码：
<input type = "password" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "password" name="confirmPassWord"/><br>页面效果如下：
上传文件：使用type="file"可以上传文件！
示例代码如下：写在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>页面效果如下：
点击"浏览"看下效果：
神奇！
使用图片制作按钮：将type="image"即可，代码如下：
<input type = "image" src = "img/示例图片/submit.jpg"/><br>页面效果如下：用一个src导入图片即可。
示例图片：路径自行设置即可！
为表单设置一个重置按钮：如果用户打算重置表单内容后从新填写，我们可以给他这样一个按钮：
<input type="reset" /><br>页面如图所示：
大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的<form></form>标签之间！
举个例子，如图：
下面我们点击"重置"后效果如下：
form1中的内容没有被清空，"重置"按钮所在的form2内容被清空了！
type属性值讲解我们到此结束了，hidden值这里先不给大家介绍，以后有机会再细说。
button值以后在JavaScript部分还会细说，这里也先略过。
除了<input/>外，还有其他一些标签，例如<select>或<textarea>等有趣且实用的标签，我们明天再学习吧！
今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单，写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。
碎片化的知识其实对人并没有多大作用，但是我们的时间在现代化的生活节奏中被撕地越来越碎，因此我希望大家可以利用碎片时间来学习完整的知识，所以，以短篇的形式，每天20分钟左右，通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成！
喜欢我的教程的小伙伴请关注我，点赞也会让我充满动力！
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
ava程序员学习HTML，表格和表单是用得比较多的，掌握好这2个标签的详细用法会对你非常有益！
一、table表格
表格由table标签表示，里面嵌套tr，表示一行，而tr里面嵌套td和th，表示一行有多少列。它们的具体属性和使用方法如下：
注意点：table、tr和td都有align属性，但含义不同。其中table的align表示整个表格居中对齐，而在tr中表示整行中所有的单元格中的内容居中对齐，在td中则表示该单元格中的内容剧中对齐。此外td和th还有跨行和跨列的功能。现在利用这个知识点实现一个具有层次结构的表格：
代码：
<html>
<head>
<TITLE>first page!!</title>
</head>
<body>
<table border="1" width="700px" align="center">
<tr>
<th>待执行项目</th>
<th> </th>
<th>正在执行项目</th>
</tr>
<tr>
<td valign="top">
<table border="1" width="100%" >
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
<td align="center">
<input type="button" value="移入>>" /><br/><br/>
<input type="button" value="<<移出" />
</td>
<td valign="top">
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码运行效果：
二、form表单
对于javaEE程序员，我们日常输入用户名和密码，然后提交表单，可是对表单总是懵懵懂懂，现在超详细精炼总结如下，希望可以帮到你！
希望你照着我给出的模板，每一个都去测试一下，你便会豁然开朗，从此表单提交不再困惑！
几天学习了HTML相关的基础知识之后，老师出了五道自测题，通过这几天学习的总结，和查阅相关文档，我也作出了自己的理解，以下是我学习的相关心得分享给大家。
如果想要搞清楚HTML元素、标签、属性之间的关系，首先我们应该了解3个概念：
了解上述三个概念，我明白了，一个HTML页面就是由多个元素构成，元素是由标签描述，每一个元素的特征，都是由属性决定的。
根据W3C标准，HTML是一种Web语言，它是使用一些“标签”来定义网页内容的，例如我们在一个HTML文档中写<html xmlns="http://www.w3.org/1999/xhtml"></html>，就声明了一个HTML文档的开始，里面可以放各种标签，一个HTML文档是由以下结构构成的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>
由以上代码不难看出，HTML结构层次分明，是一种具有结构层次的标记语言，通过这些标签可以告诉浏览器如何做出相应的解析。否则，如果HTML标签任意位置都能放置，就没法做标准高度统一了，那么浏览器也就无法做出正确的解析了。因此，我们看到的各种网页，都是通过这种具有结构化的标签组合而成的。
表单控件中的name值，是前端与后端进行交互时传值的变量名称，后端只有通过控件的name值才可以接收到该值进行相应的处理。
1.页面布局不灵活；
2.代码的可读性：表格布局的代码可读性低，没有使用<div>， <h1>等标签直观；
3.表格加载速度慢；
4.不利于SEO；
1.继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
2.浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
3.用户自定义：写在HTML文档<style>标签中的样式；
4.行内样式（内联样式）：写在元素的style属性中的样式。
以上就是我个人的总结，不知道是否完全正确，如果有错误的地方烦请各位指正，多谢大家。
*请认真填写需求信息，我们会在24小时内与您取得联系。
