1 HTML入门
1.1 引入
软件结构分类：C-S结构（Client - Server 客户端-服务器端）
典型应用：
飞秋、QQ、红蜘蛛。。。。
特点：
1）必须安装特定的客户端程序
2）服务器软件升级，客户端的软件同步升级！
B-S结构（Broswer-Server 浏览器-服务器端）
典型应用：
163网站，传智官网，游戏官网。。。
特点：
1）不需要特定的客户（只需要浏览器软件）
2）服务器软件升级，浏览器客户端不需要升级！
结论： java就业班开发的软件，大部分都是基于BS结构的！
1.2 网站
服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。html是一门网页制作的语言。
1.3 html语言
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言，掌握一些常用的标记即可！
1.4 超级文本
文字变色
文字大小变化
显示图片
........
这些超级文本通过标记实现效果的。
2 html语法
2.1 基本结构
<html> --html开始标签
<head> -- 文件头（用户在浏览器的主体是看不到的）
</head>
<body> --文件体（用户在浏览器的主体看得到）
</body>
</html> --html结束标签作用：告诉浏览器如何解释该html页面
<html>
<head>
<!-- html注释 -->
<!-- 作用：告诉浏览器如何解释该html页面 -->
<!-- 标题 ：在窗口的标题栏看到-->
<title>这是标题</title>
<!-- 告诉浏览器使用什么码表解释html文件 -->
<!--
html标签分类：
有标签体标签：有开始，有结束标签、 <title></title>
没有标签体标签 ： 也叫空标签 <meta />
-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 关键词：keywords
搜索引擎： 百度 输入 java培训
网页的排名 推广 SEO
SEO优化
关键词是网页排名的一个因素。
100% 权重 50% 33.3.% （3-5个合适）
-->
<meta name="keywords" content="java培训,net培训,php培训" />
<!-- 描述：
标题
描述
标题
描述
标题
描述
-->
<meta name="description" content="这是一家专门做IT职业培训的公司"/>
</head>
<body>
body的内容
</body>
</html>标题(h1~h6)
水平线(hr)
段落(p)
段落缩进(blockquote)
上下标(sup和sub)
换行(br)
原样输出(pre)
有序列表ol li
无序列表ul li
项目列表标签(dl dt dd)
行内标签(span)
块标签<div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html文本标签</title>
</head>
<body>
<!-- 标题(h1~h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 水平线(hr) -->
<hr/>
<!-- p 段落 -->
<p>第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个
章节内容第一个章节内容第一个章节内容第一个章节内容
</p>
<p>
第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个
章节第二个章节第二个章节第二个章节第二个章节
</p>
<!--段落缩进(blockquote) -->
<blockquote>
第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个
章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节
</blockquote>
<!-- 上下标(sup和sub) 用于公式-->
数学公式：y=x的平方： y=x<sup>2</sup>水的化学式： H<sub>2</sub>O
<!-- 换行(br) -->
<br/>
下一个内容
<!-- 原样输出(pre)： 按照编辑器的效果直接输出 -->
<pre>
凉州词
葡萄美酒夜光杯，欲饮琵琶马上催。
醉卧沙场君莫笑，我是流氓我怕睡。
</pre>
<pre>
function checkName(){
alert("用户名不能为空!");
}
</pre>
<!--有序列表ol li -->
<a name="list"></a>
你最喜欢的明星？
<ol type="I"> <!-- type属性： 序号的类型-->
<li>凤姐</li>
<li>芙蓉姐姐</li>
<li>如花</li>
</ol>
学生管理系统
<!--无序列表ul li -->
<ul type="square">
<li>学生管理</li>
<li>成绩管理</li>
<li>系统管理</li>
</ul>
<!-- 项目列表标签(dl dt dd) -->
软件公司的组织架构
<dl>
<dt>技术总监</dt>
<dd>攻城狮1号</dd>
<dd>攻城狮2号</dd>
<dd>攻城狮3号</dd>
<dt>财务总监</dt>
<dd>出纳1号</dd>
<dd>出纳2号</dd>
<dd>出纳3号</dd>
</dl>
<!-- 行内标签(span)
块标签<div>
在html中使用非常少，在css中用得多。
div+css的网页布局
-->
<span>span的内容</span>
<div>div的内容</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接标签</title>
</head>
<body>
<!-- a 超链接标签：
常用的属性：
href 表示链接到的地址（文件）
target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开
协议执行资源的基本流程（超链接的原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。
常见的协议：
file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议（执行流程） 通常连接到域名或IP地址
thunder： 迅雷下载软件的协议
mailto: 调用本地的发送邮件的客户端软件
超链接作用；
1）链接到资源
2）作为锚点使用
打锚点： <a name="锚点名称"></a>
去到锚点： <a href="http://haidai19960806.blog.163.com/blog/#锚点名称">内容</a>
-->
<a name="top"></a>
<a href="http://haidai19960806.blog.163.com/blog/03.html文本标签.html#list" target="_blank">超链接</a><br/>
<a href="http://haidai19960806.blog.163.com/blog/../1.jpg">链接到图片</a><br/>
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/>
<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/>
<a href="mailto:eric@itcast.cn">发送邮件给朋友</a>
<br/><a href="http://haidai19960806.blog.163.com/blog/#ch01">去到第一章</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a>
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/>
<a href="http://haidai19960806.blog.163.com/blog/#top">返回顶部</a>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标签</title>
</head>
<body>
<!-- img 图像标签
常用属性：
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area
-->
<img src="http://haidai19960806.blog.163.com/blog/../2.jpg" alt="这是一张美女图片" border="0" usemap="#Map" title="提示文字"/>
<map name="Map" id="Map">
<area shape="rect" coords="196,338,301,398" href="http://haidai19960806.blog.163.com/blog/04.超链接.html" target="_self" />
<area shape="circle" coords="139,191,45" href="http://haidai19960806.blog.163.com/blog/03.html文本标签.html" target="_blank" />
</map>
</body>
</html>在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，那么就需要进行转义。
常见的转义字符：
特殊字符 转义字符
< < letter than
> > greater than
& &
空格
2.7 表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>
<body>
<!--
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性：
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right：右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并
-->
<table border="1px" width="400px" height="200px" align="center">
<caption>2014年期末考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">狗娃</td>
<td>计算机1班</td>
<td>80</td>
</tr>
<tr>
<td>经济1班</td>
<td>90</td>
</tr>
<tr>
<td>狗剩</td>
<td>计算机2班</td>
<td>78</td>
</tr>
<tr>
<td>狗蛋</td>
<td>软件1班</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">平均分</td>
<td>85</td>
</tr>
</tfoot>
</table>
</body>
</html>作用：用于采集用户输入的数据，提交给后台程序处理
场景1：
注册用户：
-> 注册页面（输入用户名、密码、邮箱...）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库
场景2
登录：
-> 登录页面（输入用户名和密码）（通过表单标签携带用户数据） -> 系统后台，搜索数据库，判断是否存在次用户和密码
表单标签：
<form> 就是一个表单
<input type="text"> 单行输入域
<input type="password"/> 密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/> 下拉选项
<input type="hidden"/> 隐藏域。特点：不会显示到html页面上，但可以携带数据。
<input type="file"/> 文件选择器
<textarea></textarea> 多行输入域
<input type="submit"/> 提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>
<body>
<!--
一个表单标签：
常用的属性：
action: 表单提交到的地址.。点击了submit的提交按钮，就会把数据提交到action的地址
method: 提交方式。
两种提交方式：
get
1）提交的数据会放到地址栏上面
2) get提交的数据不超过1kb，只适合简单的数据
post
1）提交的数据不会放到地址栏
2）post提交的数据没有限制。比如文件上传
-->
<form action="http://localhost:8080/Test/GetData" method="get">
<!-- 单行输入域：
常用的属性
value: 该输入的默认值
name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容
size: 可以输入的字符数量
-->
用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25" /><br/>
<!--密码输入域： 以非明文的效果获取用户输入的数据。 -->
密码：<input type="password" name="userPwd" /><br/>
<!-- 单选：
注意：
1)如果是同一组的单选选项就使用相同的name属性值
2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容
-->
性别：<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br/>
爱好：
<!-- 多选按钮：
注意：
1）如果是同一组的多选选项就使用相同的name属性值
2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容
-->
<input type="checkbox" name="hobit" value="篮球"/>篮球
<input type="checkbox" name="hobit" value="足球"/>足球
<input type="checkbox" name="hobit" value="兵乓球"/>兵乓球<br/>
籍贯：
<!--
下拉选项：
注意：
1）name属性就是后台程序获取的标记
2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容
-->
<select name="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select><br />
<!-- 隐藏域：用于携带数据，但是在页面上不会显示效果
注意：
1）name属性就是后台程序获取的标记
2) 这个value的值就是发送给后台程序的内容
-->
<input type="hidden" name="id" value="001"/>
个人简介：
<!--多行输入域：可以输入多行文本
rows: 一共有几行
cols: 一行可以输入几行字符
-->
<textarea rows="5" cols="20" name="info"></textarea>
<!-- 提交按钮： 点击这个按钮，form中的全部数据就会发送到后台
value: 表示按钮显示的文本
-->
<input type="submit" value="注册"/>
<!--
重置按钮： 点击这个按钮，form中的所有标签返回到初始默认状态
-->
<input type="reset" />
</form>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
</head>
<frameset rows="10%,*,10%">
<frame src="http://haidai19960806.blog.163.com/blog/header.html" name="header"/>
<frameset cols="20%,*">
<frame src="http://haidai19960806.blog.163.com/blog/menu.html"/>
<frame src="http://haidai19960806.blog.163.com/blog/main.html" name="main"/>
</frameset>
<frame src="http://haidai19960806.blog.163.com/blog/footer.html"/>
</frameset>
<body>
<!--
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架，框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意：
框架标签不能放在body标签中，否则无法显示！！！
注意：超链接标签的target属性还可以指定一个frame的名称，
如果指定的是一个frame的name，那么在指定这个frame中打开href指定的页面
如：<a href="http://haidai19960806.blog.163.com/blog/student.html" target="main">学生管理</a>
在frame名为main的框架中打开student.html这个页面
-->
</body>
</html>1）marquee元素飘动标签
direction 飘动的方向.
scrollamount 飘动 的速度
loop 控制是否循环的飘动 默认是循环飘动 -1 loop的属性值就是对应飘动的次数。
（2）媒体标签: <embed>
（3）画中画标签格式： iframe
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
