java基础-网页部分

* HTML
* HTML: HyperText Markup Language 超文本标记语言。
* HTML是最基础的网页语言。
* HTML的代码都是由标签所组成。

* HTML的基本格式 b
<html>
<head>
存放属性的信息,辅助性的信息
引入外部的文件(重要)
会先加载
</head>
<body>
存放的是真正的数据
</body>
</html>

* 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
* 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
* 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。



* MyEclipse 提供了安装包
* 安装JDK,配置环境变量
* 安装MyEclipse。

* 配置

* 配置工作空间的编码(采用UTF-8编码)(安装了myeclipse,先去配置)

* Window—preferences—General--workspace—选择UTF-8编码

* 创建HTML的文件后,如果不是UTF-8的编码,可以进行设置。
* Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码

* 创建HTML的文件后,可以选择打开方式,设置默认的打开方式。
* Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok


* (编写HTML)创建web的项目
* 创建web的项目
* 右键 -- 选择web project -- 其名称 -- 完成就ok。

* 编写HTML的文件
* 在WebRoot目录下 -- 右键 -- new -- myeclipse -- web -- 选择html的基本模板 -- 其名称 -- 完成。


* HTML的真正的标签
* 排版的标签
* <!-- --> HTML的注释
* <br /> 换行标签
* <hr /> 一条水平线

排版标签
* <br /> 换行
* <hr /> 一条水平线
* color: 颜色
* 值的写法:两种
1)直接写英文的单词(red green blue)
2)RGB三原色(red green blue) #ab1255
* width: 宽度
* 值两种写法:      1) 200px;
2) 可以写百分比
区别:百分比跟着浏览器的大小而改变,像素值不会。

* <p></p> 段落标签
* 段落标签的开始和结束位置留一空行。
* align:对齐方式

* &nbsp; 代表空格


* 在浏览器声明一块区域,区域中放入其他(文字,子标签)
* <div></div> +CSS+DIV在网页进行布局(美工)
* <span></span>
* div块级元素(换行的符号)
* span标签不会换行 行内元素


* 字体标签
* <font>字体的内容</font>

* 字体标签:
* <font></font>
* color: 颜色
* size: 字体的大小
* 最大值和最小值
* 最小值是:1
* 最大值是:7
* 默认值: 3
* 值的写法 +2 (3+2)
* face: 字体的类型

* 标题标签
* <h1></h1>
...
 <h6></h6>
* 特点:逐渐缩小


* 粗体
* <b></b>
* 斜体
* <i></i>

* 标签可以嵌套的
<b><i>文本的内容</i></b>

* 特殊字符
* < &lt;
* > &gt;
* & &amp;


* 滚动的字幕(忘了吧)



* 列表标签(*****)
* 数据格式化列表

<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
* 自动对齐,缩进的
</dl>

* 有序列表和无序列表
* 有序
<ol>
<li>数据的条目</li>
<li>数据的条目</li>
<li>数据的条目</li>
</ol>

* ol的属性
* type="a"
* start="" 从哪开始

* 无序(用的最多)
<ul>
<li>数据条目</li>
<li>数据条目</li>
<li>数据条目</li>
</ul>
* ul的属性
* type=""


* 图片标签(*****)
<img />
* 属性:
* src="图片的地址"
* width="图片的显示宽度"
* height:图片显示的高度
* alt:图片的说明文字


* 超链接标签(*****)
* 写法:<a></a>

* 链接资源
* 必须要指定属性:href="链接的地址"
* 需要编写协议
* HTTP
* 默认file文件的协议
* 如果浏览器可以解析文件,默认会打开文件。
* 如果浏览器不可以解析文件,弹出下载窗口。
* 支持自定义协议
* 浏览器解析不了的协议,默认找操作系统的引用程序。

* 定位资源
* name 定义锚点
* 点击 href="#锚点名称"


* 表格标签(*****)
* 把数据封装成表格。
* 表格标签
<table>
<caption>用户列表</caption>
<tr>
<th>数据</th>
<th>数据</th>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
</table>

table的属性
* border: 边框
* width: 宽度
* height: 高度

tr的属性
* align:中间的文字的对齐方式

td获取th
区别:th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头

td的属性
* width 宽度
* height 高度
* 合并单元格(值的写法:合并几个单元格,值就写几)
* 行合并 rowspan=""
* 列合并 colspan=""

