一:
1.1 网站基本介绍,网站分类(政府,信息集成,企业门户等等)
1.2 网站开发是如何分工的(项目经理、美工、程序员、测试等等)
1.3 网络广告的盈利方式(按点击付费,包月广告位等)
二:
HTML入门
2.1 引入
软件结构分类:
C-S结构(Client - Server 客户端-服务器端)
典型应用:
飞秋、QQ
特点:
1)必须安装特定的客户端程序
2)服务器软件升级,客户端的软件同步升级!
B-S结构(Broswer-Server 浏览器-服务器端)
典型应用:
163网站,百度网站 ,游戏官网。。。
特点:
1)不需要特定的客户(只需要浏览器软件)
2)服务器软件升级,浏览器客户端不需要升级!
结论: java就业班开发的软件,大部分都是基于BS结构的!
2.2 网站
服务器端的软件都是基于bs结构的,这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。
html是一门网页制作的语言。
2.3 html语言
html是第一门网页制作语言,最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言,掌握一些常用的标记即可!
2.4 超级文本(写一个简单的超文本演示效果)
文字变色
文字大小变化
显示图片
........
这些超级文本通过标记实现效果的。
开发软件:DreamWeaver的介绍(简单使用的介绍)
三:
3.1 基本标签的讲解
<html> --html开始标签
<head> -- 文件头(用户在浏览器的主体是看不到的)
</head>
<body> --文件体(用户在浏览器的主体看得到)
</body>
</html> --html结束标签
3.2 head文件头
作用:告诉浏览器如何解释该html页面
3.3 文本标签(body里面的标签)
好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
野径云俱黑,江船火独明。
marquee:
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动
bgcolor:字幕背景颜色
direction:设置字幕的滚动方向down right left up
src:需要播放的音乐路径
loop=-1(无限循环)
autostart="true"自动播放
列表标签:
有序列表ol li(type属性更改序号类型,案例:投票喜欢的女明星)
无序列表ul li(用于条目的罗列,type属性更改序号类型,案例:学生管理系统)
项目列表标签(dl dt dd)(一般用于有层次结构的列表,一个公司员工的列表)
下拉选项:<select/><option/>
行内标签(span) (html中用的非常少,css中用的非常多)
块标签<div> (html中用的非常少,css中用的非常多)
输出:
2.4 超链接标签
超链接标签:
常用的属性:
href 表示链接到的地址(文件)
target 打开资源方式 _self: 当前窗口打开, _blank: 新窗口打开
协议执行资源的基本流程(超链接的原理):
使用协议到本地计算机的注册表中查询是否有对应协议的软件(程序),有就执行,没有就不执行。
http协议的详细执行流程(画图详解)
发布个人网站的流程:
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器
常见的协议:
file:// 本地文件协议(本地或局域网) 在href中不写就是使用这个默认协议
http:// http协议(执行流程) 通常连接到域名或IP地址(画图讲解http协议执行流程)
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议
超链接作用;
1)链接到资源
2)作为锚点使用
打锚点: <a name="锚点名称"></a>
去到锚点: <a href="#锚点名称">内容</a>
img 图像标签
常用属性:
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时,alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图(热点区域):map
热点: area,设置图片上可以被点击的区域(用工具做之后进行简单分析)
2.6 转义字符
在html语法中,存在一些特殊的字符,这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话,
那么就需要进行转义。
常见的转义字符:
特殊字符 转义字符(以&开头,以;结尾)
& &
空格
版权 ©
商标 ®
-------------------------------------------------------------------------------------------------------------------------
2.6 表格标签(画图讲解表格标签中的各个位置代表的标签)
标签:
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性:
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right:右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并
2.7 做一个练习题(图片展示需求,主要练习表格的建立和单元格的合并)
表单标签(重点)
作用:用于采集用户输入的数据,提交给后台程序处理
场景1:
注册用户:
-> 注册页面(输入用户名、密码、邮箱...)(通过表单标签携带用户数据)-> 系统后台程序 -> 把用户数据保存到数据库
表单标签:
<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"/> 重置按钮
注意:
form表单里面有两个属性需要大家注意:
action="表单需要提交到哪个路径"
输出:
frameset 框架集
属性:
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架,框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意:
框架标签不能放在body标签中,否则无法显示!!!
输出画面:
实现输出:
1.1 网站基本介绍,网站分类(政府,信息集成,企业门户等等)
1.2 网站开发是如何分工的(项目经理、美工、程序员、测试等等)
1.3 网络广告的盈利方式(按点击付费,包月广告位等)
二:
HTML入门
2.1 引入
软件结构分类:
C-S结构(Client - Server 客户端-服务器端)
典型应用:
飞秋、QQ
特点:
1)必须安装特定的客户端程序
2)服务器软件升级,客户端的软件同步升级!
B-S结构(Broswer-Server 浏览器-服务器端)
典型应用:
163网站,百度网站 ,游戏官网。。。
特点:
1)不需要特定的客户(只需要浏览器软件)
2)服务器软件升级,浏览器客户端不需要升级!
结论: java就业班开发的软件,大部分都是基于BS结构的!
2.2 网站
服务器端的软件都是基于bs结构的,这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。
html是一门网页制作的语言。
2.3 html语言
html是第一门网页制作语言,最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言,掌握一些常用的标记即可!
2.4 超级文本(写一个简单的超文本演示效果)
文字变色
文字大小变化
显示图片
........
这些超级文本通过标记实现效果的。
开发软件:DreamWeaver的介绍(简单使用的介绍)
三:
3.1 基本标签的讲解
<html> --html开始标签
<head> -- 文件头(用户在浏览器的主体是看不到的)
</head>
<body> --文件体(用户在浏览器的主体看得到)
</body>
</html> --html结束标签
3.2 head文件头
作用:告诉浏览器如何解释该html页面
<html>
<head>
<!-- html注释 -->
<!-- 作用:告诉浏览器如何解释该html页面 -->
<!-- 标题 :在窗口的标题栏看到-->
<title>这是标题</title>
<!-- 告诉浏览器使用什么码表解释html文件 -->
<!--
html标签分类:
有标签体标签:有开始,有结束标签、 <title></title>
没有标签体标签 : 也叫空标签 <meat />
-->
<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>
</html>
3.3 文本标签(body里面的标签)
标题(h1~h6) align:设置位置
<h1 align="center">标题1</h1>
h1~h6的大小顺序是由大到小
水平线(hr) color:线的颜色
<hr color="#669999" />
换行(br)
<br />
标签规定粗体文本(b)
将文本以斜体显示(i)将文本以下划线显示(u)
输出 :
段落(p)(书写两段小说进行演示)
段落缩进(blockquote)(主要用于解释或者强调)上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3
好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
野径云俱黑,江船火独明。
晓看红湿处,花重锦官城。
<pre>
好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
野径云俱黑,江船火独明。
晓看红湿处,花重锦官城。
</pre>
marquee:
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动
bgcolor:字幕背景颜色
direction:设置字幕的滚动方向down right left up
<marquee behavior="slide" bgcolor="#FF0000" direction="down">张飞</marquee>
bgsound:
src:需要播放的音乐路径
loop=-1(无限循环)
autostart="true"自动播放
列表标签:
有序列表ol li(type属性更改序号类型,案例:投票喜欢的女明星)
无序列表ul li(用于条目的罗列,type属性更改序号类型,案例:学生管理系统)
项目列表标签(dl dt dd)(一般用于有层次结构的列表,一个公司员工的列表)
下拉选项:<select/><option/>
行内标签(span) (html中用的非常少,css中用的非常多)
块标签<div> (html中用的非常少,css中用的非常多)
<ol type="A">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ol>
<hr />
<ul type="circle">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ul>
<hr />
<dl>
<dt>财务总监</dt>
<dd>财务专员1</dd>
<dd>财务专员2</dd>
<dd>财务专员3</dd>
<dt>技术总监</dt>
<dd>程序员1</dd>
<dd>程序员2</dd>
<dd>程序员3</dd>
</dl>
<hr />
<select>
<option>陕西</option>
<option>四川</option>
<option>广东</option>
</select>
<hr />
<span>我是sapn标签</span>
<div>我是div标签</div>
输出:
2.4 超链接标签
超链接标签:
常用的属性:
href 表示链接到的地址(文件)
target 打开资源方式 _self: 当前窗口打开, _blank: 新窗口打开
<a href="http://www.baidu.com" target="_blank">超链接</a><br />
协议执行资源的基本流程(超链接的原理):
使用协议到本地计算机的注册表中查询是否有对应协议的软件(程序),有就执行,没有就不执行。
http协议的详细执行流程(画图详解)
发布个人网站的流程:
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器
常见的协议:
file:// 本地文件协议(本地或局域网) 在href中不写就是使用这个默认协议
http:// http协议(执行流程) 通常连接到域名或IP地址(画图讲解http协议执行流程)
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议
超链接作用;
1)链接到资源
2)作为锚点使用
打锚点: <a name="锚点名称"></a>
去到锚点: <a href="#锚点名称">内容</a>
img 图像标签
常用属性:
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时,alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图(热点区域):map
热点: area,设置图片上可以被点击的区域(用工具做之后进行简单分析)
<img src="b.jpg" alt="我是宝强" width="100" height="100" border="0" usemap="#Map" title="我是宝强"/>
<map name="Map" id="Map">
<area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank" />
<area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank" />
</map>
热点建议在设计页面设置,设置后在代码区会自动生成代码;
2.6 转义字符
在html语法中,存在一些特殊的字符,这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话,
那么就需要进行转义。
常见的转义字符:
特殊字符 转义字符(以&开头,以;结尾)
< < letter than
> > greater than& &
空格
版权 ©
商标 ®
输入:
<h1>标题1</h1><br/>
&<br />
<hr />
西部 开源
<hr />
王老吉<sup>®</sup>
<hr />
王老吉<sup>©</sup>
输出:
-------------------------------------------------------------------------------------------------------------------------
2.6 表格标签(画图讲解表格标签中的各个位置代表的标签)
标签:
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性:
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right:右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并
2.7 做一个练习题(图片展示需求,主要练习表格的建立和单元格的合并)
<table border="2" align="center" width="400" height="300">
<tr align="center">
<td colspan="3">学生成绩</td>
</tr>
<tr align="center">
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr align="center">
<td>数学</td>
<td>95</td>
</tr>
<tr align="center">
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr align="center">
<td>数学</td>
<td>91</td>
</tr>
</table>
输出:
表单标签(重点)
作用:用于采集用户输入的数据,提交给后台程序处理
场景1:
注册用户:
-> 注册页面(输入用户名、密码、邮箱...)(通过表单标签携带用户数据)-> 系统后台程序 -> 把用户数据保存到数据库
<body>
<form action="新建文本文档.txt" method="post">
帐号:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender"/>男
<input type="radio" name="gender" />女<br />
兴趣爱好:<input type="checkbox" name="hobby" value=""="bilibili"/>Bilibili<input type="checkbox" name="hobby" value="tieba" />贴吧<input type="checkbox" name="hobby" value="weibo" />微博<br />
学历:<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br/>
请上传你的照片:<input type="file" name="photo" /><br/>
自我介绍:<textarea rows="5" cols="20"></textarea><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="hidden" />
</form>
</body>
输出:
表单标签:
<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"/> 重置按钮
注意:
form表单里面有两个属性需要大家注意:
action="表单需要提交到哪个路径"
method=get/post
如果是get方式提交的话,我们的提交参数会被绑定在url路径中
如果post方式提交:我们的所有的提交参数会被封装在请求体中
3.0 案例:form标签和table标签的整合
分析:就是将form和table嵌套使用;
<body>
<table align="center" bgcolor="#00FF66" border="1" height="300" width="400">
<form action="新建文本文档.txt" method="get">
<tr>
<td align="center">账号</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="center">密码</td>
<td><input type="password" name="password" />
</tr>
<tr>
<td align="center">性别</td>
<td><input type="radio" value="男" name="gender" />男<input type="radio" value="女" name="gender" />女</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"/><input type="submit" value="登陆"/>
</tr>
</form>
</table>
</body>
输出:
frameset 框架集
属性:
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架,框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意:
框架标签不能放在body标签中,否则无法显示!!!
3.2 利用框架标签做一个登录注册案例(点击左边的登录,或者注册直接跳转到指定的页面)
框架
<frameset bordercolor="#0066FF" rows="15%,*">
<frame src="登陆注册/1.标题.html"/>
<frame src="登陆注册/2.登陆表格.html"/>
</frameset>
主页面:
<body>
<table align="center" width="400" height="300"
border="1">
<form action="注册.html" method="post">
<tr>
<td align="center">
用户名
</td>
<td align="left">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="center">
密 码
</td>
<td align="left">
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td align="center">
性 别
</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="submit" value="登陆" />
</td>
</tr>
</form>
</table>
</body>
输出画面:
3.3 案例练习:做一个学生管理系统,画图展示需求(当堂练习,必须实现点击不同的超链接跳转不同的页面的效果)
分析:先构建框架,在不同框架里面实现不同功能的内容,利用超链接跳转;
框架:
<frameset rows="20%,*">
<frame src="选课系统/1.标题.html" />
<frameset cols="20%,*">
<frame src="选课系统/left.html" />
<frame src="选课系统/right.html" />
</frameset>
</frameset><noframes></noframes>
实现输出: