Web的入门
1 软件的结构划分:
1) C/S结构:Client->Server之间的交互
典型特点:1)客户端的软件必须升级才能使用服务器端高版本的功能
应用:阿里巴巴 QQ,飞秋…
2) B/S结构:Browser-Server:浏览器端和服务器端之间的交互
特点:浏览器端的软件不需要特定的升级就可以访问服务器的网站
应用:大型游戏网站,网易新闻….
JavaWeb/EE --->都是基于B/S结构的…
2 什么是网站
将基于B/S的应用都叫网站.一个网站是由什么组成的?一个网站是有很多的html标签组成;
3 HTML
HTML:全称:hyper Text Markup Language:超文本标记语言
超文本标记:
针对字体的颜色,大小
针对图片,动画,音频,视频等等进行操作!
4 HTML语言的结构

编码规范的(gbk/utf-8) -头文件标签



html主体部分:这些内容最终会在浏览器中显示

-有标签体的标签
5 HTML结构的解释
html:根标签-标签体中会很多子标签
head:头文件
body:网页的主体部分,会显示内容
6 文本标签
标题标签: h2~h7
水平线标签:hr
换行标签

段落标签:p
段落缩进:blockquote
上下标标签:sup和sub
原样输出标签:pre
字体标签:font
居中标签:center
图像标签:
图像标签:img 空标签体

属性:
src:链接到的资源图片
width:图片的宽度 两种方式:一种指定px(像素) 第二种:百分比
title:悬停状态,会显示文字
alt:当图片失效的时候,用来解释说明该图片
height:图片的高度

转义字符:
空格:   注意事项(分号一定要带上)
<: < ; (letter than)

:>(greater than)

注册商标:® ®
版权所有:© ©

表格标签

表单标签
作用:就是采集用户输入的数据
应用场景:
登录:--用户输入用户的基本信息(用户名,密码,邮箱等等)--点击登录--->提交到系统后台--后台校验是否存在该用户-存在,登录成功,否则,给提示,用户名或者密码.其他错误!
注册:--采集用户输入的数据--提交后台--服务器数据库查看是否有当前用户名,有表示,注册失败;否则注册成功!
表单标签中method提交方式和get的区别

• get方式提交：（1）将用户的信息的信息展示到地址栏中（不安全）（2）get方式提交的文件大小有限制，不超过64kb.
  
  post方式提交：（1）post提交方式不会显示到地址栏中（2）该提交方式无大小限制。
  • 

CSS:

前端知识:

w3c组织:规范了html,css,javascript(js)写法
html:结构化标准
css:网页的样式(美化网页的)
javascript:行为化标准

CSS:全称:Cascading style sheet:层叠样式表
CSS的使用有三种方式:
1) 行内样式
标签 style属性:指定样式
弊端:style属性它和html标签混合使用,不利于后期维护
2) 内部样式
书写格式:
选中某个标签名{
书写样式;
}
讲课使用的是内部样式
3) 外部方式
a) 创建css文件:指定标签的样式
标签选择器{
书写样式;
}
b) 需要外部导入该css文件
rel属性:关联层叠样式表

总结:
1 :软件结构的划分:
两种:C/S B/S
2 html语言:
熟练掌握几个常用的标签:
段落标签:p
原样输出:pre
字体标签:font
上下标 和转义字符(注册商品和版权所有):sup和sub ® ©
有序列标签
ol li列表项
无序列标签
ul li列表项
超链接标签
1) 连接到某个资源文件或者资源地址(URL)
2) 作为锚连接来使用
在同一个html页面下:
1) 打锚点:

2) 创建跳转
开始跳转

不同页html页面下:
1)打锚点:

3) 创建跳转标记
4) 开始跳转
表格标签:
table标签
属性:border 表格的边框 width 表格的宽度 height表格的高度
align:标签在浏览器中的对齐方式 bgColor:背景色
tr:行标签
td:列(单元格)
th:表头标签(居中,加粗)
行合并:rospan
列合并:colspan
图片标签:

表单标签:重点
form表单中的action提交的地址
method属性:提交方式: get/post
表单项中必填name属性:作为后台标记
文本输入框
密码输入框
单选框
复选框
提交
1 CSS是使用方式
1) 行内样式
弊端:不利于维护(style属性和html标签混合在一块)
2) 内部样式
在head标签体中,书写style标签

讲课(习惯使用这种方式)
3) 外部样式
A:创建一个独立一后缀名为.css结尾的css文件
选择器{
书写样式
}
B:导入外部css文件
书写:

2 CSS的语法
选择器(id选择器,类选择器,标签选择,并集选择器,交集选择器,通用选择器){
CSS属性:CSS的属性值; 分号可以省略,建议永远给出分号
CSS属性(字体,背景,边框,背景图片的起始位置…(大小,颜色,边框的样式,边框的尺寸left/center/right…)
}

3 CSS的选择器
选择器的分类:
a 标签选择器(最普通一种方式)
书写格式:
标签名称{
CSS属性:css属性值;
}

b id选择器
在标签中一定要给定一个id属性,并且指定id属性值

书写格式:

#id属性值{
书写样式;
}
注意事项:
1) 一个标签同时被标签选择和id选择器选中,那么id选择器的优先级要高于标签选择器
2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;

c 类选择器
在一个标签中使用类选择器,要指定一个属性:class属性

书写格式:
.class属性值(inputCls){
书写样式;
}
注意事项:
在同一个页面下,多个标签可以指定同名的class属性

d 并集选择器(同时选中多个标签)

选择器1,选择器2,…{
书写样式;
}

e:交集选择器
书写格式:
选择器1 选择器2 选择器3{
书写样式;
}

4 伪类选择器
伪类表示一种状态:超链接标签a的几种状态
link:鼠标没有访问过的状态
hover:鼠标经过的状态
active:鼠标激活状态(鼠标点击了,但是没有松开的状态)
visited:鼠标访问过的状态(已经点击了,并且松开的状态)

书写格式:a:四个状态{….}
显示的效果顺序:link visited hover active
作业:制作一个首页

虽然在制作过程有些波折，并且没有安排图片，但是总算制作成功了！

登陆        注册        购物车

首页    手机数码    电脑办公    电脑办公    电脑办公

最新商品

电饭煲                                    电饭煲                                  电饭煲

200                                      200                                      200

电饭煲                                 电饭煲                               电饭煲                           电饭煲                                 电饭煲                               电饭煲

200                                   200                                   200                                   200                                   200                                   200                                   200

最新商品

电饭煲                                    电饭煲                                  电饭煲

200                                      200                                      200

电饭煲                                 电饭煲                               电饭煲                           电饭煲                                 电饭煲                               电饭煲

200                                   200                                   200                                   200                                   200                                   200                                   200