如何控制HR标签制作的网页水平线的长度和颜色?

html-css07

如何控制HR标签制作的网页水平线的长度和颜色?,第1张

通过设置HR的属性来控制标签的水平线的长度跟颜色,width=" " 来控制为宽度,color=" " 来控制水平线的颜色。

<hr width="宽度" color="颜色">  宽度范围为1到100,颜色可以任意设置指定的RGB颜色代码。通过这种方式来设置HR标签的长度跟颜色。

<hr>标签在 HTML 页面中创建一条水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

<hr />是网页编辑里的一个标签,其表现形式为一条横线。

扩展资料

<hr width="90%" size="1" color="red" />

说明:width=" " 引号里为宽度

size=" " 引号里为高度

color=" " 水平线的颜色

noshade="noshade"定义不投影

color=" "定义线条的颜色

align=" "设置对齐

在 HTML 4.01 中,不赞成使用 hr 元素的 size、width、noshade、 align属性;在 XHTML 1.0 Strict DTD 中,不支持 hr 元素的这些属性,请使用 CSS 代替。

示例可改为:<hr style="width:90%height:1color:red" />

参考资料来源:百度百科-HR

文字属性标签有:

1、id,意思当前页面中的唯一标识,用于css或js控制。

2、class,意思是类名,用于css控制。

3、title,意思是指定标题。

4、style,意思是插入线内样式。

标题标签Hx:

h1-h6,标题标签,共六级,一般一级标题H1在一个页面中只出现一次,二级标题到六级标题可以出现多次,其权值递减。默认为块元素,粗体,上下有边距(margin)。

主要属性:align,指定对齐方式,常用三个值left左对齐(默认),enter居中对齐,right右对齐(建议不要用,而是通过css来控制其对齐方式)。

段落标签P:段落p,用于整段文字,一般用于文章中的段落或一段独立的文字。默认为块元素。有上下边距(margin)。

主要属性:align对齐,用法同Hx的align。这里是段落文字,上标下标 Sup Sub。

上标下标,线内元素,在网页布局的时候相对用的较少,其主要目的是输出数学方程式,如:2x22+3x2+1=9。

强调strong em。

strong(线内元素,粗体),em(线内元素,斜体)。

这里是要强调的内容,默认表现为粗体。

这里也是要强调的内容,默认表现为斜体。

因为这两个元素有一定的感情色彩(强调),所以在seo代码优化中尤为重要,应该应用于那些确实需要强调的内容,而不是为了表现粗体或者斜体。如果你只是要表现粗体或者斜体,而不是真的要强调,那么你可以选择下面两个标签。

粗体B:

B粗体,线内元素。只是形式上的表现为粗体,而不具备强调的作用。

斜体I:

I,斜体,线内元素。只是形式上表现为斜体,而无强调作用。

换行BR:

br,换行符,将一段文字手段换行,一般很少使用。

水平线HR:

hr,在页面中创建一条水平线,或者分割线。默认为块元素,居中,2像素,带阴影,宽100%。

属性:

align对齐,用法同上。

noshade去掉阴影(显示纯色)。

size线条粗细。

width线条宽度。

color线条颜色。

html中所使用的颜色有以下几种:

英文单词,如red、green等等。

16进制值:如#ff0000、#006699,在html代码中的十六进制颜色不能使用简写如#f60,必须写成#ff6600。

rgb值:如rgb(255,255,0)。

rgba:如rgba(255,255,0,.5)。

块引用blockquote:

blockquote,引用元素,如文章中需要引用其他文章的内容时,默认为块元素。上下左右有边距。

几种控制文字的标签:

粗体:<b>文字</b>(例:文字)。

加重:<strong>文字</strong>(例:文字 )。

上标:<sup>文字</sup>(例:文字)。

下标:<sub>文字</sub>(例:文字)。

斜体:<i>文字</i>(例:文字)。

下划线:<u>文字</u>(例:文字)。

边框样式:

border-style属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是none时边框才可能出现。

<div class="hr" style="border-top:1px solid #000000"></div>

因为hr为水平线,所以上面的border-top也可写成:border-bottom

(根据情况!)