* <caption></caption>必须要写在table的中间


* 表单标签(**********)
* 收集用户输入的数据

* 表单的标签
<form >
* form的属性
* action="表单的提交路径"
* http://www.baidu.com
* html页面
* method="提交方式(默认是get方式)"(面试题)
* form表单的提交方式有哪些?(get和post的区别)
* 答:form表单提交方式有很多,常用的有两种post和get
* post和get提交方式的区别:
* get方式会把参数列表显示在地址栏上,post方式不会(请求体)。
* get方式说明网站安全级别较低,post安全级别较高。
* get方式不支持大数据,post支持大数据。

* 推荐大家使用post方式。

* 用户输入的内容
<input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
* name属性必须要指定,value可以看情况指定

* type="text" 普通的文本框
* name必须指定

* type="password" 密码框
* * name必须指定

* type="radio" 单选按钮
* name必须指定 value必须指定
* name的属性,值要相同
* 默认值:checked=checked或者true

* type="checkbox" 多选按钮
* name必须指定 value必须指定
* 默认值:checked=checked或者true

* type="reset" 重置:恢复到最初的状态
* type="submit" 提交表单
* 点击提交后,地址栏发生了变化(?sex=on)
* 在普通的文本框上添加name属性 name="username"之后,点击提交,地址栏发生了变化(?username=haha&sex=on)
String str = "?username=haha&sex=on";
* ?username=zhangsan&password=123&sex=nan&love=zq

* type="file" 选择文件
* name属性指定
* type="hidden" 隐藏组件
* name指定 value指定

* type="button" 按钮
* value="显示的文字"
* 和js(javascript) 绑定事件

* type="image" 图片
* 提交 引入外部的一个文件(图片)

* 声明选择框
<select name="city">
<option value="bj"></option>
<option value="sh"></option>
</select>

* <textarea>文本域
* rows="行"
* clos="列"
* name属性指定
* selected="selected" 代表默认值
</form>


* 框架标签(了解)
* 对网页进行布局

<frameset rows="150,*">
<frame > 代表上半部分
<frame > 代表下半部分
</frameset>

* 前提条件:不能写在<body>标签的内部和下面

* CSS
* CSS的简介
* CSS:cascading style sheet :层叠样式表。
* 做什么用:设置网页的显示效果(设置样式)。
* CSS将网页显示的效果和内容分离。(耦合性)

超<font>文本</font>标签语言

* HTML只需要把文本内容封装起来,不用属性,用CSS的代码来控制显示效果。
* 如果开发了多套CSS的代码,都不用修改HTML的代码。

* CSS和HTML的结合(*****)
* CSS与HTML的结合方式(4种)
* 在html的标签上,提供了一个(属性),style="CSS的代码"
* 在HTML的文件,提供了一个(标签) <style type="text/css">CSS的代码</style>,这个标签放在<head></head>的中间

* 引入外部的文件的方式(引入CSS的文件,定义一个css文件(后缀名名  demo.css))(经常使用的方式)
* @import url("CSS文件的地址"); 属性必须要写<style></style>内部。大写和小写都没有问题。(注意:必须有;)

* 引入外部文件的方式,通过一个<link> 写在<head></head>中间, 不要放在<style>中间(经常使用)
* rel:代表当前和引入文件之间的关系
* type:
* href:引入CSS文件的地址


* CSS的优先级(*****)和规范
* 从上到下,由外到内,优先级是从低到高的。(一般情况下)(*****)
* 标签名选择器 < 类选择器 < ID选择器 < style属性 (特殊情况下)(*****)

* 规范
* CSS的写法: div{CSS的属性名:值;CSS的属性名:值;...}
* 如果一个属性有多个值,值与值之间使用空格隔开
* 例子 div{ xx:yy zz aa }


* CSS的选择器(*****)
* CSS的选择器
* 告诉CSS的代码作用在哪个标签上。
* 基本选择器
* 标签名选择器 div{} span{}
* 类选择器:在HTML的标签上,提供了属性 class,定位到div的标签(美工经常使用的方式)
* 写法: .class的名称 (.hehe{CSS的代码})
* 设置不同的标签,具有相同的样式

