0326 iframe和video experience
今天的东西确实不少，很容易混淆，input下的属性太多，form下的属性也不少，内容多点，一时不能熟练掌握，晚上多拿出点时间练练 尤其是 form 和inpu那些属性格外别扭
下午的内嵌视频相对简单
主要就是
<iframe name="标签起个名字" src="嵌套的网页地址" frameborder="0"></ifram>
视频标签: <video> 属性：src:地址 controls:控制条 autoplay：自动播放 loop：循环播放
最后讲的 网页标题格式
<link rel="icon" type="image" herf="a.ico">
1 form 表单标签：五个属性 2 name、action、method、enctype 3 <form action="所有表单值提交的地址" 4 提交方式："method"（默认get提交）"> 5 1.get: 6 所有表达方式以键值成对的方式 key=value 传递后台。所有信息都在地址栏全部显示 url: 7 2.post 不会显示表单数据 安全，传递内容大小无限制 8 -------------------------------- 9 表单元素通用格式： 10 <input type="表单元素的类型" name="键" value="值"> 11 “type”属性值 表单元素类型： 12 1.文本类型： 13 text:单行文本框 14 password:密码框 15 hidden:隐藏域 16 placeholder:带有占位符文本的文本区域 17 2.按钮类型： 18 button:普通按钮 19 submit:提交按钮 （一点就会将整个form标签提交） 20 reset:重置按钮 21 image:图像形式的提交按钮 22 3.单选、多选类型： 23 radio:单选（必须搭配name属性使用）例：性别：男 女 必须都用sex 24 label:标签的使用（点文字也可以选上）一个label标签只对一个文本起作用 25 checked:默认选中 26 disabled 属性 不可编辑 27 checkbox:复选框(多选) 28 4.file:文件上传 (必须在form标签中加enctype="multipart/form-data") 29 加上后是传到服务器的效果，不是显示效果 30 下拉框标签：（嵌套标签） 31 <select> 32 <option>选项1</option> 33 <option>选项2</option> 34 <option>选项3</option> 35 </select> 36 select属性：是默认选中 37 需要注意的是 下拉框和表单标签都有 默认选中 38 下拉框的默认选中是：select 39 表单的..........:checked 40 文本域标签： 41 <textarea> 42 下午：iframe和video标签 43 块元素： 独占一行叫块元素 如：h1~h6、hr、ul、ol、div 44 行内元素：不独占一行 如：b、u、i、strong、a、img 45 内嵌框架标签：<iframe> 46 <iframe name="标签起个名字" src="嵌套的网页地址" frameborder="0"></iframe> 47 视频标签: <video></video> 48 属性： 49 src:地址 50 controls：控制按钮 51 autoplay:自动播放 52 loop:循环播放 53 ---------------- 54 网页标题图标格式： 55 <link rel="icon" type="image" href="a.ico"/> 56 --> 57 58 <body> 59 <a href="first.html" target="myhtml">天气</a> 60 <a href="second.html" target="myhtml">新闻</a> 61 <a href="third.html" target="myhtml">图片</a> 62 <br> 63 <iframe src="first.html" frameborder="1" width="800px" height="800px" name="myhtml"></iframe> 64 65 <video src="https://f.us.sinaimg.cn/003AB6sslx07syYD88Pe01041205gyIW0E020.mp4?label=mp4_hd&template=852x480.20.0&Expires=1553583608&ssig=4qf4FFC%2BR1&KID=unistore,video" controls="" autoplay=></video> 66 67 <form action="#" method="get" enctype="multipart/form-data"> 68 用户名：<input type="text" name="username" id="" value="" placeholder="请输入用户名"/> 69 <br> 70 <br> 71 密码：<input type="password" name="pwd" id="" value="" placeholder="请输入密码"/> 72 <br> 73 隐藏域：<input type="hidden" name="uid" id="" value="123" /> 74 <br> 75 <input type="button" name="" id="" value="普通按钮" /> 76 <input type="submit" name="" value="提交按钮"/> 77 <input type="reset" name="" id="" value="重置按钮" /> 78 <br> 79 性别：<label>男：<input type="radio" name="sex" id="" value="" checked=/></label> 80 <label>女：<input type="radio" name="sex" id="" value="" /></label> 81 <br> 82 爱好： 83 <label>足球：<input type="checkbox" name="hobby" id="" value="footbal" /></label> 84 <label>篮球：<input type="checkbox" name="hobby" id="" value="basketball" /></label> 85 <label>毽球：<input type="checkbox" name="hobby" id="" value="jianqiu" /></label> 86 <br> 87 文件上传 88 <input type="file" name="" id="" value="" /> 89 <br> 90 地址： 91 <select name="address"> 92 <option value ="zhangdian" selected>张店区</option> 93 <option value ="zhoucun">周村区</option> 94 <option value ="zichuan" >淄川区</option> 95 </select> 96 <br> 97 <textarea rows="20" cols="30" name="text1"> 98 </textarea> 99 </form>
作业表格表单制作
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <table bgcolor="darkgrey" border="1" width="973" height="647" cellpadding="" cellspacing="0" align="center"> 9 <tr> 10 <td colspan="3">1.会员登录名和密码</td> 11 </tr> 12 <tr> 13 <td align="right">用户名</td> 14 <td colspan="2"><input type="text" name="username" value="" placeholder=""><font color="red"><small>*</font><input type="button" value="检测用户名"> 15 <small><font color="blue">5-15位，请使用英文字母（a-z,A-Z)数字（1-9）</font></small></td> 16 </tr> 17 <tr> 18 <td align="right">密码:</td> 19 <td><input type="text" name="username" value="" placeholder=""></td> 20 <td><font color="red"><small>*</font> 21 <small><font color="blue">5-15位，请使用英文字母（a-z,A-Z)数字（1-9），注意区分大小写；密码不能与登录名相同；易记；难猜..</font></small></td> 22 </tr> 23 <tr> 24 <td colspan="2" align="right"><font color="blue">再次输入密码</font></td> 25 <td><input type="text" name="username"/> <small>*两次输入的密码必须一致</small></td> 26 </tr> 27 <tr> 28 <td colspan="3">2.姓名和联系方式</td> 29 </tr> 30 <tr> 31 <td align="right">真实姓名</td> 32 <td colspan="2"> 33 <input type="text" name="username" value="" /> 34 <label> 35 <font color="red"><small>*</font> 36 男：<input type="radio" name="sex" value="man" /> 37 </label> 38 <label> 39 女：<input type="radio" name="sex" value="woman" /> 40 </label> 41 </td> 42 </tr> 43 <tr> 44 <td align="right">电子邮箱</td> 45 <td><input type="text" name="" value="" /></td> 46 <td><small><font color="red">*非常重要！</font><br><font color="blue">这是客户与您联系的首选方式：请一定填写真实</font></small></td> 47 </tr> 48 <tr> 49 <td align="right">固定电话</td> 50 <td colspan="2"> 51 <input type="text" name="" id="" value="" /><font color="red"><small>*</font><font color="blue">区号+电话号码</small></font></td> 52 </tr> 53 <tr> 54 <td align="right">公司所在地址：</td> 55 <td colspan="2"> 56 <select> 57 <option value ="北京"></option> 58 <option value ="上海"></option> 59 </select> 60 <select> 61 <option value ="东城"></option> 62 <option value ="浦东"></option> 63 </select> 64 </td> 65 </tr> 66 <tr> 67 <td align="right">街道地址</td> 68 <td colspan="2"><input type="text" /><font color="red"><small>*</font> 69 <font color="blue">填写县（区）、街道、门牌号</small> 70 </td> 71 </tr> 72 <tr> 73 <td align="right">传真号码：</td> 74 <td colspan="2"><input type="text"></td> 75 </tr> 76 <tr> 77 <td align="right">电话号码：</td> 78 <td colspan="2"><input type="text"></td> 79 </tr> 80 <tr> 81 <td align="right">邮政编码：</td> 82 <td colspan="2"><input type="text"></td> 83 </tr> 84 <tr> 85 <td colspan="3" align="left"> <font color="darkgray">3.公司名称和主营业务</font></td> 86 </tr> 87 <tr> 88 <td align="right">贵公司名称：</td> 89 <td><input type="text"/></td> 90 <td><font color="red">*</font><small><font color="blue">请填写在工商局注册的名称<br>无商号的个体经营者填写执照上d的姓名，如张三（个体经营）</small></font></td> 91 </tr> 92 <tr> 93 <td align="right">您的职位</td> 94 <td colspan="2"><input type="text" /><font color="red">*</font></td> 95 </tr> 96 <tr> 97 <td align="right">固定电话：</td> 98 <td colspan="2"> <font color="red">*</font><small><font color="blue">区号+电话号码</font></small></td> 99 </tr> 100 <tr> 101 <td align="right">主营行业：</td> 102 <td> 103 <select> 104 <option value="dianzidiangong">电子电工</option> 105 <option value="jixiezhizao">网维运维</option> 106 </select> 107 </td> 108 <td> 109 <font color="#191CBC"><small>请正确选择，您会收到该行业的供求信息</small></font> 110 </td> 111 </tr> 112 <tr> 113 <td align="right"> 114 主营产品/服务：</td> 115 <td> 116 <input type="text"></td> 117 <td> 118 <font color="red">*</font> 119 <font color="blue"><small>3个主要产品名/服务名，最少要填一个，例如：太阳能、拉链、布料</small></font></td> 120 </tr> 121 <tr> 122 <td align="right">公司网址：</td> 123 <td colspan="2"><input type="text" value="http://"></td> 124 </tr> 125 <tr> 126 <td> </td> 127 <td colspan="2"> 128 <input type="submit" value="提交"> 129 <input type="reset" value="重置"> 130 </td> 131 </tr> 132 <tr> 133 <td colspan="3"><center><b>备注：<font color="red">*</font>为必填项</b></center></td> 134 </tr> 135 </table> 136 </body> 137 </html>
