1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!--页面编码--> 5 <meta charset="UTF-8"> 6 <!--刷新和跳转--> 7 <!--<meta http-equiv="Refresh" content="1">--> 8 <meta http-equiv="Refresh" content="3;Url=http://www.baidu.com" /> 9 <!--搜索引擎里的关键字和相关描述信息--> 10 <meta name="keywords" content="关键字" /> 11 <meta name="description" content="相关表述信息" /> 12 <!--标头兼容模式--> 13 <meta http-equiv="X-UA-Compatible" content="IE=IE10；IE=IE9" /> 14 <!--标题--> 15 <title>测试</title> 16 <!--图标--> 17 <link rel="stortcut icon" href="image/图片"> 18 19 </head> 20 <body> 21 <!--所有标签分类：--> 22 <!--块级标签：H系列（加大加粗）,P标签（段落和段落之间有间距）,div (白板)--> 23 <!--行内标签：span（白板）a--> 24 25 <!--h标签 标题1-6 大小 由大到小--> 26 <h1 style = 'background-color:red;'>@@@<h1> 27 <!--p标签 段落 br标签 换行--> 28 <b>段落段落段落<br />换行 段落段落</b> 29 <div>123</div> 30 <a href="http://www.oldboyedu.com">走 你</a> 31 <table border="1"> 32 <tr> 33 <td>1</td> 34 <td>2</td> 35 <td>3</td> 36 </tr> 37 </table> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--POST和GET的区别 GET 把递交数据拼接到url里 但是post不是--> 9 <form action="http://localhost:80000/index" method="GET" enctype="multipart/form-data"> 10 <!--label可以让点击用户名也进入编辑 必须用input里的ID 和自身的for进行关联--> 11 <!--fieldset 框框--> 12 <fieldset> 13 <legend>登陆</legend> 14 <label for="username">用户名：</label> 15 <input id="username" type="text" name="user"/> 16 <label for="emnailname">邮箱：</label> 17 <input id="emnailname" type="text" name="email"/> 18 <label for="pawd">密码：</label> 19 <input id="pawd" type="password" name="pwd"/> 20 </fieldset> 21 22 <p>请选择性别：</p> 23 <!--单选框radio 同name就互斥 checked默认选中--> 24 <span>男：</span><input type="radio" name="gender" value="1" checked="checked"> 25 <span>女：</span><input type="radio" name="gender" value="2"> 26 27 <p>请选择爱好：</p> 28 <!--多选框 checkbox默认选中--> 29 <span>篮球：</span><input type="checkbox" name="favor" value="1"> 30 <span>皮球：</span><input type="checkbox" name="favor" value="2"> 31 <span>排球：</span><input type="checkbox" name="favor" value="3"> 32 <span>羽毛球：</span><input type="checkbox" name="favor" value="4"> 33 <input type="button" value="按钮"/> 34 35 <p>上传文件</p> 36 <!--要上传文件必须在所在form里添加enctype="multipart/form-data">--> 37 <input type="file" name="fname"> 38 <!--多文本输入框--> 39 <textarea name="meno" >多文本输入框</textarea> 40 41 <!--下拉框 默认selected="selected" 多选multiple="multiple"--> 42 <select name="city" size="4" multiple="multiple"> 43 <option value="1">西安</option> 44 <option value="2">北京</option> 45 <option value="3">上海</option> 46 <option value="4" selected="selected">苏州</option> 47 </select> 48 <!--下拉框 默认selected="selected" 多选multiple="multiple"--> 49 <select name="city2" > 50 <option value="1">西安</option> 51 <option value="2">北京</option> 52 <option value="3">上海</option> 53 <option value="4" selected="selected">苏州</option> 54 </select> 55 <!--submit 递交数据用--> 56 <input type="submit" value="登陆"/> 57 <!--重置--> 58 <input type="reset" value="重置"> 59 </form> 60 <br/> 61 <form> 62 <!--ul li 配合使用 列表--> 63 <!--dl配合dt,dd使用 用来分组的--> 64 <ul> 65 <li>列表</li> 66 <li>ul和li是一起配合用</li> 67 <li>ul和li是一起配合用</li> 68 <li>ul和li是一起配合用</li> 69 </ul> 70 <ol> 71 <li>列表</li> 72 <li>ul和li是一起配合用</li> 73 <li>ul和li是一起配合用</li> 74 <li>ul和li是一起配合用</li> 75 </ol> 76 <dl> 77 <dt>列表</dt> 78 <dd>dl和dd/dt是一起配合用</dd> 79 <dd>dl和dddt是一起配合用</dd> 80 <dd>dl和dddt是一起配合用</dd> 81 <dt>分组</dt> 82 <dd>dl和dd/dt是一起配合用</dd> 83 <dd>dl和dddt是一起配合用</dd> 84 <dd>dl和dddt是一起配合用</dd> 85 </dl> 86 <!--table表格 tr行 td列 border=1 表格自带边框--> 87 <table border="1"> 88 <tr> 89 <td>主机</td> 90 <td>端口</td> 91 <td>操作</td> 92 </tr> 93 <tr> 94 <td>10.11.125.81</td> 95 <td>8080</td> 96 <td> 97 <a href="http://www.baidu.com">查看</a> 98 <a>修改</a> 99 </td> 100 </tr> 101 </table> 102 <!--table里thead 是表头 行用tr 列用th--> 103 <!--tboby 表身 合并列 colspan 合并行 rowspan--> 104 <table border="1"> 105 <thead> 106 <tr> 107 <th>表头</th> 108 <th>表头</th> 109 <th>表头</th> 110 <th>表头</th> 111 </tr> 112 </thead> 113 <tbody> 114 <tr> 115 <td>1</td> 116 <td colspan="2">1</td> 117 <td rowspan="2">1</td> 118 </tr> 119 <tr> 120 <td>1</td> 121 <td>1</td> 122 <td>1</td> 123 124 </tr> 125 </tbody> 126 </table> 127 128 <!--a 超链接 target="_blank"重新打开一个页面进行跳转--> 129 <!--a href 可以进行茅跳转 具体跳转某个id--> 130 <a href="http://www.baidu.com" target="_blank">超链接</a><br> 131 <a href="#1">第一章</a> 132 <a href="#2">第二章</a> 133 <a href="#3">第三章</a> 134 <!--img图片 title 鼠标放在图片上的提示 alt 如果图片未找到 进行的提示 src图片的路径名称--> 135 <img src="1.jpg" title="图片测试" style="height:200px; 200px;" alt="图片"> 136 <div id="1" style="height: 600px;">第一章内容</div> 137 <div id="2" style="height: 600px;">第二章内容</div> 138 <div id="3" style="height: 600px;">第三章内容</div> 139 </form> 140 </body> 141 </html>