JavaEE进阶 --HTML+CSS+JavaScript 基础

一.HTML

1.什么是HTML

HTML(HyperTextMarkupLanguage),超文本标记语眼.

超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

**标记语⾔:**由标签构成的语⾔

HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容. 类似Word⽂档中样式有标题一、标题二等，使用不同的样式就有不同的效果。

2.认识HTML标签

• 标签名(body)放到<>中

• ⼤部分标签成对出现.<标签名>为开始标签,</标签名>

• 少数标签只有开始标签,称为"单标签".

• 开始标签和结束标签之间,写的是标签的内容.

• 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

3.认识HTML文件基本结构

上述所写的格式是不标准的，HTML有自己标准的格式

• html标签是整个html⽂件的根标签(最顶层标签)

• head标签中写⻚⾯的属性.

• body标签中写的是⻚⾯上显⽰的内容

• title 标签中写的是⻚⾯的标题.

使用：

4.HTML常见标签介绍

1）标题标签 h1-h6

有六个,从h1-h6.数字越大,则字体越小

2）段落标签 p

注意：

• p标签描述的段落,前⾯没有缩进.(未来CSS会学)

• ⾃动根据浏览器宽度来决定排版.

• html内容⾸尾处的换行,空格均⽆效.

• 在html中⽂字之间输⼊的多个空格只相当于⼀个空格.

• html中直接输⼊换⾏不会真的换行,而是相当于⼀个空格.

3)换行标签 br

4)图片标签 img

注意：

1. 属性可以有多个,不能写到标签之前

2. 属性之间⽤空格分割,可以是多个空格,也可以是换行.

3. 属性之间不分先后顺序

4. 属性使⽤"键值对"的格式来表⽰.

5）超链接 a

**• href:**必须具备,表示点击后会跳转到哪个页⾯.

• target: 打开方式.默认是_self.如果是_blank则⽤新的标签页打开.

空链接：

6）表格标签

**• table标签:**表⽰整个表格

**• tr:**表⽰表格的⼀行

**• td:**表示⼀个单元格

table 包含tr,tr包含td

7）form标签

8) input标签

• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.代表各种输入控件,单行文本框,按钮,单选框,复选框.

**• name:**给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.

• value: input中的默认值.

**• checked:**默认被选中.(⽤于单选按钮和多选按钮)

（1）文本框、密码框

（2）单选框

（3）多选框

（4）普通按钮

（5）提交按钮

（6）select标签

（7）textarea标签

（8）无语意标签 div&span

• div是独占⼀行的,是⼀个⼤盒子.

• span不独占⼀行,是⼀个小盒子.

5.关于标签中name和value的总结

（1）. name 和 value 的底层职责

• name ：数据的钥匙 。它从不直接显示在页面上，作用是表单提交时告诉服务器"这个值属于哪个字段"。比如 name="username"，服务器收到 username=张三。

• value ：数据的值 。它是双面人：既是后台交互的值，有时候也是屏幕上显示的文字。是否显示完全看标签类型。

（2）为什么有的 value 显示，有的不显示？

二.CSS

1.什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表,用于控制页面的样式.CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果.能够做到页面的样式和 结构分离.

2.CSS基本语法

选择器（标签名等，后续会讲）+{⼀条/N条声明}

• 选择器决定针对谁修改(找谁)

• 声明决定修改啥.(⼲啥)

• 声明的属性是键值对.

注意:

• CSS要写到style标签中(上述举例只是引入CSS的一种方法，后⾯还会介绍其他写法)

• style标签可以放到页面任意位置.⼀般放到head标签内.

• CSS使⽤/**/作为注释.(使⽤ctrl+/快速切换).

3. CSS的引入方式

1）行内样式

2）内部样式

3）外部样式

4）3种引入方式对比

1. 内部样式会出现大量的代码冗余,不方便后期的维护，所以不常用.

2. 行内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.

3. 外部样式，html和css实现了完全的分离,企业开发常用方式.

5）注意

虽然CSS不区分大小写,我们开发时统⼀使用小写字母

如果同时引入多个引入方式，采用就近原则

4.CSS选择器

CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.CSS选择器主要分以下几种: 1. 标签选择器 2. class选择器 3. id选择器 4. 复合选择器 5. 通配符选择器

选择器介绍：

（1）标签选择器

（2）类选择器

（3）ID选择器

（4）通配符选择器

（5）复合选择器

注意：

1. 以上三个标签选择器 div a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选 择器的组合,也可以是任意数量选择器的组合

2. 不⼀定是相邻的标签,也可以是"孙字"标签

3. 如果需要选择多种标签,可以使用 , 分割,如 p, div { } 表示同时选中p标签和div标签. 逗号前后可以是以上任意选择器,也可以是选择器的组合.

三.JavaScript

1.什么是JavaScript?

JavaScript (简称JS), 是⼀个脚本语⾔,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中.

2.HTML、CSS 和 JavaScript 的区别

• HTML:网页的结构(骨)

• CSS:网页的表现(皮)

• JavaScript: 网页的行为，可以和客户端进行交互(魂)

3.JS 的引入方式（和CSS的差不多）

4.基础语法

（1）变量

（2）数据类型

（3）运算符

和Java的运算符几乎相同，得注意一点，比较相同运算符有 "=="和 "==="俩种

（4）数组

（5）函数

语法格式：

（6）对象

1.使用字面量创造对象 （常用）

2.使用 new Object 来创建对象

3.使用构造函数来创造对象

5.JQuery

（1）为何使用JQuery 和 JQuery的引入

由于原生的 JavaScript 代码繁杂，学起来教困难，所以有了JQuery进行了优化，要使用得引入依赖。可以通过官网CDN下载，最好下载到本地（外部地址可能有时访问不了）。Jquery官方共提供了4种类型的JQuery库：

**uncompressed:**非压缩版本(易读,但是⽂件较⼤,传输速度慢)

**minified:**压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)

slim: 精简瘦⾝版,没有Ajax和⼀些特效

slim minified : slim 的压缩版

（2）基本语法

JQuery的代码通常都写在 documentready函数中.

**document ：**整个⽂档对象,⼀个页面就是⼀个⽂档对象,使⽤document表⽰. 这是为了防⽌⽂档在完全加载（就绪）之前运⾏jQuery代码，即在⽂档加载完成后才可以对⻚⾯进 ⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

使用：

简洁版：

（3）JQuery选择器（selector）

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进行操作. JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器。

（4）JQuery事件

（5）操作元素

1.获取/设置元素内容

2.获取/设置元素属性

3.获取/设置css属性

4.添加元素

**1. append():**在被选元素的结尾插⼊内容

2. prepend() : 在被选元素的开头插⼊内容

3. after() : 在被选元素之后插⼊内容

4. before() : 在被选元素之前插⼊内容

5.删除元素

删除元素和内容，⼀般使⽤以下两个jQuery方法：

1. remove() : 删除被选元素（及其⼦元素）

2. empty() : 删除被选元素的子元素。