HTML中提供了很多的标记,可以用来设计页面的文字、图片,定义超链接等。这些标记的使用可以使页面变得更加生动。下面介绍HTML中的文本标记。
常见的集中标记
1、换行标记
要让页面中的文字实现换行,在HTML文件中输入换行符(ENTER)是没有用的,如果要实现换行就要用换行标记符,在<>中写入br。
2、段落标记
段落标记在HTML文件中是一个很重要的标记,要实现段落标记就有用p表示,具体例子会在下边展示。
3、标题标记
在HTML中,设定了6个标题,分别是h1到h6,数字越大,表示标题级数越低,反之,级数越大。
4、居中标记
HTML的内容有一定的布局,默认的布局方式是由左向右依次排列,但是如果想要居中表示,就要使用居中标记符号,center或者是使用 div设定布局方式为center具体例子下边展示。
5、文字列表标记
HTML中提供了文字列表标记,文字列表的标记可以使文字以列表的形式依次排列。通过这种形式可以更加方便用户的访问。有两种列表形式,有序列表和无序列表。(1)无序列表:使用ul和li表示(2)有序列表:使用ol和li表示
6、区域标记
span标签是用来组合文档的行内元素。其本身没有固定格式。span和div的区别是:span标签是行内元素,而div是块元素。
7、表格标记
(1)表格标记:table
(2)标题标记:caption
(3)表头标记:th
(4)表格行标记:tr
(5)单元格标记:td
下边是具体实例:
换行标记:
<br>//表示换行
段落标记:
<p>正文内容1</p>
标题标记:
<h2 class="two">应用了选择器two</h2>
居中标记:
<center>填所有居中的内容</center>
文字列表标记:
1、无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ul>
<li>Java编程词典</li>
<li>VB编程词典</li>
<li>VC编程词典</li>
<li>.net编程词典</li>
<li>C#编程词典</li>
</ul>
</p>
</body>
</html>
2、有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ol>
<li>Java编程词典</li>
<li>VB编程词典</li>
<li>VC编程词典</li>
<li>.net编程词典</li>
<li>C#编程词典</li>
</ol>
</p>
</body>
</html>
区域标记:
<div style="text-align: center;"><!--设置内容居中-->
<h2 class="one">应用了选择器one</h2><!--定义样式后页面会自动加载样式-->
<p>正文内容1</p>
<h2 class="two">应用了选择器two</h2>
<p>正文内容2</p>
<h2 class="three">应用了选择器three</h2>
<p>正文内容3</p>
</div>
表格标记:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="98%" height="114" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
<tr>
<td bgcolor="#FFFFFFF" title="单元格1">
<a href="example2-14.html">单元格1</a>
</td>
<td bgcolor="#FFFFFFF" title="单元格2">单元格2</td>
<td bgcolor="#FFFFFFF" title="单元格3">单元格3</td>
</tr>
<tr>
<td bgcolor="#FFFFFFF" title="单元格4">单元格4</td>
<td bgcolor="#FFFFFFF" title="单元格5">单元格5</td>
<td bgcolor="#FFFFFFF" title="单元格6">单元格6</td>
</tr>
<tr>
<td bgcolor="#FFFFFFF" title="单元格7">单元格7</td>
<td bgcolor="#FFFFFFF" title="单元格8">单元格8</td>
<td bgcolor="#FFFFFFF" title="单元格9">单元格9</td>
</tr>
</table>
</body>
</html>