整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

备存:各种分割线的Html代码



种分割线Html代码


一、基本线条:

1、<HR>


2、align线条位置(可选left、right、center);width线条长度;color颜色;size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>


二、特效(效果并不是孤立的,可相互组合)


1、两头渐变透明:

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、纺锤形:

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右边渐变透明:

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左边渐变透明:

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虚线:

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、双线:

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立体效果:

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、钢针效果:

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

9.垂直分割线

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">


虚线的Html代码

HTML代码:

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部选择提示:你可先修改部分代码,再按运行]

lt;marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=left></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定卷动距离

<marquee scrolldelay=300>...</marquee>设定卷动时间

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =font-size:100 px>...</font>无限增大

<!>区断标记

<hr>水平线

<hr size=9>水平线(设定大小)

<hr width=80%>水平线(设定宽度)

<hr color=ff0000>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=_blank></a>外部连结(另开新视窗)

<a href=位址 target=_top></a>外部连结(全视窗连结)

<a href=位址 target=页框名></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=180>设定图片宽度

<img src=图片位址 height=30>设定图片高度

<img src=图片位址 alt=提示文字>设定图片提示文字

<img src=图片位址 border=1>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架


<! - - ... - -> 注解

<a href target> 指定超连结的分割视窗

<a href=#锚的名称> 指定锚名称的超连结

<a href> 指定超连结

<a name=锚的名称> 被连结点的名称

<address>....</address> 用来显示电子邮箱地址

<b> 粗体字

<base target> 指定超连结的分割视窗

<basefont size> 更改预设字形大小

<bgsound src> 加入背景音乐

<big> 显示大字体

<blink> 闪烁的文字

<body text link vlink> 设定文字颜色

<body> 显示本文

<br> 换行

<caption align> 设定表格标题位置

<caption>...</caption> 为表格加上标题

<center> 向中对齐

<cite>...<cite> 用於引经据典的文字

<code>...</code> 用於列出一段程式码

<comment>...</comment> 加上注解

<dd> 设定定义列表的项目解说

<dfn>...</dfn> 显示"定义"文字

<dir>...</dir> 列表文字标签

<dl>...</dl> 设定定义列表的标签

<dt> 设定定义列表的项目

<em> 强调之用

<font face> 任意指定所用的字形

<font face> 任意指定所用的字形

<font size> 设定字体大小

<form action> 设定户动式表单的处理方式

<form method> 设定户动式表单之资料传送方式

<frame marginheight> 设定视窗的上下边界

<frame marginwidth> 设定视窗的左右边界

<frame name> 为分割视窗命名

<frame noresize> 锁住分割视窗的大小

<frame scrolling> 设定分割视窗的卷轴

<frame src> 将html档加入视窗

<frameset cols> 将视窗分割成左右的子视窗

<frameset rows> 将视窗分割成上下的子视窗

<frameset>...</frameset> 划分分割视窗

<h1>~<h6> 设定文字大小

<head> 标示文件资讯

<hr> 加上分格线

<html> 文件的开始与结束

<i> 斜体字

<img align> 调整图形影像的位置

<img alt> 为你的图形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入图片并预设图形大小

<img hspace> 插入图片并预设图形的左右边界

<img lowsrc> 预载图片功能

<img src border> 设定图片边界

<img src> 插入图片

<img vspace> 插入图片并预设图形的上下边界

<input type name value> 在表单中加入输入栏位

<isindex> 定义查询用表单

<kbd>...</kbd> 表示使用者输入文字

<li type>...</li> 列表的项目 ( 可指定符号 )

<marquee> 跑马灯效果

<menu>...</menu> 条列文字标签

<meta name="refresh" content url> 自动更新文件内容

<multiple> 可同时选择多项的列表栏

<noframe> 定义不出现分割视窗的文字

<ol>...</ol> 有序号的列表

<option> 定义表单中列表栏的项目

<p align> 设定对齐方向

<p> 分段

<person>...</person> 显示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表单中定义列表栏

<small> 显示小字体

<strike> 文字加横线

<strong> 用於加强语气

<sub> 下标字

<sup> 上标字

<table border=n> 调整表格的宽线高度

<table cellpadding> 调整资料栏位之边界

<table cellspacing> 调整表格线的宽度

<table height> 调整表格的高度

<table width> 调整表格的宽度

<table>...</table> 产生表格的标签

<td align> 调整表格栏位之左右对齐

<td bgcolor> 设定表格栏位之背景颜色

<td colspan rowspan> 表格栏位的合并

<td nowrap> 设定表格栏位不换行

<td valign> 调整表格栏位之上下对齐

<td width> 调整表格栏位宽度

<td>...</td> 定义表格的资料栏位

