HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。一个网页对应一个HTML文件。网页文档的结构和格式的定义由HTML元素完成。
1. 先用下图表示一下B/S开发的网站的内容组成结构
2. HTML元素四种形式
由于HTML标签的两个组成部分属性和内容都可有可无,所以HTML元素(标签)就有四种形式:
u 不带有属性和内容的(空)元素(指不带内容的元素):<br>
u 只带有属性的(空)元素:<hr color=”blue”>
u 只带有内容的元素:<title> http://www.baidu.com/</title>
u 带有内容和属性的元素:<font color=”red”>http://www.baidu.com/</font>
3. 标准的HTML的框架结构
举例:
注:
u 即使不按HTML框架的标准格式,目前的浏览器也能很好解析文档。例:可以直接写正文部分,省略所有标签。
u 标签的属性和内容都是可选的,可写可不写。
u 给属性赋值时,值可以加双引号也可不加。例:<font color=”red”>等价于<font color=red>。
u HTML中,标签和属性名是大小写无关的。
u 在HTML文档中,如果存在连续多个空白字符(空格、制表符、回车、换行等),浏览器显示时将只解析为一个空格字符(全角空格符除外)。
4. 常用特殊字符实体的字符引用和实体引用:
5. HTML注释
格式:<!--注释内容-->
6. 与段落控制相关的常用标签:
实例:
源码:
效果:
7. 与文本显示相关的常用标签:
实例:
源码:
效果:
8. 列表标签:
8.1 有符号列表:
8.1.1 有序列表(ol:ordered list),使用<ol>和<li>标签创建
u 其中<ol>标签的start属性设置起始序号,<li>标签的value属性改变列表内编号顺序。
例:
u 使用type属性指定编号系统的类型。Type属性取值如下:
例:
8.1.2 无序列表(ul:unorderedlist),使用<ul>和<li>标签创建
u 其中type属性指定符号样式,取值(默认为disc)如下:
例:
8.2无符号列表:
8.2.1无缩进列表
u 使用<dl>和<dt>标签创建
例:
8.2.2有缩进的列表
u 使用<dl>和<dd>标签创建
例:
8.2.3术语列表
u 同时使用<dt>和<dd>标签配合<dl>标签创建
例:
9. 表格标签:
9.1 表格结构
9.2 表格定义
注:表格定义中,<tr>标记必须放在<table>标记之间;而<th>和<td>标记必须放在<tr>标记之间。
例1(规则表格):
<html>
<head>
<title>规则表格测试</title>
</head>
<body>
<table width=300 height=100 border=2 bgcolor=#eaeaea>
<tr bgcolor=#b1a9ae>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<th>kobe</th>
<th>36</th>
<th>man</th>
</tr>
<tr>
<th>lbj</th>
<th>28</th>
<th>man</th>
</tr>
</table>
</body>
</html>
效果:
例2 (不规则表格):
<html>
<head>
<title>不规则表格测试</title>
</head>
<body>
<table width=400 height=100 border=2 bgcolor=#eaeaea>
<tr>
<td colspan=4 align=center>学生信息</td>
</tr>
<tr bgcolor=#b1a9ae>
<th>姓名</th>
<th>年龄</th>
<th colspan=2>电话</th>
</tr>
<tr>
<td>kobe</td>
<td>36</td>
<td>0731-88756773</td>
<td>18730659872</td>
</tr>
</table>
</body>
</html>
效果: