JavaWeb前端基础知识（1）

（包括web前端基本知识，基础标签，HTML，CSS，JS的基本知识）

一.web前端基本知识

1.web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(World Wide Web Consortium，万维网联盟)负责制定,

三个组成部分:

·HTML:负责网页的结构(页面元素和内容)。

·CSS:负责网页的表现(页面元素的外观、位置等页面样式，如:颜色、大小等)。

·JavaScript:负责网页的行为(交互效果)。

2.HTML、CSS

HTML(HyperTextMarkup Language):超文本标记语言。

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言:由标签构成的语言

·HTML标签都是预定义好的。例如:使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

·HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层样式表，用于控制页面的样式(表现)

3.HTML快速入门

1.新建文本文件，后缀名改为.html

2.编写 HTML结构标签

3.在<body>中填写内容

4.HTML结构标签

<html>

<head>

</head>

<body>

</body>

</html>

5.特点

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

6. 什么是 Javascript

·JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

·JavaScript 和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

·JavaScript 在1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准,

·ECMAScript6(ES6)是最新的JavaScript版本(发布于2015年)。

二.基础标签

1.图片标签：<img>

常见属性：

·src：指定图像的ur1(绝对路径/相对路径)

·width：图像的宽度(像素/相对于父元素的百分比)

·height：图像的高度(像素/相对于父元素的百分比)

2.标题：<hn> n级标题。eg:<h1>一级标题。

3.<hr> 水平分割线

4. <span>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

·特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

5.音频、视频标签

视频标签:<video>

src:规定视频的ur1

controls:显示播放控件 eg：controls=“controls”

width:播放器的宽度

height:播放器的高度

音频标签:<audio>

src:规定音频的ur1

controls:显示播放控件eg：controls=“controls”

6.换行、段落标签换行: <br>; 段落: <p)

7.文本加粗标签 <b> <strong>（且强调）

8.注意：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符: 

9. 超链接标签:

·属性:

href:指定资源访问的url

target:指定在何处打开资源链接

_self:默认值，在当前页面打开

_blank:在空白页面打开

·CSS属性

text-decoration:规定添加到文本的修饰，none表示定义标准的文本，

color:定义文本的颜色

10. 表格标签

场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表，

标签:

<table>定义表格整体，可以包裹多个<tr>

属性：border:规定表格边框的宽度

width:规定表格的宽度

cellspacing:规定单元之间的空间，

<tr>表格的行，可以包裹多个<td>

<td> 表格单元格(普通)，可以包裹内容如果是表头单元格，可以替换为<th>(具有字体加粗和居中的作用)

11. 表单标签

·场景:在网页中主要负责数据采集功能，如注册、登录等数据采集

·标签:<form>

·表单项:不同类型的 input元素、下拉列表、文本域等。

··<input>:定义表单项，通过type属性控制输入形式

Type取值：

text：默认值，定义单行的输入字段

password: 定义密码字段

radio: 定义单选按钮

checkbox: 定义复选框

file: 定义文件上传按钮

date/time/datetime-loca1: 定义日期/时间/日期时间

number: 定义数字输入框

email:定义邮件输入框

hidden: 定义隐藏域

submit /reset /button: 定义提交按钮 /重置按钮 /可点击按钮

··<select>:定义下拉列表

</select>(标签< option >进行选择)

··<textarea>:定义文本域

<textarea name="description" cols="30"（指定一行可以输入多少字符） rows="10">（指定默认可以输入多少行）</textarea>

·属性:

··action:规定当提交表单时向何处发送表单数据

··method:规定用于发送表单数据的方式。GET、POST

get:表单数据拼接在url后面，?username=java,大小有限制

post:表单数据在请求体中携带，大小没有限制

注意:表单项必须有name属性才可以提交。

三.CSS

1.CSS引入方式:

·行内样式:写在标签的style属性中(不推荐)eg：<hl style="xxx: xxx（属性名：属性值）;xxx:xxx;">中国新闻网</h1>

·内嵌样式:写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)eg：<style>

h1 （标签选择器）{

XXX:XXX;

XXX:xxx;

}

</style>

·外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入，通常约定写在head标签中)

eg: h1 {

XXX:XXX;

XXX:xxx;

}

link rel "stylesheet" href "css/news.

2. 颜色表示形式:

关键字：预定义的颜色名 red、green、blue...

rgb表示法：红绿蓝三原色，每项取值范围:0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)

十六进制表示法：#开头，将数字转换成十六进制表示 #cccccc，简写: #cc

3.CSS选择器

