lesson01-html
#视频1-开
pycharm中：
new project-new dictionary--
py文件名字修改--refactor--rename
第一周
1，html
2，css（css基本样式操作）
3，css进阶（盒子模型，浮动，定位）
4，js入门（js导入方式，基本样式修改和事件操作）
5，答疑
第二
1，js（基本语法：if else，switch，ofr，数据类型等）
2，js （对象:math,日期：函数，定时器）
3，jQuery（jq是用js写的，用jq实现的，js都能实现，用js实现的jq不一定能实现）
4，ajax
5，答疑
第三
1，网页编写：5个页面
-------------------------------------------------------------
#视频2-常用标签
1，html及标签介绍 ---ppt
5分钟：代码 ---页面截图
//new html file：
1-html基本标签 // 运行方式：copy path ---粘贴url网页显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>1-html基本标签</title> 6 </head> 7 <body> 8 <!--html标签标注ctrl+/--> 9 我是大布 10 <!--块级标签，每一个标签都会在新一行开始--> 11 <!--可以设置宽高--> 12 <h1>文章标题</h1> 13 <p>段落1</p> 14 <p>段落2</p> 15 <p>段落3</p> 16 <!--行内标签，行内显示--> 17 <!--不可以设置宽高--> 18 <strong>加粗1</strong> 19 <strong>加粗1</strong> 20 21 </body> 22 </html>
2-块级标签 ctrl+/ 标注 ,tab补全
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2-块级标签</title> 6 </head> 7 <body> 8 <!--标题标签：数字1-6，值越小子越大--> 9 <h1>你好</h1> 10 <h2>你好</h2> 11 <h3>你好</h3> 12 <h4>你好</h4> 13 <h5>你好</h5> 14 <h6>你好</h6> 15 <p>段落</p> 16 </body> 17 </html>
3-列表标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3-列表标签</title> 6 </head> 7 <body> 8 <!--无序列表unordered list--> 9 <ul> 10 <li>梨子</li> 11 <li>苹果</li> 12 <li>葡萄</li> 13 </ul> 14 15 <!--有序列表ordered list 快捷： ol>li*3 tab--> 16 <ol> 17 <li>足球</li> 18 <li>篮球</li> 19 <li>乒乓球</li> 20 </ol> 21 22 <!--定义列表definition list --> 23 <dl> 24 <dt>水果类</dt> 25 <dd>苹果</dd> 26 <dd>苹果</dd> 27 <dd>苹果</dd> 28 <dt>运动类</dt> 29 <dd>足球</dd> 30 <dd>篮球</dd> 31 <dd>乒乓球</dd> 32 </dl> 33 34 <!--dt:列表标题；dd：列表项--> 35 </body> 36 </html>
4-div标签 //上中下页面布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>4-div标签</title> 6 <style> 7 .top{ 8 height:60px; 9 background:black; 10 } 11 .bottom{ 12 height:180px; 13 background:black; 14 } 15 .middle{ 16 height:80px; 17 background:skyblue; 18 } 19 .left{ 20 background:blue; 21 float:left; 22 width:500px; 23 height:800px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="top"></div> 29 <div class="middle"> 30 <div class="left"></div> 31 <div class="right"></div> 32 </div> 33 <div class="bottom"></div> 34 </body> 35 </html>
5-行内标签 <strong> <em>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5-行内标签</title> 6 </head> 7 <body> 8 <strong>加粗</strong> 9 <em>斜体</em> 10 </body> 11 </html>
6-图片标签 <img src=> //refactor ---rename 改文件名字
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>6-图片标签</title> 6 </head> 7 <body> 8 <!--src:标志图像的位置--> 9 <!--alt：下载不成功时，可看到该属性指定文本--> 10 <!--title:鼠标滑过图片时显示的文本--> 11 <!--图像可以是：GIF，PNG，JPEG格式图像文件--> 12 <img src="img/1.jpg" alt="下载失败" title="提示文本"> 13 </body> 14 </html>
7-a标签 //网页链接 ，小说章节跳转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>7-a标签</title> 6 </head> 7 <body> 8 <!--页面内跳转--> 9 <!--br是自闭合，test是跳转目标id--> 10 <a href="https://www.baidu.com" 11 target="_blank" title="测试">去百度</a><br> 12 13 <p><a href="#test">跳转到第二章</a></p> 14 <a href="#test2">跳转到第三章</a> 15 <h3>第一章</h3> 16 <p>红豆</p> 17 <p>红豆</p> 18 <p>红豆</p> 19 <p>红豆</p> 20 <p>红豆</p> 21 <p>红豆</p> 22 <p>红豆</p> 23 <p>红豆</p> 24 <p>红豆</p> 25 <p>红豆</p> 26 <p>红豆</p> 27 <p>红豆</p> 28 <p>红豆</p> 29 <p>红豆</p> 30 <p>红豆</p> 31 <p>红豆</p> 32 <p>红豆</p> 33 <p>红豆</p> 34 <h3 id="test">第二章</h3> 35 <p>红豆</p> 36 <p>红豆</p> 37 <p>红豆</p> 38 <p>红豆</p> 39 <p>红豆</p> 40 <p>红豆</p> 41 <p>红豆</p> 42 <p>红豆</p> 43 <h3 id="test2">第三章</h3> 44 <p>红豆</p> 45 <a href="#">跳转到顶部</a> 46 47 <!--死链--> 48 <!--用到a标签自带样式，但不需要跳转--> 49 <a href="javascript:void(0);">死链</a> 50 </body> 51 </html>
8-span标签 //一段文字局部格式处理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-span标签</title> 6 <style> 7 span{ 8 color:red; 9 } 10 .test{ 11 color:green; 12 } 13 </style> 14 </head> 15 <body> 16 <!--span:一段文字局部格式处理--> 17 你好 18 <span class="test">你好啊啊</span> 19 <p>我是随时随地法撒旦<span>你好啊啊</span>法士大夫士大夫撒旦</p> 20 </body> 21 </html>
9-特殊标签 //大于 小于 空格 字符空格
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>9-特殊标签</title> 6 </head> 7 <body> 8 <!--特殊标签为了--> 9 <!--小于和大于--> 10 w<a<br> 11 w>a<br> 12 <!--空格宽--> 13 w a<br> 14 <!--字符宽--> 15 w a<br> 16 </body> 17 </html>
------------------------------------------------------------
#视频3--table+form
表格表单标签
10-table表格标签 excle
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>10-table表格标签</title> 6 <style> 7 th,td{ 8 border:1px solid black; 9 width:50px; 10 } 11 </style> 12 </head> 13 <body> 14 <!--tbody:加上此标签，表格的内容会在全部下载后才显现--> 15 <!--table:在没有加上css样式时，在游览器中是没有表格线的--> 16 <table style="border-collapse:collapse"> 17 <thread> 18 <tr> 19 <!--<td>name</td><td>age</td><td>gender</td>--> 20 <!--<th>：表示居中粗体--> 21 <th>name</th><th>age</th><th>gender</th> 22 </tr> 23 </thread> 24 <tbody> 25 <!--一行合并--> 26 <tr><td colspan="3">1</td></tr> 27 <!--一列合并--> 28 <tr><td>1</td><td>2</td><td rowspan="2">3</td></tr> 29 <tr><td>1</td><td>2</td></tr> 30 </tbody> 31 </table> 32 </body> 33 </html>
11-form表单 搜狗搜索网页跳转，前后端交互，post安全
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11-form表单</title> 6 </head> 7 <body> 8 <!--action:指向服务器某个程序--> 9 <!--method：get/get--> 10 <!--get:1,提交键值对(name+value),放在地址栏url后面,2,安全性相对较差， 11 3，对提交内容长度有限制适用于查询类--> 12 <!--post:1,不会讲提交内容放在地址栏中，2，相对安全， 13 3，理论上对提交内容长度无限制--> 14 <form action="https://www.sogou.com/wdb" method="post"> 15 搜索<input type="text" value="query"> 16 <input type="submit" value="提交"> 17 </form> 18 </body> 19 </html>
12-input标签 //用户密码框 <p> 自动换行 ，单选框，多选框，上传文件，submit按钮（提交），reset按钮（重置）
为了后台接受数据加上value
form-->input:
1,text //文本输入框
2，password //密码输入框
3,radio //单选框
4,checkbox //多选框
5,submit //提交按钮
6,button //按钮
form--:
1，label标签---点击用户名，光标跳至框内
2，select标签--下拉框
3，textarea标签--文本框
4，fieldset标签 --分区框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12-input标签</title> 6 </head> 7 <body> 8 <form action="" method="post" enctype="multipart/form-data"> 9 <!--text文本框--> 10 <!--<label>:点击用户名时光标跳至文本框内--> 11 <p><label for="user">用户名:</label><input id="user" type="text" name="usr" placeholder="请输入用户名"></p> 12 <p>密 码:<input type="password" name="psw"></p> 13 14 <!--单选框：name：群组--> 15 <!--value:为了和数据库后台，相对应值--> 16 <p>性 别: 17 <input type="radio" name="gender" value="man">男 18 <input type="radio" name="gender" value="woman">女 19 <input type="radio" name="1" value="baomi">保密 20 </p> 21 22 <!--多选框--> 23 <p>爱 好: 24 <input type="checkbox" name="hobby" value="sing">唱歌 25 <input type="checkbox" name="hobby" value="dance">跳舞 26 <input type="checkbox" name="hobby" value="draw">画画 27 </p> 28 29 <!--form上传文件加：enctype="multipart/form-data"--> 30 上传文件:<input type="file"> 31 32 <p> 33 <!--下拉列表框--> 34 <select> 35 <optgroup label="水果类"> 36 <option>苹果</option> 37 <option>橘子</option> 38 <option>葡萄</option> 39 </optgroup> 40 <optgroup label="运动类"> 41 <option>足球</option> 42 <option>篮球</option> 43 <option>乒乓球</option> 44 </optgroup> 45 46 </select> 47 </p> 48 49 <p> 50 <!--<fieldset>:矩形框--> 51 <!--textarea:text文本框--> 52 <fieldset> 53 自我介绍：<textarea rows="5" cols="20">内容</textarea> 54 </fieldset> 55 56 </p> 57 58 <!--提交按钮，重置按钮：清空--> 59 <p> 60 <input type="submit" value="提交"> 61 <input type="reset" value="重置"> 62 </p> 63 </form> 64 </body> 65 </html>
#视频4-总结和作业
html
1，标签
2，块级标签和行内标签
3，块级标签：h1-6/p/列表/div
4，行内标签：strong/em/img/a/span
5, 特殊字符：<>  
6, table
7, form表单
8，input--ppt图
9，作业--网页界面
0-作业讲解
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="" method="post" enctype="multipart/form-data"> 9 <p>用户名:<input type="text" name="usr" placeholder="请输入用户名"></p> 10 <p>密 码:<input type="password" name="psw" placeholder="请输入密码"></p> 11 <p> 12 性 别: 13 <input type="radio" name="gender" value="man">男 14 <input type="radio" name="gender" value="woman">女 15 <input type="radio" name="gender" value="sex">保密 16 </p> 17 <p> 18 爱 好: 19 <input type="checkbox" name="hobby" value="sing">唱歌 20 <input type="checkbox" name="hobby" value="dance">跳舞 21 <input type="checkbox" name="hobby" value="swim">游泳 22 </p> 23 <p>上传文件:<input type="file"></p> 24 <p> 25 地址: 26 <select> 27 <optgroup label="湖南省"> 28 <option>岳阳市</option> 29 <option selected>长沙市</option> 30 <option>浏阳市</option> 31 </optgroup> 32 <optgroup label="湖北省"> 33 <option>武汉市</option> 34 <option>黄陂市</option> 35 <option>黄冈市</option> 36 </optgroup> 37 </select> 38 </p> 39 <p> 40 自我介绍: 41 <textarea rows="10" cols="20" placeholder="请输入自我介绍"></textarea> 42 </p> 43 <p> 44 <input type="submit" value="提交"> 45 <input type="reset" value="重置"> 46 </p> 47 </form> 48 49 </body> 50 </html>
