Web学习笔记_01
一：
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结束标签
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)（一般用于有层次结构的列表，一个公司员工的列表）
下拉选项：
行内标签(span) (html中用的非常少，css中用的非常多)
块标签
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结束标签
3.2 head文件头
作用：告诉浏览器如何解释该html页面
这是标题
3.3 文本标签(body里面的标签)
标题(h1~h6) align：设置位置
标题1
水平线(hr) color：线的颜色
换行(br)
标签规定粗体文本(b)
将文本以斜体显示(i)将文本以下划线显示(u)
输出 ：
段落(p)(书写两段小说进行演示)
段落缩进(blockquote)(主要用于解释或者强调)上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
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)（一般用于有层次结构的列表，一个公司员工的列表）
下拉选项：
行内标签(span) (html中用的非常少，css中用的非常多)
块标签
(html中用的非常少，css中用的非常多)
输出：
2.4 超链接标签
超链接标签：
常用的属性：
href 表示链接到的地址（文件）
target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开
协议执行资源的基本流程（超链接的原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。
http协议的详细执行流程（画图详解）
发布个人网站的流程：
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器
常见的协议：
file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议（执行流程） 通常连接到域名或IP地址(画图讲解http协议执行流程)
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议
超链接作用；
1）链接到资源
2）作为锚点使用
打锚点：
去到锚点： 内容
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：
注册用户：
-> 注册页面（输入用户名、密码、邮箱...）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库
表单标签：
- 章子怡
- 刘亦菲
- 贾玲
- 章子怡
- 刘亦菲
- 贾玲
- 财务总监
- 财务专员1
- 财务专员2
- 财务专员3
- 技术总监
- 程序员1
- 程序员2
- 程序员3
我是sapn标签
我是div标签输出：
2.4 超链接标签
超链接标签：
常用的属性：
href 表示链接到的地址（文件）
target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开
超链接
协议执行资源的基本流程（超链接的原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。
http协议的详细执行流程（画图详解）
发布个人网站的流程：
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器
常见的协议：
file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议（执行流程） 通常连接到域名或IP地址(画图讲解http协议执行流程)
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议
超链接作用；
1）链接到资源
2）作为锚点使用
打锚点：
去到锚点： 内容
img 图像标签
常用属性：
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）
热点建议在设计页面设置，设置后在代码区会自动生成代码；
2.6 转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，
那么就需要进行转义。
常见的转义字符：
特殊字符 转义字符(以&开头，以;结尾)
< < letter than
> > greater than& &
空格
版权 ©
商标 ®
输入：
标题1
&
西部 开源
王老吉®
王老吉©
-------------------------------------------------------------------------------------------------------------------------
2.6 表格标签（画图讲解表格标签中的各个位置代表的标签）
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性：
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right：右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并
2.7 做一个练习题(图片展示需求，主要练习表格的建立和单元格的合并)
学生成绩
张三
语文
98
数学
95
李四
语文
88
数学
91
表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理
场景1：
注册用户：
-> 注册页面（输入用户名、密码、邮箱...）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库
输出：
表单标签：