HTML基础-01-13-2015

来源：互联网发布：求最简形矩阵编辑：程序博客网时间：2024/06/14 00:04

一、HTML概述

（1）、超文本标记语言（Hyper Text Markup Language）
HTML文档是一个包含标记的文本文件
文件名以.htm或者.html 结尾

ps：TCP/IP：连接电脑

Http/IP：电脑内浏览器与服务器见通信

.htm和.html两种方式结尾：操作系统原因

2、整个HTML文档由成对的标签和文本组成，如下：
<html> -- 文档的开始标签
<head> -- 文档头的开始标签
<title>标题</title> -- 文档标题，显示的浏览器标题栏中
</head> -- 文档头的结束标签
<body> -- 文档内容的开始标签
内容
</body> -- 文档内容的结束标签
</html> -- 文档的结束标签

HTML文档的注释的格式：

3、浏览器：很多不兼容 IE、Firefox/mozzia、Google

netspace 网景微软IE：操作系统对IE浏览器支持不够充分

国内浏览器：基于IE浏览器

二、文档结构

1、为了使浏览器能正确渲染页面，我们需要告诉浏览器网页所使用的文档类型（DOCTYPE）。

2、目前的HTML版本是4.01，但是实际中广泛使用的是XHTML 1.0 Transitional。

3、XHTML比HTML有更加严格的语法：
标签必须被正确地嵌套。（<b><i>Hello</b></i> 是不正确的）
标签名必须用小写字母。
所有标签必须闭合

4、一个完整的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>主页</title>
</head>
<body>
<h1>
欢迎来到我的个人主页！</h1>
<p>
这里放置个人主页的内容。
</p>
</body>
</html>

5、为了让浏览器正确的渲染HTML文档，我们需要告诉浏览器我们的HTML文档使用的是哪个版本的HTML。

当前的HTML 4.01，有三个不同的版本：
Strict
最严格、干净的HTML版本。不允许表现层的属性和标签，W3C也将逐渐淘汰这些标签，因为完全可以用CSS来实现。比如<center> <font> <iframe> 标签，以及width，height(img,table)，align(table)，target(a)等属性。

Transitional:
过渡期HTML版本。支持大部分的表现层属性和标签。
Frameset:
允许在一个页面中嵌入多个页面。

使用三个不同版本的HTML，需要在页面的第一行添加DOCTYPE声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

三、基本标签

（1）、块级标签
就像标题、段落一样，需要在页面上占据一块的位置的标签。
<h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落

<pre> 显示一段预格式化的文本。此标签内的空格、换行、Tab等都被原样显示出

来。一般用来显示一段源代码。

<div>
一般块级标签。
<hr>
水平线
HTML自动在一个<h1> - <h6> <p> <pre> 的段落前后各添加一个空行。

（2）、内联标签

内联标签
<em> 强调，大部分浏览器渲染为斜体。
<strong> 强调，大部分浏览器渲染为黑体。
<sub> 下标
<sup> 上标

内联标签

<code> 标示一段代码 <span> 一般内联标签
<br> 换行 <b> 黑体<i> 斜体

四、实体字符

（1）、HTML文档本身使用了一些字符来作为标签，所以要想在页面上显示 < 或 >，就必须使用实体字符。
比如使用 < 可以在页面上显示 < 字符。

实体字符的格式是：
AND符号（&） + 实体名 +分号（;）

常用的实体字符
  空格
< <
> >
& &
" “
© ©
® ®

常用的实体字符
示例：实体字符
<p>空格： END</p>
<p>左括号：<</p>
<p>右括号：></p>
<p>AND符号：&</p>
<p>引号："</p>
<p>人民币：¥</p>
<p>版权：©</p>
<p>注册：®</p>
<p>乘号：×</p>
<p>除号：÷</p>

五、链接

（1）、HTML使用超级链接来连接到网络上的其他页面。

一个简单的链接是由 <a> 标签和 href 属性构成的
<a href="http://www.baidu.com/">百度</a>

（2）、href 属性
绝对路径
http:
HTTP请求
https:
加密的HTTP请求
mailto:
打开邮件客户端，准备发送邮件
ftp:
打开FTP服务器

