HTML代码大全
1、html的简介
* 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的<font size="5" color="red">第一个html程序！</font>
* html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行 <br/> <hr/>
* html的操作思想（******理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2、文字标签和注释标签
* 文字标签：修改文字的样式
- <font></font>
- 属性：
* size: 文字的大小 取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
* 注释标签
- java注释几种？三种
- html的注释 ： <!-- html的注释 -->
3、标题标签、水平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
- <hr/>
- 属性
** size: 水平线的粗细 取值范围 1-7
** color: 颜色
- 代码
<hr size="5" color="blue"/>
* 特殊字符
- 想要在页面上显示这样的内容 <html>:是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格：
* & : &
4、列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl> </dl>: 表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
** <ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 <li>具体内容</li>
- 代码
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
- 想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
** <ul></ul> : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面 <li></li>
- 代码
<ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
5、图像标签（*******）
* <img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、案例一：列表标签的使用（作业：完成剩余的部分）
8、超链接标签（******）
* 链接资源(******)
- <a href="链接到资源的路径"> 显示在页面上的内容 </a>
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- <a href="#">这是一个超链接2</a>
* 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a>
** 引入一个标签 pre：原样输出
9、表格标签（****重要的标签*****）
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right
*** 在tr里面 <td></td>
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
10、表单标签（****今天最重要的标签****）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form>: 定义一个表单的范围
- 属性
** action： 提交到地址，默认提交到当前的页面
** method: 表单提交方式
- 常用的有两种 get和post，默认是get请求
** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 <input type="输入项的类型"/>
******* 在输入项里面需要有一个name属性
*** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/>
*** 单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 文件输入项（在后面上传时候用到）
- <input type="file"/>
*** 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
*** selected="selected"
*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden" />
*** 提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991
当在输入项里面写了name属性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?输入项name的值=输入的值&
** 参数类似于key-value形式
*** 使用图片提交
<input type="image" src="图片路径"/>
*** 重置按钮： 回到输入项的初始状态
<input type="reset"/>
*** 普通按钮(和明天讲js在一起使用的)
<input type="button" value=""/>
11、案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容， 使用空格作为占位符
- 使用图片提交表单 <input type="image" src="图片的路径"/>
12、html中的其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签 比br标签多一行
====明天css时候一直使用
div ：自动换行
span：在一行显示
13、html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** <meta>标签：设置页面的一些相关内容
- <meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/>
** link标签：引入外部文件
** 明天css，可以使用link标签引入css文件
14、框架标签的使用（会用）
* <frameset>
- rows:按照行进行划分
** <frameset rows="80,*">
- cols:按照列进行划分
** <frameset cols="80,*">
* <frame>
- 具体显示的页面
- <frame name="lower_left" src="b.html">
*** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
* <frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
* 如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="01-hello.html" target="right">超链接1</a>
15、a标签的扩展（了解）
- 百度是网络资源
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
- 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
16、今天内容的总结
1、html操作思想（****）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行
4、注释 <!-- html的注释 -->
5、列表标签
** <dl> <dt></dt> <dd></dd></dl>
** 有序 <ol><li></li></ol>
** 无序 <ul><li></li></ul>
6、图像标签(******)
<img src="图片的路径" width="" height="" alt=""/>
** alt:浏览器兼容性很差
7、路径（相对路径）(****)
** 在同一级目录 ：直接写
** 在下一层目录： images/1.jpg
** 在上层目录： ../
8、超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
- 打开方式 target="_self _ blank"
- 默认是在当前页面打开
9、表格标签（*****）
<table>
<tr>
<td></td>
<th></th> //加粗和居中
</tr>
</table>
- 技巧：先数有多少行，数每行里面有多少个单元格
10、表单标签（*** 今天最重要的标签***）
* <form></form>:
- action: 提交到地址
- method：提交方式 ：常用的有两种 get和post
- get和post区别
- enctype属性（上传时候使用）
* 输入项
* 输入项里面写name属性
* 普通输入项 <input type="text"/>
* 密码：password
* 单选框：radio
* 复选框：checkbox
* 下拉框
<select name="">
<option value=""></option>
</select>
* 文本域
<textarea cols="" rows="" name=""></textarea>
* 文件 file
* 提交按钮 submit
* 重置 reset
* 使用图片提交 <input type="image" src=""/>
* 隐藏项 hidden
* 普通按钮 button
11、div和span(******)
1、html的简介
* 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的<font size="5" color="red">第一个html程序！</font>
* html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行 <br/> <hr/>
* html的操作思想（******理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2、文字标签和注释标签
* 文字标签：修改文字的样式
- <font></font>
- 属性：
* size: 文字的大小 取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
* 注释标签
- java注释几种？三种
- html的注释 ： <!-- html的注释 -->
3、标题标签、水平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
- <hr/>
- 属性
** size: 水平线的粗细 取值范围 1-7
** color: 颜色
- 代码
<hr size="5" color="blue"/>
* 特殊字符
- 想要在页面上显示这样的内容 <html>:是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格：
* & : &
4、列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl> </dl>: 表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
** <ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 <li>具体内容</li>
- 代码
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
- 想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
** <ul></ul> : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面 <li></li>
- 代码
<ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
5、图像标签（*******）
* <img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、案例一：列表标签的使用（作业：完成剩余的部分）
8、超链接标签（******）
* 链接资源(******)
- <a href="链接到资源的路径"> 显示在页面上的内容 </a>
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- <a href="#">这是一个超链接2</a>
* 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a>
** 引入一个标签 pre：原样输出
9、表格标签（****重要的标签*****）
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right
*** 在tr里面 <td></td>
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
10、表单标签（****今天最重要的标签****）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form>: 定义一个表单的范围
- 属性
** action： 提交到地址，默认提交到当前的页面
** method: 表单提交方式
- 常用的有两种 get和post，默认是get请求
** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 <input type="输入项的类型"/>
******* 在输入项里面需要有一个name属性
*** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/>
*** 单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 文件输入项（在后面上传时候用到）
- <input type="file"/>
*** 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
*** selected="selected"
*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden" />
*** 提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991
当在输入项里面写了name属性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?输入项name的值=输入的值&
** 参数类似于key-value形式
*** 使用图片提交
<input type="image" src="图片路径"/>
*** 重置按钮： 回到输入项的初始状态
<input type="reset"/>
*** 普通按钮(和明天讲js在一起使用的)
<input type="button" value=""/>
11、案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容， 使用空格作为占位符
- 使用图片提交表单 <input type="image" src="图片的路径"/>
12、html中的其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签 比br标签多一行
====明天css时候一直使用
div ：自动换行
span：在一行显示
13、html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** <meta>标签：设置页面的一些相关内容
- <meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/>
** link标签：引入外部文件
** 明天css，可以使用link标签引入css文件
14、框架标签的使用（会用）
* <frameset>
- rows:按照行进行划分
** <frameset rows="80,*">
- cols:按照列进行划分
** <frameset cols="80,*">
* <frame>
- 具体显示的页面
- <frame name="lower_left" src="b.html">
*** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
* <frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
* 如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="01-hello.html" target="right">超链接1</a>
15、a标签的扩展（了解）
- 百度是网络资源
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
- 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
16、今天内容的总结
1、html操作思想（****）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行
4、注释 <!-- html的注释 -->
5、列表标签
** <dl> <dt></dt> <dd></dd></dl>
** 有序 <ol><li></li></ol>
** 无序 <ul><li></li></ul>
6、图像标签(******)
<img src="图片的路径" width="" height="" alt=""/>
** alt:浏览器兼容性很差
7、路径（相对路径）(****)
** 在同一级目录 ：直接写
** 在下一层目录： images/1.jpg
** 在上层目录： ../
8、超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
- 打开方式 target="_self _ blank"
- 默认是在当前页面打开
9、表格标签（*****）
<table>
<tr>
<td></td>
<th></th> //加粗和居中
</tr>
</table>
- 技巧：先数有多少行，数每行里面有多少个单元格
10、表单标签（*** 今天最重要的标签***）
* <form></form>:
- action: 提交到地址
- method：提交方式 ：常用的有两种 get和post
- get和post区别
- enctype属性（上传时候使用）
* 输入项
* 输入项里面写name属性
* 普通输入项 <input type="text"/>
* 密码：password
* 单选框：radio
* 复选框：checkbox
* 下拉框
<select name="">
<option value=""></option>
</select>
* 文本域
<textarea cols="" rows="" name=""></textarea>
* 文件 file
* 提交按钮 submit
* 重置 reset
* 使用图片提交 <input type="image" src=""/>
* 隐藏项 hidden
* 普通按钮 button
11、div和span(******)
1、html的简介
* 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的<font size="5" color="red">第一个html程序！</font>
* html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行 <br/> <hr/>
* html的操作思想（******理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2、文字标签和注释标签
* 文字标签：修改文字的样式
- <font></font>
- 属性：
* size: 文字的大小 取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
* 注释标签
- java注释几种？三种
- html的注释 ： <!-- html的注释 -->
3、标题标签、水平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
- <hr/>
- 属性
** size: 水平线的粗细 取值范围 1-7
** color: 颜色
- 代码
<hr size="5" color="blue"/>
* 特殊字符
- 想要在页面上显示这样的内容 <html>:是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格：
* & : &
4、列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl> </dl>: 表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
** <ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 <li>具体内容</li>
- 代码
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
- 想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
** <ul></ul> : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面 <li></li>
- 代码
<ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
5、图像标签（*******）
* <img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、案例一：列表标签的使用（作业：完成剩余的部分）
8、超链接标签（******）
* 链接资源(******)
- <a href="链接到资源的路径"> 显示在页面上的内容 </a>
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- <a href="#">这是一个超链接2</a>
* 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a>
** 引入一个标签 pre：原样输出
9、表格标签（****重要的标签*****）
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right
*** 在tr里面 <td></td>
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
10、表单标签（****今天最重要的标签****）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form>: 定义一个表单的范围
- 属性
** action： 提交到地址，默认提交到当前的页面
** method: 表单提交方式
- 常用的有两种 get和post，默认是get请求
** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 <input type="输入项的类型"/>
******* 在输入项里面需要有一个name属性
*** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/>
*** 单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 文件输入项（在后面上传时候用到）
- <input type="file"/>
*** 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
*** selected="selected"
*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden" />
*** 提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991
当在输入项里面写了name属性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?输入项name的值=输入的值&
** 参数类似于key-value形式
*** 使用图片提交
<input type="image" src="图片路径"/>
*** 重置按钮： 回到输入项的初始状态
<input type="reset"/>
*** 普通按钮(和明天讲js在一起使用的)
<input type="button" value=""/>
11、案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容， 使用空格作为占位符
- 使用图片提交表单 <input type="image" src="图片的路径"/>
12、html中的其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签 比br标签多一行
====明天css时候一直使用
div ：自动换行
span：在一行显示
13、html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** <meta>标签：设置页面的一些相关内容
- <meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/>
** link标签：引入外部文件
** 明天css，可以使用link标签引入css文件
14、框架标签的使用（会用）
* <frameset>
- rows:按照行进行划分
** <frameset rows="80,*">
- cols:按照列进行划分
** <frameset cols="80,*">
* <frame>
- 具体显示的页面
- <frame name="lower_left" src="b.html">
*** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
* <frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
* 如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="01-hello.html" target="right">超链接1</a>
15、a标签的扩展（了解）
- 百度是网络资源
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
- 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
16、今天内容的总结
1、html操作思想（****）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行
4、注释 <!-- html的注释 -->
5、列表标签
** <dl> <dt></dt> <dd></dd></dl>
** 有序 <ol><li></li></ol>
** 无序 <ul><li></li></ul>
6、图像标签(******)
<img src="图片的路径" width="" height="" alt=""/>
** alt:浏览器兼容性很差
7、路径（相对路径）(****)
** 在同一级目录 ：直接写
** 在下一层目录： images/1.jpg
** 在上层目录： ../
8、超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
- 打开方式 target="_self _ blank"
- 默认是在当前页面打开
9、表格标签（*****）
<table>
<tr>
<td></td>
<th></th> //加粗和居中
</tr>
</table>
- 技巧：先数有多少行，数每行里面有多少个单元格
10、表单标签（*** 今天最重要的标签***）
* <form></form>:
- action: 提交到地址
- method：提交方式 ：常用的有两种 get和post
- get和post区别
- enctype属性（上传时候使用）
* 输入项
* 输入项里面写name属性
* 普通输入项 <input type="text"/>
* 密码：password
* 单选框：radio
* 复选框：checkbox
* 下拉框
<select name="">
<option value=""></option>
</select>
* 文本域
<textarea cols="" rows="" name=""></textarea>
* 文件 file
* 提交按钮 submit
* 重置 reset
* 使用图片提交 <input type="image" src=""/>
* 隐藏项 hidden
* 普通按钮 button
11、div和span(******)
1、html的简介
* 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的<font size="5" color="red">第一个html程序！</font>
* html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行 <br/> <hr/>
* html的操作思想（******理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2、文字标签和注释标签
* 文字标签：修改文字的样式
- <font></font>
- 属性：
* size: 文字的大小 取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
* 注释标签
- java注释几种？三种
- html的注释 ： <!-- html的注释 -->
3、标题标签、水平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
- <hr/>
- 属性
** size: 水平线的粗细 取值范围 1-7
** color: 颜色
- 代码
<hr size="5" color="blue"/>
* 特殊字符
- 想要在页面上显示这样的内容 <html>:是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格：
* & : &
4、列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl> </dl>: 表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
** <ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 <li>具体内容</li>
- 代码
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
- 想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
** <ul></ul> : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面 <li></li>
- 代码
<ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
5、图像标签（*******）
* <img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、案例一：列表标签的使用（作业：完成剩余的部分）
8、超链接标签（******）
* 链接资源(******)
- <a href="链接到资源的路径"> 显示在页面上的内容 </a>
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- <a href="#">这是一个超链接2</a>
* 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a>
** 引入一个标签 pre：原样输出
9、表格标签（****重要的标签*****）
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right
*** 在tr里面 <td></td>
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
10、表单标签（****今天最重要的标签****）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form>: 定义一个表单的范围
- 属性
** action： 提交到地址，默认提交到当前的页面
** method: 表单提交方式
- 常用的有两种 get和post，默认是get请求
** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 <input type="输入项的类型"/>
******* 在输入项里面需要有一个name属性
*** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/>
*** 单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中的属性
-- checked="checked"
*** 文件输入项（在后面上传时候用到）
- <input type="file"/>
*** 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
*** selected="selected"
*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden" />
*** 提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991
当在输入项里面写了name属性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=
** ?输入项name的值=输入的值&
** 参数类似于key-value形式
*** 使用图片提交
<input type="image" src="图片路径"/>
*** 重置按钮： 回到输入项的初始状态
<input type="reset"/>
*** 普通按钮(和明天讲js在一起使用的)
<input type="button" value=""/>
11、案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容， 使用空格作为占位符
- 使用图片提交表单 <input type="image" src="图片的路径"/>
12、html中的其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签 比br标签多一行
====明天css时候一直使用
div ：自动换行
span：在一行显示
13、html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** <meta>标签：设置页面的一些相关内容
- <meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/>
** link标签：引入外部文件
** 明天css，可以使用link标签引入css文件
14、框架标签的使用（会用）
* <frameset>
- rows:按照行进行划分
** <frameset rows="80,*">
- cols:按照列进行划分
** <frameset cols="80,*">
* <frame>
- 具体显示的页面
- <frame name="lower_left" src="b.html">
*** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
* <frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset>
* 如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="01-hello.html" target="right">超链接1</a>
15、a标签的扩展（了解）
- 百度是网络资源
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源
- 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
16、今天内容的总结
1、html操作思想（****）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行
4、注释 <!-- html的注释 -->
5、列表标签
** <dl> <dt></dt> <dd></dd></dl>
** 有序 <ol><li></li></ol>
** 无序 <ul><li></li></ul>
6、图像标签(******)
<img src="图片的路径" width="" height="" alt=""/>
** alt:浏览器兼容性很差
7、路径（相对路径）(****)
** 在同一级目录 ：直接写
** 在下一层目录： images/1.jpg
** 在上层目录： ../
8、超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
- 打开方式 target="_self _ blank"
- 默认是在当前页面打开
9、表格标签（*****）
<table>
<tr>
<td></td>
<th></th> //加粗和居中
</tr>
</table>
- 技巧：先数有多少行，数每行里面有多少个单元格
10、表单标签（*** 今天最重要的标签***）
* <form></form>:
- action: 提交到地址
- method：提交方式 ：常用的有两种 get和post
- get和post区别
- enctype属性（上传时候使用）
* 输入项
* 输入项里面写name属性
* 普通输入项 <input type="text"/>
* 密码：password
* 单选框：radio
* 复选框：checkbox
* 下拉框
<select name="">
<option value=""></option>
</select>
* 文本域
<textarea cols="" rows="" name=""></textarea>
* 文件 file
* 提交按钮 submit
* 重置 reset
* 使用图片提交 <input type="image" src=""/>
* 隐藏项 hidden
* 普通按钮 button
11、div和span(******)
1.结构性定义
文件类型 <HTML></HTML> （放在档案的开头与结尾）
文件主题 <TITLE></TITLE> （必须放在「文头」区块内）
文头 <HEAD></HEAD> （描述性资料，像是「主题」）
文体 <BODY></BODY> （文件本体）
（由浏览器控制的显示风格）
标题 <H?></H?> （从1到6，有六层选择）
标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
区分 <DIV></DIV>
区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块 <BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）
强调 <EM></EM> （通常会以斜体显示）
特别强调 <STRONG></STRONG> （通常会以加粗显示）
引文 <CITE></CITE> （通常会以斜体显示）
码 <CODE></CODE> （显示原始码之用）
样本 <SAMP></SAMP>
键盘输入 <KBD></KBD>
变数 <VAR></VAR>
定义 <DFN></DFN> （有些浏览器不提供）
地址 <ADDRESS></ADDRESS>
大字 <BIG></BIG>
小字 <SMALL></SMALL>
与外观相关的标签（作者自订的表现方式）
加粗 <B></B>
斜体 <I></I>
底线 <U></U> （尚有些浏览器不提供）
删除线 <S></S> （尚有些浏览器不提供）
下标 <SUB></SUB>
上标 <SUP></SUP>
打字机体 <TT></TT> （用单空格字型显示）
预定格式 <PRE></PRE> （保留文件中空格的大小）
预定格式的宽度 <PRE WIDTH=?></PRE>（以字元计算）
向中看齐 <CENTER></CENTER> （文字与图片都可以）
闪耀 <BLINK></BLINK> （有史以来最被嘲弄的标签）
字体大小 <FONT SIZE=?></FONT>（从1到7）
改变字体大小 <FONT SIZE=+|-?></FONT>
基本字体大小 <BASEFONT SIZE=?> （从1到7; 内定为3）
字体颜色 <FONT COLOR="#$$$$$$"></FONT>
说明 <!-- *** --> （浏览器不会显示）
<!--修改滚动条-->
<style type="text/css">
body {
scrollbar-face-color: #330033;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #330033;
scrollbar-arrow-color: #FFFFFF;
}
</style>
<!--修改滚动条结束-->
将上面的代码放在叶子代码的<head></head>之间,颜色可根据自己的需要修改。
滚动条的代码意思如下：
Scrollbar-Face-Color为滚动条表面颜色设定；
Scrollbar-Track-Color为滚动条底板颜色设定；
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定；
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
<!> 跑馬燈
<marquee>...</marquee>普通捲動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設捲動
<marquee behavior=alternate>...</marquee>來回捲動
<marquee direction=down>...</marquee>向下捲動
<marquee direction=up>...</marquee>向上捲動
<marquee direction=right></marquee>向右捲動
<marquee direction=’left’></marquee>向左捲動
<marquee loop=2>...</marquee>捲動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定捲動距離
<marquee scrolldelay=300>...</marquee>設定捲動時間
|
1)贴图：<img src="图片地址"> 8)字体删除线: <s>写上你想写的字</s> 9)字体加大: <big>写上你想写的字</big> 1、店铺音乐代码:音乐网址" loop="-1"> 简单常用HTML代码大全（修改网页必备） 网页常用HTML代码大全 |
进入网页时弹出的信息对话框
<body >
关闭窗口后弹出对话框
<body >
告别提示
<body nUnload= alert("再见，感谢你的访问！")>
只要你肯干,没有什么不能成功的.
1。忽视右键
<body ncontextmenu="return false">
或
<body style="overflow-y:hidden">
2。加入背景音乐
IE:<bgsound src="*.mid" loop=infinite>
NS:<embed src="*.mid" autostart=true hidden=true loop=true>
</embed>
*.mid你的背景音乐的midi格式文件
3。简单的window.open方法
<a href="#"
nclick="javascript:window.open(文件路径/文件名,newwindow,
toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,
width=400,height=300);">文字或图片</a>
参数解释：
<SCRIPT. LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
文件路径/文件名 弹出窗口的文件名；
newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替；
width=400 窗口宽度；
height=300 窗口高度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束
4。简单的页面加密
<script. LANGUAGE="javascript">
<!--
function loopy(){
var sWord ="";
while(sWord!="login"){sWord=prompt("请输入你的登陆密码");}
alert("登陆成功！");
}
loopy()
//-->
</script>
5。拉动页面时背景图不动
<style>
body{background-image:url(logo.gif);
background-repeat:no-repeat;background-position:center}
</style>
6。让浏览器在保存页面时保存失败
<NOSCRIPT><iframe. src="*.html"></iframe></NOSCRIPT>
7。随机替换图片
<script>
document.write(<img src="img/+parseInt(Math.random()*(5))
+.gif"height="40" width="50">
</script>
图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif
8。窗口定时关闭
先将如下代码网页文件的区：
<script. language="javascript">
function closeit() { setTimeout("self.close()",10000) //毫秒 }
</script>
然后再在<body>标内加入如：<body nload="closeit()">
9。网页自动关闭
<html>
<head>
<object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body nload="window.setTimeout(closes.Click(),10000)">
这个窗口会在10秒过后自动关闭,而且不会出现提示.
</body>
</html>
10。网页自动刷新
在head部记入
<META. HTTP-EQUIV="Refresh" content="20">
其中20为20秒后自动刷新，你可以更改为任意值。
11。网页自动转页
<META. HTTP-EQUIV="Refresh" CONTENT="时间(秒);URL=地址">
12。保持layer在最前面，而不被Iframe、Object所覆盖
在Layer中再插Iframe. 或 Object 设z-Index值
<div z-Index:2><object xxx></object> ＃ 前面
<div z-Index:1><object xxx></object> ＃ 后面
<div id="Layer2" style="position:absolute; top:40;width:400px;
height:95px;z-index:2"> height=100% width=100%>
<iframe. width=0 height=0></iframe>
</div>
<div id="Layer1" style="position:absolute; top:50;width:200px;
height:115px;z-index:1">
<iframe. height=100% width=100%></iframe>
</div>
13。返回上一页
<a href=javascript:history.back(1)>『返回上一页』</a>
14。关闭窗口
<a href=javascript:self.close()>『关闭窗口』</a>
15。关于iframe的透明背景
<IFRAME. ID="iFrame1" SRC="iframe.htm"
allowTransparency="true"
style="background-color: green"></IFRAME>
16. ncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border ncontextmenu=return(false)><td>no</table> 可用于Table
17. <body nselectstart="return false"> 取消选取、防止复制
18.onpaste="return false" 不准粘贴
19.oncopy="return false;" ncut="return false;" 防止复制
20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标
21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标
22. <input style="ime-mode:disabled"> 关闭输入法
23. 永远都会带着框架
<script. language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>
24. 防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
25. 网页将不能被另存为
<noscript><iframe. src=*.html></iframe></noscript>
26. 查看网页源代码
<input type=button value=查看网页源代码
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">
27.删除时确认
<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp? &areyou=删除&page=1"">删除</a>
28.屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>
29. 网页不会被缓存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires" CONTENT="0">
30.怎样让表单没有凹凸感？
<input type=text style="border:1 solid #000000">
或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>
31.不要滚动条?
让竖条没有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉？更简单了
<body scroll="no">
</body>
32.怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" nFocus="this.blur()"><img src="logo.jpg" border=0></a>
33.电子邮件处理提交表单
<form. name="form1" method="post" action="mailt****@***.com" enctype="text/plain">
<input type=submit>
</form>
34.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
35.如何设定打开页面的大小
<body nload="top.resizeTo(300,200);">
打开页面的位置<body nload="top.moveBy(300,200);">
36.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
37. 检查一段字符串是否全由数字组成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
38. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight
39. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");
40.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
41. 日期减去天数等于第二个日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
42. 选择了哪一个Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style.
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" nclick="checkme()">
</BODY></HTML>
43.脚本永不出错
<SCRIPT. LANGUAGE="JavaScript">
<!-- Hide function killErrors(){return true;} window.onerror = killErrors; // -->
</SCRIPT>
44.ENTER键可以让光标移到下一个输入框
<input nkeydown="if(event.keyCode==13)event.keyCode=9">
45. 检测某个网站的链接速度：
把如下代码加入<body>区域中:
<script. language=Javascript>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]="www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]="www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="www.cctv.com"
function butt(){
document.write("<form. name=autof>")
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=测试中
……> =》<input type=text
name=url"+i+" size=40> =》<input type=button value=GO
onclick=window.open(this.form.url"+i+".value)><br>")
document.write("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"} b++ }
function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}
run()</script>
46. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
|
47、禁止鼠标右键，把Demo的图片全都设为表格的背景，表格的大小与图片的大小一样。这样做看起来是一样的，主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右键下载图片：）'); } } document.onmousedown=click</script> |
1. 怎 样 定 义 网 页 语 言( 字 符 集)?
----在 制 作 网 页 过 程 中, 你 首 先 要 定 义 网 页 语 言, 以 便 访 问 者 浏 览 器 自 动 设 置 语 言, 而 我 们 用 所 见 即 所 得 的HTML 工 具 时, 都 没 有 注 意 到 这 个 问 题, 因 为 它 是 默 认 设 置。 要 设 置 的 语 言 可 以 在HTML 代 码 状 态 下 找 到:
$#@60; meta http －equiv="Content Type" content="text/html; charset=gb2312" $#@62;
----把charset=gb2312 改 换 成 其 它 语 言 代 码 即 可, 比 如 英 文:charset=en.
2. 怎 样 防 止 别 人 把 你 的 网 页 放 到 框 架 里?
----因 为 框 架（frame） 的 缘 故, 有 许 多 人 把 别 人 的 网 页 放 置 到 自 己 的 框 架 里, 使 之 成 为 自 己 的 一 页。 如 果你 要 防 止 别 人 这 样 做, 可 以 加 入 下 列JavaScript 代 码 即 可, 它 会 自 动 监 测, 然 后 跳 出 别 人 的 框 架。
$#@60; script language="javascript" $#@62;
？?if (self != top) { top.location = self.location; }
$#@60; /script $#@62;
3. 怎 样 设 置 字 体?
----在 制 作 网 页 过 程 中, 大 家 都 喜 欢 使 用 漂 亮 的 字 体。 但 是, 如 果 访 客 浏 览 器 没 有 安 装 同 样 的 字 体， 看 到 你 的 网 页 会 是 很 普 通 的 字 体。 如 何 防 止 这 种 情 况 出 现 呢? 大 家 知 道 字 体 设 置 的 标 签 是Font, 而 它 有 个 属 性 是Face, 该 属 性 是 定 义 字 体 的, 你 可 以 这 样 设 置:, 访 客 的 浏 览 器 就 会 按 照Face 定 义 的 字 体 顺 序 设 置 已 安 装 的 字 体。 目 前 动 态 主 页 有 种 技 术, 可 以 把 字 体 信 息 用 向 量 格 式 存 储, 然 后 利 用 访 客 本 身 机 器 含 有 的 公 共 信 息 库 把 字 体 快 速 的 组 装 起 来, 这 样, 就 不 用 担 心 访 客 是 否 安 装 有 某 种 字 体 了。
4. 怎 样 在 网 页 中 加 入 注 释?
----在 共 同 开 发 网 页 中, 加 入 注 释 是 防 止 分 工 被 搞 混 淆 或 者 注 释 某 段 代 码 特 殊 的 含 加 入 注 释 的 格 式 是:
$#@60; ! － － Microsoft FrontPage 3.0 － － $#@62;。
5. 怎 样 测 试 浏 览 器 并 自 动 装 入 所 需 要 的 网 页?
----目 前 微 软 和 网 景 的 浏 览 器 并 不 能 完 全 兼 容 所 有 网 页, 有 的 在 某 种 浏 览 器 里 非 常 漂 亮, 而 用 其 它 浏 览 器 查 看 时 却 一 团 糟。 如 果 你 需 要 测 试 浏 览 器, 可 以 加 入 以 下JavaScript 代 码 并 保 存 单 独 一 个 网 页:
$#@60; script LANGUAGE="JavaScript" $#@62;
function TestBrowser(){
ie = ((navigator.appName ==
"Microsoft Internet Explorer") ＆ ＆
(parseInt(navigator.appVersion) $#@62;= 3 ))
ns = ((navigator.appName == "Netscape") ＆ ＆
(parseInt(navigator.appVersion) $#@62;= 3 ))
if (ns) {
setTimeout(location.href="nn4.htm",10);
} else {
setTimeout(location.href="ie4.htm",10);
}
}
$#@60; /script $#@62;
实 例 请 参 考:
http://www.netease.com/～tiantao/test.htm
6. 怎 样 让 链 接 没 有 下 划 线?
----只 要 在 加 入 以 下 代 码, 所 有 链 接 就 都 没 有 下 划 线 了:
$#@60; style type="text/css" $#@62;
$#@60; ! － －
A{text －transform: none;
text －decoration: none ;}
a:hover { text －decoration:underline }
－ － $#@62;
$#@60; /style $#@62;
7. 怎 样 在 网 页 中 加 入E-mail 链 接 并 显 示 预 定 的 主 题?
A HREF=mailto:lovett@163.net?subject=test
8. 怎 样 让 背 景 图 像 不 滚 动?
----Internet Explorer 浏 览 器 支 持 一 个Body 属 性Bgproperties, 它 可 以 让 背 景 不 滚 动。
$#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;
9. 怎 样 评 定 网 页 的 级 别?
----在IE4.0 浏 览 器 中, 有 一 项 功 能 是 过 滤 网 站 的, 一 些 受 限 制 的 网 站 被 过 滤 掉, 而 该 网 站 必 须 被RSAC( 美 国娱 乐 委 员 会) 评 定 了 级 别IE4.0 才 能 过 滤, 如 果 你 要 评 级 可 以 在 网 页 中 加 入 以 下 代 码:
$#@60; meta http －equiv="PICS －Label"????
content=(PICS －1.1 "http://www.rsac.org/ratingsv01.html"
？?l gen true comment "RSACi North America Server"
？?for "http://youHostname"
？?on "1998.11.26GMT08:15 ?0500"
？?r (n 0 s 0 v 0 l 0))$#@62;
10. 怎 样 定 义 本 网 页 的 关 键 字?
----在 网 页 中 加 入 关 键 字, 可 以 供 某 些 搜 索 站 台 机 器 人 的 使 用, 它 们 会 利 用 该 关 键 字 为 你 的 网 站 做 索 引, 这 样, 当 别 人 用 关 键 字 搜 索 网 站 时, 如 果 你 的 网 页 包 含 该 关 键 字, 那 么 就 可 以 被 列 出 了, 定 义 本 网 页 关 键字, 可 以 加 入 以 下 代 码:
----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;
----Content 所 包 含 的 就 是 关 键 字, 你 可 以 自 行 设 置。
----这 里 有 个 技 巧, 你 可 以 重 复 某 一 个 单 词, 这 样 可 以 提 高 自 己 网 站 的 排 行 位 置, 如:
----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;
11. 怎 样 链 接 本 网 页 的 对 象?
----有 时 链 接 发 生 在 一 个 网 页 里, 比 如 页 面 上 半 部 分 列 出 了 目 录, 下 部 分 就 列 出 了 内 容, 而 单 击 目 录 任 何 一 个 项 目 都 可 以 跳 到 指 定 部 分, 可 以 在 要 被 链 接 的 内 容 部 分 设 置 如 下 方 式:
$#@60; A NAME=" ＃t1" $#@62;$#@60; /A $#@62;
而 要 链 接 到 以 上 设 置 的 部 分, 可 以 如 下 编 制:
$#@60; A HREF="index.htm ＃t1" $#@62;t1$#@60; /A $#@62;
12. 怎 样 为 不 支 持 框 架 结 构 的 浏 览 器 指 定 内 容?
----为 了 防 止 不 支 持 框 架 结 构 的 浏 览 器 访 问 你 的 网 页, 可 以 在 你 的 网 页 中 加 入 以 下 内 容:
$#@60; body $#@62;
$#@60; noframes $#@62;
本 网 页 是 框 架 结 构, 请 下 载 新 的 浏 览 器 浏 览
$#@60; /noframes $#@62;
$#@60; /body $#@62;
13. 怎 样 删 除 表 格 边 框?
----有 时 需 要 删 除 表 格 的 边 框, 你 可 以 把Border 设 置 为 如 下 代 码:
$#@60; body $#@62;
$#@60; table border="0" width="100 ％" $#@62;
$#@60; tr $#@62;
$#@60; td width="100 ％" $#@62;$#@60; /td $#@62;
$#@60; /tr $#@62;
$#@60; /table $#@62;
$#@60; /body $#@62;
14. 怎 样 隐 藏 在 状 态 栏 里 出 现 的LINK 信 息?
----大 家 知 道, 当 你 指 向 一 个 链 接 时, 该 链 接 的 信 息 会 出 现 在 浏 览 器 状 态 栏 里, 如 果 需 要 隐 藏 信 息, 可 以 如下 设 置:
$#@60; a href="http://c98.yeah.net" onMouseOver="window.status=none ;
return true" $#@62;test$#@60; /a $#@62;
15. 怎 样 在 网 页 中 加 入 多 媒 体 文 件?
----有 些 多 媒 体 文 件 无 需 其 他 程 序 就 可 以 播 放, 而 有 许 多 多 媒 体 文 件 需 要 外 部 程 序 的 帮 助, 当 浏 览 器 下 载 不 支 持 的 格 式 时 会 调 用 外 部 程 序。 如 果 浏 览 器 没 有 安 装 这 种 外 部 程 序, 那 么 浏 览 器 会 自 动 去 下 载；如 果 你 需 要 加 入 多 媒 体 格 式, 可 设 置 如 下 代 码:
$#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;
----对 于 不 支 持EMBED 标 签 的 浏 览 器, 可 以 改 用 标 签。
16. 怎 样 在 网 页 中 加 入 电 子 邮 件 表 单 提 交?
----表 单 提 交 需 要CGI 程 序 的 支 持, 但 你 也 可 以 利 用E ？mail 提 交, 当 你 设 计 好 表 单 后, 把Action 内 容 加 入 邮 件 地 址 即 可, 如 下:
form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;
17. 怎 样 隐 藏 热 讯 分 析 的 图 标?
----热 讯 分 析 是 许 多 网 友 使 用 的 服 务, 它 能 帮 助 你 分 析 网 站 的 流 量, 如 果 你 想 隐 藏 该 服 务 图 标, 可 以 把 服 务 代 码 中 的 width=88 height=31 都 改 为1 即 可。
18. 怎 样 在 网 页 中 加 入 最 后 修 改 日 期?
----在 中 加 入 以 下 代 码 即 可:
$#@60; Script Language="Java Script" $#@62;
document.write
(" 最 后 修 改 日 期" ＋document.lastModified);
$#@60; /Script $#@62;
这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。
100 - 继续。
101 - 切换协议。
2xx - 成功
这类状态代码表明服务器成功地接受了客户端请求。
200 - 确定。客户端请求已成功。
201 - 已创建。
202 - 已接受。
203 - 非权威性信息。
204 - 无内容。
205 - 重置内容。
206 - 部分内容。
207 - 多状态 (WebDAV)。
3xx - 重定向
客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
301 - 已永久移动
302 - 对象已移动。
304 - 未修改。
307 - 临时重定向。
4xx - 客户端错误
发生错误，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。
400 - 错误的请求。
401 - 访问被拒绝。IIS 定义了几个不同的 401 错误，用于指示更为具体的错误原因。这些具体的错误代码在浏览器中显示，但不在 IIS 日志中显示：
401.1 - 登录失败。
401.2 - 服务器配置导致登录失败。
401.3 - 由于 ACL 对资源的限制而未获得授权。
401.4 - 筛选器授权失败。
401.5 - ISAPI/CGI 应用程序授权失败。
401.7 – 由 Web 服务器上的 URL 验证策略拒绝访问。这个错误代码为 IIS 6.0 所专用。
403 - 禁止访问：IIS 定义了几个不同的 403 错误，用于指示更为具体的错误原因：
403.1 - 执行访问被禁止。
403.2 - 读访问被禁止。
403.3 - 写访问被禁止。
403.4 - 要求 SSL。
403.5 - 要求 SSL 128。
403.6 - IP 地址被拒绝。
403.7 - 要求客户端证书。
403.8 - 站点访问被拒绝。
403.9 - 用户数过多。
403.10 - 配置无效。
403.11 - 密码更改。
403.12 - 拒绝访问映射表。
403.13 - 客户端证书被吊销。
403.14 - 拒绝目录列表。
403.15 - 超出客户端访问许可。
403.16 - 客户端证书不受信任或无效。
403.17 - 客户端证书已过期或尚未生效。
403.18 - 在当前的应用程序池中不能执行所请求的 URL。这个错误代码为 IIS 6.0 所专用。
403.19 - 不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。
403.20 - Passport 登录失败。这个错误代码为 IIS 6.0 所专用。
404 - 未找到。
404.0 -（无） – 没有找到文件或目录。
404.1 - 无法通过请求的端口访问网站。
404.2 - Web 服务扩展锁定策略阻止本请求。
404.3 - MIME 映射策略阻止了此请求。
405 - 用来访问本页面的 HTTP 谓词不被允许（方法不被允许）
406 - 客户端浏览器不接受所请求页面的 MIME 类型。
407 - 要求进行代理身份验证。
412 - 前提条件失败。
413 – 请求实体太大。
414 - 请求 URI 太长。
415 – 不支持的媒体类型。
416 – 无法满足请求的范围。
417 – 执行失败。
423 – 锁定的错误。
5xx - 服务器错误
服务器由于遇到错误而不能完成该请求。
500 - 内部服务器错误。
500.12 - 应用程序正忙于在 Web 服务器上重新启动。
500.13 - Web 服务器太忙。
500.15 - 不允许直接请求 Global.asa。
500.16 – UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。
500.18 – 无法打开 URL 授权存储库。这个错误代码为 IIS 6.0 所专用。
500.19 - 此文件的数据在元数据库中配置不正确。
500.100 - 内部 ASP 错误。
501 - 页眉值指定了未实现的配置。
502 - Web 服务器用作网关或代理服务器时收到了无效响应。
502.1 - CGI 应用程序超时。
502.2 - CGI 应用程序出错。
503 - 服务不可用。这个错误代码为 IIS 6.0 所专用。
504 - 网关超时。
505 - HTTP 版本不受支持。
IIS HTTP 状态代码及其原因
200 - 成功。 此状态代码表示 IIS 已成功处理请求。
206 - 部分内容。这表明已部分下载了一个文件。可以续传损坏的下载，或者将下载拆分为多个并发的流。
207 - 多状态 (WebDAV)。此消息之前应该还有一条 XML 消息，其中可能包含几个单独的响应代码，具体取决于发出了多少个子请求。
301 - 已永久移动。此请求和之后所有的请求都应该转到指定的 URI。
302 - 已找到。对于基于表单的身份验证，此消息通常表示为“对象已移动”。请求的资源临时驻留在不同的 URI。由于重定向有时可能会改变，客户端将来在请求时应该继续使用 Request-URI。只有在 Cache-Control 或 Expires 标题字段中指示，此响应才能够缓存。
304 - 未修改。 客户端请求的文档已在其缓存中，文档自缓存以来尚未被修改过。客户端使用文档的缓存副本，而不从服务器下载文档。
401.1 和 401.2 - 登录失败。登录尝试失败，原因是用户名或密码无效，或者系统配置有问题。有关如何解决此问题的更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
907273 (http://support.microsoft.com/kb/907273/ ) 在 IIS 中排除 HTTP 401 错误
401.3 - 由于 ACL 对资源的限制而未获得授权。 这表示存在 NTFS 权限问题。即使您对试图访问的文件具备相应的权限，也可能发生此错误。例如，如果 IUSR 帐户无权访问 C:\Winnt\System32\Inetsrv 目录，您会看到这个错误。 有关如何解决此问题的更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
271071 (http://support.microsoft.com/kb/271071/ ) 如何为 IIS 5.0 Web 服务器设置所需的 NTFS 权限和用户权限
812614 (http://support.microsoft.com/kb/812614/ ) IIS 6.0 的默认权限和用户权限
403 - 禁止访问：如果网站没有设置默认文档，并且没有设置为允许目录浏览，则会收到这个一般 403 状态代码。有关如何解决此问题的更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
320051 (http://support.microsoft.com/kb/320051/ ) 如何在 Internet Information Services 中配置默认文档
403.1 - 执行访问被禁止。 下面是导致此错误消息的两个常见原因：
您没有足够的执行许可。例如，如果试图访问的 ASP 页所在的目录权限设为“无”，或者，试图执行的 CGI 脚本所在的目录权限为“只允许脚本”，将出现此错误消息。若要修改执行权限，请在 Microsoft 管理控制台 (MMC) 中右击目录，然后依次单击“属性”和“目录”选项卡，确保为试图访问的内容设置适当的执行权限。
您没有将试图执行的文件类型的脚本映射设置为识别所使用的谓词（例如，GET 或 POST）。若要验证这一点，请在 Microsoft 管理控制台中右键单击目录，依次单击“属性”、“目录”选项卡和“配置”，然后验证相应文件类型的脚本映射是否设置为允许所使用的谓词。
403.2 - 读访问被禁止。验证是否已将 IIS 设置为允许对目录进行读访问。另外，如果您正在使用默认文件，请验证该文件是否存在。 有关如何解决此问题的其他信息，请单击下面的文章编号，查看 Microsoft 知识库中相应的文章：
247677 (http://support.microsoft.com/kb/247677/ ) 错误消息：403.2 Forbidden: Read Access Forbidden（403.2 禁止访问：读访问被禁止）
403.3 - 写访问被禁止。 验证 IIS 权限和 NTFS 权限是否已设置以便向该目录授予写访问权。有关如何解决此问题的其他信息，请单击下面的文章编号，查看 Microsoft 知识库中相应的文章：
248072 (http://support.microsoft.com/kb/248072/ ) 错误消息：403.3 Forbidden: Write Access Forbidden（403.3 禁止访问：写访问被禁止）
403.4 - 要求 SSL。禁用要求安全通道选项，或使用 HTTPS 代替 HTTP 来访问该页面。如果没有安装证书的网站出现此错误，请单击下面的文章编号，查看 Microsoft 知识库中相应的文章：
224389 (http://support.microsoft.com/kb/224389/ ) Internet Information Server 4.0 中的错误消息：“HTTP Error 403, 403.4, 403.5 Forbidden:SSL Required”（HTTP 错误 403、403.4、403.5 已禁止: 需要 SSL）
403.5 - 要求 SSL 128。禁用要求 128 位加密选项，或使用支持 128 位加密的浏览器以查看该页面。
403.6 - IP 地址被拒绝。您已经将服务器配置为拒绝访问您当前的 IP 地址。 有关如何解决此问题的其他信息，请单击下面的文章编号，查看 Microsoft 知识库中相应的文章：
248043 (http://support.microsoft.com/kb/248043/ ) 错误信息：403.6 - Forbidden:IP Address Rejected（403.6 - 不可用：IP 地址被拒绝）
403.7 - 要求客户端证书。您已经将服务器配置为要求提供证书进行客户端身份验证，但是您没有安装有效的客户端证书。
186812 (http://support.microsoft.com/kb/186812/ ) PRB：错误消息：403.7 Forbidden: Client Certificate Required（403.7 禁止访问：要求客户端证书）
403.8 - 站点访问被拒绝。您已经为用来访问服务器的域设置了域名限制。有关如何解决此问题的其他信息，请单击下面的文章编号，查看 Microsoft 知识库中相应的文章：
248032 (http://support.microsoft.com/kb/248032/ ) 错误消息：Forbidden: Site Access Denied 403.8（禁止访问：站点拒绝访问 403.8）
403.9 - 用户数过多。与该服务器连接的用户数量超过了您设置的连接限制。 有关如何更改此限制的其他信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
248074 (http://support.microsoft.com/kb/248074/ ) 错误信息：Access Forbidden:Too Many Users Are Connected 403.9（访问被禁止：连接的用户太多 403.9）
注意：Microsoft Windows 2000 Professional 和 Windows XP Professional 自动设置了在 IIS 上最多 10 个连接的限制。您无法更改此限制。
403.12 - 拒绝访问映射表。您要访问的页要求提供客户端证书。但是，映射到该客户端证书的用户 ID 已经拒绝访问该文件。 有关其他信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
248075 (http://support.microsoft.com/kb/248075/ ) 错误：HTTP 403.12 - Access Forbidden: Mapper Denied Access（HTTP 403.12 - 禁止访问：映射程序拒绝访问）
404 - 未找到。 发生此错误的原因是您试图访问的文件已被移走或删除。如果在安装 URLScan 工具之后，试图访问带有有限扩展名的文件，也会发生此错误。如果您安装了 URIScan 工具，则会在 w3svc 日志文件中看到“Rejected by URLScan”。这种情况下，该请求的日志文件项中将出现“Rejected by URLScan”的字样。有关更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
248033 (http://support.microsoft.com/kb/248033/ ) IIS 服务器返回“HTTP 404 - File not found”（HTTP 404 -找不到文件）错误的常见原因
404.1 – 无法通过请求的端口访问网站。此错误消息表明，试图访问的网站的 IP 地址不接受来自此请求所用端口的请求。有关更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
248034 (http://support.microsoft.com/kb/248034/ ) IIS 错误：404.1 Web Site Not Found（404.1 找不到网站）
404.2 – 锁定策略阻止了此请求。在 IIS 6.0 中，这表示 Web 服务扩展列表中已经阻止了该请求。有关更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
328419 (http://support.microsoft.com/kb/328419/ ) 如何在 IIS 6.0 中添加和删除 Web 服务扩展文件
328505 (http://support.microsoft.com/kb/328505/ ) 如何列出 IIS 6.0 中 Web 服务扩展和扩展文件
328360 (http://support.microsoft.com/kb/328360/ ) 如何在 IIS 6.0 中启用和禁用 ISAPI 扩展和 CGI 应用程序
404.3 - MIME 映射策略阻止了此请求。如果存在下列情况，将出现此问题：
未配置请求的文件扩展名的处理程序映射。
没有为网站或应用程序配置相应的 MIME 类型。
405 – 不允许的方法。当客户端向运行 IIS 的服务器发送一个 HTTP 请求，并且该请求包含服务器无法识别的 HTTP 动词时，就会发生此错误。若要解决此问题，请确保客户端的请求使用与 HTTP rfc 兼容的 HTTP 动词。有关 HTTP rfc 的信息，请参阅“参考”部分。
500 - 内部服务器错误。很多服务器端错误都可能导致此错误消息。事件查看器日志包含更详细的错误原因。此外，您可以禁用友好 HTTP 错误消息以便收到详细的错误说明。 有关如何显示友好 HTTP 错误消息的更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
294807 (http://support.microsoft.com/kb/294807/ ) HOW TO: Disable Internet Explorer 5 'Show Friendly HTTP Error Messages' Feature on the Server Side
500.12 - 应用程序正在重新启动。这表示您在 IIS 重新启动应用程序的过程中试图加载 ASP 页。刷新页面后，此消息即会消失。如果刷新页面后，此消息再次出现，可能是防病毒软件正在扫描 Global.asa 文件。 有关其他信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
248013 (http://support.microsoft.com/kb/248013/ ) 错误信息：HTTP Error 500-12 Application Restarting（HTTP 错误 500-12 应用程序正在重新启动）
500-100.ASP - ASP 错误。 如果试图加载的 ASP 页中含有错误代码，将出现此错误消息。若要获得更确切的错误消息，请禁用友好 HTTP 错误消息。默认情况下，只会在默认网站上启用此错误消息。有关如何在非默认的网站上看到此错误消息的其他信息，请单击下面的文章编号，以查看 Microsoft 知识库中相应的文章：
261200 (http://support.microsoft.com/kb/261200/ ) 显示 HTTP 500 错误消息，而不显示 500-100.asp 的 ASP 错误消息
502 - 网关错误。 如果试图运行的 CGI 脚本不返回有效的 HTTP 标头集，将出现此错误消息。若要解决此问题，必须调试 CGI 应用程序，以确定它为什么会将无效的 HTTP 信息传递给 IIS。
503 – 服务不可用。从 IIS 6 开始，内核模式 Http.sys 组件就会生成 HTTP 503 状态。有关如何确定和排除 HTTP 503 错误的更多信息，请单击下面的文章编号，以查看 Microsoft 知识库中的相应文章：
820729 (http://support.microsoft.com/kb/820729/ ) HTTP API 中的错误日志记录
500.19. 如果 XML 元数据库在您尝试访问的内容类型中包含无效的配置信息，您就会收到此错误。要解决此问题，请删除或更正无效的配置。此问题通常表示 ScriptMap 元数据库键中存在问题。
FTP
1xx - 肯定的初步答复
这些状态代码指示一项操作已经成功开始，但客户端希望在继续操作新命令前得到另一个答复。
110 重新启动标记答复。
120 服务已就绪，在 nnn 分钟后开始。
125 数据连接已打开，正在开始传输。
150 文件状态正常，准备打开数据连接。
2xx - 肯定的完成答复
一项操作已经成功完成。客户端可以执行新命令。
200 命令确定。
202 未执行命令，站点上的命令过多。
211 系统状态，或系统帮助答复。
212 目录状态。
213 文件状态。
214 帮助消息。
215 NAME 系统类型，其中，NAME 是 Assigned Numbers 文档中所列的正式系统名称。
220 服务就绪，可以执行新用户的请求。
221 服务关闭控制连接。如果适当，请注销。
225 数据连接打开，没有进行中的传输。
226 关闭数据连接。请求的文件操作已成功（例如，传输文件或放弃文件）。
227 进入被动模式 (h1,h2,h3,h4,p1,p2)。
230 用户已登录，继续进行。
250 请求的文件操作正确，已完成。
257 已创建“PATHNAME”。
3xx - 肯定的中间答复
该命令已成功，但服务器需要更多来自客户端的信息以完成对请求的处理。
331 用户名正确，需要密码。
332 需要登录帐户。
350 请求的文件操作正在等待进一步的信息。
4xx - 瞬态否定的完成答复
该命令不成功，但错误是暂时的。如果客户端重试命令，可能会执行成功。
421 服务不可用，正在关闭控制连接。如果服务确定它必须关闭，将向任何命令发送这一应答。
425 无法打开数据连接。
426 Connection closed; transfer aborted.
450 未执行请求的文件操作。文件不可用（例如，文件繁忙）。
451 请求的操作异常终止：正在处理本地错误。
452 未执行请求的操作。系统存储空间不够。
5xx - 永久性否定的完成答复
该命令不成功，错误是永久性的。如果客户端重试命令，将再次出现同样的错误。
500 语法错误，命令无法识别。这可能包括诸如命令行太长之类的错误。
501 在参数中有语法错误。
502 未执行命令。
503 错误的命令序列。
504 未执行该参数的命令。
530 未登录。
532 存储文件需要帐户。
550 未执行请求的操作。文件不可用（例如，未找到文件，没有访问权限）。
551 请求的操作异常终止：未知的页面类型。
552 请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）。
553 未执行请求的操作。不允许的文件名。
常见的 FTP 状态代码及其原因
150 - FTP 使用两个端口：21 用于发送命令，20 用于发送数据。状态代码 150 表示服务器准备在端口 20 上打开新连接，发送一些数据。
226 - 命令在端口 20 上打开数据连接以执行操作，如传输文件。该操作成功完成，数据连接已关闭。
230 - 客户端发送正确的密码后，显示该状态代码。它表示用户已成功登录。
331 - 客户端发送用户名后，显示该状态代码。无论所提供的用户名是否为系统中的有效帐户，都将显示该状态代码。
426 - 命令打开数据连接以执行操作，但该操作已被取消，数据连接已关闭。
530 - 该状态代码表示用户无法登录，因为用户名和密码组合无效。如果使用某个用户帐户登录，可能键入错误的用户名或密码，也可能选择只允许匿名访问。如果使用匿名帐户登录，IIS 的配置可能拒绝匿名访问。
550 - 命令未被执行，因为指定的文件不可用。例如，要 GET 的文件并不存在，或试图将文件 PUT 到您没有写入权限的目录。
回到顶端