<textarea name rows cols> 表单中加入多少列的文字输入栏

<textarea wrap> 决定文字输入栏是自动否换行

<th>...</th> 定义表格的标头栏位

<title> 文件标题

<tr>...</tr> 定义表格美一行

<tt> 打字机字体

<u> 文字加底线

<ul type>...</ul> 无序号的列表 ( 可指定符号 )

<var>...</var> 用於显示变数

.标签语义化

提到标签,很多刚入门前端开发的人,肯定都会很纳闷,这么多HTML标签我如何记住呢?我又应该根据什么依据去正确使用它呢?其实这样的问题,我刚开始和大家一样苦闷,但是在我学习Web页面开发的过程中,然后不断的积累,不断的总结,发现要想记住HTML标签以及怎样更好的去使用这些标签,需要做到以下三点:

第一点:不要死记硬背,没意义,只需要记住常用的哪几个足矣。

第二点:根据内容选择使用HTML标签,什么意思呢?见下文分解。

第三点:遵循W3C的规范。

首先,第一点咱们就不用说,不让死记硬背,就是要多写页面,多敲代码,久而久之孰能生巧,巧能生花,慢慢的你就能记住这些标签了,而且在开发页面的过程中,你们会发现,咱们最常用的也就是那么几个而已。

其次,第二点根据内容选择使用HTML标签,这一点非常关键,因为你掌握了这一点,你能很好地去使用HTML标签,并且能让页面变得很优质,这也会提高你网页被搜索引擎收录。

最后,也就是第三点,这一点自然不用怀疑,如果要想让页面更好的在不同的浏览器中呈现出一致的效果,那么必须遵循W3C的规范。

说了这么多,只是一些学习需要注意的问题,下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中,大家会发现类似的标签,比如标题标签(h1-h6)、p(段落标签)、a(超链接标签)以及图片标签(img)等,通过这些标签的名称,咱们是不是不难理解吧,很直观的就知道这些标签该怎么,用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来,移动Web都是通过H5去开发页面,而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢?所谓的标签语义化,指的就是标签所代表的含义。咱们可以通过标签的含义,正确地去使用它。

标签语义化的作用:

  • 通过使用语义化标签,更能精准地将其把内容呈现出来。
  • 通过使用语义化标签,让页面结构更加的清晰,方便代码的阅读和维护。
  • 能让浏览器或网络爬虫更好地解析,从而更好地分析和抓取网页中的内容。
  • 使用语义化标签还能让搜索引擎得到更好的优化。

如下图所示,通过使用语义化标签和没使用任何标签,就能直观感受到语义化标签的好处。

普通的文本和使用语义化标签后的效果对比图

那么如何去判断一个页面中,语义化是否良好呢?很简单,直接扒掉CSS这层漂亮的衣服,当我们把CSS去掉后,如果页面中的结构依然组织有序,并且有良好的可读性,那么它就是非常良好的。

如何去使用这些标签呢?首先根据内容确定语义化的标签,其次再根据呈现需求,使用CSS样式。因此HTML标签并非通过死记硬背,而是通过在使用的过程中,利用HTML标签的语义化去记忆。如下图所示,通过使用语义化标签,瞬间就能把普通的文本,以更清晰的结构呈现出来。

使用语义化的普通文本,变得更为结构清晰

2.常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签,这些标签又被统称为排版标签。

在开发中,排版标签主要是和CSS搭配使用,主要是用于显示网页的整体结构,也是网页布局中常用的标签。下面我一一了解一下。

排版标签:

【1】标题标签(h1-h6)

  • 缩写来源:标题标签的英文单词是head,因此它使用它的缩写h来表示。
  • 语义:标题标签主要是用于突显标题内容,它是h1-h6(分为1级标题、2级标题、3级标题......6级标题),级别依次递减。级别越小,标题就会越小。
  • 语法格式如下:


标题标签的使用

呈现的效果如下:

呈现的效果


一句话总结:使用了标题标签的文字会加粗,会根据级别显示文字的大小,并且一行只能放一个标题。

【2】段落标签(p)

  • 缩写来源:p标签的英文单词是paragraph,表示段落的意思。
  • 语义:p标签可以把html文档分割为若干段落。在网页中要想把文字以段落的形式呈现,并且有条不紊的,那么段落就是必备的标签。
  • 语法格式如下:

p标签语法格式


【3】水平线标签(hr)

  • 缩写来源:hr的英文单词是horizontal,表示横线的意思。
  • 语义:它表示分隔线,用于将文字内容分隔开,让文档结构看起来更加清晰,层次分明。当然在网页中除了使用分隔线(hr)标签来实现,还可以通过图片插入以及CSS样式来实现,只不过使用hr标签是最简单的方式。提示:CSS样式是页面中的重点,此处主要是介绍HTML,因此暂不做详细说明。
  • 语法格式:<hr />。
  • 标签特点:它是一个单标签,hr标签默认是以水平线的样式进行显示。

