HTML（二）html常用标记

Myth丶恋晨 2022-05-17 02:30 199阅读 0赞

## 1、内容分隔<HR>标签 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;hr width="100%" size="1" color="#000000" /&gt;</td> 
  </tr> 
 </tbody> 
</table>

效果：

![70][]

## 2、项目列表和编号 ##

### （1）有序列表<OL> ###

效果：

![70 1][]

### （2）无序列表<UL> ###

效果：

![70 2][]

### 3、预格式文本<PRE>标签 ###

HTML中代码格式与浏览器中显示效果一样

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>&lt;pre&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;hello：</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello world!</p> <p>&lt;/pre&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

效果：

![70 3][]

## 4、页面链接<A>标签 ##

### （1）连接到新页面 ###

在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有2种方式

*  相对路径：指定相对于当前文件的文件位置
 *  绝对路径：指定从根目录到文件的完整路径

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;在本页打开&nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="new.jsp"&gt;new&lt;/a&gt;&nbsp;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;新开一个页打开&nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="new.jsp" target="_blank"&gt;new&lt;/a&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### （2）链接到页面的指定位置，锚点的使用 ###

*  第一步：定义锚点，在你想要连接的位置定义一个锚点

*  第二步：连接到锚点，在锚点前面加个\#符号。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="#head"&gt;回顶部&lt;/a&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="new.jsp#nfooter"&gt;new页面的底部&lt;/a&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### （3）连接的其他使用 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="mailto:666666@qq.com"&gt;send mail&lt;/a&gt;&nbsp;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;a href="#"&gt;空连接&lt;/a&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## 5、滚动<MARQUEE>标签 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;marquee scrolldelay="100" direction="left" οnmοuseοver="this.stop()"<br> οnmοuseοut="this.start()"&gt;<br> &lt;a href="new.jsp#nfooter"&gt;&lt;img alt="卡通" src="卡通.png"<br> align="middle"&gt;跳转到新页面 &lt;/a&gt;<br> &lt;/marquee&gt;</td> 
  </tr> 
 </tbody> 
</table>

pscrolldelay：表示滚动延迟时间，默认值为90毫秒。 pdirection：表示滚动的方向，默认为从右向左。

[70]: /images/20220517/aa4c159211ac4a68ae61ce1928652c58.png
[70 1]: /images/20220517/1272ba0f8bc04209a5617d91dacd0387.png
[70 2]: /images/20220517/1f7ec64286f0465d849031e5f376cbf4.png
[70 3]: /images/20220517/19c795096ac34a00bf785d952ee4f074.png