黑马程序员技术交流社区
标题:
WEB基础_前端
[打印本页]
作者:
hx79481068
时间:
2019-9-19 09:04
标题:
WEB基础_前端
1. web概念概述
*JavaWeb :
*使用Java语言开发基于互联网的项目
* 软件架构
1 . C\S : client\Server 客户端/服务器
*在用户本地有一个客户端,在远程有一个服务器程序
* 优点 :
缺点:
1 . 开发 , 安装 , 部署 , 维护麻烦
2 . B\S : Browser/Sever 浏览器/服务器
*只需要一个浏览器,用户通过不同的网址(URL) , 客户访问不同的服务器端程序
优点 :
1. 开发. 安装,部署.维护简单
缺点 :
1. 如果应用过大 , 用户体验可能会打折
2 . 对硬件要求过高
*B/S 架构详解
*资源分类
*1 . 静态资源
*使用静态网页开发技术发布得到资源
*特点 :
*所有用户访问, 得到的结果是意义的.
* 如 : 文本 图片 音频 视频 ,HTML , CSS ,JavaScript
* 如果用户请求的是静态资源,那么服务器会将静态资源直接发送给浏览器.浏览器中内置了静态资源的解析引擎.可以展示静态资源
* 2 . 动态资源
*使用动态网页及时发布的资源
*特点
*所有用户访问,得到的结果可能不一样
*如 : jsp/servlet,php.asp..
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,在发送给浏览器
* 我们要学习动态资源,必须先学习静态资源 !
* 静态资源
HTML :
2. HTML
< br > 换行
< !DOCTYPE html > html 中定义文档文件
< meta charset = "字符集">
< hr > 显示一条水平线
< width> 宽度
< b > 字体加粗
< i > 字体斜体
< font > 字体标签 属性 face='字体名' size='大小' color='颜色'
*属性定义
*color :
1 . 英文单词 : red ,green .blue
2 . rgb(值1 ,值2 , 值3 ) : 值的范围 : 0~255
3 . # 值1,值2,值3 值得范围 00~FF之间.
*width
1.数值 : wdith=;20; 数值的单位,默认是px(像素)
列表标签
<dl><dt> 分级标签
<ol><li> 有序列表 : type :设置排序文本
<ul><li>无序标签
链接标签
<a>:定义一个超链接
*属性 加上self =blank 新建窗口打开
herg : 指定访问资源的URL 路径
target : 指定打开资源的方式
块标签
<Span> : 文本信息在一行展示, 行内标签, 内联标签
<div> : 每一个div 占满一整行 , 块级标签
语义标签 :html 5 中为了提高程序的可读性.提供了一些标签
<header> 头
<footer> 腿
表格标签 :
* table :定义表格 : border :边框 width :宽度 cellpadding : 定义内容单元格之间的距离
cellscing 定义
cell
* tr : 定义行
* td : 定义列
* th : 定义表头
HTML 表单标签
*表单:
*概念 : 用于采集用户输入的数据的.用于和服务器进行交互.
*使用的标签 : form :用于定义表单的,可定一个范围,范围代表采集用户数据的范围
*属性
*action : 指定提交数据的URL
*method : 指定提交方式
*分类 一共有7种类.两种比较常见
1. Post :1. 请求参数不会在地址栏中显示
2.请求参数大小没有大小限制
3.不太安全
2 . Get ;1.请求参数会在地址栏中显示
2.请求参数大小有限制
3.太不安全.
*表单中的数据想要被提交 . 必须指定其 name 属性
*表单项标签
input : 可以通过type属性值,改变元素展示样式
*type属性 :
*text 文本输入框,默认值
*placeholder : 指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息.
*password : 密码输入框
* radio 单选框
*注意
1.想要多个单选框实现单选的效果.则多个单选框的name属性必须一样
2.一般会给每一个单选框提供value属性,指定被选中后提交的值
3.checked属性,可以指定默认值
*checkbox : 复选框
*注意 :
1. 一般会给每一个单选框提供value属性, 指定其被选中后提交的值
2. checked 属性,可以指定默认值 ,
file :文件选择框
* type = "file"
hidden : 隐藏域 .用于提交一些信息
*按钮
submit : 提交按钮,可以提交表单
button : 普通按钮
image : 图片提交按钮
*src 属性指定图片的路径
* label指定输入项的文字描述信息
*注意 :
*label的for属性一般会和 iput的 id属性对应.如果对应了 ,则点击label区域,会让input输入框获取焦点.
*select : 下拉列表
*子元素 : option ,指定列表项
*textarea : 文本域
* cols : 指定列数, 每一行有多少个字符
* rows : 默认多少行
Css 使用
CSS 基本语法 :
*格式 :
选择器 {
属性名1 :属性值1
属性名2 :属性值2
...
}
*选择器 : 筛选具有相似特征的元素 .
*注意 :
*每一对属性, 需要是使用 ; 隔开
最后一对可以不加分号
选择器 ; 筛选具有相似特征的元素
*分类 :
1 . 基本选择器
1. id选择器 : 选择具体的id属性值的元素
# 语法 : #id属性值{ }
2. 元素选择器
*语法 : 标签名称{ }
* 注意 : id选择器优先级高于元素选择器
3. 类选择器
* 语法 : .class属性{ }
2 . 扩展选择器
1 . * 表示选择所有元素 .
2 . 并集选择器 :
*选择器1,选择器2
3 . 子选择器
筛选选择器1下的选择器2
* 语法 : 选择器1 空格 选择器2{
}
4 . 父选择器 筛选选择器 2 的父元素选择器1
*语法 : 选择器1 > 选择器2 { }
5 . 属性选择器 : 选择元素名称 , 属性名 = 属性值的元素
* 语法 : 元素名称 [属性名='属性值'] { }
6. 伪类选择器 : 选择一些元素具有的状态
*语法 : 元素 : 状态 { }
*如 : < a >
*状态 :
*link ; 初始化的状态
*visited : 被访问的状态
*active :正在访问的状态
*hover: 鼠标悬浮的状态
Css属性 :
1.字体, 文本
* font -size : 字体大小
* color : 颜色
*text - aligh : 对其方式
*line-hight : 行度
2.背景
backgroud;
3.边框
border : 设置边框 , 符合属性
4 . 尺寸
*width : 宽度
* height : 高度
5.盒子模型 控制布局
*margin : 外边距
*padding : 内边距
*默认情况下内边距会影响整个盒子的大小
* box_suzing : border - box ; 设置盒子属性, 让width 和 hright 就是最终盒子的大小
*float : 浮动
* left
* right
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2