零基础教你学前端——41、其他实用标签

Question

如题所述

Answer 1

零基础带你探索前端实用标签

在你的前端学习旅程中，让我们一起探索三个实用的标签：hr、pre 和 map，它们能让页面设计更丰富多彩。

1. 水平线的优雅呈现 —— hr

hr，这个看似简单的单标签(<hr>)，实际上能画出页面中优雅的分隔线。它的基本用法是定义一条横跨屏幕的水平线，宽度默认为100%，高度为2px。通过添加width和size属性，如：<hr width="300px" size="10px">，你可以定制线的宽度和高度。noshade属性去掉了阴影效果，color属性则可指定线条颜色，align属性让水平线在宽度有限时可左、中或右对齐。

接下来，让我们在代码中实践：在"窗前明月光，疑是地上霜。"与"举头望明月，低头思故乡。"之间插入一条宽度为300px、没有阴影、红色的水平线。

2. 预格式化文本的魅力 —— pre

pre标签是个双标签(<pre></pre>)，用来展示预格式化的文本，即保持原始换行和空格。在"窗前明月光，疑是地上霜。举头望明月，低头思故乡。"后面添加一个br换行，然后将这段诗句包裹在pre标签中，你将看到文本保持原样呈现。

3. 图像映射的互动体验 —— map

map标签用于创建图像映射，通过area子标签定义热点区域，让图片区域成为可点击链接。以展示行星图片为例，创建一个map标签，设置name属性为"planetmap"，关联img标签的usemap属性。为太阳、水星和金星定义各自的area标签，使用rect或circle形状，如：<area shape="rect" coords="0,0,110,260" href="images/sun.gif">。

在浏览器中预览，点击不同的星球，你将体验到每个行星的详细放大效果。