元素选择器:标签名{… }

id选择器:#id属性值{… }eg: #hid{

color: red;

}

<h1 id="hid"> css id selector</h1>

注意：id在页面中不能重复。

·类选择器:.class属性值{…}eg: .cls{

color: red;

}

<h1 class="cls" >CS5 class Selector</h1>

注意：class在页面中能重复。

优先级:id选择器>类选择器>元素选择器

4.CSS属性

·color:设置文本的颜色

font-size:字体大小 (注意:记得加px)

5.CSS样式

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

6.页面布局

（1）内容。

盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过

盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)，边框区域(border)、外边距区域(margin)（并不包含在盒子内）

（2）属性

width:设置宽度

height:设置高度

border:设置边框的属性，如:1px solid #000;

padding:内边距

margin:外边距

注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后

加上 -位置，如:padding-top、padding-left、padding-right .

（3）布局标签.

实际开发网页中，会大量频繁的使用 div和span这两个没有语义的布局标签

标签:<div><span>

·特点:

··div标签:

···一行只显示一个(独占一行)

···宽度默认是父元素的宽度，高度默认由内容撑开

···可以设置宽高(width、height)

··span标签:

···一行可以显示多个

···宽度和高度默认由内容撑开

···不可以设置宽高(width、height)

四.JS基础知识

1. Javascript引入方式

·内部脚本:将JS代码定义在HTML页面中

··JavaScript代码必须位于<script></script>标签之间

alert("Hello javaScript")（显示一个弹框）

</script>

··在HTML文档中，可以在任意地方，放置任意数量的<script>

··一般会把脚本置于<body>元素的底部，可改善显示速度

·外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中

··外部JS文件中，只包含JS代码，不包含<script>标签

··<script>标签不能自闭合

2. 书写语法

·区分大小写:与Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

·每行结尾的分号可有可无

·注释:

··单行注释://注释内容

··多行注释:/*注释内容 */

·大括号表示代码块

//判断

if(count == 3){

alert(count);

}

3. 输出语句

·使用 window.alert()写入警告框

·使用 document.write()写入 HTML 输出

·使用 console.log()写入浏览器控制台

window.alert("HellojavaScript");//浏览器弹出警告框

document.write("Hello javaScript");//写入HTML,在浏览器展示

console.log("HellojavaScript");//写入浏览器控制台

</script>

4. 变量

·JavaScript 中用 var关键字(variable 的缩写)来声明变量。

·Javascript 是一门弱类型语言，变量可以存放不同类型的值

·变量名需要遵循如下规则:

··组成字符可以是任何字母、数字、下划线()或美元符号($)

··数字不能开头

··建议使用驼峰命名

注意事项：

·ECMAScript6 新增了let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在let 关键字所在的代码块内有效，且不允许重复声明。

·ECMAScript6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

5. 数据类型

·JavaScript中分为:原始类型和引用类型。

·原始类型

number:数字(整数、小数、NaN(Not aNumber))

string:字符串，单双引皆可

boolean:布尔。true，false

null:对象为空

undefined:当声明的变量未初始化时，该变量的默认值是undefined

使用 typeof运算符可以获取数据类型如：var a= 20;alert(typeof a);

·运算符

算术运算符:+，-，*，/,%，++,--

赋值运算符:=，+=，-=，*=，/=，%=

比较运算符:>，<，>=，<=，!=，==，===

（==会进行类型转换，===不会进行类型转换）

逻辑运算符:&&，，!

三元运算符:条件表达式?true_value:false_value

·类型转换

·字符串类型转为数字:

将字符串字面值转为数字。如果字面值不是数字，则转为NaN。（使用函数parseInt（））

·其他类型转为boolean:

Number:0和NaN为false，其他均转为true。

String:空字符串为false，其他均转为true。

Null和 undefined:均转为false。

6. 函数

·介绍:函数(方法)是被设计为执行特定任务的代码块。

·定义:JavaScript 函数通过 function 关键字进行定义，

·注意:

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

·调用:函数名称(实际参数列表)

定义方式一:

function functionName(参数1,参数2..){

//要执行的代码

}

·定义方式二

var functionName = function(参数1,参数2..){

//要执行的代码

}

如：var add = function(a , b)

return a + b;

}

注意：两者的调用形式一样。

7. Array

JavaScript 中 Array对象用于定义数组。

·定义

··var 变量名=new Array(元素列表); //方式一

··var 变量名=[元素列表];//方式二

·访问

arr[ 索引]= 值;

·注意事项

JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据。

·属性

··length 设置或返回数组中元素的数量。

