参考资料

  1. HTML 颜色
  2. HTML 表格高度和宽度
  3. HTML使用表格 布局
  4. HTML 列表
  5. HTML 使用
  6. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
  7. 隐形水印嵌入技术详解
  8. HTML/MarkDown互转有哪些

HTML 水平线

HTML水平线(Horizontal Rule)用于在网页中创建一条水平分隔线。

标签:
<hr>

用法:

  1. 基本用法:

<hr>
  1. 带属性的传统用法(HTML4):

<hr width="50%" size="3" noshade color="red">

功能:

  1. 内容分隔

  2. 视觉分区

  3. 文档结构划分

CSS扩展:

hr {
    height: 2px;
    background-color: #ccc;
    border: none;
    margin: 20px 0;
}

/* 渐变效果 */
hr.gradient {
    height: 3px;
    background: linear-gradient(to right, red, yellow);
}

/* 虚线样式 */
hr.dashed {
    border-top: 1px dashed #999;
}

/* 阴影效果 */
hr.shadow {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

HTML5特性:

  • 语义化标签,表示主题分隔

  • 不再推荐使用传统属性(width/size/color等)

  • 建议完全通过CSS控制样式