怎么样在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怎么打开

HTML是一种代码形式的文本格式。你可以在该文件点右键--选打开方式,然后从本地已安装的程序中选择一种打开方式-----点确定,就可以选择你要使用的程序打开,点确定前你要...

怎么在HTML网页中插入视频

HTML网页中插入视频需要用到vedio标签:1、在vedio.html中加入以下核心代码:<video width="320" height="240" controls>   <source src=&qu...

如何修改html中插入的图片的大小

第一种: 在图片上加上width属性和height属性,比如: width="100" 图片的宽就会成为100像素 第二种: 写css样式控制图片大小 比如: img{width:100px;height:100p...

html格式怎么打开

HTML是超文本描述语言,也就是常见的静态网页的语言,一般用IE就可以打开。 你说的打不开,其实是看不见里面的内容,这是因为简体的HTM文件在开头部分默认添加了一句la...

HTML如何禁止文本框输入

禁止文本框输入有以下两种方法:1,设置input为只读状态,代码如下:<input readonly="readonly" value="test1"/>2,设置input为不用状态,代...

html中如何注释

<!--xxxxxxxx-->xxxxxx代表你要写的注释内容

html如何对表格的一行中的几列进行合并的代码

colspan="2" colspan等于几就是合并几个单元格;这是合并列; rowspan="2" 这个是合并行; 它们是写在<td>标签里的 例: <table width="300...

如何打开HTML格式的文件?

用右键点击html文件,在 打开方式 中选择internet explorer(IE浏览器)打开就行(在打开方式下方,选择 永远使用这一程序打开),以后只要是html文件,只要双击,就会用ie浏览器打开。

怎么打开HTML文件啊?

HTML文件中可能加入了一些自动访问网站的代码,如显示广告图片等等,所以在断网情况下要延迟很久 如果懂得编辑网页,可以用FRONTPAGE等打开,在代码模式下 删除 相...

在HTML中如何插入背景音乐?

代码: <embed src="音乐文件地址" AUTOSTART=“设定是否自动播放” LOOP=“设定播放次数” > 说明(下面的属性都可以加在其中): SRC="FILENAM...


www.book1234.com true http://www.book1234.com/10/4336/109451.html report 20310 怎么样在HTML中插入一行应该怎么做?,共同创作人wikiHow员工这篇文章由我们训练有素的编辑和研究团队共同创作,他们对文章的准确性和全面性进行了验证。wikiHow的内容管理团队会严密监督编辑人员的工作,确保每篇文章都符合我们的高质量标准要求。在本文中:使用HTML4.01使用CSS和...
娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2018 book1234.com All Rights Reserved. 布客网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
教育考试: 学历财经建筑 医药公考资格外语电脑作文招聘中小学留学 文档 移民 文库专栏23问答中心z资讯z资讯1资讯涨资讯涨资讯1资讯问答图书馆知识IT编程数码信息解决方案信息中心IT科技问答新闻中心软件教室设计大全网络相关英语学习开发编程考试中心参考范文管理文库营销中心站长之家IT信息中心商学院数码大全硬件DIY企业服务网吧在线百科硬件知识手机平板汽车游戏家电精彩摄影现代家居IT女人经验健康养生猎奇创业攻略教育学习历史时尚潮流最近更新涨知识