HTML基础-01-13-2015
2015-01-13 15:09
281 查看
一、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属性：
<table border=“5">
<tr>
<td>
数据一
</td>
<td>
数据二
</td>
</tr>
</table>
（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” 表示当前单元格跨两行。
<table border="1">
<tr>
<th>标题一</th>
<th rowspan="2">标题二</th>
</tr>
<tr>
<td>数据一</td>
</tr>
</table>
（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
……
9、<optgroup>标签
用来对选项进行分组（分组标签是不可选择的）
<select name="country2">
<optgroup label="北美洲">
<option value="America">美国</option>
</optgroup>
<optgroup label="亚洲">
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</optgroup>
</select>
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表单
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [零基础学JAVA]Java SE面向对象部分-13.面向对象高级（01） 推荐
- 寄存器（内存访问）01 - 零基础入门学习汇编语言13
- jQuery基础----13jQuery HTML-添加元素
- html基础01
- HTML基础01
- Lesson01_01 HTML基础
- Html与CSS快速入门01-基础概念
- .Net学习笔记----2015-07-13(HTML表格)
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- HTML 基础知识01
- HTML_01(语言基础)
- javaWeb基础01_HTML
- Linux基础入门及系统管理01-Linux文件系统管理及IO重定向13
- HTML与CSS_基础 翁恺 笔记（2015 8.10更新）
- CSS：01-13-2015
- 寄存器（内存访问）01 - 零基础入门学习汇编语言13
- HTML那点事之【基础标签(01)】
- java_web-HTML-2-01-12-2015
- HTML基础_01_基础标签
- html----01----html基础