1.html
**1.1引入**
软件结构分类
C-S结构（client-server客户端-服务器端）
典型应用
飞秋：QQ，红蜘蛛
特点：
1）必须的安装特定的客户端程序
2）服务器软件升级，客户端的软件同步升级
B-S结构（Broswer-Server浏览器-服务端）
典型事例
BS网站 游戏官网
特点
1）不需要特定的客户端（只需要浏览器软件）
2.服务器软件升级，浏览器客户端不需要升级！
开发的软件要基于BS结构
2.1网站
服务器端的软件都是基于BS结构的，这个软件俗称叫“网站” 网站是由网页组成，一个网页就是有HTML
页面组成，HTML是一门网页制作的语言。
2.3HTML语言
HTML是第一门网页制作语言，最简单的一门语言，hyperTextMarkupLanguage超文本标记语言
HTML语言是由标记组成学习HTML语言，掌握一些常用的标记即可。！
2.4超级文本
2HTML语法
<html> --html开始标签
<head> 文件头（用户在浏览器的主题是看不到的）
<title> </title>
</head>
<body> 文件体（用户可以在浏览器的主题看见）
</boy>
</html> ---HTML结束标签
2.2head文件头
作用;告诉浏览器如何解释该HTML页面
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
告诉浏览器使用什么码表解释HTML文件
HTML标签分类：
有标签体标签：有开始也有结束标签 <title></title>
没有标签体标签 ：也叫空标签<meta />
关键词 关键词搜索引擎 百度 输入 java培训
网页的排名 推广 SEO
SEO优化
关键词是网页排名的一个因素。(3-5)比较好做
<meta name="keywords" content="java培训,net培训,PHP培训"/>
描述：
标题
描述
标题
描述
标题
描述
<meta name="description" content="这是一家专门做IT职业培训的公司“/>
BODY
2.3文本标签
标题（h1~h6)
水平线 hr
段落 p
段落缩进 blockquote
上下标 sup和 sub 数学公式 y=x^2 y=x<sup>2</sup> 化学公式 H2O H<sub>2</sub>O
换行 br
原样输出 pre
有序列表 ol li <ol type="序号的类型1，A,a">
无序列表 ul li <ul type="circle/square/disc">
项目列表标签 dl dt dd
行内标签 span
块标签 div
2.4超链接标签
常用属性
href 表示链接的地址 ./1.jpg 一个点代表当前目录 ..代表上一个目录
默认file协议
协议执行资源的基本流程超链接的原理
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有救执行，没有就不执行
常见协议：
file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http：// http协议（执行流程）通常链接到域名或IP地址
thunder 迅雷软件的协议
mailto: 调用本地的发送邮件的客户端软件
target： 属性可以指定一个框架frame的名称，若果指定的是一个frame的name 那么就在指定的
frame中打开href指定的页面
链接的作用：
1）链接到资源
2）作为锚点使用
打锚点： <a name="锚点名称“></a>
去到锚点<a href="#锚点名称"></a>
< a name="top"></a>
<a href="1.1.html#list">超链接</a> *到该网页的所含锚点的位置
<a href="../1.jpg"></a> 链接本地文件
<a href="http://www.baidu.com">域名</a>
<a href="http://www.movie.com/qianrensan.avi">高清《前任3再见前任》(普通通道）</a>
<a href="thunder://www.movie.com/qianrensan.avi">高清《前任3再见前任》(迅雷通道）</a>
<a href="mailto:eric@itcast.cn">发送邮件给朋友</a>
<a href="#ch01">去到第一章</a>
<a name="ch01" >第一章</a>这是锚点
<a href="#top">返回顶部</a>
发布个人网站
开发好网站-》购买一谈服务器网站，分配IP地址-》注册域名，www.....com-》到域名提供商后台，绑定域名和服务器IP
地址
2.5图像标签
常用属性：
src : 表示图片源位置
width: 图片宽度
height：图片高度
alt: 替代文本，当图片src属性失效是，alt属性的内容就会出现
title: 提示文本，当鼠标放到图片上就会出现
area：热点
<img src="../2.jpg" width=“100px" height="20px" alt="文本内容" title=“提示文字”/>
2.6转义字符
在HTML语法中存在一些特殊的字符 ，而这些字符是不能原样输出的，如果想让这些字符原样输出的
话就的进行转义
特殊字符 转义字符
< <
> >
& &
空格
商标注册 ®
版权 ©
2.7表格标签（默认没有边框）
table 表格
tr 行
td 单元格
th 表头的单元格 带有居中和加粗
caption 标题
常用属性
border 表格的边框
width： 宽度
height 高度
align 对齐方式 left right center
rowspan 行合并，把多行的单元格合并
colspan 列合并 把多列的单元格合并
<table border=“10“ align=”center“ >
<acption>标题内容</caption>
<tr>
<td rowspan="2‘></td>
<td></td>
<td></td>
</tr>
<tr>
// <td colspan="2"></td>
<td></td>
<td></td>
</tr>
</table>
table布局的读取问题，读到table的开始标签，当服务器需要读到table的结束标签才会把table的内容
发送给用户，导致用户的体验是不好的。
把HTML的table划分成3部分，当每个部分的内容读取完毕之后，立刻返回给用户。这样可以提高用户的
体验
<thead> 头
<tbody> 体
<tfoot> 脚
例
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
firebug 插件
2.8表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理
场景：
注册用户
-》注册页面（输入用户名，密码，邮箱）（通过表单标签携带用户数据）-》提交 系统后台程序-》把用户数据保存到
数据库
登陆
登陆页面（输入用户名和密码）（通过表单标签携带用户数据-）-》系统后台，搜索数据库，判断是否存在此用户密码。
表单标签
表示一个表单
属性：
action：表示这个表单提交到的地址,点击了submit的提交按钮，就会把数据提交到action的地址
method： 提交方式
get:
提交的数据会放到地址栏上面
get提交的数据不能超过1kb，只适合简单的数据
post:
提交的数据不会放到地址栏上
post提交的数据没有限制
<form action="地址“ method=“post”>
<input type="text">单行的输入域
注意：单行输入域
属性
value="" 该输入的默认值
name 这个必须填写 该name的属性值用于给后台程序获取该标签输入的内容
size 可以输入的字符的数量
用户<input type="text" value="4~5位" name="useName" size="25"/>
<input type="password"/>密码输入域
以非明文的效果获取用户输入的数据
密码<input type="password" name="userPwd" />
<input type="radio"/>单选按钮
注意 如果是同一组的单选选项使用相同的name的属性值
单选按钮的value属性一定填，这个value的值就是发送给后台程序的内容
性别<input type="radio" name=“gender” value=“男”/> 男<input type="radio" name=“gender”
value=“女”/>女
<input type="checkbox"/>多选按钮
注意：如果是同一组的单选选项使用相同的name的属性值
多选按钮的value属性一定填，这个value的值就是发送给后台程序的内容
爱好<input type="checkbox"/ name="hobit" value="篮球“>篮球
<input type="checkbox" name="hobit" value="足球"/>足球
<input type="checkbox" name="hobit" value="兵乒球"/>兵乒球
<select/>下拉选项
注意：
name属性就是后台称程序获取的标记
下拉选项的option标签中的value属性一定要填，这个value的值就是发送给后台程序的内容
籍贯：<select name=“籍贯”>
<option value=“广东”>广东</option>
<option value=“广西”>广西</option>
<option value=“湖南”>湖南</option>
</select>
<input type="hidden"/>隐藏域，特点：不显示到HTML页面上，但可以携带数据
注意：name属性就是后台称程序获取的标记
这个value值就是发送给后台程序的内容
<input type="hidden" name=“id” value=""/>
<input type="file"/>文件选择器
<input type="submit"/>提交按钮点击这个按钮form中的全部内容就会发送到后台
value：表示按钮显示的文本
<input type="submit" value=“”注册/>
<input type="button"/>普通标签
<input type="reset"/>重置标签
点击这个按钮form中的所有标签返回到默认的状态
<textarea></textarea>多行输入域
rows;一共有几行
cols:一行可以输入几行字符
个人简介<textarea rows=“5” cols="20" nae="info"></textarea>
2.9框架标签
注意：框架的标签不能放在body的标签中，应该放在body的标签外面
<frame src=""/> src:表示框架内包含的页面
1.）一个页面就包含在一个frame标签中
2）有俩个或俩个以上的frame就要放在frameset（框架集）中
cols: 按照列方向类划分框架
rows：按照行方向划分框架
以上俩个属性的值填写每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
学生选课系统
<frameset rows=“10%，*，10%">
<frame src="头部页面,html"/>
<frameset>
<frame src="左边页面.html"/>
<frame src="右边页面.html"/>
</frameset>
<frame src="底部页面.html"/>
</frameset>
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
