Java Webday1

目录

一、网页开发基础

1.1 HTML
1.1.1 HTML简介
1.1.2 单标记和双标记
1.1.3 文本控制与文本样式标记
1.1.4 图像标记
1.1.5 表格标记
1.1.6 表单标记
1.1.7列表标记和超链接标记
1.1.8 < div >标记
1.2 CSS技术
1.2.1简介
1.2.2 CSS样式的引用方式
1.2.3 css 选择器和常用属性
1.3 JavaScript基础
1.3.1 DOM相关知识
1.3.2 JavaScript 概述
1.3.3 JavaScript 的使用

一、网页开发基础
1.1 HTML
1.1.1 HTML简介
HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”，其主要通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以通过记事本打开，所以简单的HTML代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”即可生成一个HTML网页。
1.<!DOCTYPE>标记
< !DOCTYPE >标记位于文档最前面，用于向浏览器说明文档使用哪种HTML标准规范。网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型，只有这样浏览器才能该网页作为有效的HTML文档。
2.< html >标记
< html >标记位于<!DOCTYPE>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，< html >标记标志着HTML文档的开始，< /html >标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容
3.< head >标记
< head >标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在< html >标记之后，主要用来封装其他位于文档头部的标记。
4.< body >标记
< body >标记用于定义HTML文档所要显示的内容，也称为主题标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于< body >标记内，< body >标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对< body >标记，且< body >标记必须在< html >标记内，位于< head >标记之后，与< head >标记是并列关系。

1.1.2 单标记和双标记
不同标记描述的内容在浏览器中的显示效果是不一样的。页面中的信息必须放在相应的HTML标记中，才能被浏览器正确解析。大部分标记都是成对出现的，如头部标记< head >、 主体标记< body >,然而也有单个出现的标记，如水平线标记< hr / >。通常将HTML标记分为两大类，分别是“单标记”和“双标记”。
1.单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。
2.双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。

1.1.3 文本控制与文本样式标记
1.段落标记和换行标记
为了使网页中的文字有条理地显示出来，HIML提供了段落标记< p >< /o >,如果希望某段文本强制换行显示，就需要使用换行标记< br/ >。

1.1.4 图像标记
想在HTML网页中显示图像就需要使用图像标记< img / >。

1.1.5 表格标记
在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，可通过插入表格的方式来创建表格，而在HTML网页中要想创建表格，需要使用相关的表格标记才能创建表格。

1.1.6 表单标记
学习表单标记之前，首先需要理解表单的概念。简单地说，表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。其实表单在互联网上随处可见，例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标记定义的。

1.1.7列表标记和超链接标记
1.无序列表< ul >
列表标记分为有序列表和无序列表，由于在HTML中无序列表较为常用，所以下面针对无序列表进行详细的讲解。为了使网页更易读，经常将网页信息以列表的形式呈现。无序列表的各个列表项之间没有顺序级别之分，通常是并列的。
2.超链接标记
一个网站通常由多个页面构成，进入网站时首先看到的是其首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HIML中创建超链接非常简单，只需用< a > < /a >标记环绕需要被链接的对象即可。

1.1.8 < div >标记
div是英文Division的缩写，意为“分割、区城”。< div >标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。在HTML页面中，它以< div >开头，并以< /div >结尾，在< div >与< /div >之间可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在< div >标记中，并且< div >还可以嵌套多层< div >。在实际开发中< div >标记常常与CSS技术搭配使用。

1.2 CSS技术
1.2.1简介
CSS是Cascading Style Sheet的缩写，译作“层叠样式表单”，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在实际开发中，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、 图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

1.2.2 CSS样式的引用方式
要想使用CSS修饰网页，就需要在HTML文档中引入CSS。引入CSS的方式有4种，分别是链入式、行内式(也称为内联样式)、内嵌式和导入式。
1.内嵌式
内嵌式是将CSS代码集中写在HTML文档的< head >头部标记中，并用< style >标记定义。
2.链入式
链入式是将所有的样式放在一个或多 个以 .css为扩展名的外部样式表文件中，通过< link / >标记将外部样式表文件链接到HTML文件中。