href 属性
绝对路径
示例：绝对路径
<a href="http://www.baidu.com/">链接到百度首页</a>
<a href="mailto:leizhang5@iflytek.com">打开邮件客户端</a>
<a href="https://mail.google.com/">登陆Gmail</a>
<a href="ftp://mail.ustc.edu.cn/">登陆科大FTP服务器</a>

b、href 属性
相对路径
./
本目录
../
上一级目录
../../
上一级目录的上一级目录
/
根目录

href 属性
相对路径
test.htm 或 ./test.htm
本目录中的test.htm
../test.htm
上一级目录下的test.htm
path/test.htm
本目录下的path目录下的test.htm
/test.htm
本站点根目录下的test.htm
/path/test.htm
本站点根目录下的path目录下的test.htm

（3）、target属性（控制链接打开的位置）
_blank
新窗口中打开链接
_self
当前窗口中打开链接（默认）
_parent
父窗口中打开链接
_top
最顶层父窗口中打开链接
targetname
指定窗口或Frame中打开链接

target属性
示例：在iframe中打开（target=“targetname”）？
<a href="http://www.baidu.com" target="page1">在IFRAME中打开百度首页</a>
<a href="../character.htm" target="page1">在IFRAME中打开字符实体示例</a>
<iframe style="width: 600px; height: 300px; border: 1px solid #666;" name="page1">
</iframe>

（4）、页面锚点
name属性

示例：页面锚点的使用
<a name="top"></a>
<a href="name.htm#middle">页面中部</a>

<a name="middle"></a>
<a href="name.htm#top">返回页面顶部</a>

六、图片

（1）、可以在页面中添加bmp，gif，jpg，png等格式的图片。
src 是图片的路径
alt是图片不能显示时的文本，应该为每个图片提供这个属性。

<img alt=“birthday" src="images/birthday.bmp" />
<img alt="Rose" src="images/rose2.bmp" />

（2）、图片链接：
<a href="http://www.baidu.com/">
<img alt="baidu" src="baidu_logo.gif" />
</a>

大部分的浏览器会为图片链接的图片添加边框，可以通过设置图片的样式来去掉边框：
<a href="http://www.baidu.com/">
<img alt="baidu" style="border: 0px;" src="baidu_logo.gif" />
</a>

（3）、图片地图：
点击图片的不同部分，可以链接到不同的地方。

示例：图片地图
<img alt="earth" src="./images/earth.bmp" usemap="#earthmap" />
<map name="earthmap">
<area shape="rect" coords="0,0,20,20" alt="baidu" href="http://www.baidu.com/" target="_blank" />
<area shape="circle" coords="76,76,20" alt="google" href="http://www.google.cn/"
target="_blank" />
</map>

<area>定义了图片中特定区域的链接行为
shape属性指出区域的形状
如果为矩形（rect），则coords需要指定四个数字（左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标）
如果为圆形（circle），则coods需要指定三个数字（圆心横坐标，圆心纵坐标，半径）

七、列表

（1）、无序列表
<ul>
<li>太阳</li>
<li>月亮</li>
<li>星星</li>
<li>地球</li>
</ul>

有序列表
<ol>
<li>太阳</li>
<li>月亮</li>
<li>地球</li>
</ol>

示例：无序列表
<ul type="disc">
<li>太阳</li>
<li>月亮</li>
<li>地球</li>
</ul>
<ul type="circle">
<li>太阳</li>
<li>月亮</li>
<li>地球</li>
</ul>
<ul type="square">
<li>太阳</li>
<li>月亮</li>
<li>地球</li>
</ul>

示例：嵌套列表

<ul>
<li>太阳</li>
<li>月亮</li>
<li>地球
<ul>
<li>海洋</li>
<li>陆地</li>
<li>雪山</li>
</ul>
</li>
</ul>

八、表格

（1）、Table用来展示列表数据。
<tr> 表示一行，<td>表示一个单元格

<table>
<tr>
<td>
数据一
</td>
<td>
数据二
</td>
</tr>
</table>

2、border属性：

（2）、th与td标签
<td>：table data 表示一个单元格
<th>：table head 表示一个单元格，这个单元格是表头，浏览器一般渲染为黑体

