admin管理员组文章数量:1794759
HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程
Target使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像,视频</title> </head> <body> <img src="src\\image\\li.webp" width="300px"/> <video controls autoplay> <source src="src\\image\\vedio.avi"> <source src="src\\image\\vedio.mp4"> <source src="src\\image\\vedio.webm"> </video> <a name="target"></a> <p> 憨憨仲倩 </p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <a href="Test.html#target">礼物</a> </body> </html>Link的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="src\\css\\index.css"> </head> <body> <div calss="head">头部</div> <div calss="mid"> <div class="mid-col">左部</div> <div class="mid-col">中部</div> <div class="mid-col">右部</div> </div> <div id="test" class="foot">底部</div> </body> </html> *{ margin: 0; padding: 0; } div{ height: 100px; border: 1px solid slateblue; } .mid-col{ float: left; width: 33%; } #test{ color: coral; }表格表单
一、列表 带数字排序的列表：有序列表 带圆点的列表：无序列表 什么都不带的列表：定义列表 二、表格 三、表单
快捷将表格：
table>(tr>th*n)+(tr>td*n)*
<ul><li></li></ul> <ol><li></li></ul> <dl><dt></dt><dl> <form action="#" method="get"> <p><input type="类型" name="自己随便写，最好和类型对应" ></p> type类型有：text,password,submit,reset,radio(圆框)，checkbox(方框) <form class="a" action="#" method="get"> <p><span>用户名：<input type="text" name="username"></span></p> <p><span>密码：<input type="password" name="pwd"></span></p> <p><input type="submit" value="登录就送998"> <input type="reset"></p> <p>请选择职业<input type="radio" name="job" value="teacher">教师 <input type="radio" name="job" value="student">学生 <input type="radio" name="job" value="developer">程序员 <input type="radio" name="job" value="other">其他</p> 文本框：<p><textarea name="feedback" id="" cols="30" rows="10"> </textarea></p> 下拉选择用select <p><select name="province"> <option value="">请选择省份</option> <option value="beijing" >北京</option> <option value="shanghai">上海</option> <option value="nanjing">南京</option> </select></p>
时间： <p><input type="datetime-local" name="datetime-local"></p> 选择数字并且可以限定最大值最小值： <p><input type="number" name="num" value="1" min="0" max="10"></p> 文本： <p><input type="range" value="30" min="1" max="10"></p> 上传文件：<p><input type="file" name="as"></p> 点击图片： <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px" οnclick="javascript:alert('我是个图片')"> <input type="image" src="image/tubiao.webp" width="100px" height="100px" οnclick="javascript:confirm('我是个图片')"></p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul>li{ list-style-type:georgian; } </style> </head> <body> <!--无序列表--> <ul> <li><a href="#">能有新闻?</a></li> <li>真没有</li> <li>你猜有没有</li> <li>嘿，还真没有</li> </ul> <!--有序列表--> <ol> <li>哈哈</li> <li>呵呵</li> <li>喂喂</li> <li>嗯嗯</li> </ol> <!--定义列表--> <dl> <dt>亚斯莫拉</dt> <dt>哟西</dt> <dt>哈嘿</dt> </dl> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> table.a{ border:1px solid dodgerblue;} </style> </head> <table border="3px"> <tr> <!--th代表表头--> <th>学号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <!--tr代表行--> <td>03</td> <!--td代表普通单元格--> <td>张三</td> <td>20</td> </tr> </table> <table class='a' border="1px"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>小明</td> <td>23</td> <td>男</td> </tr> <tr> <td>范梦园</td> <td>22</td> <td>男</td> </tr> </table> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <style> form.a{ margin: 1px; text-align: center; padding:50px; font-weight: bold; font-size: 20px; } span{ border:1px darkcyan; } body{ background-image: url("image/zhi.jpg" ) ; background-repeat: repeat; background-position: 1px,1px; } </style> </head> <body> <form class="a" action="#" method="get"> <p><span>用户名：<input type="text" name="username"></span></p> <p><span>密码：<input type="password" name="pwd"></span></p> <p><input type="submit" value="登录就送998"> <input type="reset"></p> <p>请选择职业<input type="radio" name="job" value="teacher">教师 <input type="radio" name="job" value="student">学生 <input type="radio" name="job" value="developer">程序员 <input type="radio" name="job" value="other">其他</p> <!--checked表示默认，同名的只能单选，不同名可一起选--> <p>请选择爱好<input type="checkbox" name="hobbies" value="basketball">篮球 <input type="checkbox" name="hobbies" value="swimming">游泳 <input type="checkbox" name="hobbies" value="run">跑步 </p> <p><select name="province"> <option value="">请选择省份</option> <option value="beijing" >北京</option> <option value="shanghai">上海</option> <option value="nanjing">南京</option> </select></p> <!--selected表示默认，加在value值后--> <p><textarea name="feedback" id="" cols="30" rows="10"></textarea></p> <p><input type="datetime-local" name="datetime-local"></p> <p><input type="number" name="num" value="1" min="0" max="10"></p> <p><input type="range" value="30" min="1" max="10"></p> <p><input type="file" name="as"></p> <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px" onclick="javascript:alert('我是个图片')"> <input type="image" src="image/tubiao.webp" width="100px" height="100px" onclick="javascript:confirm('我是个图片')"></p> </form> <form> <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"></p> </form> </body> </html>版权声明：本文标题：HTML、CSS、表格表单简单代码笔记 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969270a123662.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论