这篇教程详细介绍了HTML的基础，包括空格符号、特殊符号、注释语句、标题字标记、文字修饰、字体标记以及段落和换行的相关知识。通过学习，读者可以掌握HTML的基本语法和常用元素的使用。
文字段落标记
输入空格符号
页面中空格符号是通过代码控制的，下面介绍空格的符号代码。
基本语法
语法解释
一个半角空格使用一个 表示，多个空格只需使用多次即可。
输入特殊符号
与空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来表现。通常由"&"前缀，加上字符对应的名称，再加上后缀";"而组成。
特殊符号
特殊符号 符号码
" "
& &
< <
> >
© ©
® ®
± ±
× ×
§ §
¢ ¢
¥ ¥
• ·
€ €
£ £
™ ™
语法解释
在源代码中输入相应的符号码，就可以显示特殊符号了。
注释语句<comment>
页面中可以加入相关的说明注释语句，便于源代码编写者对代码的检查与维护。这些注释语句并不会出现在浏览器的显示中。在源代码适当的位置添加注释是很好的习惯，因为一但代码过长，很可能连编写者最后都可能产生混淆，适当的注释有助于对源代码的理解。
基本语法
<comment>……</comment>
<!––……––>
语法解释
使用上述两种表示方法都可以代表注释语句
标题字标记<h>
在浏览器中的正文部分，可以显示标题文字，所谓标题文字就是以某几种固定的字号显示文字。标题字标记共有6种，每一种的标题在字号上有明显的区别。一般用标题来强调段落要表现的内容，在html中定义了六级标题，从一至六级，每级标题的字体大小依次递减。
标题字
标记 描述
<h1>……</h1> 一级标题
<h2>……</h2> 二级标题
<h3>……</h3> 三级标题
<h4>……</h4> 四级标题
<h5>……</h5> 五级标题
<h6>……</h6> 六级标题
语法解释
一级标题使用最大的字号表现，六级标题使用最小的字号表现。
标题字的对齐属性align
标题字可以在页面中实现水平方向向左、中、右的对齐，便于文字在页面中的编排。在标题标记中，最主要的属性是align(对齐)属性，用于定义标题段落的对齐方式，使页面更加整齐。
标题字的对齐属性
属性 描述
<hn align=left>……</hn> 标题居左对齐
<hn align=center>……</hn> 标题居中对齐
<hn align=right>……</hn> 标题居右对齐
语法解释
属性hn中的n代表从1至6
文字的修饰标记
在html文件中，可以加入多种文字的修饰标记。
文字的修饰属性
标记 描述
<b> 粗体
<strong> 粗体
<i> 斜体
<em> 斜体
<cite> 斜体
<sup> 上标
<sub> 下标
<big> 大字号
<small> 小字号
<u> 下划线
<s> 删除线
<strike> 删除线
<address> 地址
<tt> 打字机标记
<blink> 闪烁文字(只适应于netscape浏览器)
<code> 等宽
<samp> 等宽
<kbd> 键盘输入文字
<var> 声明变量
粗体标记<b>、<strong>
对于需要强调的文字，可以以粗体来表现，这就需要html文字粗体标记。
基本语法
<b>……</b>
<strong>……</strong>
语法解释
这两个标记都可以表现文字粗体的效果
斜体标记<i>、<em>、<cite>
一般在文字中，对于需要强调的英文内容，可以使用斜体的效果。当然，同样适应于中文文字中。
基本语法
<i>……</i>
<em>……</em>
<cite>……</cite>
语法解释
这3个标记都可以表现文字斜体的效果
上标标记<sup>
常见的数学表达式，可以将一段文字以小字体的方式显示在另一段文字的右上角，这就是上标。
基本语法
<sup>……</sup>
语法解释
将文字放在标记中间就可以实现上标
下标标记<sub>
常见的数学表达式或化学方程式，可以将一段文字以小字体的方式显示在另一段文字的右下脚，这就是下标。
基本语法
<sub>……</sub>
语法解释
将文字放在标记中间就可以实现下标
大字号标记<big>
可以使用大字号标记将当前的文字加大一级字号显示
基本语法
<big>……</big>
语法解释
将文字放在标记中间就可以实现加大字号
小字号标记<small>
可以使用小字号标记将当前的文字减小一级字号显示
基本语法
<small>……</small>
语法解释
将文字放在标记中间就可以实现减小字号
下划线标记<u>
在页面中可以为文字加注下划线
基本语法
<u>……</u>
语法解释
将文字放在标记中间就可以实现文字的下划线
删除线标记<s>、<strike>
页面中可以为文字加注删除线
基本语法
<s>……</s>
<strike>……</strike>
语法解释
这两个标记都可以在文字的中间填加删除线
地址文字标记<address>
这个标记用于显示E_mail、地址等文字内容，主要用于英文字体的显示中。
基本语法
<address>……</address>
语法解释
在标记间的文字就是地址等内容
文件说明
使用了标记的地址将突出显示
打字机标记<tt>
这个标记可以创建出打字机风格的字体，文字间是以等宽来显示的。
基本语法
<tt>……</tt>
语法解释
在标记间的文字就是打字机风格的效果
等宽文字标记<code>、<samp>
这两个标记可以使用等宽的字体来显示文字的内容，多用于英文文字。
基本语法
<code>……</code>
<samp>……</samp>
语法解释
在标记间的文字就是等宽文字的效果
键盘输入文字标记<kbd>
这个标记可以显示用户输入命令的文字效果
基本语法
<kbd>……</kbd>
语法解释
在标记间的文字就是键盘输入文字的效果
声明变量标记<var>
这个标记可以显示变量的文字效果，使用的是斜体字体。
基本语法
<var>……</var>
语法解释
在标记间的文字就是声明变量的效果
字体标记
如果希望更改页面中的字体、字号和颜色，最佳的标记是使用<font>标记，其属性如下所示
<font>标记的属性
属性 描述
face 字体
size 字号
color 颜色
字体属性face
任何一种安装在Windows系统中的字体都可以显示在浏览器中，选择"开始/控制面板"，双击"字体"，可以看到系统中安装的所有字体。一般来说，不应该在网页中使用过于特殊的字体，因为对于浏览网页的人来说，其计算机中不一定会安装这些特殊字体，如果浏览到带有这些特殊字体格式的字符，只能以普通的默认字体来显示。对于中文网页来说，应该尽量对汉字使用宋体或黑体，因为大多数计算机中，默认时都安装有这两种字体。
基本语法
<font face="font_name, font_name,……">……</font>
语法解释
<font>标记中的face定义了字体，不同的字体可以定义多次，字体之间使用","分开，如果第一种字体系统中不存在，就显示第二种字体，如果字体都不存在，就显示默认的字体。
字号属性size
页面中的文字可以使用不同的字号表现。字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。例如1号和2号字，比默认字体要小一些，而4号和5号字，比默认字体要大一些。
基本语法
<font size="value">……</font>
语法解释
<font>标记中的size定义了字号，value取值范围为从1到7或者+1到+7、从-1到-7。1是最小的字号，7是最大的字号。
颜色属性color
html页面中的文字可以使用不同的颜色表现，丰富的字符颜色毫无疑问能够极大增强文档的表现力。
基本语法
<font color="value">……</font>
语法解释
<font>标记中的color定义了颜色，value定义颜色的名称或者十六进制代码。
基字标记<basefont>
这个标记用于设定基本的文字属性，对于字号，<font size=+n…</font>或<font size=-n>…</font>将受到这个基本字号的影响。
基本语法
<basefont face="font_name,font_name,……" color="value" size="value">
语法解释
<basefont>标记中的定义将影响整个页面
<html>
<head>
<title>基字对文字的影响</title>
</head>
<body>
这是一本<basefont size=5 color="#009900" face="文鼎特粗黑"/>专业详尽的html书籍
<font size=+1 color="#008080">谢谢</font>
<font size=-1>购买</font>
</body>
</html>
文件说明
"这是一本"使用默认的字体、字号、颜色，"专业详尽的html书籍"使用基字标记规定的属性，"谢谢"的字号是在基字的字号基础上加1，字体维持基字的字体， "购买"的字号是在基字的字号基础上减1，字体和颜色均维持基字的属性。
插入文字<ins>
<ins>元素的英文名称是insert。设计者在标注一篇文章的时候，通常需要对文章进行修改，修改文章的最基本操作就是插入和删除文字。而在大多数情况下，这些修改操作的过程需要显示出来。<ins>元素就起这个作用，它告诉别人，这篇文章的此处插入了其它内容。
基本语法
<ins cite=url datetime=修改时间>需要插入的文本</ins>
属性 描述
cite 指出原文档或信息的url，该属性通常用来指出这篇文章在此处被改动的原因
datetime 日期或时间，指出何时做的修改
删除文字<del>
<del>元素的英文名称是delete。它能删除一段文本中的部分文字，同时给出做出这个修改的解释和时间。
基本语法
<del cite=url datetime=修改时间>需要删除的文本</del>
<del>元素的属性
属性 描述
cite 指出原文档或信息的url，该属性通常用来指出这篇文章在此处被改动的原因
datetime 日期或时间，指出何时做的修改
段落标签<p></p>
在html语言中，有专门的标记表示段落。所谓段落就是一段格式统一的文本。在文档窗口中，每输入一段文字，按下回车键后，就自动生成一个段落。按下回车键的操作通常被称作硬回车，可以说段落就是带有硬回车的文字组合。在html中段落主要由标记<p>定义。
基本语法
<p>…</p>
…<p>
语法解释
可以使用成对的<p>标记来包含段落，也可以使用单独的<p>标记来划分段落。
段落标记的对齐属性align
段落的对齐属性，指的是段落相对于文档窗口(或浏览器窗口)在水平位置的对齐方式。段落文字在页面中可以实现水平方向上的左、中、右、两端的对齐，便于文字在页面中的编排。
基本语法
<p align=left>…</p>
<p align=center>…</p>
<p align=right>…</p>
<p align=justipy>…</p>
语法解释
<p>标记的align属性可以使段落文字进行居左、居中、居右的对齐。
换行标记<br>
段落与段落之间是隔行换行的，文字的行间距过大，这时可以使用换行标记来完成文字的紧凑换行显示。
基本语法
<br>
语法解释
一个换行使用一个<br>，多个换行可以连续使用多个<br>标记。
注：将<br>标签加在<p></p>标签对外边将创建一个大的回车换行；如果创建在<p></p>标签对内部，则生成的换行距离比较小。
不换行标记<nobr>
如果浏览器中单行文字的宽度过长，浏览器会自动将该文字换行显示，如果希望强制浏览器不换行显示，可以使用相应的标记。
基本语法
<nobr>…</nobr>
语法解释
上述标记之间的文字会显示不自动换行的效果
强制换行标记<wbr>
在<nobr>标记中的文字被强制不换行，但是在<nobr>标记中被<wbr>标记包含的内容，则可以被强制换行。
基本语法
<wbr>…</wbr>
语法解释
上述标记之间的文字会显示强制换行的效果
缩排标记<blockquote>
使用缩排标记，可以实现页面文字的段落缩排，实现多次缩排可以使用多次缩排标记。
基本语法
<blockquote>…</blockquote>
语法解释
上述标记之间的文字会进行缩排
<html>
<head>
<title>文字的缩排</title>
</head>
<body>
这是一本专业详尽的html书籍
<blockquote>谢谢购买</blockquote>
<blockquote><blockquote>如有技术问题请联系：fwx04134@sina.com</blockquote>
</blockquote>
<blockquote><blockquote><blockquote>2004年6月北京最新版</blockquote>
</blockquote></blockquote>
</body>
</html>
预格式化标记<pre>
所谓预格式化，就是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。例如原封不动地保留文档中的空白，如空格、制表符等。
基本语法
<pre>…</pre>
语法解释
上述标记之间的文字会实现预格式化的效果
居中标记<center>
如果希望使段落或文字居中对齐，可以使用专门的居中标记。
基本语法
<center>…</center>
语法解释
上述标记之间的文字会自动居中对齐
插入水平线<hr>
基本语法
<hr>
水平线宽度属性width
默认情况下，水平线的宽度为100%，我们可以手动调整水平线的宽度。
基本语法
<hr width=value>
<hr width=value%>
语法解释
水平线的宽度可以是以绝对的像素为单位，也可以是以相对的百分比为单位。
水平线高度属性size
我们可以设定水平线的高度
基本语法
<hr size=value>
语法解释
水平线的高度只能使用绝对的像素来定义
水平线去掉阴影属性noshade
默认的水平线是空心立体的效果，我们可以将其设置为实心并且不带阴影的水平线。
基本语法
<hr noshade>
水平线颜色属性color
为了使水平线更美观，同整体页面更协调，我们可以设置水平线的颜色。
基本语法
<hr color=value>
语法解释
value为颜色的英文名称或者十六进制值
水平线排列属性align
在水平方向上，可以设置水平线的居左、居中和居右对齐。
基本语法
<hr align=left>
<hr align=center>
<hr align=right>
语法解释
默认的水平线为居中对齐
忽视html标签标记<plaintext>
在html语言中加入<plaintext>标签可以令该标签后的html标签失去其标示作用，而直接显示在网页页面中。
基本语法
<plaintext>
忽视html标签标记<xmp>
在html语言中加入<xmp>标签，也可以令标签后的标签失去其标示作用，而直接显示在网页页面中。
基本语法
<xmp>
定义条款<dfn>
<dfn>元素的英文名称是definition，它用来定义一些约定的条款。<dfn>作为行内元素可以成对出现在一段文字的任何地方。
基本语法
<dfn>定义条款</dfn>
文件说明
浏览器一般把<dfn>中的文本以一种区别于正常文字的斜体显示
标注说明标记<rt>、<ruby>
被<rt>标记标示的文字，将以缩小字号的形式显示在以<RUBY>标记标示的文字上方，用来说明这段文字。
基本语法
<ruby>...被标示的文字...<rt>...说明文字...</rt></ruby>
<html>
<head>
<title>在文字上方标注说明</title>
</head>
<body>
<ruby>love yourself<rt>爱自己</rt></ruby>
</body>
</html>
缩写文本<abbr>
<abbr>元素是英文单词abbreviation的简称，即通常所说的缩写词。常见的"www"就是缩写词，它的全称为"World Wide Web"，取每个单词的首字母组成。通常情况下，这些缩写词无法读成一个单词，而是必须一个一个字母念。其它例子还有FTP(File Transfer Protocol)、html(HyperText Markup Language)等。
基本语法
<abbr>缩写词</abbr>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<p><abbr title="January">Jan</abbr> is the abbreviation for January.
</body>
</html>
首字母缩略词<acronym>
<acronym>元素的英文名称是acronym，中文译作"首字母缩略词"。例如laser(激光)源于light amplification by simulated emission of radiation，还有rader(雷达)源于radio detecting and ranging，NATO(北大西洋公约组织)源于North Atlantic Treaty Organiztion。<acronym>首字母缩略词和<abbr>缩写词最显著的区别就是首字母缩略词可以用一个单词的发音连读出来，而缩写词只能按照字母逐个读。
基本语法
<acronym>首字母缩略词</acronym>
<html>
<head>
<title>html示例</title>
</head>
<body>
<p>联合国教科文组织<acronym title="United Nations Educational, Scientific, and Cultural Organization">UNESCO</acronym>关心各国的世界遗产
</body>
</html>
指定文字书写方向<bdo>
<bdo>元素的英文全称为bidirectional algorithm。它是一种文字方向的双向算法，用来指定特殊的文字书写方向。对于符合Unicode的大多数语言而言，默认文本方向是从左到右，因此无需使用这个元素，但是有些文字例如希伯莱语等的书写方向是自右到左的，因此可以用<bdo>元素指定特殊的文字方向。
基本语法
<bdo dir=文本方向>一段从左到右或者从右到左显示的文字</bdo>
<bdo>元素的属性
属名 描述
dir 指定文字方向
lang 语言信息
用来指定从左到右或从右到左的文字方向，它的属性值有"ltr(left to right，从左到右)"和"rtl(right to left，从右到左)"两种。
<html>
<head>
<title>html示例</title>
</head>
<body>
<bdo dir="rtl">这段文字将会从右到左显示。</bdo>
</body>
</html>
短引用<q>
<q>元素就是quote的简称，它和<blockquote>不同，作为一种短引用，其中的内容是行内元素，例如一句话、一个单词或者一些数字等。
基本语法
<q cite=引用信息地址>行内元素的短引用信息</q>
<html>
<head>
<title>html示例</title>
</head>
<body>
<p>我国自古和月亮有关联的诗有很多，<q cite="http://www.mydomain.com/dufu/yueyeyishedi.html">露从今夜白，月是故乡明</q>就是其中之一。</p>
</body>
</html>
引用文本<cite>
<cite>元素的英文名字就是cite。它起到引证、列举的作用，其中包含的内容或者参考指向其它信息源。<cite>作为行内元素可以成对出现在一段文字的任何地方。
基本语法
<cite>引用文本</cite>
<html>
<head>
<title>html示例</title>
</head>
<body>
<p>有关本产品更多的信息可以在<cite>ISO9001</cite>国际标准中查询到
</body>
</html>
扫一扫
5906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