<table border="1">
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
</table>

th与td标签
<table border="1">
<tr>
<th>标题一</th>
<td>数据一</td>
</tr>
<tr>
<th>标题二</th>
<td>数据二</td>
</tr>
</table>

2、cellpadding属性：
单元格的内边距。

<table border="1">
<table border="1" cellpadding="10">

3、cellpadding属性
单元格的内边距。

<table border="1">
<table border="1" cellpadding="10">

（3）、空单元格

如果table设置了border，那个空单元格的border会不显示，可以通过在空单元格中添加   来解决。

<table border="1">
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>数据一</td>
<td> </td>
</tr>
</table>

（4）、对齐方式
居左、右、中对齐
<table width="200px" border="1">
<tr>
<th align="right">标题一</th>
<th align="right">标题二</th>
</tr>
<tr>
<td align="right">数据一</td>
<td align="right">数据二</td>
</tr>
</table>

（5）rowspan属性
跨行单元格，rowspan=”2” 表示当前单元格跨两行。

<table border="1">
<tr>
<th rowspan="2">标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>数据二</td>
</tr>
</table>

rowspan属性
跨行单元格，rowspan=”2” 表示当前单元格跨两行。

（6）、colspan属性
跨列单元格，colspan=”2” 表示当前单元格跨两列。
<table border="1">
<tr>
<th colspan="2">标题一</th>
</tr>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
</table>

colspan属性
跨列单元格，colspan=”2” 表示当前单元格跨两列。

<table border="1">
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
<tr>
<td colspan="2">数据一</td>
</tr>
</table>

九、综合案例

PPT：HTML基础

1、案例1：在IIS中配置站点

2、案例2：如何在e.htm和f.htm之间导航？

3、案例3：复杂的嵌套列表？

4、案例4：创建考试报名表格？

5、案例5：创建多表头表格？

十、HTML表单

（1）、表单概述

表单用来收集用户信息并提交给服务器。
服务器需要一门动态语言来获取这些信息并进行处理，常用的服务器端语言有asp/asp.net/php/jsp等。

<form method="get" action="form.htm">
<input type="text" name="id" value="" />
<input type="submit" value="提交" />
</form>

（2）提交表单的方法

1、示例：GET方法提交表单
<form method="get" action="form.htm">
<input type="text" name="id" value="" />
<input type="hidden" name="password" value="123456" />
<input type="submit" value="提交" />
</form>

GET方法的HTTP请求消息头：
GET /DEMO/form/form.htm?id=dd&password=123456 HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/form.htm
Accept-Language: zh-cn
…

2、示例：POST方式提交表单
POST方法的HTTP请求消息头：
POST /DEMO/form/form.htm HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/form.htm
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0)
Host: localhost:4346
Content-Length: 21
id=dd&password=123456

3、action属性
提交表单时转到的URL地址。

4、method 属性
GET方式
收集用户少量信息。
URL的长度限制为4KB
POST方式
收集用户大量信息（可能包含用户上传的文件）。
用户提交的信息保存在HTTP请求消息的正文。
提交后不能使用刷新按钮。

（3）、常用表单字段

1、文本输入框（input）

type 属性
type=“text”表示文本输入框
value 属性
文本框的值
name属性
必须的，提交表单时此文本框的值value存储在name变量中。
<input type="text" name=“input1" value="你好" />

文本输入框（input）
示例：不设置name属性会怎样？
<form method="get" action="text.htm">
<input type="text" name="input1" id="myinput1" value="hello1" />
<input type="text" id="myinput2" value="hello2" />
<input type="submit" value="submit" />
</form>

点击提交按钮时的URL：/form/text.htm?input1=hello1
服务器就不能取得第二个文本框的值

2、文本输入框（input）

maxlength 属性
文本框允许输入的最多的字符数
tabindex 属性
用户点击tab按键时焦点的切换顺序（从1开始）

3、文本输入框（input）

disabled属性
不可用
readonly属性
只读

4、Disabled和readonly的区别？

disabled的文本框显示为灰色
tabindex对disabled的文本框不起作用
readonly的文本框的值不会发送到服务器

