Web前端
Java为什么火?
编程语言:和计算机打交道--写一个软件
CS模式:基于客户端Client-服务器Server端的访问方式
优点:
有客户端：客户端可以帮助我们解决很多数据，然后将处理好的数据发送给服务器
可以有效的降低服务器的压力
缺点:
有客户端:
更新客户端：准备大量的数据包让客户去更新
客户端版本不一致:
银行软件
1.0-2分
1.1-3分
游戏软件--
100
80
派出所：
1.0-照相
1.1-录指纹
客户端安装的环境不同:
代表语言：
C C++
BS模式:基于浏览器Browser-服务器Server的数据访问模式
有客户端:我们大家使用的浏览器
服务器：软件供应商提供给我们的数据访问地址（数据接口）
优点
和服务器解耦，更新版本的时候只需要更新服务器即可
缺点
所有的数据，所有的业务逻辑都需要放在服务器端去处理
网络带宽：决定浏览器于服务器的通讯时间，响应时间
服务器:分布式--架构
语言:
PHP Python Ruby Java
Javase--JavaEE
--JavaMe
浏览器如何与服务器进行通讯(网络的三大基石)
URL:统一资源定位符(定位资源位置)
https://www.baidu.com/img/bd_logo1.png
https://www.baidu.com/img/bd_logo1.png
https://www.baidu.com/s?wd=shsxt
https://----协议
/s-----服务器资源
?wd=shsxt----请求参数
HTTP 超文本传输协议(传输的格式)
对请求的数据和返回的数据--数据的封装要求
JavaEE的时候会具体讲解
所有基于BS模式开发都需要封装成这样的数据格式,非常重要
Iphone6 iphone6s
HTML 超文本标记语言(显示数据)
hypertext markup language
把超文本中的数据显示出来，
文本
图片
<图片 地址=“https://www.baidu.com/img/bd_logo1.png” 宽度=”100像素” />
<img src=”https://www.baidu.com/img/bd_logo1.png” width =”100px”/>
你好： <b><i><u>
用尖括号括起来一个标记名称（是被定义好的）,如果是错误的标记，不会被解析
超文本:
- 超链接
如果一个文档中使用超链接引入了其他的文本，那么我们可以从A网站访问B网站，同理B可以访问C,C可以访问A,那么全球所有的网站就是一个大网站，可以相互访问，这些我们就称之为超文本.
2.多媒体
除了文本之外还可以表示的内容比如图片，音乐,视频，表格，超链接....，我们就称之为超文本
W3C www 万维网 c联盟
开始定义HTML的标准-----
- 1.x
- 2.x
- 3.x
- 4.x-----主流的还停留在HTML4
- 5.x--最新的，有些标准还没有被实现
浏览器厂商做实现
浏览器内核--渲染引擎
MS:IE:Trident内核--最坑--群众基数大，用不用不知道
Googole:Chrome:Blink--慢慢变强
FireFox:Gecko--慢慢变弱
Safari:AppleWebKit--一直很稳定
| 360 | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 双核：同时只使用一核，会动态切换
|
| chrome | Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 |
| FireFox(ff) | Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0 |
| IE | |
| Safar |
|
| <script> alert(window.navigator.userAgent); </script>
创建一个 sxt.html | |
IDE工具
学习编程，切记不要把软件装在有中文目录的文件夹中
安装软件的时候稍微看一下安装目录，保证自己能够找得到
创建第一个项目
创建 --Web项目 ，给项目取一个名字（除了特殊规则之外，要求见名知意）
Css:主要是将来存放CSS样式文件的
Img:存放图片
Js：主要是将来存放JS文件的
Html文件
将来工作的时候，根据业务模块有可能创建不同的文件夹，然后将各个模块中的HTML存放到不同的文件夹中
创建不同的HTML页面
| <!DOCTYPE html> 声明文档的类型(html文件版本为h5) <html> 这是一个HTML标签，由开始标签和结束标签共同组成 一个HTML包括两部分，head和body Head主要包含了页面的描述信息,一般不显示在浏览器页面 Body浏览器具体显示的内容 <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> </body> </html> |
| Html绝大部分标签都是向下兼容的,以后大家新建HTML文件的时候默认就创建为HTML5的,你不但可以使用以前版本的标签，还可以使用HTML5新定义的标签 |
Head
Title:页面的标题标签，默认值为当前页面的URL地址
Meta
Name:属性
Value:值
Body
| 普通文本 | 所有的文本不会自动换行，即使换行他也会自动合并到一起，中间有一个空格 如果一行的文本超出了浏览器的宽度，会自动换行
|
| br | 换行标签 是一个独立标记，开始和结束都在一起
|
| b | Bold 加粗 |
| i | 倾斜 |
| u | 下划线 |
| sub | 向下降低半个字节 |
| sup | 向上提高半个字节 |
| del | 中划线 |
| font | 属性都写在开始标签里面 一个标签中可以有多个属性，多个属性用空格隔开即可 一组标签中用=来连接属性的名字(size)和属性的值(1) 推荐书写的时候用单引号或者双引号将值括起来,切记不要一单一双
|
| hr | 换行线,单独标记 Width 长度 <hr width="300px" /> <hr width="30%" /> 绝对：不随着外界的改变而改变 相对：随着外部的参照物
|
| 标题标签 | h1-h6 默认定义了6种标题 Align:排列 Center Left Right 任何属性都有默认值，如果我们不定义，就去用他的默认值 不同标签的属性默认值是不同的 |
| P | 段落标签 |
| div | 块级元素 |
| span | 行内元素 |
| 实体引用字符 | 就是为了替代页面中一些特殊的字符
格式为 &xxx; xxx-->代表了字符的含义或者缩写 *千万不要背过去，现用现查
|
| pre | 可以很好的保证页面的普通文本不会被合并到一行 会保持文本原有的格式 |
| 注释 | <!-- 内容 --> 会将内容部分给注释掉,就不会出现在页面中
|
| 有序列表 | ol嵌套li标签配合使用 type属性：可以更换顺序编号
|
| 无序列表 | ul嵌套li标签配合使用 |
| 多媒体资源 |
|
| img | 可以在页面中展示一个图片 src属性负责定位图片的地址 如果地址写错就会访问不到指定的资源 如果在同一目录直接写目录名就相当于访问了这个目录 如果不在同一目录，退出一层使用一个 ../
Width&height设置图片的大小通过设置宽width和高height属性,但是不建议两个属性同事修改，会破坏图片的等比缩放,导致图片失真 title 给合适的标签选择合适的属性 alt 1图片链接失效的时候显示文本值 2图片被爬取的时候充当图片说明
|
| embed | 属于4.x的标签，相对群众基础大
|
| vedio | 视频 controls="controls" |
| audio | 音频 controls="controls" |
| table | 组合标签 里面包含tr--其实往深了讲还有 thead tbody tr里面包含了td,th
表格的宽度width，边框border 边框间隔cellspacing 单个表格 width align 复杂的就是表格的合并 合并行 rowspan--竖着 合并列 colspan--横着 |
| 超链接 | 在当前页面可以连接到别的页面 a标签需要把要点击的元素括起来 前面学的标签基本上可以作为点击的元素（img hx b） 链接要跳转的地址由href属性控制 属性的值可以为相对路径或者绝对路径 相对路径的话需要找准地址 绝对路径一定要加上请求的协议
target属性可以控制打开页面的位置 默认_self 在当前页面打开链接 _blank 在一个新页面打开链接
a标签页跳转页面内部资源 要跳转首先需要提前设置好 给要跳转到的元素设置ID属性 在要跳转元素的前面设置a name属性 然后通过 #id 或者 #name都可以在页面内部跳转
可以发送邮件 不常用，一个项目用一两次就够了
|
| 表单 | 一套组合标签 form > 表单域 当我提交的时候，会将表单域的数据提交 form有一个action属性，他决定了表单的值要提交的地址 默认提交到当前页面
<form action=”sxt” method=””> <input type=”text” name=”aaa”> <input type=”text” name=”bbb”> <input type=”submit” value=”提交”> </form> <input type=”text” name=”ccc”>
当我点击提交按钮的时候会提交表单域中所有的数据 数据会被提交到action属性对应的链接 以method定义的方式提交数据 get post get会将请求参数显示在地址栏，post不会 一次请求可以提交多组请求参数 组与组之间用&隔开，一组的name和值用=号链接 特殊字会被url进行转义，其中汉字也属于特殊字符 一个表单域会不会被提交取决于他的name属性, 即使表单不填写值，只要有name属性他也会被提交,提交一个空字符串
请求参数于请求地址用?隔开
|
| https://cn.bing.com/search请求地址 q
| |
| 表单域 | input type text 文本框 name:提交表单 value:可以设置默认值,默认为空字符串 placeholder:设置提示信息，html5新特性 maxlength设置文本框最大接受的字符数 size设置文本框的宽度，但是不常用（不精确） type passwod 和text基本完全一样，只不过输入的时候变成* |
| 单选按钮 | type=radio 单选按钮一组只能选中一个 按照name属性进行分组 单选按钮的默认值为on 一般根据业务需求会对value属性进行修改 |
| 复选按钮 | type=checkbox 一组中可以选择一个或者多个 name属性必须要有，但是必须勾选的复选按钮才会被提交 一般根据业务需求要会去选择单选或者复选，但是单选有个问题只能选上，不能去掉（学习JS之前） |
| 下拉列表 | select是一套组合标签 select option select就是为了代替多选项情况下的单选和复选按钮 select name属性：提交
option value=”” text=”” 提交的时候，如果有value值直接提交value值，如果没有value值提交文本值 multiple="multiple" size="8" 可以让select选择多个选项 |
| 文本域 | textarea name 为了提交 cols宽 rows高
没有value属性，设置默认值在textarea标签中间设置 |
| 上传文件 | type=file 现在并不是真正的文件上传，只是传递了一个文件的名字 将来中高级需要专门学习文件上传 |
| 按钮 | type=button
一般用来触发JS事件而不进行数据的提交
|
| 标签的默认选中 | 单选按钮、复选按钮 checked 下拉列表 selected |
|
| readonly 让表单域只读，但是表单域还是可以提交 disabled直接让表单域失效，无法修改并且不会被提交 |
| 标签在书写的时候一定要写成小写的 写成大写的不规范，但是不报错，原因在于浏览器有一定的容错性
| |
框架
| iframe | 内嵌框架，可以把别的页面嵌入到当前页面中来 src:页面的路径 width：框架的宽度 height：框架的高度
父页面的链接在子页面打开 1首先给iframe通过name属性定义一个名字 2父页面的超链接的target属性=iframe的名字
子页面的链接在父页面打开 1.给子页面的超链接的target属性修改为_parent即可 |
| Frameset | 框架集，使用的时候先删除body标签 需要定义框架集的大小 cols，左右分 rows，上下分 分完之后需要固定数量的frame填充位置 frame name src 其中frame还可以再分，只要用frameset替换掉frame即可
Aframe的链接在Bframe中使用 给Bframe定义个名字 Aframe的超链接的target属性定位到Bframe的名字
跳出整个框架集刷新页面 超链接的target=”_top” target=”_parent”即可
|
|
|
|
|
|
|
扫一扫
2587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
