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; width: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>
