HTML概述
前言
正文
HTML
历史：
1） 1990问世
2）Tim-Berners-lee 互联网之父
3）W3C（万维网联盟）是一个非盈利的公益性组织
4）1997 HTML4.0 成为W3C的标准
作用
1.发布联机文档共享数据
2.发布联机表单收集用户信息
3.发布帮助文档
HTML文档
1.HTML（HyperText Markup Language,超文本标记语言）
2. 超文本：文本中含有可以相互连接的元素
3.标记语言：语言由标签组成
HTML语法
1. 标签：<标签名称>标签体</标签名称>
2. 解析标签：浏览器执行
3.主流浏览器：IE、FireFox、Navigater(Netscape)
4. 解析HTML存在浏览器差异
书写HTML文档
1.HTML文件的后缀名html或者htm
文档结构
1. 根标签<html></html>
<head></head>
用来定义书写文档的描述信息，不显示在当前页面
<body></body>
用来书写显示信息
HTML的注释 <!-- 注释信息 -->
2. Head子标签
3. Body子标签
标题标签
<h1-6></h1-6> 字体加粗变大独立成行
文字修饰标签
<i></i> 斜体
<u></u> 下划线
<b></b> 粗体
<s></s> 删除线
换行标签
<br/>
分隔线
<hr/>
字体标签
<font color=""></font>
预处理标签
<pre>
原样输出标签不会被浏览器解析
<h1>hello</h1>
</pre>
4.实体
> 大于号
< 小于号
空格
" 双引号
© 版权符
5. 列表标签
1） <h3>有序列表</h3>
<ol type="i">
<li>北京</li>
<li>北京</li>
<li>北京</li>
<li>北京</li>
</ol>
2） <h3>无序列表</h3>
<ul type="circle">
<li>北京</li>
<li>北京</li>
<li>北京</li>
<li>北京</li>
</ul>
3） <h3>描述列表</h3>
<dl>
<dt>中国</dt>
<dd>人口最多<dd>
<dd>人都很和谐<dd>
</dl>
6.滚动标签
<marquee
scrolldelay="100" 显示时间间隔
direction="left" 滚动的方向
scrollamount="20" 移动的速率
onmouseover="this.stop()"
onmouseout="this.start()"
behavior="alternate" 滚动的方式
loop="2" 滚动的总次数
>hello 我就是在滚</marquee>
7. 行标签
<span></span>
8. 块标签
<div></div> 独立成行
子菜单代码示例
9. 段落标签
<p></p>
10. 图片标签
<img></img>
注：相对路径和绝对路径
相对路径：相对当前文档的路径
./ 表示回到上级目录
../上上级目录
绝对路径：根盘符开始的路径
11. 设置图片区块
1)热点：
<img src="../img/01.jpg" width="100"
height="200" alt="美女" usemap="#m1"
></img>
<map name="m1">
<area shape="rect" coords="0,0,100,100" href="./firstHtml.html"></area>
<area shape="rect" coords="0,100,100,200" href="./firstHtml2.html"></area>
</map>
12. 超链接标签
<a href="">点击连接</a>
空链接
13. 发送邮件
调用默认邮件发送软件
14. 表格标签
<table>
<tr><td>列标签</td></tr> 行标签
</table>
1) 属性：
border:边框，单位像素
width:宽度
height:长度
align:水平对齐方式
vlign:垂直对齐方式
cellspacing:外边距， 是单元格边框与表格表框以及单元格与单元格边框的距离
cellpadding:内边距， 是内容与单元格边框的距离
2) 合并单元格
1)) 在td标签中进行设置
colspan="" 设置列单元格合并
rowspan="" 设置行单元格合并
注意：合并单元格时要注意把被合并的单元格去掉对应标签
15.另一种表格形式
<table border="1px" width="200" height="200" cellspacing="0" cellpadding="0">
<tfoot><td>foot</td><td>foot</td></tfoot> 显示在表格底部
<tbody><td>body</td><td>body</td></tbody>
<thead><td>head</td><td>head</td></thead> 显示在表格顶部
</table>
16. 表单
<form
action="表单数据提交的目的地址"
method="get/post" 默认采用get
></form>
注： get和post的区别？
1.get在传送参数过程中以明文形式在浏览器地址栏显示
post不在地址栏显示
2.post方式相对安全
3.get方式提交的数据量相对较小（一般为2K左右）
post提交的数据量相对较大
4.get方式一般用来获取数据，post方式一般用于传送数据 form标签要将整个表单信息包裹
1） input标签
<input id="" name="" type="" value=""></input>
1）） type类型：
text 文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
file 文件上传
submit 提交按钮
reset 重置按钮
button 可编程按钮
hidden 隐藏表单域
image 引入图片
2））属性
1））） name属性：设置参数传递过程中的key，不设置参数不会传递
2）））value属性：在文本输入框以及密码框时用来设置默认值； 在单选复选以及下拉列表中作为参数的value传递； 在按钮中用来做显示
3）））id属性：唯一标识当前标签
2） 非input标签
1））下拉列表
<select name="city">
选项
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected="selected">广州</option>
</select><br/>
2））文本域
<textarea rows="5" cols="10" disabled="disabled"></textarea>
rows属性:占用的行数
cols属性：占用的列数
17. HTML中的框架
1）<frameset rows=""cols=""></frameset>
rows:将页面分成上下结构，取值可是是%比也可以像素
cols:将页面分成左右结构··········
在frameset标签中嵌套<frame></frame>来实现结构划分
2） <frame frameborder="" src="" name="" noresize=""></frame>
src:设置填充的页面地址
frameborder:设置边框
noresize:设置当前边框不可拖动
name：设置当前frame的名称
注：设置超链接跳转的页面展示方式通过target属性
<a href="" target=""></a>
target取值:在框架中可以取frame的name属性
_blank 每次打开一个新页面
_new 打开一个新页面，但是新窗口不关闭不会重新打开
_self 当前窗口打开，默认取值为_self
_top 在顶层窗口打开
注意：在页面中frameset不能和body标签一起使用
3）内联框架
<iframe src="" width="300" height="300"></iframe>