点击提交按钮，请求的URL：/form/text.htm?input1=hello&input3=hello
服务器不能获取input2的值

5、密码输入框（input）

用于输入密码，输入的密码以星号显示。
<input type="password" name=“password1" value="" />

如果表单的 method=’get’，则点击提交按钮时，URL地址变成：
http://localhost:4346/DEMO/form/password.htm?password1=123456
所以，一般用户登陆的表单需要用POST提交方式。

6、多行文本输入框（textarea）

用于输入多行文本，如果输入内容过长，则会自动显示滚动条。
<textarea name="content" rows="6" cols="6">大家好</textarea>

多行文本框特点：
没有value属性，内容是初始化在标签之间。
没有maxlength属性。
怎么限制多行文本框最大输入字符数？（使用Javascript）
使用rows和cols属性指定行数和列数。

注意：6行6列的多行文本框，在不显示滚动条的情况下最多显示36个英文
字符，或者18个中文字符。

7、列表框（select）

下拉列表，用户可以从一些可选项中选择。
示例：简单的下拉列表
<select name="country">
<option value="America">美国</option>
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</select>

8、<option> 标签表示一个可选择项

InnerText：选项显示的值
value 属性：选项代表的值
selected 属性：是否选中此选项

上例子中，我们选中“中国”提交表单时，请求消息头：
GET /DEMO/form/select.htm?country=China HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/select.htm
Accept-Language: zh-cn
……

10、列表框（以平铺的形式显示）

设置<select>标签的属性 size 的值大于 1 即可
size表示显示多少行

示例：列表框与多选列表框？
<select name="country4" size="5">
<option value="America">美国</option>
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</select>

11、列表框（可以多选）

设置<select>标签的属性 multiple="multiple“
用户可以通过Ctrl或Shift选择多个选项。

此时的HTTP请求消息为：
GET /DEMO/form/select.htm?country4=China&country4=India&country4=Russia HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/select.htm
…

12、单选按钮（input）

单选按钮的行为类似上面介绍的下拉列表，用户可以从几个选项中选择一个。

示例：单选按钮分组？
蓝色<input type="radio" value="blue" name="color" />
红色<input type="radio" value="red" checked="checked" name="color" />
白色<input type="radio" value="white" name="color" />

特别注意：name 用于指定哪些单选框是一组的，
同组的单选框只能选中一个。

13、多选框（input）

多选框和单选按钮，以及可以多选的列表框类似。

示例：多选框分组？

蓝色<input type="checkbox" value="blue" name="color" />
红色<input type="checkbox" value="red" checked="checked" name="color" />
白色<input type="checkbox" value="white" name="color" />

14、按钮（input）

提交按钮（type=”submit”）
点击提交按钮所在的表单
用户在单行文本框或密码框中，按enter时提交表单（相当点击提交按钮）。

重置按钮（type=”reset”）
将表单字段的值重置为页面第一次加载时的值。

一般按钮（type=”button”）
没有默认行为。
怎样使用一般按钮提交表单？（使用Javascript）

15、图片按钮（input）

类似提交按钮，但是使用一个图片而不是浏览器默认的按钮。

示例：图片按钮向服务器提交的数据？

<input type="image" src="../images/rose.bmp" alt="Rose" />
点击图片按钮会回发表单，HTTP请求消息为：
GET /form/imgbutton.htm?password=123456&x=5&y=93 HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/imgbutton.htm
Accept-Language: zh-cn
……

注意，在发送到服务器的数据中，除了文本框的值，还有：
x=5&y=93

这个是点击按钮时，光标落在图片的坐标。

16、隐藏输入框（input）

用户不可见，但是隐藏输入框的值可以随着表单一起提交。
<input type="hidden" name="password" value="123456" />
常见的使用场合
多页面收集用户信息。

17、标签（label）

有些HTML标签尺寸很小，比如单选框和多选框。希望点击单选框旁边的按钮和点击单选框的效果相同。

示例：<label>标签常见的使用场景？
<label for="blue">蓝色</label>
<input type="radio" id="blue" value="blue" name="color" />

18、id和name有什么区别呢？

