HTML基础教程：标记、样式与超链接-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40671789/article/details/100165905

本文介绍了HTML的基础知识，包括文件格式、文本样式（加粗、倾斜、下划线）、特殊字符、分段、换行、水平线、表、超链接的创建（绝对路径、相对路径、邮件链接、锚点）以及图像和表格的使用。还特别提到了多窗口框架和浮动框架在网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML文件基本格式

<html>
<head>
<title>窗口标题</title>
<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
<link type="text/css" rel=stylesheet href="index01.css"/>
</head>
<body></body>
</html>

2、<body>标记

<body 	bgcolor=”背景颜色”
background=”背景图片路径”
text=”文本颜色”
link=”超链接颜色”
vlink=”已使用（点击过）的超链接颜色”
alink=”正在被激活（如右键单击）的超链接颜色”>

3、文本及样式

<font 	face=”字体”
size=”尺寸”
color=”文本颜色”>

加粗

    <b>文本</b>

倾斜

   <i>文本</i>

下划线

    <u>文本</u>

4、特殊字符

<：&lt; 或 &#60					
>：&gt; 或 &#62
&：&amp; 或 &#38				
引号”：&quot; 或 &#34
注册符®：&reg; 或&#174		
版权符©：&copy; 或 &#169
空格：&nbsp; 或 &#160

5、分段

<p align=”水平对齐方式”>段落</p>

注：默认对齐方式为left

*水平对齐方式align：*	left——左对齐、right——右对齐、center——居中、justify——两端对齐

*垂直对齐方式valign：*	top——上对齐、bottom——下对齐、middle——居中、baseline——基线对齐

<p/>：独立使用的分段标记

6、换行

<br/>：强制换行
<nobr>文本</nobr>：强制不换行

7、水平线

<hr 	align=”水平对齐方式”
color=”水平线颜色”
size=”粗细”
width=”宽度”
noshade>
**8、无序列

8、表

<ul type=”项目符号”>
<li>列表项1</li>
…
<li>列表项n</li>
</ul>

9、超链接
（1）超链接

<a 	href=”目标URL”
target=”目标窗口”
title=”指向超链接的标题文字”>链接元素</a>

（2）锚点
锚点定义：<a name=”锚点名称”></a>
链接到锚点：<a href=”#锚点名称” title=”标题文字”>链接元素</a>
（3）绝对路径和相对路径

绝对路径：从网站主目录开始的路径
相对路径：从当前目录开始的路径，可以使用..（父目录）

（4）邮件超链接

<a href=”mailto:邮箱地址?subject=邮件主题” title=”标题文字”>链接元素</a>

（5）空链接

<a href=”#” title=”标题文字”>链接元素</a>

10、图像

<img 	src=”图像URL”
width=”宽度像素数或百分比”
height=”高度像素数或百分比”
border=”边框像素数”			
title=”指向时的标题文字”/>
图像也常常用作链接元素

注：图像可带有align、valign属性（水平、垂直对齐方式）
图像可带有hspace、vspace属性（以像素为单位，水平、垂直外缘边距）
11、表格
（1）表格范例

<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>标题1</th><th>标题2</th>……<th>标题n</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1-1</td><td>数据1-2</td>……<td>数据1-n</td>
</tr>
<tr>
<td>数据2-1</td><td>数据2-2</td>……<td>数据2-n</td>
</tr>
……
<tr>
<td>数据m-1</td><td>数据m-2</td>……<td>数据m-n</td>
</tr>
</tbody>
</table>

（2）table标记的常用属性

border：边框线宽度					
cellspacing：单元格间距
cellpadding：单元格内缘距离			
width：表格宽度
height：表格高度						
bgcolor：表格背景颜色
background：表格背景图像

（3）caption标记的常用属性

align=”top”：标题在表格上方，居中（默认）
align=”bottom”：标题在表格下方，居中

（4）tr标记的常用属性

height：表格行高度					
bgcolor：表格行背景颜色
background：表格行背景图像

（5）td、th标记的常用属性

width：单元格宽度					
height：单元格高度
bgcolor：单元背景颜色				
background：单元格背景图像
rowspan：合并单元格（跨行）			
colspan：合并单元格（跨列）
align：水平对齐方式				
valign：垂直对齐方式

（6）表格的用途：各种二维列表、网页布局
12、多窗口框架网页（★★★）

<frameset	rows=”横向分割的行高说明”		cols=”纵向分割的列宽说明”
frameborder=”0或1，yes或no”		framespacing=”框架间隔像素数”
border=”边框宽度像素数”			bordercolor=”边框颜色”>
<frame 	src=”内容URL”					name=”框架窗口名字”
frameborder=”0或1”				scrolling=”yes或no或auto”
marginwidth=”边界宽度”			marginheight=”边界高度”
noresize/>
……
</frameset>

注：

<frameset>可以嵌套<frameset>标记。用<a href=”目标URL” target=”框架窗口名字”>链接元素</a>时，当点击“链接元素”时，在对应框架窗口打开“目标URL”对应的资源。

13、浮动框架（★★★）

<iframe	src=”内容URL”				name=”框架名字”
frameborder=”0或1”			scrolling=”yes或no或auto”
marginwidth=”边界宽度”		marginheight=”边界高度”
width=”框架宽度”				height=”框架高度”></iframe>