先来学习一下hr标签。hr是一个单一的标签，基本语法是：
。hr是horizo??ntalrule的缩写，意思是“水平线”。它的作用是在网页上绘制一条水平分界线，可以直观地将文档分成多个部分。hr横线标签还有5个重要的属性：width和size属性，分别控制横线的宽度和高度。如果不添加该属性，横线默认宽度为横跨整个屏幕，高度为2px。noshade[?e?d]属性表示没有阴影，用于去除水平线的阴影。color属性，用于定义水平线的颜色。align属性用于调整水平线的水平对齐方式。使用该属性的前提是横线需要有宽度。默认对齐方式是水平居中对齐。打开编辑器，新建other-elements.html页面，完成基本代码，在body中添加文字“窗前月光，疑是地上霜”。输入和换行。添加hr标签、回车符和换行符。再加一句正文“抬头看明月，低头思故乡”。然后为hr定义属性，宽度等于300px，大小等于10px，对齐等于左。保存页面。在浏览器中打开页面，两行文字被一条横线隔开，横线也有宽度和高度，并且是左对齐的。回到编辑器，为hr定义noshade属性，定义一条纯色的横线，阴影效果会消失。然后定义一个值为红色的颜色属性。节省。返回浏览器，刷新，实现了一个宽高样式的红色横线效果。接下来，我们了解前置标签。是双标，基本语法为：anglepre,angle/pre()。pre是preformatted[?f??m?t?d]的简写，意思是“预先格式化的文本”。pre元素中的文本以等宽字体显示，文本保留空格和换行符。文本将与它在HTML源代码中的显示完全相同。回到小编，在诗句末尾加br换行，再加pre标签，里面写：“窗前月光疑是地上霜，抬头看明月低头望故乡”，在每个标点符号中按回车键。节省。返回浏览器并刷新。这首诗整齐地显示，保留了pre标签内的空格和换行符。最后，我们学习地图标签。地图标签用于定义图像地图。图像映射是图片的热链接。单击图片的不同区域可跳转到链接页面。map是双标号，基本语法是cuspmap，cusp/map。它有一个必须定义的属性名，这个属性是要和img标签的usemap属性关联起来，建立图片和地图之间的关系。在地图标签中，定义区域子标签，用于定义图片上的热点区域，实现对应区域的目标跳转。通过area标签可以设置热点区域的位置、大小和形状。area是一个双标号，语法格式为：caretnumberarea,caretnumber/area。它具有三个重要的属性：href属性用于定义链接在热点区域的目标地址。Internet和本地网页以及图像地址均可接受。shape属性用于定义区域的形状。取值有：default：图片所有区域都是热链接。rect：定义热点区域为矩形。circle：定义热点区域为圆形。poly：将热点区域定义为多边形。coords按钮的属性，用于定义可点击区域的坐标。它需要与形状属性一起使用。使用的方法是：首先，定义一个圆：shape属性的值为"circle"，coords属性的值为xyr"x,y,r"，其中x和y定义圆心的坐标,r定义了圆的半径，所有的值都是数字。这里你一定要问，坐标系的原点在哪里？此原点或点00位于图像的左上角。大家也发现这里的y轴和大家熟知的数学直角坐标系的y轴是相反的。二、定义一个多边形：shape属性的值为“poly”，coords属性的值为x1y1x2y2x3y3（停顿600毫秒）xnyn,(x1,y1,x2,y2,x3,y3...xn,yn)每对xy"x,y"坐标定义了多边形的一个顶点。多个坐标组成一个多边形，多边形自动闭合，所以在坐标序列的最后，不需要重复定义第一个坐标来闭合整个区域。最后，定义一个矩形：shape属性的值为"rect"，coords属性的值为x1y1x2y2,"x1,y1,x2,y2"第一个坐标是矩形的一个角的顶点坐标矩形，另一对坐标为对角线的顶点坐标。定义矩形实际上是定义具有四个顶点的多边形的简化方法。下面我们一起来实现一个热链接图片。当你点击图片上的不同星球时，你可以放大对应的星球来查看细节。打开编辑器，创建一个map_area.html文件，完成基本代码，在body中添加img标签，设置src等于“planets.jpg”，在页面插入一张可点击的大图。继续添加地图标签，定义属性名称等于“planetmap”。然后给img标签设置usemap属性，值等于#planetmap"#planetmap"。这个值对应的是map标签的name属性的值，但是需要注意的是这里需要加#来表示对这个图像应用哪个图像映射定义。在地图标签中添加area子标签，用于设置鼠标点击太阳时显示的太阳图片。定义属性shape等于rect，coords等于“0,0,110,260”，href等于“images/sun.gif”。再添加一个area标签，当鼠标点击Mercury时显示对应的大图。定义属性shape等于circle，coords等于“129,161,10”，href等于“images/mercury.gif”。再添加一个区域标签，当鼠标点击金星时，显示相应的大图。定义属性shape等于circle，coords等于“180,139,14”，href等于“images/venus.gif”。保存文档。在浏览器中打开页面，鼠标图片的热点区域，可以清楚的看到鼠标指针变成了小手的形状，点击对应的星球，就实现了跳转！文章配套视频链接https://www.bilibili.com/video...