* ID选择器
* 在HTML的标签上,提供的属性 设置样式
* 写法: #id的名称 (#haha{CSS的代码})
* 一般情况下:设置不同的ID
* 一般情况下给js语言来使用。

* 扩展选择器
* 关联选择器:标签可以嵌套,标签与标签之间的关系。
* 写法: 中间用空格隔开 例子(div font{CSS的代码})

* 组合选择器:对多个不同的选择器进行相同的样式
* 写法:在多个不同的选择器之间用 , 隔开

* 伪元素选择器: 定义好的一些选择器,用就ok。
* 如果使用超链接伪元素选择器:使用顺序: L V H A


* CSS的布局(了解)(CSS+DIV进行布局)
<div>
<div>
<img />
</div>
<div>
<font>领导很忙</font>
</div>
</div>


* JAVASCRIPT(JavaScript简写js,文件的后缀名也是  demo.js)(*****)
* javascript的简介
* js是基于对象和事件驱动的脚本语言,作用在客户端(浏览器)上。
* js的特点:
* 交互性
* 安全性:(不可以访问本地的硬盘)
* 跨平台性:因为浏览器就可以解析js的文件。


* javascript和java不同(一点关系没有)(雷锋和雷峰塔)
* Netscape(网景),静态的效果。livescript(javascript的前身)
* java诞生了,升级了,改名(javascript),火了。
* 巨头:自己开发一套(jscript)
* 找一些公司推出的标准: SUN 微软 ECMA(欧洲计算机制造协会),联合推出现在的标准。

* ECMAScript:标准。基础上扩展。

* js的基于对象,java是面向对象。
* js解析就可以执行,java先编译再执行。
* js是弱类型的语言,java是强类型语言。

* javascript语言的组成
* ECMAScript 标准(js的语法,变量,函数)
* BOM (Browser Object Model) 浏览器对象模型
* DOM (Document Object Model) 文档对象模型


* javascript的语法
* 把js和HTML的结合一起。(2两种方式)
* js和HTML的结合
* HTML的文件提供了一个标签 <script type="text/javascript">js的代码</script>,标签可以放在HTML文件的任意位置上。

* 引入外部的文件,有一个外部的文件。编写js文件。
* <script src="引入js文件(相对路径)" >
* 如果script通过src的属性引入了外部的文件,里面的js代码就不会执行了。(*****)

* </script>,标签可以放在HTML文件的任意位置上。


* 关键字
* var 声明变量

* 标示符
* 和java一样

* 注释
* 和java一样

* 变量
* 声明变量,只使用一个关键字 var num = 12;  var str = "abc"; 
* 5种基本数据类型
* Undefined、Null、Boolean、Number 和 String 

* 5种基本数据类型
* Undefined、Null、Boolean、Number 和 String 

* String 字符串类型
* js中双引号和单引号都代表的是字符串
* Number 数字类型
* 不区分整数和小数
* Boolean 布尔类型
* Null 空,给引用赋值的
* Undefined 未定义(声明变量,没有赋值)

* 声明变量,使用var关键字
* typeof() 判断当前变量是什么类型的数据

* 运算符
* js的运算符
* 算术运算符
* 0或者null是false,非0或者非null是true,默认用1表示。
var num = 3710;
alert(num/1000*1000);
* 不区分整数和小数
* 赋值运算符
* 和java是一样的
* 比较运算符
* == 比较值是否相同
* === 比较值和类型是否相同
* 逻辑运算符
* 和java中一样

* 三元运算符
条件?值1:值2


* js的数组
* js的数组
* java String [] str = {};
* 声明数组
* var arr = [12,34,55];
* var arr = new Array(5); 声明数组,长度是5
* var arr = new Array(2,3,4); 声明数组,元素是2 3 4

* 数组的属性
* 长度:length
* 数组的长度是可变的。


* js的方法
* java中 public String 方法名称(参数列表(int num,String str)){
方法体;
return null;
}

* js中,通过关键字function 声明方法。

function 方法名称(参数列表 (num,str)){
方法体;
return;
}

* 参数列表:不能使用var关键字
* 返回值:可写可不写的,如果有写返回值,如果没有,返回值可以省略不写。

* 调用执行。

* 在函数的内部,有一个数组,装传过来的参数的
arguments


* javascript的对象和API

* BOM 浏览器对象模型

* DOM 文档对象模型




