北京pk10技巧

怎么样在HTML中插入一行 应该怎么做?

来源:互联网
责任编辑:王嘉善
 综合 
字体:

共同创作人wikiHow员工这篇文章由我们训练有素的编辑和研究团队共同创作,他们对文章的准确性和全面性进行了验证。

wikiHow的内容管理团队会严密监督编辑人员的工作,确保每篇文章都符合我们的高质量标准要求。

在本文中:使用HTML 4.01使用CSS和HTML5参考

本文教你如何在HTML中创建水平线。水平线可以用来分隔网站上的内容。创建一行的代码非常简单。但是,你可以在HTML 4.01中添加嵌入代码来设计行。在HTML5中,你需要使用CSS对行进行样式设置。[1]

1使用HTML 4.01

以658928 1 1为标题的图片

1打开或创建一个新的HTML文档。可以使用文本编辑器(如“记事本”)编辑HTML文档。你还可以使用代码编辑器,如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法:

打开“记事本”,或者文本编辑器和代码编辑器。

点击文件菜单。

点击打开

选择HTML文件。

点击打开

以658928 2 1为标题的图片

2选择要插入行的位置。向下滚动,直到找到要插入这行的上面一行,然后点击这行的最左侧,将光标直接放在这一行的最前面。

以658928 3 1为标题的图片

3创建空白区域。按两次Enter,向下移动你想要在上面输入行的文本,然后将光标向上移动到空白区域。

以658928 4 1为标题的图片

4添加"<hr>"标签。在行开始前的空格中输入<hr><hr>标签负责在整个页面上创建一条水平线。

以658928 5 1为标题的图片

5将“hr”标签前面的行移到新行上。按Enter即可。这时, <hr>标签应该就在自己的那一行了。

以658928 6 1为标题的图片

6向水平线添加属性(可选)。你可以向水平线添加属性,例如长度、宽度、颜色和对齐。在代码括号中的“hr”后面使用以下代码。可以在括号中添加多个属性,方法是用空格分隔它们。[2]

输入<hr size="#">更改行的粗细。用粗细的数字(如,size="10")替换#。

输入<hr width="#">更改行的宽度。用宽度的像素数或页面宽度的百分比(如,width="200", or width="75%")替换#。

输入<hr color="#">更改行的颜色。用颜色或十六进制代码的名称(如,color="red" or color="#FF0000")替换#。

输入<hr align="#">对齐行。用"right"、"left"或"center"(如,<hr width="50%" align="center">)替换#。

以658928 7 1为标题的图片

7保存HTML文件。要将文本文件保存为HTML文档,你需要将文件扩展名(.txt、.docx)替换成“.html”。使用下列步骤保存HTML文件:

点击文件菜单。

点击另存为

在“文件名”旁边输入文件名称。

在文件名末尾输入.html

点击保存

以658928 8 1为标题的图片

8测试HTML。右击文件,选择打开方式。然后选择网页浏览器。在“hr”标签的位置应该会出现一条实线。你的HTML代码应该是这样的: [3]

<!DOCTYPE html><html><body><h1>这是标题</h1><hr size="6" width="50%" align="left" color="green"><p1>这是段落文本,与标题之间用一行隔开。</p1></body></html>

2使用CSS和HTML5

以658928 9 1为标题的图片

1打开或创建一个新的HTML文档。可以使用文本编辑器(如“记事本”)编辑HTML文档。你还可以使用代码编辑器,如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法:

打开“记事本”,或者文本编辑器和代码编辑器。

点击文件菜单。

点击打开

选择HTML文件。

点击打开

以658928 10 1为标题的图片

2在HTML文档中添加head标签。如果HTML文档还没有head标签,采用以下步骤添加head标签。head标签位于“<html>”标签后面,“<body>”标签的前面。

在文档顶部输入<head>

按两次Enter添加新的两行。

输入</head>结束head标签。

以658928 11 1为标题的图片

3在head标签内输入<style type="text/css">style标签位于两个head标签之间。这样就创建了一个位置,你可以在其中输入CSS代码来设置HTML的样式。

或者你也可以用外部样式表。查看"如何将CSS文件添加到HTML"了解如何将外部CSS文件链接到HTML文件。

以658928 12 1为标题的图片

4输入 hr {这是用于设置水平线样式的CSS标签。在head标签内的style标签后添加它,或者在外部CSS文件中添加。

以658928 13 1为标题的图片

5添加"<hr>"标签的CSS样式。这些样式在"hr {"标签的后面。设置水平线样式的方法有很多。下面提供一些示例。

输入width: ##px;设置行宽度。用行宽的像素数替换##。你还可以使用百分比(%)代替像素(px)。

输入height: ##px;设置行的粗细。用行粗细的像素数替换##。

输入background-color: ##;设置行的颜色。将##替换为颜色名称,或井号(#)后面加上十六进制颜色代码。

输入margin-right: ##px;设置右边距像素数。用像素数或“自动”替换##。输入“自动”将行左对齐或中间对齐。

输入margin-left: ##px;设置左边距像素数。用像素数或“自动”替换##。输入“自动”将行右对齐或中间对齐。

输入margin-top: ##px; 设置行的顶部外边距。将##替换为页边距的大小或像素数。

输入margin-bottom: ##px;设置行的底部外边距。将##替换为页边距的大小或像素数。

输入border-width: ##px;创建行周围的边框(可选)。用边框粗细的像素数替换##。

输入border-color: ##;设置边框颜色(可选)。将##替换为颜色名称,或者井号(#)后面加上十六进制颜色代码。

以658928 14 1为标题的图片

6在样式设置后输入}这样就会关闭<hr>标签的样式设置。