【4】换行标签(br)

  • 缩写来源:br的英文单词是break,打断、换行的意思。
  • 语义:表示换行的意思。在html中,一个段落的文字会从左到右依次排列显示,直到浏览器窗口的最右端,才会自动换行。如果我们在实际开发中碰到需要将文本内容强制换行显示的,此时就可以使用换行标签实现。
  • 语法格式:<br />。
  • 标签特点:它也是一个单标签。
  • 示例:将以下内容通过br标签强制换行

文本

呈现效果:

使用br标签后的效果

【5】div和span标签

  • 缩写来源:div的英文是division,表示分割、分区的意思。span没有缩写,表示跨度、跨距和范围的意思。
  • 语义:div和span标签,没有任何语言,主要是用于网页布局使用。
  • 语法格式:<div>这是一个div盒子</div> <span>这是一个span盒子</span>
  • div和span的区别:div标签,主要是用于布局,在没有使用其它干预的情况下,一行只能放一个div。而span标签,也是用来布局,在没有任何其它的干预的情况下,一行上可以放很多span标签。此处的效果,大家可以根据语法,自行在实现查看一下对比效果。

最后给大家来一个完美的总结:

排版标签的汇总

难道这就完了吗?咱们的标签就只有这些常用的吗?那当然不是,咱们接下来再看我们的文本格式化标签。

文本格式化标签

文本格式化标签的作用:通常文本格式化标签主要用于网页中文字样式的设置,比如字体加粗、斜体或下划线等效果,当然后期也会通过CSS样式来实现,会更加完美。

常见的文本格式化标签如下:

文本格式化标签

它们分别的区别:

  • b和strong:b标签只是加粗,strong除了加粗,还具有强调的意思,更具语义化。
  • i和em:i只是让文本显示斜体的效果,而em在斜体的效果上加强了语义。
  • s和del:s只是让文本显示删除线,而得了不仅显示删除线,还加强了语义。
  • u和ins:u只是添加了下划线,而ins不仅显示了下划线,还加强了语义。

我么网页中除了排版标签、文本格式化标签,当然还少不了图片标签(img),通过图片的展示,会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。

图片标签(img)

  • 缩写来源:img的英文单词是image,表示图像、影像的意思。
  • 语义:用于显示图片内容。
  • 语法格式:<img src='图像url' />,在这个的语法中,我们发现img标签使用了src属性,这个属性主要是用于指定图像的文件路径,也是img的必须属性。
  • img标签常见属性如下所示:

img标签属性

  • 标签特点:img标签主要是用于在网页中插入图像,它是一个单标签。
  • 知识点扩展:通过img标签,我们会发现,html标签除了自身外,它们还具有一些属性,这些属性,我们称为标签属性,通过标签属性可以设置标签的一些外在特性。标签属性的基本语法格式:<标签名 属性1="值1" 属性2="值2" ...>内容 </标签名>。

标签属性的特点:

  • 一个标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  • 任何标签的属性都有默认值,省略该属性则使用默认值。
  • 标签的属性采用的是键值对的格式key="value"的形式。

图片标签属性使用

链接标签

  • 缩写来源:a标签的英文单词是anchor,表示锚、铁锚的意思。
  • 语义:表示超文本链接。
  • 语法格式:<a href ="跳转目标" target="目标窗口的弹出方式">文本或图像</a>。
  • 常见的属性:

a标签的常见属性

提示:

  • 比如添加作为外部链接,需要添加外部地址。
  • 内部链接,就是页面直接内部相互链接,因此只需要使用名称即可,比如

内部链接地址

  • 如果没有确定链接目标,通常使用"#"表示暂时空链接。
  • 除了可以创建文本链接,还可以给网页中的元素,如图像、表格、音频、视频都可以添加超链接。

注释标签

  • 注释标签:用于在HTML文档中添加一些便于阅读和理解,但又不需要显示在页面中的文字说明,此时就需要使用注释标签。它是HTML中的一种特殊标签,它不会在浏览器中显示,但是会在源代码中查看到。
  • 语法格式:

注释标签


  • 提示:注释通常是给咱们开发者看的,程序是不会执行这个代码的。

好了,各位小伙伴,今天我就给大家分享到这儿了,希望我给大家总结的内容,能帮到正在浏览我这篇内容的前端开发者,也希望你们有所收获。如果喜欢的,可以点击关注,会继续给大家分享更多的内容。