html怎么输出一条横线

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代码

HTML<bdo>标签控制文本输出方向 <p>如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl)</p><bdodir="rtl。

在没有使用编辑器而是使用了文本域 <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 效果如下:

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6099295.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存