以658928 15 1为标题的图片

7在HTML文档body标签中的任意位置输入<hr>这样就会向HTML文档添加一条水平线。任何时候在HTML文档中使用<hr>标签时,CSS样式设置都会适用。[4]你的代码应该是这样的:

<!DOCTYPE html><html><head><style type="text/css">hr {width: 50%;height: 20px;background-color: red;margin-right: auto;margin-left: auto;margin-top: 5px;margin-bottom: 5px;border-width: 2px;border-color: green;}</style></head><body><h1>这是标题</h1><hr><p1>这是用水平线分隔的段落文本</p1></body></html>

参考

↑ https://www.w3schools.com/tags/tag_hr.asp↑ http://www.myhtmltutorials.com/line.html↑ https://www.w3schools.com/TAGS/tag_hr.asp↑ https://love2dev.com/blog/html-horizontal-line/

相关wikiHows

使用VPN

如何

使用VPN

打开EPUB文件

如何

打开EPUB文件

减少PDF文件的大小

如何

减少PDF文件的大小

在Chrome浏览器中下载YouTube视频

如何

在Chrome浏览器中下载YouTube视频

添加打印机

如何

添加打印机

将照片从iPhone传到电脑

如何

将照片从iPhone传到电脑

在HTML中插入空格

如何

在HTML中插入空格

打出倒过来的问号?

如何

打出倒过来的问号?

打开EML文件

如何

打开EML文件

恢复被覆盖的文件

如何

恢复被覆盖的文件

打开SWF文件

如何

打开SWF文件

重置Macbook Pro

如何

重置Macbook Pro

将MP4刻录成DVD

如何

将MP4刻录成DVD

制作你自己的电脑游戏

如何

制作你自己的电脑游戏

根据您访问的内容,您可能还对以下内容感兴趣,希望对您有帮助:

如何在html中插入四张具有连接的图片并且图片在一行上

答:简单点的用table

有没有什么办法,可以动态的在html表格中插入列和行

答://动态添加行与列 function addHtml( ) { var tab=document.getElementById("viewTabs"); //获得表格 var colsNum=tab.rows.item(0).cells.length; //表格的列数 var num=document.getElementById("viewTabs").rows.length;//表格当前的行数 var...

用js实现点击按钮在html中增加一行内容,问题见详细!

北京pk10技巧答: 标题 文件名 时间 内容简介 function add_tr(obj) { var tr = $(obj).parent().parent(); tr.after(tr.clone()); }

html中怎么让td中的字显示在一行?

北京pk10技巧答:一、给相应td添加white-space:nowrap;这个属性是设置文字强制不换行。 二、在td中添加标签 如:我是文字我是文字。 标签也是设置文字不换行的标签,但是标签内部可以添加换行符,如: 我是文字我是文字我是第二行的文字。 1、HTML:超文本标记...

html中怎么让td中的字显示在一行

北京pk10技巧答:1、给相应td添加 white-space:nowrap; 这个属性是设置文字强制不换行 2、在td中添加标签,如: 我是文字我是文字 标签也是设置文字不换行的标签,但是标签内部可以添加换行符,如: 我是文字我是文字我是第二行的文字

HTML里面怎样添加一行字的背景颜色??

答:可以用表格。 你输入的内容;

怎么在html里把一行中的两列合并

答:利用表格的水平跨度colspan,如: 北京pk10技巧 百度介绍 北京pk10技巧 .....

html中怎样在图片上添加一行文字?而且文字是超链...

答:2个方法!1.在图片上 添加一个层 在层里编辑文字2.就是 把你要用的那个图片先PS一下,再用

html中怎么使两个标签间文字在一行上

答:需要准备的材料分别有:电脑、浏览器、html编辑器。 1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。 2、在index.html中的第一个标签中,加入样式代码:style="float: left"。 3、浏览器运行index.html页面,此时...

html中如何让在同一行的超链接文字靠右?

答:给a标签加绝对定位,right:0,他们的父元素加相对定位


娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
Copyright © 2004-2018 powayart.com All Rights Reserved. 布客网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
北京pk10开奖记录-联盟欢迎您 北京pk10开奖记录-联盟欢迎您 北京pk10开奖记录-联盟欢迎您 北京pk10开奖记录-联盟欢迎您 北京pk10开奖记录-联盟欢迎您 document.write ('');