HTML
网页： 客户端技术 html 、css 、javaScript
服务器端技术 JSP 、ASP.NET、PHP（数据交互）
Html：构建页面的结构
CSS：控制（美化）页面的外观样式
javaScript：添加动态效果
1.HTML基础
什么是HTML？
超文本标记语言HTML（hypertext markup language) ， 是一种用来设计网页的标记语言，用该语言编写的文件，以.html戒者.htm为后缀，并且由浏览器解释执行，生成相应的界面。
作用：创建静态页面，结合CSS和javascript实现页面的创建。
编写方式：任何文本编辑器。
运行方式：浏览器解释（有错误时，会生成奇怪的效果）运行。
相关术语
标记：用尖括号< >包围的单词。标记大都成对：开始标记和结束标记。
元素：每一对尖括号包围的部分，
属性：用来修饰元素，每个元素都有值，属性放在开始标记中。
封闭类型的元素：标记要求必须成对出现
非封闭类型的元素（空元素或者空标记）：只有一个标记，建议使用 /结束，如 <br />
html文件的基本结构
html 文档的标准结构：
版本信息---指定html版本（Strict DTD， Transitional DTD， Frameset DTD ）
<html>
<head>关于整个文档的定义，比如编码、标题等</head>
<body>显示页面的内容</body>
</html>
Html的基本结构分为两大部分：头（head）和体（body）。 根标记：＜html＞＜／html＞
（１）Html头标记＜head＞＜/head＞，写描述页面的数据
<title>标题</title>
<meta> ：元数据，单标记
1) 主要用于设置消息头
2) 注意不要这样写（有的浏览器会不兼容）：
<meta></meta> (不推荐)
<meta/> (推荐)
3) 消息头： 浏览器访问服务器时，服务器会发送的一些键值对
<meta http-equiv="content-type" content="text/html ;charset=utf-8">
表示浏览器读到的是一个html格式文件，字符编码是utf-8
http-equiv属性：设置消息头
Content属性：设置消息头的值
<meta http-equiv="refresh" content="3">：每３秒重新加载页面
<meta http-equiv="refresh" content="3;url='http ://bbs.tarena.com.cn'">
３秒后跳转到bbs.tarena.com.cn。
refresh：刷新 content：刷新的频率
<link>引入CSS样式文件
<link rel="stylesheet" type="text/css" href="style.css">：引入style.css样式文件
注意不要写<link></link>或<link/>
<style></style>：在html文件中直接定义样式
<style>body{ font-size:60px; }</style>
注意：有<link>又有<style>时，听<style>的
<script></script>：引入脚本
引入脚本文件：<script src="c1.js"></script>
直接写脚本：<script>脚本代码</script>
（２）Html体标记＜body＞＜／body＞，与页面显示的内容有关系
主要标记：
<a href=""></a>：链接
<table>：表格
<form>：表单
<ul>、<ol>：列表
<iframe>、<frameset>：窗口划分
主要浏览器
ie 、firefox 、chrome 、Safari 、Opera
2.几个重要的标记
文本标记
标题：h1--h6 1-6号标题，1号标题最大
段落标记：打断文本自成段落，段落间距。<p></p> aaa<p>bbb</p>ccc
换行标记：<br>单标记，相当于回车 aaa<br>bbb<br>ccc
<p>自成一个段落，保留段落间距
<br>:行间距较小
特殊字符：<p> ;==><p>
© ==>@
空格字符：
分区/组元素：div / span 将一些元素分组，进行统一设置。以实现样式的定义或者js代码的添加
aa<div>a</div>aa div：独占一行 （块级元素）
aa<span>a</span>aa span：不会改变原有的布局（行为元素）
块级元素（block）：页面上会独占一行的元素，上下文的其他元素会自动换行。p div table ul ol li
行内元素（inner）：span a img
链接<a href>
语法：<a href="url地址" target=" " title=" ">描述性的文字</a
href属性：指定链接的地址
target属性：指定在哪个窗口打开链接，值可以指定为：
_slef：在当前窗口中打开(缺省)
_blank：新窗口中打开
title：提示信息，鼠标放在链接上的提示信息
同一个页面上不同部分之间的跳转（实现页面内部跳转）：
定义锚点：<a name="top"></a>（想回到哪，写哪）
定义链接：<a herf="#top">to top</a>
回到顶端简介的写法：<a href="#">to top</a>
使用图片作为链接：<a href="url地址">
<img src="" width="" height="" border="0"/>
</a>
发送邮件：<a href="mailto:766908296@qq.com">给我发邮件</a>
mailto:转到邮箱，发送邮件
热点（使用图片区域作为链接）
1）先使用map标记划分图片区域
<map name="Map">
<area shape="rect" coords="407,20,560,77" href="qy.html">
<area shape="rect" coords="580,22,734,76" href="gr.html">
</map>
shape="rect"：表示矩形
coords="407,20,560,77"：表示矩形在图片的相对位置
407： 表示矩形左上角距离图片左上角的横坐标
20： 表示矩形左上角距离图片左上角的纵坐标
560： 表示矩形右下角距离图片左上角的横坐标
77： 表示矩形右下角距离图片左上角的纵坐标
2）使用map
<img src="cat.jpg" usemap="#Map">
usemap="#Map"表示使用名字为“Map”的图片
图像：<img>（单标记）
<img src="" width="" height="" border="0" title=""/>
src：对于img标签，src指定图片的地址（当前路径为html文件所在的路径）
width：宽度
height：高度
border：边框（为0表示没有边框）
title：通用属性，提示信息
表格
(1)表格的基本结构
<table border="" width="" cellpadding="" cellspacing="">
<tr align="">
<td align=""></td>
<td></td>
</tr>
</table>
解析：先从上到下，再从左到右，先table后tr再td，
表格默认情况下是自适应的，自己设置也是按比例划分
文本内容只能放在td里
border : 边框的宽度，单位是像素（缺省值是0）
width : 表格的宽度
可以用百比分(表示该表格占父标记的宽度)，也可以是绝对值 width=100%、height=100%
cellpadding : 单元格内容与单元格之间的空隙
cellspacing : 单元格与单元格之间的空隙，单元格与外边框之间的空隙
align : 水平对齐，值有"center","right","left"
valign : 垂直对齐，值有"top"、"middle"、"bottom"
td的属性可以有：width 、 height 、 align 、valign
(2)不规则表格：实现页面的布局
colspan：跨列合并单元格
rowspan：跨行合并单元格
(3)表格的完整的结构
<table>
<caption>表格的标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
caption：为表格定义标题
caption、thead、tfoot可以不出现，如果出现，只能出现一次
tbody可以出现多次，至少也要出现一次
(4)表格可以嵌套
在td里可以嵌套table。
表单：表单一般是用来收集用户信息的。
<form action="" method="" enctype="">
input标记
非input标记
</form>
提交：以表单为单位把<form>.....</form>之间的内容为单位提交
action属性 : 表单提交之后由哪一个程序来处理
method属性 : 表单提交方式 post、get方式
enctype属性 : 设置表单的MIME编码
input标记（单标记）：输入，键盘：文本框鼠标：选择
（1）文本输入框
<input type="text" name="" value="" />
type属性： input标记的具体类型
type内容可以不写，默认是文本框
name属性： 标记的一个名称，该名称用于生成一个请求参数，
如果没有命名，则浏览器不会将该数据发送给服务器
value属性 : 缺省值，有值时表示初始值
（2）密码输入框
<input type="password" name="" />
（3）单选框
<input type="radio" name="" value="" checked="checked" />
单选按钮应是互斥的，只能选择其中一个
同一组单选按钮，name必须相同
value属性： 发送给服务器端的值
checked属性： 就一个值"checked",表示缺省被选上
（4）多选框
<input type="checkbox" name="" value="" checked="" />
（5）文件上传
<input type="file" name=""/>
（6）按钮
普通按钮：<input type="button" value="普通按钮" />
value属性：按钮上面的文字，
点击该按钮，浏览器什么都不做 需要编程实现功能
图像按钮：<input type="image" value="图像按钮" />
提交按钮：<input type="submit" value="提交" />
value属性： 按钮上面的文字
当点击提交按钮时，浏览器默认情况下，会将表单中的数据发送给服务器
重置按钮：<input type="reset" value="重置"/>
当点击重置按钮时，浏览器会将输入的数据清空
（7）隐藏域
<input type="hidden" name="" value=""/>
不会在界面上显示出来，一般用于向服务器传送数据。
主要用于记载那些不需要被用户看见的关键数据，如id
name属性 设置参数名
value属性 设置参数值
非input标记
（1）下拉框 / 列表框
<select name="" multiple="" size="">
<option value="">...</option>
</select>
value属性： 是提交给服务器的值
multiple属性 : 设置该属性值以后，下拉列表变成了一个多选框。允许多选
size属性：区分下拉框或者多选框（size>1)
（2）多行文本输入框
<textarea name="" cols="" rows=""></textarea>
cols列 、rows行，设置框的大小是几行几列
（3）fieldset为控件分组
<fieldset>元素：为控件分组
<legend>元素：为分组指定一个标题
<fieldset>
<legend>地址信息</legend>
地址：<input type=”text”/><br>
邮编：<input type=”text”/><br>
</fieldset>
（4）<label>元素
语法：<label>文本</label>
主要属性：for：表示与该元素相联系的控件的ID值
作用：将文本与控件联系在一起后，单击文本，效果就同单击控件一样。
<input type=”checkbox” name=”chkHid” id=”chkHid”>
<label for=”chkHid”>不要公开我的信息</label>
实例：
<html>
<!--表单的使用-->
<head></head>
<body style="font-size :30px ;font-style :italic ;">
<form>
<!-- 文本输入框 -->
用户名：<input type="text" name="username" value=""/><br/>
<!-- 密码输入框 -->
密码 :<input type="password" name="pwd"/> <br/>
<!-- 单选 -->
性别 :
男<input type="radio" name="gendar" value="m" checked="checked"/>
女<input type="radio" name="gendar" value="f"/> <br/>
<!-- 多选 -->
兴趣 :
看书<input type="checkbox" name="interest" value="reading"/>
画画<input type="checkbox" name="interest" value="drawing"/>
书法<input type="checkbox" name="interest" value="writting"/> <br/>
<!-- 文件上传 -->
照片 : <input type="file" name="phone"/> <br/>
<!-- 隐藏域 -->
<input type="hidden" name="userId" value="123"/>
<!-- 多行文本输入框 -->
自我描述 : <textarea name="desc" rows="6" cols="20"> </textarea> <br/>
<!-- 下拉列表 -->
你来自于哪个城市 :
<select name="city" style="width :120px ;" multiple="multiple">
<option value="bj">北京</option>
<option value="nj">南京</option>
<option value="tj">天津</option>
</select> <br/>
<!-- 提交按钮 -->
<input type="submit" value="确定"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
<!-- 普通按钮 --> <input type="button" value="点我吧"/>
</form>
</body>
</html>
3.列表
1）无序列表 <ul> <li></li> </ul>
2）有序列表 <ol> <li></li> </ol>
3）列表可以嵌套
<ul>
<li>选项1</li>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
</ul>
<li>选项2</li>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
</ul>
<ul>
4.窗口划分
frameset和 frame
frameset标记不能够不body标记同时出现
rows属性： 将窗口划分成几行
cols属性： 将窗口划分成几列
frame标记定义子窗口,其中,src指定加载的页面
<!--frameset的使用-->
<html>
<head></head>
<frameset rows="20%,*">
<frame name="topFrame" src="top.html"/>
<frameset cols="30%,*">
<frame name="leftFrame" src="left.html"/>
<frame name="mainFrame" src="main.html"/>
</frameset>
</frameset>
Iframe：在当前窗口当中嵌入一个子窗口
<iframe src="" width="" height=""></iframe>
src属性：指定加载的页面
iframe标记可以用在body标记里
<html>
<!--iframe的使用-->
<head></head>
<body style="font-size :30px ;font-style :italic ;">
你好，世界<br/>
<iframe src="html01.html" width="300" height="300"> </iframe>
一会儿就要下课了。
</body>
</html>
5、大多数元素都有的属性
|
属性 |
值 |
描述 |
|
class |
classname |
规定元素的类名（classname） |
|
id |
id |
规定元素的唯一 id |
|
style |
style_definition |
规定元素的行内样式（inline style） |
|
title |
text |
规定元素的额外信息（可在工具提示中显示） |