HTML基本元素（三）

1.HTML特殊字符

　　一些字符在HTML中拥有特殊的含义，比如小于号(<)和大于号(>)用于定义HTML标签。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。

　　还有一种情况，就是HTML会自动截去多余的空格，假如你在文档中连续输入10个空格，那么HTML会去掉其中的9个。那么，就需要用到字符实体来实现任意空格。

　　字符实体用于在HTML文档中插入特殊字符，有两种方式：实体字符和实体编号，一般使用实体字符。

　　注意：实体字符对大小写敏感！

常用的特殊字符：
特殊字符	实体字符	实体编号
空格
小于号(<)	<	<
大于号(>)	>	>
和号(&)	&	&
引号(")	"	"
版权(©)	©	©
注册商标(®)	®	®
乘号(×)	×	×
除号(÷)	÷	÷

2.列表

　　列表用来在网页上组织信息，HTML能够创建三种类型的列表：无序列表、有序列表和自定义列表。

　　1）无序列表

　　　　代码结构：

<ul>

    <li>……</li>

    <li>……</li>

    <li>……</li>

</ul>

　　　　*无序列表的type属性的值有：disc(“默认”实心圆)、circle(空心圆)、square(正方形)，用来设置项目前面的标记。

　　2）有序列表

　　　　有序列表使用数字或字母系统来组织列表里包含的信息。

　　　　代码结构：

<ol>

    <li>……</li>

    <li>……</li>

    <li>……</li>

</ol>

　　　　*有序列表的type属性的值有：1(“默认”数字)、a(小写字母)、A(大写字母)、i(小写罗马数字)、I(大写罗马数字)，用来设置项目前面的标记。

　　　　*start属性的值是：排序的起点数值。

　　3）自定义列表

　　　　定义列表用来组织术语和它们的定义。

　　　　任何信息如果包含多个术语和相对应的解释,都可以使用自定义列表进行组织。

　　　　代码结构：

<dl>

    <dt>……</dt>

    <dd>……</dd>

    <dd>……</dd>

</dl>

　　　　*<dt>是列表的头部,常用作于标题。

3.表格

　　表格由<table>标签以及一个或多个tr、th或td元素组成。单元格可以包含文本、图片、列表、表单、表格等等。

　　*<table>定义表格。

　　*<tr>定义表格的行。

　　*<th>定义表头，表示标题，一般用在表格的第一行，里面的内容会自动加粗加黑。

　　*<td>定义单元格。

　　代码如下：（制作2行2列的表格的快捷生成方式：table>tr*2>td*2+Tab键）

<table border="1">

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

     <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

 </table>

说明
属性	值	说明
width	px,%	指定表格的宽度
height	px,%	指定表格的高度
border	px,%	指定表格边框的宽度
cellpadding	数字	指定边框与内容之间的空白
cellspacing	数字	指定单元格之间的空白
align	left,center,right	指定对齐方式
valign	top,middle,bottom	垂直排列方式
colspan	数字	合并列单元格
rowspan	数字	合并行单元格

　　*为表格设置合并边框模型：

　　效果对比图：

　　参考代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        table{

            border-collapse:collapse;

        }

        table,td{

            border:1px solid #000;

        }

    </style>

</head>

<body>

    <p>为表格设置合并边框模型：</p>

    <table>

        <tr>

            <td>row 1, cell 1</td>

            <td>row 1, cell 2</td>

        </tr>

        <tr>

            <td>row 2, cell 1</td>

            <td>row 2, cell 2</td>

        </tr>

    </table>

</body>

</html>