一.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语言的基本结构
<html>
<head> 编码规范的(gbk/utf-8) -头文件标签
<title>标题标签</title>
</head>
<body>
html主体部分:这些内容最终会在浏览器中显示
</body>
</html> -有标签体的标签
5 HTML结构的解释
html:根标签-标签体中会很多子标签
head:头文件
body:网页的主体部分,会显示内容
二. HTML各标签及标签使用方法
传统布局方式
1. 文本标签
标题标签:
标题标签 | h1--h7 |
水平标签 | <hr/> |
换行标签 | <br/> |
段落标签 | <p>...<p> |
段落缩进 | blockquote |
上下标标签 | sup和sub |
原样输出标签 | pre |
字体标签 | font |
居中标签 | center |
2. 图像标签
图像标签:img 空标签体<img/>
属性:
src | 链接到的资源图片 |
width | 图片的宽度 两种方式:第一种指定px(像素) 第二种百分比 |
height | 图片的高度 |
title | 悬停状态,会显示文字 |
alt | 当图片失效的时候,用来解释说明该图片 |
3.转义字符:
空格 | 注意事项(分号一定要带上) |
< | < ; (letter than) |
> | >(greater than) |
注册商标 | ® ® |
版权所有 | © © |
3. 超链接标签
1.常用的属性:
href:1)连接到的资源文件或者地址
target属性:打开资源文件的方式
_self:是在当前窗口直接开
_blank:新建一个窗口打开
URL:统一资源定位符
常用的协议:
file:// 本地文件协议
http://
自己的执行流程 :通过查看hosts文件中有没有该域名对应的ip,有的话,调用程序访问,如果没有,就联网操作访问
Eg. thunder://迅雷协议 mailto:邮件协议
使用方法:1.连接到某个资源文件或者资源地址(URL)
2.作为锚连接来使用
在同一个html页面下两个打锚点方法:
(1)打锚点:<a name=”锚点名称”></a>
创建跳转<a href=”#锚点名称”>开始跳转</a>
不同页html页面下:
(2)打锚点:<a name=”锚点名称”></a>
创建跳转标记<a href=”资源文件或者资源地址#锚点名称”>开始跳转</a>
4.表格标签:
table标签属性:
border | 表格的边框 |
Width | 表格的宽度 |
Heigh | 表格的高度 |
align | 标签在浏览器中的对齐方式 属性值:left center right |
bgColor | 背景色 |
tr | 行标签 |
td | 列(单元格) |
th | 表头标签(居中,加粗) |
rospan | 行合并 |
colspan | 列合并 |
5.图片标签:
<img src=”图片资源文件” alt=”图片的失效的时候替代文本” title=”悬浮状态显示当前文字” width=”宽度”/>
6. 表单标签
作用:就是采集用户输入的数据
应用场景:
登录:--用户输入用户的基本信息(用户名,密码,邮箱等等)--点击登录--->提交到系统后台--后台校验是否存在该用户-存在,登录成功,否则,给提示,用户名或者密码.其他错误!
注册:--采集用户输入的数据--提交后台--服务器数据库查看是否有当前用户名,有表示,注册失败;否则注册成功!
建立表单输出位置和方式<form action="#" method="post">
form两个重要的属性:
action:提交的地址(可以是资源文件或者URL:统一资源定位符)
method:提交方式:常用的两种:post get
表单标签中method提交方式post和get的区别?
get方式提交: (1)将用户的信息展示到了地址栏中(不安全)
(2)get方式提交,提交的文件大小有限制,不超过64kb
post提交方式:(1)post提交方式不会将用户的信息显示到地址栏中
(2)该提交方式提交文件大小无限制!
a.文本输入框:<input type =text/>
注意事项:在表单标签中,name属性一定要指定,作为后台提交
b.密码输入框:<input type ="password" />
注意事项:password非明文的形式显示出来
name属性:必填项(给后台标记的)
c.单选框:<input type="radio" />
name属性:必填
将性别看成同一组信息
d.复选框:<input type="checkbox" />
name属性:必填
将这些复选框看成同一组信息
e.△(重点)隐藏域:<input type="hidden" name="hi" />
注意事项:不会显示一些效果,但是他可以携带数据
f.上传照片:<input type="file" name="photo">
g.文本域:<textarea></textarea>
属性:name属性必填
rows:文本雨中有多少行
cols:一行能写多少个字符
h.下拉菜单
<select name="必填">
<option>请选择</option>
<option>......</option>
<option>......</option>
</select>
i. 按钮:<input type="button" />
指定value属性
type="submit" 提交
type ="reset" 重置
Eg.<input type="button" value="这是一个按钮"/>
<input type="submit" value="提交"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
7.列表标签
A:有序列表ol默认的列表项前面的类型是数字 li
B:无序列表:ul li
ol有一个属性type
ul的type属性默认值是:disc 实心圆点
CSS:
1 CSS是使用方式
(1)行内样式 <input style=”书写样式” />
弊端:不利于维护(style属性和html标签混合在一块)
(2)内部样式
在head标签体中,书写style标签
<style type=”text/css”> 书写样式; </style>
|
(3)外部样式
A:创建一个独立一后缀名为.css结尾的css文件 选择器{ 书写样式 }
|
B:导入外部css文件 书写:<link href=”xx.css” rel=”stylesheet”/>
|
2 CSS的语法
选择器(id选择器,类选择器,标签选择,并集选择器,交集选择器,通用选择器)
{
CSS属性:CSS的属性值; 分号可以省略,建议永远给出分号
CSS属性(字体,背景,边框,背景图片的起始位置…(大小,颜色,边框的样式,边框的尺寸left/center/right…)
}
3 CSS的选择器
选择器的分类:
a标签选择器(最普通一种方式)
书写格式: 标签名称{ CSS属性:css属性值; } |
b id选择器:在标签中一定要给定一个id属性,并且指定id属性值
<input type=”text” id=”inputId” >
书写格式:
#id属性值{ 书写样式; } |
注意事项:
(1) 一个标签同时被标签选择和id选择器选中,那么id选择器的优先级要高于标签选择器
(2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;
c 类选择器:在一个标签中使用类选择器,要指定一个属性:class属性
<input type=”text” class=”inputCls”>
书写格式: .class属性值(inputCls){ 书写样式; } |
注意事项:在同一个页面下,多个标签可以指定同名的class属性
d 并集选择器(同时选中多个标签)
选择器1,选择器2,…{ 书写样式; } |
e:交集选择器
书写格式: 选择器1 选择器2 选择器3{ 书写样式; }
|
4 伪类选择器
伪类表示一种状态:超链接标签a的几种状态
link:鼠标没有访问过的状态
hover:鼠标经过的状态
active:鼠标激活状态(鼠标点击了,但是没有松开的状态)
visited:鼠标访问过的状态(已经点击了,并且松开的状态)
书写格式:a:四个状态{….}
锚伪类要循环显示一种效果:四个状态必须有先后循环
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
显示的效果顺序:link visited hover active
5 css文本
/*文本颜色属性:color*/
Eg.color: #f00;
/*line-height:行高*/
Eg.line-height: 60px;
/*letter-spacing:字符间距*/
Eg.letter-spacing: 10px;
/*文本的对其方式*/
Eg.text-align: center;
/*word-spacing:字间距:shu默认两个组成的叫单词*/
Eg.word-spacing: 10px;
/*文本修饰text-decoration
常用的属性值 underline:下划线
none:没有下划线
overline:上划线
line-through:中划线* */
Eg.text-decoration: line-through;
6.css文字
/*font-family:字体系列(类型)
系统默认是宋体 * */
/* font-family: "楷体";*/
/*font-size:字体尺寸*/
Eg.font-size: 24px;
/*font-style:字体的样式
常用的属性值:
normal:标准的字体样式
italic:斜体* */
Eg.font-style: italic;
/*font-wight:设置字体的粗细
属性值:
bold:适当加粗* */
Eg.font-weight: bold;
/*CSS字体的简写属性*/
Eg.font:italic bold 36px "黑体" ;(按照顺序编写)
7. css背景
/*背景颜色:background-color*/
Eg.background-color: #0CF;
/*背景图片:background-image:
属性:url指定图片的路径* */
Eg.background-image: url(img/mm.jpg);
/*background-repeat:设置背景图片是否重复以及如何重复
常用的属性值:
默认值:repeat:x轴和y轴重复
repeat-x:背景图片水平方向重复
repeat-y:y轴重复
no-repeat:不重复 * */
Eg.background-repeat:no-repeat;
/*background-position 设置背景图像的起始位置。
*
* 可能用到的属性值
* 图片的显示的位置 图片在浏览器中的位置
* top left
* content: center
* bottom right
Eg.background-position: top right;
/*CSS背景图片的简写属性* /
Eg.background: #f00 url(img/mm.jpg) no-repeat top center;
8.css边框
/*边框的颜色
border-color:边框颜色的简写属性
1)边框颜色默认的顺序:上 右 下 左
2)边框颜色某一边如果没设置,那么取对边的颜色* */
Eg./*border-color:#f00;*/
/*border-left-color:#f00 ;
border-right-color:#00f ;
border-top-color: #0f0;
border-bottom-color: #FF0;*/
/*边框的宽度
border-width边框宽度的简写属性* */
Eg./*border-width: 10px;*/
/*border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;*/
/*一块标签,要想显示边框的效果,必须指定属性:边框的样式:
border-style:边框样式的简写属性* */
Eg./*border-style: solid;*/
/*border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;*/
/*一个div显示边框,使用boder的简写属性*/
Eg.border:1px solid #000 ;
width: 50px;
height: 50px;
8. 盒子模型
盒子模型:div块标签+css进行网页布局
一个盒子属性:
容量:就是给div块标签指定的宽度和高度
/*设置边框*/
Eg.border:1px solid #000;
width: 100px;
height: 100px;
padding-left: 10px ;
#dv1{
/*让div1盒子内边距向右移动10px*/
/*padding-left: 10px;*/
/*给div1设置一个下外边距*/
/*margin-bottom: 10px;*/
}
#dv2{
/*上外边距*/
margin-top: 10px;
}
/*设置盒子的外边距的简写属性默认的方向:上 右 下 左* */
Eg.margin: 150px 0 0 420px;
9. 分类属性之display
/*dispaly
常用的属性值:none 次元素不会被显示 隐藏了!* */
display:none;
display: block; /*此元素将显示为块级元素，此元素前后会带有换行符*/
display: inline;/*默认。此元素会被显示为内联元素，元素前后没有换行符。*/
10. 浮动属性
/*浮动属性float:常用的两个属性值:
left:左浮动
right:右浮动 * */
/*clear:属性:设置一个元素的侧面是否允许其他的浮动元素。
both:在当前两侧都不允许有
浮动元素 * */
总结:实际案例布局时
table表格布局适合框架清晰和内容相对简单的页面布局,同时表格布局更倾向于宏观,需要在布局之前在心中生成所需网页的模型构架,弊端是每一个需要样式的部分都要在该部分的标签中添加相应的样式语句,增加工作量增加语句繁琐度,同时不利于后期修改.
div块标签布局更适合于比较复杂和多元化的页面布局,块标签布局则倾向于微观,需要对于每个块区域进行详细的推演和计算,弊端也正是如此,需要前期的推演和计算,工作难度增加.
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
