前端部分的学习模块与其功能总结

引言

尽管我们通过Java语言，可以完成对任务的功能实现、环境支持等。不过其运作环境只局限在虚拟机，而且显示出的结果实在是令人诟病：

譬如用户菜单的设计，就只能通过代码调整控制台的位置（很多时候由于\t 的间距不等，会很难控制），并且样式实在是一言难尽。。

而Web阶段的学习，对于整日盯着死板的代码的程序员来讲无疑是眼前一亮：丰富的界面，直观的显示，动态的反馈等等等等……

相比于Java需要缜密的逻辑与代码，Web更需要编程者的设计能力和美感。其实在一定程度上，后者的实现更具有挑战性。

(一) HTML

HTML: HyperText Markup Language，超文本标记语言。

顾名思义，是一种用于创建网页的标准标记语言，直接由浏览器解析执行。我们可以通过HTML创建自己的网站，实现自己所想表达的丰富直观的界面。

它的代码便是一个又一个的 标签，不同的标签组合便可以实现我们所想要的不同的结果。

语法：<标签 属性…>内容…</结束标签>
常用的标签大致如下：

排版标签：
p：段落标签。最基础的行标签，单独占据一行
br：换行标签
hr：线段标签。可设置宽高的一条线段
pre：预格式化标签。不会忽略空格和空行
div：块级标签。单独占据一行
span：块级标签。不换行

字体标签：
hn：字体大小标签。n取1~6，超出此范围取边界值
font：字体标签。设置字体颜色，类型
b、strong：粗体显示
i、em：斜体显示
u：下划线显示
s：删除线显示
sub、sup：上下角标
&n：特殊标志。n表示具体标志。如&nbsp为 空格

图片标签：
img：用于导入外部图片

超链接标签：
a：用于转到链接地址

列表标签：
ul：无序列表
ol：有序列表
li：列表项
dl：定义清单
dt：清单项
dd：清单内容

框架标签：
iframe：在浏览器中嵌入另一个界面

表格标签：
table：定义一个表格
tr：定义一行
td：定义该tr的一列

表单标签：
form： 用于、发送信息
input：表单控件的标签名
select：下拉框标签
option：下拉框选项
textarea：一种多行文本框
label：文本控件
button：普通控件
submit：提交按钮
reset：重置按钮
image：图片按钮

多媒体标签：
video：多媒体标签
marquee：跑马灯标签

头标签：
html
head：标题标签
body：身体标签

(二) CSS

CSS： casecade style sheet ，层叠样式表

出现的原因:

1. HTML功能太弱
2. 可以节省流量

作用: 给 html 的各种元素添加样式

语法：

选择器 {
属性：值
}

选择器类型如下：

基本选择器：
标签{}：设定该标签的属性，直接用标签名匹配

类选择器：
“.” + 类名{}：定义类名为该类的标签属性，用类名和 “.” + 类名匹配

ID选择器：
“#” + ID名{}：定义ID名为该类的标签属性，用ID名和 “#” + 类名匹配

全局选择器：
*{}：定义所有标签都有的样式

扩展选择器：

组合选择器：把多个选择器用逗号连接起来，表示多个选择器使共同的样式

后代选择器：把多个选择器用空格连接起来，表示里面的元素

伪类选择器：用冒号定义

• 静态伪类：只能用于超链接 :visited 表示超链接点击之后的样式 :link 表示超链接点击之前的样式
• 动态伪类：":focks" 表示元素获取焦点时 “:hover” 表示当鼠标移动到某个元素上方时 “:active” 表示鼠标鼠标选中元素还没有松开的样式

(三) JavaScript

JavaScript： 嵌入在HTML中的,基于面向对象和事件的脚本语言

出现的原因： 为了给html语言添加一些动态的功能

需要注意： Js中区分大小写，与HTML不同

与HTML的结合方式： 通过 innerHTML 和 innerText 方法

语言特点：

1. Java 中 8 种数据类型需要以该数据类型来定义，而 Js 统一使用 var、let 来定义。前者可定义全局且可反复定义，后者只能为局部
2. 常量统一用 const 定义
3. Js 中有一种未被定义的数据类型：undefined；数字类型一律为number类型；函数也可作为一种数据类型
4. Boolean 类型的转换不再是用 True 和 False, 而是用 0 和 1
5. == 符号比较的是内容，和类型无关；=== 符号表示全等，比较符号和内容
6. 除基本的 while , for 循环无异于 Java 之外，Js 中 的 foreach 循环 中使用 “in” 或 “of” 代替 了 Java 中的 “:” ，前者遍历目标所拥有的属性，后者遍历值(如数组)。
7. Js 中函数的箭头表达式类似于 Java 中的 Lambda 表达式，只是将 “->” 换成了 “=>”
   等等。