HTML创建图像映射，布局，表单
来源: 实验楼
创建图像映射
在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，有时我们需要实现，点击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域
<img src="xx.jpg" usemap="#mp"/>
<map name="mp" id="mp">
<area>
...
...
...
</area>
</map>
这里以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。
这是具体实现内容
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>tap the li zi </p> <img src="./julizi.png" usemap="#lizi"/> <map name="lizi"> <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"> </map> </body> </html>
然后，当我们点击小松鼠举起的栗子，你就会看见更多栗子
shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。
<html>
<head> <style> div#container{width:1000px} div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px} div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;} div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;} div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;} </style> </head> <body> <div id="container"> <div id="header"> <h1>shiyanlou book store</h1> </div> <div id="sidebar"> <dl> <dt>list of book</dt> <dd> <ol> <li>hadoop</li> <li>linux</li> <li>c</li> </ol> </dd> </dl> </div> <div id="mainbody"> <h1>the summary of the book</h1> <p>i will lead you to travel in the season of linux</p>
<form>
username：
<input type="text" name="username">
<br />
password：
<input type="password" name="password">
</form>
<form>
<input type="radio" name="sex" value="male" /> Male
<br/>
<input type="radio" name="sex" value="female" />
Female
</form>
<form>
<input type="checkbox" name="married" />
married
<br/>
<input type="checkbox" name="have a job" />
have a job
<br/>
<input type="checkbox" name="chinese" />
chinese
</form>
</div>
<div id="footer">good good study day day up</div>
</div>
</body>
</html>
form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。
当你输入时你会发现，username是可见的，password是被点替换了的，这就是这两个类型的区别。
增添两种选框，一种是多选，一种是单选。(具体看代码）