1.2.3 css 选择器和常用属性
要想将css样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一样式任务 的部分被称为选择器。
1.标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的样式。
2.类选择器
类选择器使用“.”(英文点号)进行标识，后面紧跟类名。
3. id 选择器
id选择器使用“#”进行标识，后面紧跟id名。
4.通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

1.3 JavaScript基础
1.3.1 DOM相关知识
DOM是Document Object Model (文档对象模型)的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改个文档的内容和结构。
1.节点的访问
在DOM中，HTML文档的各个节点被视为各种类型的Node对象。
2.获取文档中的指定元素
通过遍历节点的访问可以找到文档中指定的元素。

1.3.2 JavaScript 概述
JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。
1. JavaScript 的引入
在HTML文档中，较为常用的引入JavaScripip的方式有两种，一种是在HTML文档中直接嵌入JavaScript 脚本，称为内嵌式;另种是链接外部lvSCrap脚本文件，称为外链式。
( 1)内嵌式
在HTML文档中，通过< scrip >< /script >标签及其相关属性可以引入JavaScript代码。当浏览器读取到< script >标签时，就会解释执行其中的脚本。
(2)外链式
当脚本代码比较复杂或者同一段代码需要被多个网页文件使用时，可以将这些脚本代码放置在一个扩展名为js的文件中，然后通过外链式引入该js文件。
2.数据类型

3.变量
在JavaScript中，使用var命令声明变量，由于JavaScript 是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定。
变量的命名必须遵循命名规则，变量名可以由字母、下划线(_)、 美元符号($),甚至中文组成，但中文命名的方式不建议使用，中间可以是数字、字母或下划线，但是不能有空格、加号、减号等符号，不能使用JavaScript的关键字。

需要注意的是，以上关键字同样不可以用作函数名、对象名及自定义的方法名等。
4.运算符
运算符是程序执行特定算术或操作的符号，用于执行程序代码运算。JavaScript 中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种。
(1)算术运算符
算术运算符用于连接运算表达式，主要包括加(+)、减(-)、乘(*)、除(/)、取模(%)、自增(++)、自减(–)等运算符。

(2)比较运算符
比较运算符在逻辑语句中使用，用于判断变量或值是否相等，返回布尔类型值true或false。

（3）逻辑运算符
逻辑运算符是根据表达式的值来返回真值或假值。

(4) 赋值运算符
最基本的赋值运算符是等于号“="，用于对变量进行赋值。其他运算符可以和赋值运算符联合使用，构成组合赋值运算符。

(5)条件运算符
条件运算符是JavaScript中的一种特殊的三目运算符，它与Java中的三目运算符的使用类似。
5. 条件语句if
所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。
条件语句中最常用的是if判断语句，它的使用与Java语言中的If判断语句相似，是通过判断条件表达式的值为true或者fatse,来确定是否执行某一条语句。可将if语句分为单向判断语句、双向判断语句和多向判断语句。
(1)单向判断语句
单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句。

if(执行条件){
执行语句
}

(2)双向判断语句
双向判断语句是it条件语句的基础形式。

if（执行条件）{
白振川
}else{
大数据2005
}

(3)多向判断语句
多向判断语句是根据表达式的结果判断一个条件，然后根据返回值做进一步的判断。

if（执行条件1）{
执行语句1
}
else if（执行条件2）{
执行语句2
}
else if（执行条件3）{
执行语句3
}
…

1.3.3 JavaScript 的使用
1.函数的定义及调用
在JavaScript中，定义函数是通过function语句实现的。
2.事件处理
采用事件驱动是JavaScript 语言的一个最基本的特征， 所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时， 比如，单击鼠标或按键，它可以触发与这个事件相关联的事件处理程序。事件处理的过程通常分为3步:发生事件、启动事件处理程序和事件处理程序做出反应。
3. 常用对象
(1)Window对象
Window对象表示整个浏览器窗口，它处于对象层次的顶端，可用于获取浏览器窗口的大小、位置，或设置定时器等。在使用时，JavaScript 允许省略Window对象的名称。
(2) Date对象
Date对象是个有关日期和时间的对象。它具有动态性，必须使用new关键字创建一个实例。
(3) String对象
Sring对象是JavaSorpt提供的字符串处理对象，创建对象实例后才能引用，它提供了对字符串进行处理的属性和方法。

2020080605044