html笔记
HTML Hyper Text Markup language
HTTP HyperText Transfer Protocol
1．HTML语法标记
标记(标签或元素)的形式
<元素名>内容</元素名> Eg. <font>文字</font>
<元素名/> Eg. <img src=“…”/>
<元素名> Eg. <br>
位于尖括号内，可以具有属性值
属性值必须“” 或 ‘’，不写也可以解析， 但是不推荐（不符合XHTML）
有开始必须有结束(XHTML)；标签不能嵌套
不区分大小写；但应该养成良好的编程习惯，推荐都用小写
2、Html文档结构
<html>
<head>
<title>
典型HTML
</title>
</head>
<body>
我会努力的！
</body>
</html>
<!-- 中间的内容为注释 -->
3、head中的常用标签
<title>文字</title> “文字”将显示在浏览器标题栏上
<meta>：用于设置一些头信息
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”> //当前页面的设置（http-equiv 指明要设置的项目；content指明设置项目的内容）
<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>//3秒钟之后刷新当前页面刷新之后指示url 后的页面；
<meta name="keywords" content="your keywords">//设置网页的关键词（搜索引擎）
<meta name="description" content="your description">//对网页的描述
<meta http-equiv="expires" content="0">//不再访问方设置缓存
<meta http-equiv="pragma" content="no-cache">//不再代理服务器上设置缓存
<meta name="generator | author | copyright" content="…..">//网页由什么制作，作者，版权声明
<style>…</style>定义CSS格式
<Script language=“”>…</Script> 用于定义脚本，Eg. Javascript
<link> …..< base>网页中的连接都是以base 指定的为基础
4、<body>（属性）(css中设置)
<body bgcolor=“#ffffff” text = “#ff00fff” link=”#00ff00” alink=”#000000” vlink=”#000000” background="img_url" >
你好！
<a herf = “0.1.html”>连接到0.1.html</a>
</body>
色彩值 “#rrggbb” Eg. <body bgcolor=“#ffffff” > 红绿蓝数字值
<body background=“img_url” --图片地址 >
body其他属性 text link alink vlink bgcolor leftmargin topmargin…
5、锚点标签--<a>
<a name="AnchorName">anchorName</a>
在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置
超级链接，跳转到另一文件 <a href=“url” target=“TargetWindow”>文字 </a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”连接到url的point部分；在url文档中用<a name=“point”></a>标识
Target 见“框架“部分
6、路径问题
本地路径 "c:\dir1\dir2\…"
绝对路径 "http://www.foo.com/img_url.jpg
相对路径（相对于url地址）
“01.jpg” <!--本网页URL下的01.jpg-->
"images/01.jpg" <!-- 本网页所在的url地址下查找images/01.jpg-->
"../../images/01.jpg" <!-- ../表示上层路径-->
"/images/01.jpg" = "http://mysite/images/01.jpg<!-- /当前路径下根路径-->
Eg. <a href=“”></a>；Eg. <img src=“”/>
7、URL URI URN
URL：Uniform Resource Locator（统一资源定位符）
网络协议 ＋ 主机名 ＋ 端口号 ＋ 资源名（定位标记）
http://www.bjsxt.com:80/index.html#top带有参数的url 及 url编码问题 见Servlet / JSP部分
URN：Uniform Resource Name
持久可用的资源标准名称 例如邮箱名[email protected]
URI：Uniform Resource Identifier 包含URL和URN
8、分隔线--<hr>
语法
<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>
Size 高度；Align 对齐方式，可以取left或right；Noshade 无阴影效果；颜色
Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>
9、标题字体大小--<h#>
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容；自动插入空行；<h1>最大；<h6>最小
10、字体设置(css中设置)
<font face=“” size=“” color=“”>…</font>
face定义字体
size 1 2 3 4 5 6 7；实际 8 10 12 14 18 24 36（pixels）
<font size=“+1”><font size=“-1”>
Color可以使用预定义的名字,也可以使用数字；red、blue、black…
<tt></tt>通常是打字机风格字体
<cite></cite>通常是引用方式（斜体）
<em></em>强调（通常是斜体加粗体）
11、设置文字显示
名称 HTML代码
黑体 <b></b>
斜体 <i></i>
下划线 <u></u>
中划线 <s></s>
闪烁 <blink></blink>
上标 <sup></sup>
下标 <sub></sub>
12、特殊字符（注意后面的分号）
< <
> >
® 注册商标
& &
空格
© copyright
™ 商标™
" “
13、文字的布局
<p>…</p> 分段落现实
<div>…</div> <span>…</span> 分块显示
<ul>…</ul> <li type=“disc circle square”>…. 符号列表
<ol>…</ol>
<li>…
数字列表
<br> 换行
<nobr>…</nobr> 不换行
<pre></pre>保留原有格式
<marquee></marquee>跑马灯效果
<blockquote></blockquote>
<dl><dt><dd>
14、对齐—align <h1 align=“”> <div align=“”> <table align=“”> <hr align=“”>
取值:left right center top middle bottom
<center>……</center> 对齐到中间
15、图片 <img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字
Border 边框的厚度 Align = left right (top middle bottom 图文混排时用于和图片的对齐)
16、 表格—重点掌握
<table width=“” align=“” border=“”> <!—width %或像素值-->
<tr>
<th width=“” align=“”>…</th> <!—th 表示表头thead 可选 -->
<th>…</th>…
</tr>
<tr>
<td width=“” align=“” valign=“”>…</td> <!—单元格valign（top，middle，bottom）-->
<td rowspan=“” colspan=“” bgcolor=“”>…</td><! – colspan 跨列rowspan 跨行-->
……
</tr>
</table>
17、表单—重点掌握
作用 收集用户信息；数据库查询；收发email
用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者
<form>……</form>
<form>的属性
Method (get post)
Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
Post数据长度无限制，不会显示在url中
Action Form中数据交给服务器端哪个程序进行处理
Eg. <form method=“post” action=“user.jsp>……</form>
18、位于表单中的输入标签
位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type: text radio checkbox password hidden select submit reset button textarea image
name: 提交到服务器端的变量的名字
19、表单中的输入标签
文本框 text <input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度 size – 文本框宽度（字符）
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮 <input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值 错误的用法 : 不同的名字
复选框 <input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隐藏域 <input type=“hidden” name=“” value=“”>
不显示在网页中 通常用作向下一个页面传输已知信息或表单的附加信息
select
列表框
<select name=“” size=“” multiple>
<option value=“” selected>…</option>
<option value=“”>…</option>
……
</select> Multiple 表示多重列表框，可以多选；Selected 被选中
多行多列文本框
<textarea rows=“” cols=“” wrap=“”>…</textarea>
Rows: 行数；Cols: 列数；
Wrap: Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下行
Hard: 自动换行，但会截断行末的单词
button
<input type=button name=“” value=“”> 按下该按钮没有反映
<input type=submit name=“” value=“”> 按下该按钮，该form中所有的输入信息将被提交到服务器
<input type=reset name=“” value=“”> 按下该按钮，该form中所有的输入部分将被重置
<input type=“image” src=“”> 点击图片提交
框架
<html>
<head><title>Frame</head></title> <!—注意没有body-->
<frameset rows=“row1,row2…” cols=“200,30%,*”>
<frame name=“” src=“” noresize> <!—noresize 不允许改变大小-->
<frame name=“” src=“” scrolling=“”>
……
</frameset>
</html>
嵌套
<frameset cols=“20%,*”>
<frame name=“left” src=“a.htm”>
<frameset rows=“40%,*”>
<frame name=“righttop” src=“b.htm”>
<frame name=“rightbottom” src=“c.htm”>
</frameset>
</frameset>
链接、表单与框架
<a href=“” target=“”>…</a>
<form action=“” target=“”>…</form>
Target:
Frame name
_blank 新窗口；_self 本窗口；_parent 父窗口（本窗口的上一级窗口）；_top 浏览器窗口
HTTP HyperText Transfer Protocol
1．HTML语法标记
标记(标签或元素)的形式
<元素名>内容</元素名> Eg. <font>文字</font>
<元素名/> Eg. <img src=“…”/>
<元素名> Eg. <br>
位于尖括号内，可以具有属性值
属性值必须“” 或 ‘’，不写也可以解析， 但是不推荐（不符合XHTML）
有开始必须有结束(XHTML)；标签不能嵌套
不区分大小写；但应该养成良好的编程习惯，推荐都用小写
2、Html文档结构
<html>
<head>
<title>
典型HTML
</title>
</head>
<body>
我会努力的！
</body>
</html>
<!-- 中间的内容为注释 -->
3、head中的常用标签
<title>文字</title> “文字”将显示在浏览器标题栏上
<meta>：用于设置一些头信息
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”> //当前页面的设置（http-equiv 指明要设置的项目；content指明设置项目的内容）
<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>//3秒钟之后刷新当前页面刷新之后指示url 后的页面；
<meta name="keywords" content="your keywords">//设置网页的关键词（搜索引擎）
<meta name="description" content="your description">//对网页的描述
<meta http-equiv="expires" content="0">//不再访问方设置缓存
<meta http-equiv="pragma" content="no-cache">//不再代理服务器上设置缓存
<meta name="generator | author | copyright" content="…..">//网页由什么制作，作者，版权声明
<style>…</style>定义CSS格式
<Script language=“”>…</Script> 用于定义脚本，Eg. Javascript
<link> …..< base>网页中的连接都是以base 指定的为基础
4、<body>（属性）(css中设置)
<body bgcolor=“#ffffff” text = “#ff00fff” link=”#00ff00” alink=”#000000” vlink=”#000000” background="img_url" >
你好！
<a herf = “0.1.html”>连接到0.1.html</a>
</body>
色彩值 “#rrggbb” Eg. <body bgcolor=“#ffffff” > 红绿蓝数字值
<body background=“img_url” --图片地址 >
body其他属性 text link alink vlink bgcolor leftmargin topmargin…
5、锚点标签--<a>
<a name="AnchorName">anchorName</a>
在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置
超级链接，跳转到另一文件 <a href=“url” target=“TargetWindow”>文字 </a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”连接到url的point部分；在url文档中用<a name=“point”></a>标识
Target 见“框架“部分
6、路径问题
本地路径 "c:\dir1\dir2\…"
绝对路径 "http://www.foo.com/img_url.jpg
相对路径（相对于url地址）
“01.jpg” <!--本网页URL下的01.jpg-->
"images/01.jpg" <!-- 本网页所在的url地址下查找images/01.jpg-->
"../../images/01.jpg" <!-- ../表示上层路径-->
"/images/01.jpg" = "http://mysite/images/01.jpg<!-- /当前路径下根路径-->
Eg. <a href=“”></a>；Eg. <img src=“”/>
7、URL URI URN
URL：Uniform Resource Locator（统一资源定位符）
网络协议 ＋ 主机名 ＋ 端口号 ＋ 资源名（定位标记）
http://www.bjsxt.com:80/index.html#top带有参数的url 及 url编码问题 见Servlet / JSP部分
URN：Uniform Resource Name
持久可用的资源标准名称 例如邮箱名[email protected]
URI：Uniform Resource Identifier 包含URL和URN
8、分隔线--<hr>
语法
<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>
Size 高度；Align 对齐方式，可以取left或right；Noshade 无阴影效果；颜色
Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>
9、标题字体大小--<h#>
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容；自动插入空行；<h1>最大；<h6>最小
10、字体设置(css中设置)
<font face=“” size=“” color=“”>…</font>
face定义字体
size 1 2 3 4 5 6 7；实际 8 10 12 14 18 24 36（pixels）
<font size=“+1”><font size=“-1”>
Color可以使用预定义的名字,也可以使用数字；red、blue、black…
<tt></tt>通常是打字机风格字体
<cite></cite>通常是引用方式（斜体）
<em></em>强调（通常是斜体加粗体）
11、设置文字显示
名称 HTML代码
黑体 <b></b>
斜体 <i></i>
下划线 <u></u>
中划线 <s></s>
闪烁 <blink></blink>
上标 <sup></sup>
下标 <sub></sub>
12、特殊字符（注意后面的分号）
< <
> >
® 注册商标
& &
空格
© copyright
™ 商标™
" “
13、文字的布局
<p>…</p> 分段落现实
<div>…</div> <span>…</span> 分块显示
<ul>…</ul> <li type=“disc circle square”>…. 符号列表
<ol>…</ol>
<li>…
数字列表
<br> 换行
<nobr>…</nobr> 不换行
<pre></pre>保留原有格式
<marquee></marquee>跑马灯效果
<blockquote></blockquote>
<dl><dt><dd>
14、对齐—align <h1 align=“”> <div align=“”> <table align=“”> <hr align=“”>
取值:left right center top middle bottom
<center>……</center> 对齐到中间
15、图片 <img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字
Border 边框的厚度 Align = left right (top middle bottom 图文混排时用于和图片的对齐)
16、 表格—重点掌握
<table width=“” align=“” border=“”> <!—width %或像素值-->
<tr>
<th width=“” align=“”>…</th> <!—th 表示表头thead 可选 -->
<th>…</th>…
</tr>
<tr>
<td width=“” align=“” valign=“”>…</td> <!—单元格valign（top，middle，bottom）-->
<td rowspan=“” colspan=“” bgcolor=“”>…</td><! – colspan 跨列rowspan 跨行-->
……
</tr>
</table>
17、表单—重点掌握
作用 收集用户信息；数据库查询；收发email
用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者
<form>……</form>
<form>的属性
Method (get post)
Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
Post数据长度无限制，不会显示在url中
Action Form中数据交给服务器端哪个程序进行处理
Eg. <form method=“post” action=“user.jsp>……</form>
18、位于表单中的输入标签
位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type: text radio checkbox password hidden select submit reset button textarea image
name: 提交到服务器端的变量的名字
19、表单中的输入标签
文本框 text <input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度 size – 文本框宽度（字符）
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮 <input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值 错误的用法 : 不同的名字
复选框 <input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隐藏域 <input type=“hidden” name=“” value=“”>
不显示在网页中 通常用作向下一个页面传输已知信息或表单的附加信息
select
列表框
<select name=“” size=“” multiple>
<option value=“” selected>…</option>
<option value=“”>…</option>
……
</select> Multiple 表示多重列表框，可以多选；Selected 被选中
多行多列文本框
<textarea rows=“” cols=“” wrap=“”>…</textarea>
Rows: 行数；Cols: 列数；
Wrap: Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下行
Hard: 自动换行，但会截断行末的单词
button
<input type=button name=“” value=“”> 按下该按钮没有反映
<input type=submit name=“” value=“”> 按下该按钮，该form中所有的输入信息将被提交到服务器
<input type=reset name=“” value=“”> 按下该按钮，该form中所有的输入部分将被重置
<input type=“image” src=“”> 点击图片提交
框架
<html>
<head><title>Frame</head></title> <!—注意没有body-->
<frameset rows=“row1,row2…” cols=“200,30%,*”>
<frame name=“” src=“” noresize> <!—noresize 不允许改变大小-->
<frame name=“” src=“” scrolling=“”>
……
</frameset>
</html>
嵌套
<frameset cols=“20%,*”>
<frame name=“left” src=“a.htm”>
<frameset rows=“40%,*”>
<frame name=“righttop” src=“b.htm”>
<frame name=“rightbottom” src=“c.htm”>
</frameset>
</frameset>
链接、表单与框架
<a href=“” target=“”>…</a>
<form action=“” target=“”>…</form>
Target:
Frame name
_blank 新窗口；_self 本窗口；_parent 父窗口（本窗口的上一级窗口）；_top 浏览器窗口