·方法

··forEach()遍历数组中的每个有值的元素，并调用一次传入的函数arr.forEach(function(e){

console.log(e);

}

··push()将新元素添加到数组的末尾，并返回新的长度。

··splice()从数组中删除元素。

8. String

·String字符串对象创建方式有两种:

··var 变量名=new String("…”);//方式一

··var 变量名="…";//方式二

属性:length字符串的长度。方法:

·方法

··charAt()返回在指定位置的字符。

··indexof()检索字符串

··trim()去除字符串两边的空格

··substring()提取字符串中两个指定的索引号之间的字符。

9. JavaScript自定义对象

·定义格式:

var 对象名 ={

属性名1:属性值1,

属性名2:属性值2,

属性名3:属性值3,

函数名称:function(形参列表){}

}；

·调用格式:

对象名.属性名:

对象名.函数名();

10. JSON介绍

·概念:JavaScript Object Notation，JavaScript对象标记法。

·JSON 是通过JavaScript 对象标记法书写的文本。

·由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。（本质上是一段文本字符串）

{

name:"Tom",

age:20，

gender:"male"

}//JavaScript对象

{"name":"Tom"

"age":20,

“gender":"male"

}// JSON对象

11.JSON-基础语法

·定义

var 变量名='{"key1":value1，"key2":value2}'；（注意外面的单引号！！！）

>示例

var userstr ='{"name":"Jerry","age":18,"addr":["北京”,“上海”,"西安”]}'

·JSON字符串转为JS对象

var jsobject =JSON.parse(userstr);

JS对象转为JSON字符串

var jsonstr= JSON.stringify(jsobject);

12. BOM

·概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

·组成:

Window:浏览器窗口对象（重要）

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象

Location:地址栏对象（重要）

Window

·Window

·介绍:浏览器窗口对象。

·获取:直接使用window，其中 window.可以省略。

window.alert("Hello window");

alert("Hello window");

·属性（获取其他BOM对象）

·history:对 History 对象的只读引用。请参阅 History 对象,

·location:用于窗口或框架的 Location 对象。请参阅Location 对象

·navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象

·方法

·alert():显示带有一段消息和一个确认按钮的警告框。

·confirm():显示带有一段消息以及确认按钮和取消按钮的对话框（对话框返回值--确认:true ，取消:false）。

·setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。

·setTimeout():在指定的毫秒数后调用函数或计算表达式。

·Location

·介绍:地址栏对象。

·获取:使用 window.location 获取，其中 window.可以省略。

window.location.属性; location.属性;

·属性:

·href:设置或返回完整的URL location.href ="https://www.itcast.cn";

13. DOM

·概念:Document Object Model，文档对象模型。

·将标记语言的各个组成部分封装为对应的对象:

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text:文本对象

Comment:注释对象

·JavaScript 通过DOM，就能够对HTML进行操作:

·改变 HTML 元素的内容

·改变 HTML 元素的样式(CSS)

·对 HTML DOM 事件作出反应

·添加和删除 HTML 元素

·DOM是 W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分:

1.Core DOM-所有文档类型的标准模型

·Document:整个文档对象

·Element:元素对象

·Attribute:属性对象

·Text:文本对象

·Comment:注释对象

2.XMLDOM-XML文档的标准模型

3.HTMLDOM-HTML 文档的标准模型

Image:<img>

Button :<input type='button'>

·HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的，

·Document对象中提供了以下获取Element元素对象的函数:

1.根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby");

4.根据class属性值获取，返回Element对象数组

var clss=document.getElementsByClassName('cls");

5.element.innerHTMl：设置或返回元素的内容

6.checked 属性设置或返回 checkbox 是否应被选中

checkbbxobject.checked.true|false

14. 事件监听

·事件:HTML事件是发生在HTML元素上的“事情”。比如:

·按钮被点击

·鼠标移动到元素上

·按下键盘按键

·事件监听:JavaScript可以在事件被侦测到时执行代码，

·事件绑定

·方式一:通过 HTML标签中的事件属性进行绑定

function on(){

alert('我被点击了!);

}

</script>

·方式二:通过 DOM 元素属性绑定

document.getelementById('btn').οnclick=function(){

alert('我被点击了!);

}

</script>

·常见事件

onclick鼠标单击事件

onblur元素失去焦点

onfocus元素获得焦点

onload某个页面或图像被完成加载

onsubmit当表单提交时触发该事件

onkeydown某个键盘的键被按下

onmouseover鼠标被移到某元素之上

onmouseout鼠标从某元素移开