id 在整个页面是唯一的，没有任何两个HTML标签的id是一样的。
name 用在向服务器发送数据时，保存HTML标签的值。
可以有相同的name的HTML标签存在（比如相同name的radio是同一分组的）。

19、分组框（fieldset）

分组框<fieldset>标签。
<legend>标签来显示分组框标题。

<fieldset style="width:200px;">
<legend>选择颜色</legend>
<ul>
<li>蓝色<input type="radio" value="blue" name="color" /></li>
<li>红色<input type="radio" value="red" checked="checked" name="color" /></li>
<li>白色<input type="radio" value="white" name="color" /></li>
</ul>
</fieldset>

十一、框架

（1）、为什么使用frameset

<frameset> 允许我们把很多页面组合成一个页面

常见的应用场景
一个frame中放置页面导航，另一个frame中放置页面内容，当点击页面导航时，只刷新页面内容。（部分刷新）

（2）、垂直分栏框架

<frameset>的 cols 属性，定义垂直分栏的各列的宽度：

示例：一个三列的框架，其中第一列占据150px的宽度，第二列占据10%的宽度，
第三列占据剩余的宽度。

<frameset cols="150, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>

（3）、水平分栏框架

示例：
<frameset rows="50, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>

（4）、<frame>标签的属性

frameborder="0“
用来设置不显示分隔条
noresize="noresize“
则设置分隔条不可拖动
scrolling=”no”
不显示滚动条。

（5）、混合框架

科大的bbs（http://bbs.ustc.edu.cn）使用框架

这样一个页面包含了5个HTML页面。

混合框架
科大的bbs（http://bbs.ustc.edu.cn）使用框架

<frameset cols="151, 10, *" framespacing="0" frameborder="no“ border="0">
<frameset rows="*, 25" framespacing="0" frameborder="no" border="0">
<frame name="f2" src="cgi/bbsleft" noresize>
<frame scrolling="no" name="f2tty" src="tty.html" noresize>
</frameset>
<frame src="f5.html" name="f5" frameborder="no" scrolling="no" noresize>
<frameset rows="0, *, 20" framespacing="0" frameborder="no" border="0">
<frame name="f3" src="cgi/bbsindex" noresize>
<frame scrolling="no" name="f4" src="cgi/bbsfoot" noresize>
</frameset>
</frameset>

（6）、框架之间导航

框架中的链接可以在框架之间导航，通过设置<a> 标签的target属性。

1、<a>的target属性和<frame>的name属性相对应。

示例：框架页面
<frameset cols="150, 10%, *">
<frame name="left" src="4.htm" />
<frame name="middle" src="about:blank" />
<frame name="right" src="about:blank" />
</frameset>

在4.htm中有如下链接：
<a href="5.htm" target="middle">链接一</a>
<a href="6.htm" target="right">链接二</a>

则点击“链接一”会在中间框架中打开 5.htm 页面，
点击“链接二”会在右侧框架中打开 6.htm 页面。
示例：框架页面
<frameset cols="150, 10%, *">
<frame name="left" src="4.htm" />
<frame name="middle" src="about:blank" />
<frame name="right" src="about:blank" />
</frameset>

在4.htm中有如下链接：
<a href="5.htm" target="middle">链接一</a>
<a href="6.htm" target="right">链接二</a>

则点击“链接一”会在中间框架中打开 5.htm 页面，
点击“链接二”会在右侧框架中打开 6.htm 页面。

2、target还有两个重要的值：
_parent
页面的父框架中打开
_top
最顶层的框架中打开

（7）、内联框架

内联框架能够在页面上的任意一个地方嵌入其他页面，使用范围更广。
<iframe frameborder="0" src="image.htm"></iframe>

（8）、frameset 的缺点

浏览器的URL地址无法准确反映真实页面的变化。此时保存页面标签也不能真实反映当前页面。

当用户通过URL打开单独的一个内容页面时，看到的不是完整的页面（这在搜索引擎的结果中经常遇到）。

Frame之间的导航有点复杂，可能出现不一致的情况。

刷新页面后载入的页面和用户期望的可能不一致。

十二、综合练习

PPT：HTML表单

0 0