a标签和锚点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--超链接地址前加http–> http://www.baidu.com--> <a href="http://www.baidu.com" target="_blank">百度</a><br/> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height: 500px;"><a>第一章内容</a></div> <div id="i2" style="height: 500px;"><a>第二章内容</a></div> <div id="i3" style="height: 500px;"><a>第三章内容</a></div> <div id="i4" style="height: 500px;"><a>第四章内容</a></div> </body> </html>
html的form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单测试搜索</title>
</head>
<body>
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--<div>-->
<!--<input type="text" name="query" />-->
<!--<input type="submit" value="搜索"/>-->
<!--</div>-->
<!--</form>-->
<div>
<h1>一级标题</h1>
<h2>二级标题</h2>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</div>
<form action="" method="get" enctype="multipart/form-data">
<div>
<input type="password" value="密码框">
<input type="text" value="默认文本框">
<input type="button" value="登录">
<p>请输入你的选择</p>
<p><input type="radio" name="genetor" value="1"/>男</p>
<p><input type="radio" name="genetor" value="2"/>女</p>
<p><input type="checkbox" name="fav" ,value="1">长江</p>
<p><input type="checkbox" name="fav" ,value="2" checked="checked">黄河</p>
<p><input type="file" name="fname">上传文件</p>
<p><input type="submit" value="提交"/></p>
<p><textarea name="meno">多行文本此处为默认值</textarea></p>
<p><select name="city" multiple="multiple">
<optgroup label="江苏">
<option value="1">常州</option>
<option value="2">镇江</option>
<!--selected表示默认勾选-->
<option value="3" selected="selected">无锡</option>
</optgroup>
</select></p>
<p><input type="reset" value="重置"></p>
</div>
</form>
<form>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>123</li>
<li>233</li>
<li>333</li>
</ol>
<dl>
<dt>111</dt>
<dd>aaa</dd>
<dd>bbb</dd>
<dd>ccc</dd>
</dl>
<table border="1">
<tr>
<td>主机IP</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>172.20.59.127</td>
<td>8888</td>
<td><a href="#">查看详细</a> <a href="#">删除</a></td>
</tr>
<tr>
<td>172.20.90.114</td>
<td>9999</td>
<td><a href="#">查看详细</a> <a href="#">删除</a></td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
input标签与label标签创建关联 主要是for方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input标签与label创建关联</title> </head> <body> <label for="username">用户名：</label> <input id="username" type="text" name="user"> <fieldset> <legend>登录</legend> <label for="uname">用户名</label> <input type="text" id="uname" name="user"/><br /> <label for="passwd">密码</label> <input type="text" id="passwd" name="passowrd"> </fieldset> </body> </html>