html怎么输出一条横线

html-css013

html怎么输出一条横线,第1张

用input页面标签

并将下Border设为直线

<style>

input[type="text"]{border-bottom:solid 1px #ccc}

<style>

<input type="text"/>

输出一条横线用:<hr>如果想让它长点就改变它的样式:<hr style="width:1000PX">变长和粗:<hr style="width:1000PXheight:20px">其中width 是宽(长),height是高(粗细)。

扩展资料:

<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。

参考资料来源:百度百科-html代码

在没有使用编辑器而是使用了文本域 <textarea>的情况下,用户所输入的内容呈现的效果并不理想,比如:原本的换行没有保留,全部成了单行显示。

要让在 <textarea>中输入的内容原格式输出有一下两种办法:

使用 <pre>标签是我最开始采用的办法,但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候,换行、Tab、空格都会影响到输出结果。如图:

并且, <pre>标签本身自带得有一些样式,比如字体等。如果你的页面有引入bootstrap等css框架,那么受样式影响就更多了,你得再写去覆盖。

因此,这种方法并不推荐。

我们先来看一下 white-space 的定义和属性:

其属性有:

也就是说,我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是:

如图:

white-space:pre-warp 效果如下:

white-space:pre-line 效果如下:

因此,更推荐使用第二种方法。