`

HTML中HR属性

    博客分类:
  • web
 
阅读更多

1、size线段粗细的设定:



    <HR>
    这是第一条线段,无size设定,取内定值SIZE=1来显示
    <HR SIZE=5>
    这是第二条线段,SIZE=5
    <HR SIZE=10>
    这是第三条线段,SIZE=10








这是第一条线段,无size设定,取内定值SIZE=1来显示 这是第二条线段,SIZE=5 这是第三条线段,SIZE=10




2、width线段长度的设定:



    <HR SIZE=3>
     这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示
    <HR width=50 SIZE=5>
    这是第二条线段,WIDTH=50(点数方式)
    <HR width="50%" SIZE=7>
    这是第三条线段,WIDTH=50%(百分比方式)






这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示 这是第二条线段,WIDTH=50(点数方式) 这是第三条线段,WIDTH=50%(百分比方式)




3、align线段排列的设定:



    <HR width="50%" SIZE=5>
     这是第一条线段,无ALIGN设定,(取内定值RIGHT显示)
    <HR align=center width="60%" SIZE=7>
    这是第二条线段,居中对齐
    <HR align=right width="70%" SIZE=2>
    这是第三条线段,向右对齐






这是第一条线段,无ALIGN设定,(取内定值RIGHT显示) 这是第二条线段,居中对齐 这是第三条线段,向右对齐




4、noshade无阴影的设定,为实心线段:



    <HR WIDTH=80% SIZE=5>
    这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示
    <HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
    这是第二条线段,有NOSHADE设定




这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示 这是第二条线段,有NOSHADE设定


HR标签水平分隔线修饰特效:



    none:无样式;dotted:点线;dashed:虚线;solid:实线;

    double:双线;groove:槽线;ridge:脊线;inset:内凹;outset:外凸。

    1、dotted:点线
    <HR style="border:3 dotted #ff0033" width="100%" SIZE=3>

    2、dashed:虚线
    <HR style="border:3 dashed #ff0033" width="100%" SIZE=3>

    3、solid:实线
    <HR style="border:3 solid #ff0033" width="100%" SIZE=3>

    4、double:双线
    <HR style="border:3 double #ff0033" width="100%" SIZE=3>

    5、groove:槽线
    <HR style="border:6 groove #ff0033" width="100%" SIZE=6>

    6、ridge:脊线
    <HR style="border:6 ridge #ff0033" width="100%" SIZE=6>

    7、inset:内凹
    <HR style="border:6 inset #ff0033" width="100%" SIZE=6>

    8、outset:外凸
    <HR style="border:6 outset #ff0033" width="100%" SIZE=6>

    通过实践5—8并不理想,最好不要用。

    

    

    两头渐变透明 纺锤形 右边渐变透明 左边渐变透明 立体效果 钢针效果

    备注:这几种效果不适合表内嵌套存在,例句写在表外:

    1、两头渐变透明:
    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>





    2、纺锤形:
    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>





    3、右边渐变透明:
    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>





    4、左边渐变透明:
    <HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>





    5、立体效果:
    <HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>





    6、钢针效果:
    <HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>

    

分享到:
评论

相关推荐

    html标签和属性总结

    超链接是HTML标签中非常重要的一部分,它可以实现从一个页面指向另一个页面的跳转。超链接的语法包括: * 文字超链接:”被访问的路径” target=”何处打开文档” title=”显示额外信息”&gt;名字 * 图像超链接:”...

    HTML标签属性大全

    例如,&lt;hr&gt;标签用于插入一条水平线,可以通过size、width和color属性来分别设置水平线的高度、宽度和颜色。换行符 用于在文本中插入换行,而标签则用于防止内容自动换行。段落标签用来标识一个段落,而标签用于将...

    HTML标签与属性大全

    以上是HTML基础标签和属性的概述,实际上HTML5引入了许多新的元素和属性,以更好地支持语义化和增强网页功能。学习并熟练掌握这些基础知识是构建动态、交互式网页的前提。在实际开发中,通常会结合CSS和JavaScript来...

    css中hr标签的各种用法

    在HTML中,`&lt;hr&gt;`标签(Horizontal Rule)被用来插入一条水平线,通常用于分隔文档中的不同部分,提供视觉上的区分。然而,通过CSS,我们可以进一步定制`&lt;hr&gt;`标签的外观,使其在设计中发挥更多作用。本文将详细介绍...

    Html对象属性大全.pdf

    本文将根据提供的资料,详细解读HTML中的部分对象属性及其用法,帮助读者更好地理解和运用这些特性。 #### 二、动态效果:Marquee 标签 `&lt;marquee&gt;` 标签用于创建一个自动滚动的区域,通常用于显示滚动文本或图像...

    HTML标签和属性

    HTML标签和属性 HTML(HyperText Markup Language)是一种标记语言,用于创建网页。HTML文档由一系列的元素组成,每个元素由开始标签和结束标签组成。HTML标签和属性是构建网页的基础,下面我们将详细介绍HTML标签...

    html标签及属性大全

    以上只是HTML中众多标签和属性的一部分,掌握它们对于构建复杂和交互式的网页至关重要。随着Web技术的发展,新的HTML5标准引入了更多语义化的标签,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`等,这些标签使...

    HTML5 标签属性大全

    该资源涵盖了 HTML5 中的基本标签、语法知识、表格定义、frameset 框架、表单标签、input 属性等方面的知识点。 基本标签 * H1~H6 标题标签:用于定义标题,H1 代表最大的标题,H6 代表最小的标题 * P 段落标签:...

    html基础属性代码

    6. **标尺线**:`&lt;hr&gt;`创建水平分隔线,通过`size`, `color`, `width`和`align`属性调整其外观。 7. **列表**:无序列表`&lt;ul&gt;&lt;li&gt;`和有序列表`&lt;ol&gt;&lt;li&gt;`用于创建项目列表,`type`属性可更改有序列表的符号,`start`...

    HTML基础属性解释

    在这个基础教程中,我们将探讨一些常见的HTML元素和属性,它们是构建网页结构的基础。 1. **特殊字符**: - `&lt;` 和 `&gt;` 分别代表小于号 `和大于号 `&gt;`,在HTML中用于防止浏览器误解代码。 - `&nbsp;` 代表...

    HTML常用属性

    HTML中的属性用来定制标签的行为和外观。例如,`ALIGN`属性用于设置元素的对齐方式,可以是`LEFT`(左对齐)、`CENTER`(居中)或`RIGHT`(右对齐);`WIDTH`和`HEIGHT`定义元素的宽度和高度,可以使用像素值或...

    HTML基本标签属性总结

    HTML基本标签属性总结 部分内容如下:(下载可看全文) &lt;meta http-equiv="content-type" content="text/html" charset="gb2312"&gt; 4种块结构:div-ul(ol)-li 导航菜单 div-dl-dt-dd 图文混编 table-tr-td 规整...

    前端练习01-前端-HTML(hr练习)

    在本前端练习01中,我们专注于HTML(超文本标记语言)的学习,特别是关于`&lt;hr&gt;`标签的实践应用。HTML是构建网页的基础,它定义了网页的结构和内容。`&lt;hr&gt;`标签,全称为Horizontal Rule,是HTML中用于在页面上创建...

    hr标签效果.txt

    ### HR标签在HTML中的应用与效果 #### 一、引言 HTML(Hyper Text Markup Language)是用于创建网页的标准标记语言。在HTML中,`&lt;hr&gt;`标签被用来表示一个水平分隔线,通常用于分割页面上的不同部分,起到视觉区分...

    html标记与属性速查表.pdf

    本文将基于“html标记与属性速查表.pdf”中的内容,深入解析其中的关键标记及其属性,帮助读者更好地理解和运用HTML。 #### 1. 基础标记与属性概览 - ****:链接标记,用于创建到其他页面或资源的链接。关键属性...

    html-html标记与属性速查表

    ### HTML标记与属性详解 #### - **定义**:连结标记,用于创建超链接。 - **常用属性**: - `href`:指定链接的目标URL。...以上就是从提供的文件中提取的HTML标记与属性的详细介绍,希望对您有所帮助。

    html 标签 及其 属性 大全

    * `&lt;center&gt;`:置中标签,用于创建置中的文字 字体效果标签 * `&lt;b&gt;`、`&lt;strong&gt;`:粗体字标签,用于创建粗体字 * `&lt;i&gt;`、`&lt;em&gt;`:斜体字标签,用于创建斜体字 * `&lt;dfn&gt;`:定义斜体字标签,用于创建定义斜体字 * `...

Global site tag (gtag.js) - Google Analytics