赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 网页结构轻松学

首页 > 网络课堂 > 网页结构轻松学 > 常用的HTML文本标记
常用的HTML文本标记
HTML页面是由一个个标记及标记的属性和标记所表述的内容所组成,要学会制作网页,就要熟悉这些标记及相关的使用方法,然后熟练使用。标记数量很多,使用方法也比较繁杂, 而且因为HTML版本的不同,也有不少变化,具体内容可看网页或查看W3School官网

虽然HTML的标记很多,但并不是都会要用到,更不必都要记住。而且随着HTML5新版本的推广,很多旧版的标记已经建议不再使用,会逐渐淘汰,只要掌握了少数常用的标记及其使用方法就可以编写不错的网页,这里只介绍部分常用的标记。

用于文本的标记:

文本是多数网站的主要内容,文本一般有字型、字号、对齐方式、黑体斜体等样式,还有下划线、上划线、删除线等特效,字体还有颜色及背景色,等等。 不过这些文本特性已经很少使用HTML来描述了,而是改为使用CSS,更加方便。不过,在一些场合,偶尔也会用到一些HTML标记,比如<strong></strong>。
<strong></strong>用于描述强调的文本内容,一般情况下是用黑体来显示。示例:用<strong></strong>标记的文本
其他类似功能的标记还有:

用<em></em>标记的文本
用<mark></mark>标记的文本
用<big></big>标记的文本
用<small></small>标记的文本
用<b></b>标记的文本

文本的下划线、删除线也有相应的标记:
用<u></u>标记的文本
用<del></del>标记的文本
还有两种加删除线的方法,不过已经不建议使用了,将来浏览器会不再支持。
用<s></s>标记的文本
用<strike></strike>标记的文本
上述加下划线及删除线的方法可以使用CSS方式实现,通过定义文本的text-decoration属性分别为underline、line-through和overline表示下划线、删除线和上划线。
使用style="text-decoration:underline;"描述的文本
使用style="text-decoration:line-through;"描述的文本
使用style="text-decoration:overline;"描述的文本
上述方法是一种内联的CSS方式,具体方式及其他相关内容见CSS部分。

还有一类标记用来表示字体的大小,为<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>。样式为:

用<h1></h1>标记的文本


用<h2></h2>标记的文本


用<h3></h3>标记的文本


用<h4></h4>标记的文本


用<h5></h5>标记的文本

用<h6></h6>标记的文本

这种样式常用来定义文本标题,所以行间距很大,其中<h1></h1>、<h2></h2>更常用一些。这些样式其实可以使用CSS方式重定义,包括重定义间距,如果不重定义就按浏览器默认的样式显示。

文本的颜色及背景色一般也建议使用CSS方式,有时会用到内联式CSS来定义。示例:
使用style="color:red;"描述的文本
使用style="color:green;"描述的文本
使用style="color:blue;"描述的文本
使用style="background-color:red;"描述的文本
使用style="background-color:green;"描述的文本
使用style="background-color:blue;"描述的文本
使用style="color:red;background-color:green;"描述的文本

文本经常会用到换行、段落标记等,需要用到标记<br/>和<p></p>。其中<br/>只是换行,notepad或word等字处理软件中,文本末尾加上回车就可以换行, 但在HTML文本中则不起作用,必须加上<br/>才能换行,不然几行会连在一起。示例:
结庐在人境,而无车马喧。 问君何能尔?心远地自偏。
不加换行就会显示在一行中,而每句后加上<br/>就会为四行显示:
结庐在人境,
而无车马喧。
问君何能尔?
心远地自偏。
类似还有一种<wbr/>标记,是一种软换行,主要用于西文网页中,西文单词比较长,如果在不恰当地方换行会造成单词分隔以产生歧义。在适当地方加入<wbr/>, 如果在句子中间并不会产生换行,如果在一行尾部,就会在此地换行,而不造成歧义。<wbr/>在中文网页中很少使用。
而<p></p>是一种段落标记,比如上述诗句加上<p></p>就会与其他部分产生行间距。

结庐在人境,而无车马喧。 问君何能尔?心远地自偏。

如果每句都使用<p></p>,样式为:

结庐在人境,

而无车马喧。

问君何能尔?

心远地自偏。

还有一种产生文本段落格式的方法是使用<ul></ul>和<li></li>这两种标记是嵌套使用的,总体上使用<ul></ul>包围,而其中的每一项则使用<li></li>包裹,格式为:
<ul>
<li>结庐在人境,</li>
<li>而无车马喧。</li>
<li>问君何能尔?</li>
<li>心远地自偏。</li>
</ul>
而产生的样式为:
  • 结庐在人境,
  • 而无车马喧。
  • 问君何能尔?
  • 心远地自偏。
类似还有一种<ol></ol>,也可以与<li></li>配合使用,这是一种有序项目,会自动加上前缀。样式为:
  1. 结庐在人境,
  2. 而无车马喧。
  3. 问君何能尔?
  4. 心远地自偏。
这两种段落格式一般用来分隔相同等级的多个项目,而且还可以通过CSS样式来定义缩进量及每行的前缀标记等,不过具体内容在CSS时介绍。

还有一种文本中经常使用的标记<span></span>,这个标记包围起来的元素可以赋予某种样式,如果不设定样式并不会造成什么影响,主要作用就是用来把其中一部分分隔出来以便赋给特定样式。 其使用方法会在网页布局部分再介绍。

有时候需要在网页中显示一些包含指数的数学公式,或一些带下标的数学物理常数等,就会用到<sup></sup>和<sub></sub>,分别表示上标和下标,示例:
X2+2X+1=0
log2π
10100
(cos2(x))dx
不过这种使用上标和下标的方法只能表示简单的上下标的公式,复杂的公式只能使用图片方式来引入。

上述标记是用于文本的常用标记,其他还有一些只用于特殊场合,很少能见到了。比如<code></code>用于显示程序源码,类似的还有<tt></tt>和<pre></pre>。
关于文本常用的标记,还有一种<table></table>用于产生表格,其中包括多种标记和属性,会在以后再介绍。
Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659