HTML基础与表格布局-优快云博客

本文介绍了HTML的基础知识，包括字符集、空格处理、特殊字符显示等，并详细讲解了如何使用表格标签进行网页布局，同时提供了创建复杂表格的示例。

中文乱码问题：<meta charset="utf-8">告诉浏览器以UTF-8字符集显示文字，保存的时候也需要把文件保存为UTF-8格式，否则如果文档中声明的字符集与保存的不一致，就会产生乱码。

浏览器总是会截短HTML页面中的空格，如果文本中有多个连续空格，只会保留1个，换行、缩进也是只保留1个空格。

在HTML中，某些字符是预留的。如果希望正确地显示预留字符，必须在HTML源代码中使用字符实体。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	'(IE不支持)	'

1.注释

2.换行<br/>

3.标题<h1></h1>

4.段落<p></p>:每个段落会另起一行，带有默认的段间距。

5.块<div></div>：div标签的作用是分场(block)，每个块会另起一行，一对div标签中间可以放置文本、图片或其他元素，div通常作为样式的容器。如：<div>这是一个块</div>、<div><p>这是我的内容</p></div>。

6.区间<span></span>：span标签的作用是划分区间，通常作为样式的容器，默认不会独立成行，多个区间会在一行上连续显示。如：<span style="width:100px">这是一个区间</span>。

7.列表<ul></ul>、<ol></ol>：unordered list无序列表，为每个列表显示一个粗点；ordered list有序列表，显示每个列表项的序号。用<ul>、<ol>定义边界，列表中的项目用<li>进行标记。列表可以嵌套。如：<ul><li>a</li><li>b</li><ol><li>x</li><li>y</li></ol></ul>。dl代表定义列表(definition list)，在<dl></dl>标签里可以用<dt>(definition term)表示项目，用<dd>(definition description)表示描述。如：<dl><dt>a</dt><dd>first alphabet</dd><dt>b</dt><dd>second alphabet</dd></dl>

8.图片<img></img>：允许将外部图像文件(JPEG、GIF、PNG等格式)嵌入文档。如：<img src="pic.png" width="400px" height="300px" border="0" title="范例图片">，可以设置alt属性表示没有此图片时显示的文本，如alt="该图像无法显示，可能路径不正确"。

9.超链接<a></a>：标签中间可以是图片、文字或页面元素，单击超链接，就可以自动连到相应的文件。href属性用于指定链接目的地，其值可以是任何有效的URL，包含相对/绝对的URL，也可以是JavaScript语句；title属性用于指定超链接的说明文字；target属性用于规定打开超链接文档的位置。

值	描述
_blank	在新窗口中打开被链接的文档
_self	默认。在相同的框架中打开被链接的文档
_parent	在父框架集中打开被链接的文档
_top	在整个窗口中打开被链接的文档
framename	在指定的框架中打开被链接的文档

10.表格标签<table>：table相关的属性有以下4个：align(left、center、right)、bgcolor(十六进制、rgb、颜色名称)、border边框、width宽度。如：<table border="1" bgcolor="#00FF00">，在HTML4.0.1中，table元素的align和bgcolor属性是不推荐使用的，建议使用CSS定义样式，如：<table style="align:center;background-color:red">。<tr>是行标签，<td>是单元格标签，<th>是表头标签。<td>或<th>使用属性colspan表示跨列，rowspan表示跨行，如：<td colspan="2"></td>表示单元格跨2列。

<table border="1">
    <tr>
        <th>分类</th>
        <th>书名</th>
        <th>册数</th>
    </tr>
    <tr>
        <td rowspan="2">字母</td>
        <td>A</td>
        <td>1</td>
    </tr>
    <tr>
        <td>B</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>《JAVA实用程序设计》</td>
        <td>7</td>
    </tr>
</table>

表单元素

通常用户需要在网页上输入信息，与服务器完成交互功能。例如，填写姓名、地址、选择性别，从列表中选择项目等，这时就要使用表单。

1.表单<form>：表单使用<form>界定，其他表单元素应该放在一对<form></form>标签中间。

2.文本框<input>：type属性为"text"

3.密码框：type="password"

4.单选按钮：type="radio"

<form>
    性别：<input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</form>

5.复选框：type="checkbox"

6.下拉列表：<select>，子元素<option value="x">，分组下拉列表：<select><optgroup lable="咖啡"><option value="a">白咖啡</option>...，多选下拉列表：<select size="4" multiple="multiple">...

7.文本域：<textarea name="comment" rows="5" cols="30"></textarea>

8.按钮：分为'提交'、'重置'和'普通'3种类型，如：

<form>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="返回">
</form>

9.隐藏字段：type="hidden"，当需要传递一些参数值而不想让用户看到时，就可以使用隐藏字段。

_____________________________________________________________________________

完成如下图效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th rowspan="2" height="200" width="100">A</th>
                <th colspan="2" width="200" height="100">B</th>
            </tr>
            <tr>
                <th>E</th>
                <th rowspan="2" height="200" width="100">C</th>
            </tr>
            <tr>
                <th colspan="2" height="100">D</th>
            </tr>
        </table>
    </body>
</html>