HTML：
1、HTML的概述及作用：
HTML全称为HyperText Markup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
Html就是超文本标记语言的简写，是最基础的网页语言。
Html是通过标签来定义的语言，代码都是由标签所组成。
2、HTML的基本格式：
1.格式：
<html>
<head>
放置一些属性信息或者辅助性的信息
<title></title>
引入外部的文件
会先加载
</head>
<body>
真正存放数据内容的地方
其他的标签
</body>
</html> A：通过观察格式，发现
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
B:对格式的解释
html:放在html文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的html标记时也一样会进行解析。
浏览器内置了html语言的解析器.
可以设置默认打开浏览器:工具—文件夹选项-文件类型
head:头标记，放置关于此html文件的信息，如提供索引，定义css等。
title:标题标记，包含在head标记内，它的作用是设定网页的标题。
body:主体标记，网页所需要显示的内容都放在这个标记内。
2.以什么后缀结尾
以.html或者.htm来结尾
3. 浏览器就可以解析HTML的文件。
3、HTML的注意事项：
1.一般的标签都有开始和结束，如果只有单一的功能，可以在标签内部结束。
2.改变属性，达到好的显示效果
3.属性值可以使用双引号，单引号，或者不用引号，一般采用双引号，或者根据公司的规范。
4、MyEclipse简单设置
1.安装完MyEclipse后，先设置工作空间的编码。
Window—preferences—General--workspace—选择UTF-8编码
2.创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。
Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
3.创建HTML的文件后，可以选择打开方式，设置默认的打开方式。
Window—preferences—General—Editors—File
Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
5、HTML的标签
1.排版标签
(1)换行标签 <br/> （用的比较少）
(2)水平线 <hr/>
属性：color：颜色
颜色的写法：有两种写法：1）颜色的英文单词 2）RGB三原色(red green blue) #ffffff
属性：width：宽度
值有两种写法：1）像素值（300px）2）百分比(30%)
区别：百分比会随着浏览器大小而改变，像素不会。
属性：size：控制水平线的粗细。单位是像素。
属性：align：控制水平线的对齐方式
(3)空格：
(4)段落标签（用的相对较多）
<p></p>
特点：在开始和结束的位置上，各产生一行空行。
属性：align：对齐的方式 文字的显示位置。
取值：left,center,right
(5)<div></div>
<span></span>
标签非常的简单，就是在浏览器上声明一块区域。
区别：div后面有换行，span没有。
(6)块级元素和行内元素（了解）
1)行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
eg.例子可以复制到.html文件里，用浏览器打开查看效果，对比着查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>排版标签</title>
</head>
<body>
<!-- HTML的注释 -->
静夜思<br/>
<hr color="#ccbb33" width="200px"/>
床前明月光，<br/>
<p align="center">
疑是地上霜。<br/>
举头望明月，<br/>
</p>
低头思故乡。<br/>
<hr />
<div>div的文本1</div>
<div>div的文本2</div>
<span></span>
<span>密码错误</span>
</body>
</html>2.字体标签
(1)<font></font>（重要的）
属性：color：颜色
这里顺便提提RGB三原色：
RGB三原色：红，绿，蓝。
用2位16进制的数据表示每种颜色的取值范围。取值0~255共256种颜色。255 = 15*16+15*1 = ff。每种颜色范围00~ff
这个是用，我们就可以表示所有的颜色了：
#rrggbb
#000000:黑色
#ffffff:白色
#ff0000:红色
#00ff00:绿色
#0000ff:蓝色
属性：size：字体的大小
最大值和最小值 最大值是7 最小值是1
默认值是3，size的写法又提供了一种（+2）其实就是5
属性：face：字体的类型。
如果不清楚有什么字体，可以通过打开记事本：菜单栏—格式—字体就可以看到系统提供的各种字体。宋体，楷书，隶书，黑体等。
3.标题的标签（用的比较少）
(1)标题标签
<h1></h1>
...
<h6></h6>
从1到6是逐渐缩小的。
(2)粗体和斜体的标签
<b></b>
<i></i>
标签是可以嵌套的
<b><i></i></b>
(3)HTML的特殊字符
如果要在网页上显示一些特殊符号,比如 <,>,&等.因为这些符号在代码中会被浏览器识别并解释.所以用特殊方式表示
< : <
> : >
& : &
<p>是特殊字符<br />
&nbsp是空格字符
上下标记
sup:为上标标记
sub:为下标标记
2<sup>3</sup>+3<sup>3</sup> = 35<br />
H<sub>2</sub>+O<sub>2</sub> = H<sub>2</sub>O
(4)滚动字幕
marquee
bgcolor 背景颜色
Direction 滚动方向 left、right、up、down
Behavior 滚动方式scroll滚动、silde滑动、alternate摆动
Height 滚动对象高度，值为像素
Width 滚动对象宽度 ，值为像素
hspace 滚动对象到背景左右空白区域的宽度，值为像素
vspace 滚动对象到背景上下空白区域的宽度，值为像素
scrollamount滚动速度，值是数字，数字越大，速度越快
scrolldelay两次滚动之间的延迟时间， 值为数字,单位是毫秒,数字越大，延迟时间越长
loop设定滚动次数，-1为一直滚动。
<marquee></marquee>内只能用<br>换行，不能用<p>
*注意：在一个标记中有多个属性，基本格式是：< 属性名1=属性值1 属性名2=属性值2………. >。各个属性间必须以空格间隔。
eg.例子可以复制到.html文件里，用浏览器打开查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<h3>字体、标题标签</h3>
<!--
<font></font>（重要的）
* color：颜色
* size：字体的大小
* 最大值和最小值 最大值是7 最小值是1
* 默认值是3，size的写法又提供了一种（+2）
* face：字体的类型
* 标题的标签（用的比较少）
* <h1></h1>
...
* <h6></h6>
* 从1到6是逐渐缩小的。
* 粗体和斜体的标签
<b></b>
<i></i>
* 标签是可以嵌套的
<b><i></i></b>
* HTML的特殊字符
< : <
> : >
& : &
* 滚动字幕
marquee
-->
<marquee behavior="alternate" scrollamount="30">你能抓到我吗？</marquee>
<font color="red" size="6">我是字体标签</font><br/>
<font color="red" size="7">我是字体标签</font><br/>
<font color="red" size="16">我是字体标签</font><br/>
<font color="red" size="1">我是字体标签</font><br/>
<font color="red" size="-6">我是字体标签</font><br/>
<font color="red" size="3">我是字体标签</font><br/>
<font color="red" >我是字体标签</font><br/>
<font color="red" size="5">我是字体标签</font><br/>
<font color="red" size="+2">我是字体标签</font><br/>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<b>我是粗体的标签</b>
<i>我是斜体的标签</i>
<b><i>既是粗体又是斜体</i></b> <br/>
4>3 1<5<br/>
a<c z>x
</body>
</html>4.列表标签
把数据进行格式化，指定的格式。
(1)列表标签
<dl>(define list title)是定义语，dd(define list define )是定义说明（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
dd标签的特点：默认缩进和自动对齐的。
(2)有序列表和无序列表
有序列表ol(Ordered List)：（也是比较多的）
<ol>
<li></li>
</ol>
属性： type 类型 (规定列表标记类型)这样一个属性:A,a,I,i,1.默认是阿拉伯数字 1
start 从哪开始(控制序号开始的值)默认开始值为1
无序列表ul(Unordered List)：（用的非常多）
<ul>
<li></li>
</ul>
属性：type
*列表项：li(List Item)
不管是有序还是无序，中间数据的条目都使用<li></li>
eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<!--
* 列表标签
<dl>（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
* dd标签的特点：默认缩进和自动对齐的。
* 有序列表和无序列表
有序：（也是比较多的）
<ol>
<li></li>
</ol>
* 属性： type 类型
start 从哪开始
无序：（用的非常多）
<ul>
<li></li>
</ul>
* 属性：type
* 不管是有序还是无序，中间数据的条目都使用<li></li>
-->
<h3>列表标签</h3>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
<hr/>
<h4>有序列表</h4>
<ol type="a" start="3">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<h4>无序列表</h4>
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>5.图片标签（重要*****）
<img />
(1)属性：
src="图片的地址"
width 图片的显示宽度
height 图片显示的高度
alt 图片的说明文字，当图片不存在的时候显示的文字
border 图片的边框
align 控制图片相对于图片基线居于上，中，下
top,center,bottom
(2)结合marquee标签把文字变成图片即可。
<marquee align="left" bgcolor="#FFFF00" direction="left" behavior="alternate" width="400" hspace="1" scrollamount="2" scrolldelay="1" vspace="1" loop="-1">
<img src="mn3.jpg" width="120" height="200"/>
<img src="mn4.jpg" width="120" height="200"/>
<img src="mn5.jpg" width="120" height="200"/>
</marquee>(3)图片的热点区域其实就是讲一个图片专门的分割出一个链接区域，这就是热点。
shape 热点区域形状，值有：矩形rect 、圆形circle、多边形poly
coords 热点区域划分坐标：圆形是圆心上下坐标和半径、矩形是左上、右下两点的坐标，多边形是各个顶点的坐标。（相对图片）
href 超级链接的目标。
shape -- 定义热点形状
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
(4)网页上使用的图片主要格式是gif和jpg两种。
在网页中使用图片，从视觉效果而言，能使网页充满生机，并且直观表达了网页的主题，这不是靠文字可以做到的。
那么，要注意哪些要求呢？
首先是图片的选择，图片要与网页风格贴近，最好自己制作以体现网页的设计意图。
其次，图片的色调要保持一致，不要过于花哨。
最后就是要注意图片不能过大，不利于网页上传和浏览者浏览。
eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<!--
<img />
* 属性：src="图片的地址"
* width 图片的显示宽度
* height 图片显示的高度
* alt 图片的说明文字
-->
<marquee>
<img alt="" src="funny3.gif">
</marquee>
<hr/>
<img src="girl4.jpg" width="60%" height="80%" alt="啊，美女啊！" border="1">
</body>
</html>6.超链接的标签（重要*****）
<a>文本内容</a>
<a></a>
链接资源
(1)属性：href="指定链接的资源的地址"
注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。
注意：如果浏览器可以解析的文件，直接就打开了。
如果浏览器不可以解析的文件，弹出下载窗口。
自定义的协议
如果浏览器解析不了的协议，会找操作系统上的应用程序。
(2)特定目标的链接:定位资源
一般在页面中，当网页内容过长，定位标记会比拖动 滚动条方便快捷。
注：定位标记要和超链接结合使用才有效
<a name=“标记”>标记位置</a>
<a href=“#标记”>返回</a>
属性 name
专业的术语 锚
(3)超链接的其他应用
属性 href:用于连接资源。如果是http的资源，一定要写上http。表示用http协议进行解析。
target这个属性指定所链接的页面在浏览器窗口中的打开方式，
它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：
◎_blank，在新浏览器窗口中打开链接文件。
◎_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
◎_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
◎_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
电子邮件的链接
mailto:McCa@163.com
点击超链接浏览器做的事情：
1)启动相对应的协议引擎。
2)解析协议后面的具体内容。
3)如果跟的是一个主机地址。先查找本机hosts文件列表。是否可以找到该主机对应ip。
如果没有找到，会找本机指定的后者本机默认的DNS服务器。去解析该主机。
4)获取到该ip后，在连接该指定ip的主机，并获取所需的资源。
*注意：
1)当没有指定具体协议时，浏览器会启动默认的file协议引擎来解析href的值。
2)当指定的协议浏览器无法解析时，浏览器会在本地注册中查找是否有关联该协议的应用程序。如果有就调用程序进行该协议的解析。
eg.
View Code
7.表格标签(*****)
(1) <table>：声明表格的范围
属性： border="1"表格的外边框粗细
cellspacing:表格的内边框粗细
width：表格的宽度
height:表格的高度
bordercolor:边框颜色
bgcolor：背景的颜色
cellpadding：内边距
align:文字的水平位置 left,center,right
valign:文字的垂直位置 top,middle,bottom
<caption>标题</caption>
<tr>：代表表格的行
属性：align：文字的对齐方式
<td>：单元格
属性：width:宽度
height：高度
单位为像素，也可以是百分比。
合并单元格：
行合并：rowspan="2"
列合并：colspan="2"
</td>
</tr>
<tr>
<th></th>：单元格
</tr>
</table>
* 注意：td与th的区别：th默认居中并且加粗的，一般为表头标签
(2)表格的嵌套
在表格的单元格中嵌套一个表格。
表格可以用于布局页面。
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
eg:
View Code
8.表单标签（重要**********）
(1)<form>：封装表单的范围。
属性： action="请求提交的路径" 如果没有定义action属性，那么默认提交到当前页面
method="表单的提交方式"
* 面试题：表单的提交方式有哪些？
* 答：表单的提交方式有很多，常用的有两种，get和post。
get和post提交方式的区别：
get方式提交时，会把数据显示在地址栏上。
post方式不会。
get方式提交时，安全级别较低。
post方式安全级别较高。
get方式提交时，数据大小有限制。
post方式不会。
综上所述：以后在进行表单 提交时：建议使用post提交。
(2)输入项的表单组件
<input />
非常重要的属性：type，根据type值的不同，提供了不同的输入项的组件。
例如：<input type="text" />
type=text 文本输入框
type=password 密码输入框
type=radio 单选按钮
提供了属性name（name的值是相同的）
默认被选中的：checked=checked或者true
type=checkbox 多选按钮
默认被选中的：checked=checked或者true
type=file 文件的选择框 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
type=hidden 隐藏组件 在页面上不显示，但在提交的时候随其他内容一起提交。
type=button 按钮（史上最难看的）
type=image 和提交按钮是相同的作用。
type=reset 重置 将表单中填写的内容设置为初始值。
type=submit 提交数据
(3)选择框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
(4)文本域 如个人信息描述
<textarea rows="" cols=""></textarea>
</form>
（5）把表单用表格布局
<fieldset>
<legend>注册信息</legend>
<form >
<table border="1" bordercolor="#0099FF" width="70%" cellpadding="10px" cellspacing="0">
</table>
</form>
</fieldset>
* 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq
* input标签需要提供两个属性，一个属性name，一个是value
(*****)name属性必须要指定，value看情况指定。
eg:
View Code
9.框架标签（用的比较少）
<frameset></frameset>
(1)窗口框架的建立
将网页分割成几个部分，在每个部分分别显示不同内容。
注：框架标签不可以放到<body>里，一般为了代码的可读性，会到<head>和<body>之间。或者不要body也可以。
frameset:窗口框架的标签
frame:单个使用的子窗口
rows:垂直分割
cols:水平分割
*表示分配给前面所有窗口后剩下的高度或宽度。
(2)混合分割
(3)子窗口的边框设置
frameset的属性：
隐藏所有边框 frameborder=0 隐藏子窗口边框
将窗口边框加粗 border=10
(4)窗口滚动条的设置
在右窗口中不显示滚动条：scrolling="no" yes
frameborder设置隐藏边框，值有两个，0代表不显示，1代表显示，默认显示。还可以在<frame>中使用。
src 设置子窗口显示的内容
scrolling 控制滚动条的显示，值：yes 显示、no 不显示、auto 自动显示（默认）
注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身， 如：noresize=”noresize”
(5)窗口的导航显示
index,top,left,main
(6)神奇的iframe标签
作用：配合表格，在网页的任何地方插入窗口
*注意：框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。
恶意操作:
<iframe src=”xx.js”></iframe>
10.头标签
(1)头标签都放在<head></head>头部分之间。包括：title base meta link
(2)<title>：指定浏览器的标题栏显示的内容。
(3)<base>：为页面上的所有链接规定默认地址或默认目标。
href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。或者只演示_blank的功能
<base href="http://www.baidu.com" target="_blank" /> <a href="#">点击</a>
(4)<meta>：可提供有关页面的基本信息
name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
例：
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" />
表示打开此页面3秒后自动转到新浪页面。
(5)<link>：定义文档与外部资源的关系。
rel 属性：描述目标文档与当前文档的关系。
type 属性：文档类型。
media：指定目标文档在哪种设备上起作用。
例：
<link rel="stylesheet" type="text/css" media="screen,print" href="a.css" />
11.HTML中多媒体文件的使用
（1）多媒体文件的链接
单击<a href="zxmzf.mp3">最炫名族风</a><br />
单击<a href="jw.wmv">最炫名族风</a>
（2）多媒体文件的嵌入
<embed src="zxmzf.mp3" width="300" height="300" autostart="true" loop="true"></embed>
<embed src="jw.wmv" width="300" height="300" autostart="true" loop="true"></embed>
src:指定嵌入多媒体文件的名称
width:播放器的宽度
height:播放器的高度
autostart:是否自动播放。默认为no
loop:设置播放次数。为true时，无限制的重复播放。直到离开此网页或者单击停止。
（3）在网页中加入背景音乐
<bgsound src="zxmzf.mp3" loop="-1" />
Loop 播放次数，0或1都为播放一次，-1循环播放
6、页面设计的原则与细节：
1.符合行业要求，色调搭配要求与行业相符。
2.政府机关：白深蓝、白红
3.邮政与铁路：白浅绿
4.广告与传媒：白橘、白红、白黄
5.医院：白天蓝
6.艺术行业：黑白、白黑
7.女性：婚庆？白粉、白红
8.计算机？白深蓝
1792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
