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>
<title>标题</title>
</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.音频、视频标签
<audio> <video>
视频标签:<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. 超链接标签:
<a href=”…”target="...">央视网</a>
·属性:
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 name="degree”>
<option value=">-请选择-</option>
<option value="l">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</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>标签之间
<script>
alert("Hello javaScript")(显示一个弹框)
</script>
··在HTML文档中,可以在任意地方,放置任意数量的<script>
··一般会把脚本置于<body>元素的底部,可改善显示速度
·外部脚本:将JS代码定义在外部JS文件中,然后引入到 HTML页面中
<script src="js/demo.js"></script> alert("Hello javascript")(在demo.js文件中)
··外部JS文件中,只包含JS代码,不包含<script>标签
··<script>标签不能自闭合
2. 书写语法
·区分大小写:与Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
·每行结尾的分号可有可无
·注释:
··单行注释://注释内容
··多行注释:/*注释内容 */
·大括号表示代码块
//判断
if(count == 3){
alert(count);
}
3. 输出语句
·使用 window.alert()写入警告框
·使用 document.write()写入 HTML 输出
·使用 console.log()写入浏览器控制台
<script>
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标签中的事件属性进行绑定
<input type="button" οnclick="on()” value="按钮1">
<script>
function on(){
alert('我被点击了!);
}
</script>
·方式二:通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getelementById('btn').οnclick=function(){
alert('我被点击了!);
}
</script>
·常见事件
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开