本内容总结来源于传智播客

















  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园信息化系统解决方案旨在通过先进的信息技术,实现教育的全方位创新和优质资源的普及共享。该方案依据国家和地方政策背景,如教育部《教育信息化“十三五”规划》和《教育信息化十年发展规划》,以信息技术的革命性影响为指导,推进教育信息化建设,实现教育思想和方法的创新。 技术发展为智慧校园建设提供了强有力的支撑。方案涵盖了互连互通、优质资源共享、宽带网络、移动APP、电子书包、电子教学白板、3D打印、VR虚拟教学等技术应用,以及大数据和云计算技术,提升了教学数据记录和分析水平。此外,教育资源公共服务平台、教育管理公共服务平台等平台建设,进一步提高了教学、管控的效率。 智慧校园系统由智慧教学、智慧管控和智慧办公三大部分组成,各自具有丰富的应用场景。智慧教学包括微课、公开课、精品课等教学资源的整合和共享,支持在线编辑、录播资源、教学分析等功能。智慧管控则通过平安校园、可视对讲、紧急求助、视频监控等手段,保障校园安全。智慧办公则利用远程视讯、无纸化会议、数字会议等技术,提高行政效率和会议质量。 教育录播系统作为智慧校园的重要组成部分,提供了一套满足学校和教育局需求的解决方案。它包括标准课室、微格课室、精品课室等,通过自动五机位方案、高保真音频采集、一键式录课等功能,实现了优质教学资源的录制和共享。此外,录播系统还包括互动教学、录播班班通、教育中控、校园广播等应用,促进了教育资源的均衡化发展。 智慧办公的另一重点是无纸化会议和数字会议系统的建设,它们通过高效的文件管理、会议文件保密处理、本地会议的音频传输和摄像跟踪等功能,实现了会议的高效化和集中管控。这些系统不仅提高了会议的效率和质量,还通过一键管控、无线管控等设计,简化了操作流程,使得会议更加便捷和环保。 总之,智慧校园信息化系统解决方案通过整合先进的信息技术和教学资源,不仅提升了教育质量和管理效率,还为实现教育均衡化和资源共享提供了有力支持,推动了教育现代化的进程。
智慧校园信息化系统解决方案旨在通过先进的信息技术,实现教育的全方位创新和优质资源的普及共享。该方案依据国家和地方政策背景,如教育部《教育信息化“十三五”规划》和《教育信息化十年发展规划》,以信息技术的革命性影响为指导,推进教育信息化建设,实现教育思想和方法的创新。 技术发展为智慧校园建设提供了强有力的支撑。方案涵盖了互连互通、优质资源共享、宽带网络、移动APP、电子书包、电子教学白板、3D打印、VR虚拟教学等技术应用,以及大数据和云计算技术,提升了教学数据记录和分析水平。此外,教育资源公共服务平台、教育管理公共服务平台等平台建设,进一步提高了教学、管控的效率。 智慧校园系统由智慧教学、智慧管控和智慧办公三大部分组成,各自具有丰富的应用场景。智慧教学包括微课、公开课、精品课等教学资源的整合和共享,支持在线编辑、录播资源、教学分析等功能。智慧管控则通过平安校园、可视对讲、紧急求助、视频监控等手段,保障校园安全。智慧办公则利用远程视讯、无纸化会议、数字会议等技术,提高行政效率和会议质量。 教育录播系统作为智慧校园的重要组成部分,提供了一套满足学校和教育局需求的解决方案。它包括标准课室、微格课室、精品课室等,通过自动五机位方案、高保真音频采集、一键式录课等功能,实现了优质教学资源的录制和共享。此外,录播系统还包括互动教学、录播班班通、教育中控、校园广播等应用,促进了教育资源的均衡化发展。 智慧办公的另一重点是无纸化会议和数字会议系统的建设,它们通过高效的文件管理、会议文件保密处理、本地会议的音频传输和摄像跟踪等功能,实现了会议的高效化和集中管控。这些系统不仅提高了会议的效率和质量,还通过一键管控、无线管控等设计,简化了操作流程,使得会议更加便捷和环保。 总之,智慧校园信息化系统解决方案通过整合先进的信息技术和教学资源,不仅提升了教育质量和管理效率,还为实现教育均衡化和资源共享提供了有力支持,推动了教育现代化的进程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值