一、HTML基础内容
1.HTML文档基础结构
<!--html语言中的注释--><!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5--><html><!--html标签：html文档正式开始--><head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置--><meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8--><!--常见的编码：国际化——utf-8,中文编码——GBK--><title>无标题文档</title><!--title标签：设定此网页的标题--></head><!--html文档的头部区域结束--><body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口--></body><!--body标签：表示html文档的主体区域结束--></html><!--html标签：html文档正式结束-->
HTML语法结构
1种符号：<> 所有的HTML语言diamante都必须被括在其中
2种标签格式：
双标签：成对出现。<标签名>开始，</标签名>结束。如：<title>无标题文档</title> 通常用于包含内容的元素。
单标签：只存在开始标签，不需要结束。如：<meta charset="utf-8"> 表示无内容元素。
3个组成部分：标签、属性、值：
语法结构：<标签名 属性=“值” 属性=“值”>...</标签名> 如：<meta charset="utf-8">
标签可以拥有属性，属性和值都卸载开始标签的尖括号中。
标签和属性之间用空格分割，多个属性之间也用空格分隔。
如果属性有对应的值，则属性和值之间是等式关系，且值需要写在英文引导中。
HTML编写规范
标签名和属性都使用小写
属性的值用双引号括起来
标签的使用符合嵌套规则
这里就简单的借用别人写好的复制过来给大家看，我没有准备开始部分，原文出处：/pxhdky/article/details/81268125
2.HTML标题标签
标题标签：h1~h6 双标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!-- 特点：独占一行 文字都有变大 逐渐变小 --><h1>欢迎来到前端世界</h1><h2>欢迎来到前端世界</h2><h3>欢迎来到前端世界</h3><h4>欢迎来到前端世界</h4><h5>欢迎来到前端世界</h5><h6>欢迎来到前端世界</h6></body></html>
他就相当于我们平时看书的目录，运行看看效果：
3.HTML段落标签
段落标签：就是我们平时看到的一篇文章分成几段，用小写p表示 双标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!-- 换行标签 br是强制换行并且没有标签间隔 p标签有间隔--><h1>这是文章标题</h1><!-- hr 水平分割线 单标签--><hr><p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p><p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p></body></html>
你想把谁分成一段，就在这段文字的开头与结尾分别加上p标签，运行看看效果：
4.HTML文本格式化标签
格式化标签：就是强调语意用的标签，简单知道就好。 双标签 <br>单标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><b>加粗标签 strong</b><u>下划线 ins</u><i>倾斜 em</i><s>删除线 del</s></body></html>
<br>是强制换行，它不同于p是他没有标签之间的间隔，小b和strong都可以使文字加粗，如果是强调语意strong更合适，其他的依此类推，运行看看效果：
5.HTML图片标签
图片标签：img 单标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--src属性名 ""属性值 alt属性图片不显示的时候显示文字 title属性鼠标放到相对应的地方显示文字 width属性控制图片宽度 height属性控制高度--><img src="image/cat.gif" alt="这是一只猫" title="这是一只猫" width="100px"><br><img src="image/dog.gif" alt="这是一只狗" title="这是一只狗" width="50px"></body></html>
alt属性：当图片不显示就会显示设置的属性值，title属性：鼠标停留在图片上会显示设置的属性值，width属性：设置图片宽度，height属性：设置图片高度，运行看看效果：
因为我设置了宽度所以图片变小了 ，自己可以尝试修改。
6.路径
6.1绝对路径（了解就好）
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!-- 页面需要加载图片，需要找到对应的图片 从盘符出发D:\day01\image\1.jpg--><img src="D:\day01\image\1.jpg" alt="替换文本"></body></html>
macbookpro电脑因为没有分盘所以起手就是：\
6.2相对路径
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--同级路径 直接写名字即可--><img src="cat.gif" alt="同级路径"><!--上级路径 ../--><img src="../上级文件名称/图片名称" alt="上级路径"><!--下级路径--><img src="image/cat.gif" alt="下级路径"></body></html>
就是你所需要的东西在你现在文件的具体地方，上级就用：../起手意思是上级文件如果是多个以此类推：../../，如果你需要的文件跟你当前文件是同级关系直接写相对应的文件名字，下级就依次写，运行看看效果：
因为我的图片在下级路径里面所以其他路径不生效。
7.HTML音频标签
音频标签：audio 双标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--音频标签： audio 用法与图片标签一个意思--><!--controls 显示播放的控件--><!--autoplay 自动播放（有的浏览器不支持）--><!--loop 循环播放--><!--目前支持三种：mp3、Wav、Ogg--><audio src="image/music.mp3" controls autoplay loop title="我唱的好听吗？">川川邀请你听歌</audio></body></html>
音频标签：单独写什么也看不见，如要加入相对应的属性才可以使用，运行看看效果：
因为谷歌浏览器不可以自动播放，所以需要手动开启。
8.视频标签
视频标签：video 双标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--音频标签： audio 用法与图片标签一个意思--><!--controls 显示播放的控件--><!--autoplay 自动播放（有的浏览器不支持）--><!--loop 循环播放--><!--谷歌浏览器支持静音自动播放（仅支持视频）需要加muted--><video src="image/video.mp4" controls autoplay muted loop>川川邀请你看视频</video></body></html>
他的原理跟音频标签一样的，只不过他可以静音播放，运行看看效果（音频和视频自己运行看效果更佳）：
9.超链接标签
超链接标签：a 双标签
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><a href="/" target="_self">前往百度页面</a><br><a href="01-标题标签.html" target="_blank">点击我前往标题标签</a><br><!-- 开发网站初期不知道跳转目的地的时候写一个 "#"，空链接属性值--><a href="#">没有目的地</a></body></html>
常用语网页的跳转就比如你在购物京东，点击一个商品他就会跳转到相对应的页面，运行看看：
当我们点击第一个前往百度页面会发生什么？运行：
他就会直接跳转到百度官网页面，其他的同理，第二个是内部跳转，第三个就是空链接哪里都不跳转没有目的地。
10.综合案例-招聘
自己动动小手（非常简单，运用前面的知识）
<!--作者：川川Rookie--><!--时间：.07.22--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><h1>腾讯科技高级web前端开发岗位</h1><hr><h2>职位描述</h2><p>负责重点项目的前端技术方案和架构的研发和维护工作；</p><h2>岗位要求</h2><p>5年以上前端开发经验， 精通html5/css3/javascript等 web开发技术；</p><p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p><p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p><p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p><p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p><p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p><h2>工作地址</h2><p>上海市-徐汇区-腾云大厦</p><img src="image/map.jpg" alt="地图" title="这是公司招聘面试地点"><!-- 插入音乐控件，部分浏览器支持自动播放 打开网页就有音乐--><br><audio src="image/music.mp3" controls autoplay loop></audio><br><video src="image/video.mp4" controls autoplay loop></video></body></html>
运行看看效果：
11.跳转综合案例
需要准备四个页面和几个图片，这里就不展示代码了，很简单，没事看看效果就行。
第一天的知识就到这里，一定要多动手哦，谢谢大家观看，有大佬看出问题请帮忙指正，让我少走弯路。
第二天来咯
12.无序列表标签
无序列表属性：ul>li
<!--@name: 川川Rookie@time: -07-23 12:33:47--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--代码规范 ul标签只允许包含li标签 li标签可以包括其他的--><ul><li>这是第一个小li</li><li>这是第二个小li</li><li>这是第三个小li</li></ul></body></html>
运行看看效果：
13.有序列表标签
有序列表属性：ol>li
<!--@name: 川川Rookie@time: -07-23 12:43:47--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--代码规范：跟无序一样--><ol><li>我是第一个</li><li>我是第而个</li><li>我是第三个</li></ol></body></html>
运行看看：
从第一个一次排序输出
14.自定义列表标签
自定义列表属性：dl>dt>dd
<!--@name: 川川Rookie@time: -07-23 12:47:48--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--代码规范：dl里面只能出现dt and dd 两个标签，需要其他的标签放在dt dd 标签里面--><dl><dt>帮助中心</dt><dd>用户管理</dd><dd>代理列表</dd><dd>客服服务</dd></dl></body></html>
常用语网页底部设计，运行看看：
后续需要css调整位置
15.表格的基本使用标签
表格属性：table>tr>th>td
<!--@name: 川川Rookie@time: -07-23 12:49:08--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--table代表表格整体相当于一张课程表整体--><!--tr代表表头就像小学一个星期的课程表中的星期一，星期二，星期三...星期日--><!--td就代表课程表中的每节课--><!--嵌套关系：table > tr > td--><!--border属性： 设置表格边框--><!--width属性：设置表格宽度--><!--height属性： 设置表格高度--><form action=""><table border="1" width="500" height="300"><caption>用户登录时间</caption><tr><td>用户名</td><td>时间</td></tr><tr><td>川川Rookie</td><td>.07.23</td></tr><tr><td>川子</td><td>.07.23</td></tr></table></form></body></html>
运行看看效果：
16.表格标题和表头标签
标题属性标签：caption. 表头属性标签：th
<!--@name: 川川Rookie@time: -07-23 12:50:27--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><table border="2" width="500"><caption><strong>成绩表单</strong></caption><tr><th>aa</th><th>80</th><th>aa</th></tr><tr><td>bb</td><td>70</td><td>bb</td></tr><tr><td>cc</td><td>60</td><td>cc</td></tr></table></body></html>
运行看看效果：
17.表格结构标签
相关属性：thead(头部) tbody（内容） tfoot（底部）
<!--@name: 川川Rookie@time: -07-23 12:50:33--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--thead 表格头部 tbody表格主题 tfoot表格底部--><!--了解就行--><table border="1"><caption>用户登录时间</caption><!--表格头部--><thead><tr><td>用户名</td><td>时间</td></tr></thead><!--表格主题--><tbody><tr><td>川川Rookie</td><td>.07.23</td></tr></tbody><!-- 表格底部-->><tfoot><tr><td>川子</td><td>.07.23</td></tr></tfoot></table></body></html>
这是展开的效果，其实目的是把它缩放起来，同时让浏览器更准确识别
18.合并单元格标签
rowspan:跨行合并 colspan:跨列合并
<!--@name: 川川Rookie@time: -07-23 12:50:37--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--rowspan 跨行合并--><!--colspan 跨列合并--><!--只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（比如：thead、tbody、tfoot）--><table border="1" width="500"><tr><!--确定哪两个表格合并，然后如果上下关系，给上面的表格加属性--><th rowspan="2">1</th><th>2</th><th>3</th></tr><tr><!--加完属性后，删除被合格单元格--><td>2</td><td>3</td></tr><tr><td>1</td><!--左右保留最左边--><td colspan="2">2</td><!--加完属性后，删除被合格单元格--></tr></table></body></html>
运行：
19.表单-input的基本使用
<!--@name: 川川Rookie@time: -07-23 12:50:43--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--用于场景：常用于 注册页面 登录页面 搜索页面--><!--文本框，用于输入单行文本-->用户名 ：<input type="text"><br><br><!--密码框，用于输入密码-->密码：<input type="password"><br><br><!--单选框，用于多选一-->性别:<input type="radio"><br><br><!--多选框，用于多选-->兴趣爱好： <input type="checkbox"><br><br><!--文件选择，用于上传文件-->上传文件： <input type="file" ></body></html>
运行：
20.表单-占位符标签
属性：placeholder
<!--@name: 川川Rookie@time: -07-23 12:50:49--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--占位符： placeholder，用于文本框底部文字-->用户名：<input type="text" placeholder="请输入用户名">密码：<input type="password" placeholder="请输入密码"></body></html>
运行看效果：
21.表单-单选框标签
单选框属性：radio
<!--@name: 川川Rookie@time: -07-23 12:50:55--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--单选框--><!--name:分组，用同一个name，就可以让单选框生成单选的效果--><!--checked: 默认选中-->性别：<input type="radio" name="sex" >男<input type="radio" name="sex" checked>女<br><br><!--多选框-->兴趣爱好： <input type="checkbox" >写代码<input type="checkbox" >看电影<input type="checkbox" >聊天</body></html>
运行：
如果不设置name属性就会造成，男女都可以同时选择上
22.表单-上传文件标签
属性：file
<!--@name: 川川Rookie@time: -07-23 13:05:24--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--multiple属性： 如果在网页中上传文件中需要选中多个 需要加入multiple--><input type="file" multiple></body></html>
运行：
23.表单-按钮标签
按钮属性：submit button reset
<!--@name: 川川Rookie@time: -07-23 13:08:23--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--action:发送地址，按钮如果像有效果，需要加入表单form标签--><form action="">账号：<input type="text" placeholder="请输入用户名"><br><br>密码：<input type="password"><br><br><!--submit属性：提交按钮，向后端服务器提交数据--><input type="submit" value="欢迎来到前端世界"><br><br><!--reset属性：重置所有信息--><input type="reset" value="重置所有信息"><br><br><!--button属性 默认无功能，后期配合js使用--><input type="button" value="我就是按钮"><!--button-第二种写法 他可以写其他按钮--><button type="submit">我是按钮</button></form></body></html>
运行：
24.表单-下拉菜单标签
属性：select>option
<!--@name: 川川Rookie@time: -07-23 13:25:30--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--常用于：出生年月日和地区选择--><!--默认选中：selected-->地址：<select name="" id=""><option>北京</option><option>四川</option><option>上海</option><option>深圳</option></select></body></html>
运行：
常用于：出生年月日选择和地址选择
25.表单-文本域标签
属性：textarea
<!--@name: 川川Rookie@time: -07-23 13:33:19--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!--textarea属性--><!--cols:调整文本域方框宽度--><!--rows:调整文本域方框高度--><textarea name="" id="" cols="30" rows="10"></textarea></body></html>
运行看看：
他的大小可以根据右下角拖动改变，这里只是演示，后面会用到css控制宽高
26.表单-label标签
属性：label
<!--@name: 川川Rookie@time: -07-23 13:38:37--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body>性别：<!--第一种复杂方法--><label for=""></label><input type="radio" name="sex" id="男"><label for="男">男</label><input type="radio" name="sex" id="女"><label for="女">女</label><br><br><!--第二种建议方法-->性别：<label><input type="radio" name="sex" >男</label><label><input type="radio" name="sex" >女</label></body></html>
效果是为了让我们点进男女的时候不一定鼠标要点击到单选框内才可以，是点击男这个字就可以了，增大了点击面积，更方便。
第一种是将label标签套住文字内容部分，然后给input标签设置一个id于label标签自带属性for为同一个值的时候就会生效
第二种是用label标签包括整个input标签然后删除label标签里面的for属性即可（推荐第二种）
27-综合案例-学生信息表
<!--@name: 川川Rookie@time: -07-23 20:46:26--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><table border="1" width="500" height="300"><caption><h3>优秀学生信息表格</h3></caption><tr><th>年级</th><th>姓名</th><th>学号</th><th>班级</th></tr><tr><td rowspan="2">高三</td><td>迪丽热巴</td><td>110</td><td>三年二班</td></tr><tr><!--<td>高三</td>--><td>古力娜扎</td><td>120</td><td>三年三班</td></tr><tr><td>评语</td><td colspan="3">你们很优秀</td><!--<td>110</td>--><!--<td>三年二班</td>--></tr></table></body></html>
28.综合案例-表单
<!--@name: 川川Rookie@time: -07-23 20:52:36--><!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><form action=""><h1>青春不常在，抓紧谈恋爱</h1><hr>昵称：<input type="text" value="请输入昵称"><br><br>性别：<label><input type="radio" name="sex">男</label><label><input type="radio" name="sex">女</label><br><br>所在城市：<select><option>北京</option><option>上海</option><option selected>深圳</option></select><br><br>喜欢的类型：<input type="checkbox">可爱<input type="checkbox" checked>性感<input type="checkbox">御姐<br><br>个人介绍：<br><textarea cols="30" rows="10"></textarea><h3>我承诺</h3><ul><li>年满18岁、单身</li><li>年满18岁、单身</li><li>年满18岁、单身</li></ul><br><br><input type="submit" value="免费注册"><input type="reset" value="重置按钮"></form></body></html>
form标签是表单必需品，要不提交按钮无法生效，没有提交地址。第二天就到此结束，谢谢大家观看。（切记多动手）
如果觉得《川川Rookie自学前端笔记》对你有帮助，请点赞、收藏，并留下你的观点哦！
