JavaWeb-前端开发

web标准        

三个组成部分

HTML:负责网页的结构

CSS:负责网页的表现

JavaScript:负责网页的行为

HTML

超文本标记语言,

超文本:超越了普通文本,可以定义视频,音频,图片

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


    
        HTML
    
    
        

Hello html!


        
    

html不区分大小写,不区分双引号单引号,语言结构较为松散

结构标签:

最外层是html

里面有head和body

 

   

水平线标签:hr

标题标签:h1-h6

CSS

层叠样式表,控制网页的样式

引入方式

行内样式:写在标签的style属性中

内嵌样式:写在style标签中(通常写在head中)

外嵌样式:写在一个单独的.css文件中

   

     

     

    我是慧慧!

   

   

颜色表示形式

关键字

rgb

十六进制表示法

text-align属性对齐方式

center left right

CSS选择器:用来选取需要设置样式的元素

元素选择器

元素名称:{

}

id选择器

#id属性值{

}

类选择器

class属性值{

}

超链接

标签

href:指定资源访问的url

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

_self:默认值 当前页面打开

_blank:在空白页打开

正文排版

视频标签

src:url

controls:显示播放控件

width height..

音频标签

src:url

controls:播放控件

段落标签:

.

文本加粗: / .

整体页面布局

css盒子模型

页面中所有的元素都可以看做一个盒子

盒子模型组成:内容区域content 内边距区域padding 边框区域border 外边距区域margin

标签

一行只展示一个(独占一行)

宽度默认是父元素的宽度、

可以设置宽高

一行显示多个

不可设置宽高

   

表格标签

定义表格整体,可以包裹多个 

border:边框宽度

width:宽度

cellspacing:空间

:行里面包括多个

表格单元格

.

JavaScript

JS,跨平台,面向对象,脚本语言

Js的引入方式

内部脚本:将js代码定义在html页面

js代码必须位于

外部脚本:将js定义在js文件中,然后引入

   

   

js的基础语法

区分大小写

大括号表示代码块

结尾分号可有可无

注释和Java一样

输出语句

window.alert()

document.wirte()

console.log()

变量

用var关键字声明

    /*  //var 定义变量

     var a = 10;

     a = "张三"

     alert(a);

     特点一

     作用域特别大,全局变量

     特点二

     可以重复定义

     */

let关键字 与var一样,但是不能重复声明,不是全局变量

const关键字 定义一个常量,不能被改变

数据类型

原始类型和引用类型

undefined:定义变量未声明,就是undefined

使用typeof运算符获取数据类型

类型转换

其他类型转换为数字parseInt():如果不是数字,返回NaN

其他类型转换为布尔

0和NaN false

空字符串false

空,未定义为false

函数

function 函数名(参数。。){

函数体

}

返回值无所谓

js对象

Array

定义数组

var 变量名=[1,2,3,4];

访问与Java一样

方法!

forEach()遍历

arr.forEach(function(e){

    console.log(e)

})

push()

添加

splice()

删除:两个参数 从哪个索引开始删除,删除几个

String

charAt()

indexOf()

trim()

subString()

JSON

js中自定义对象

定义格式

var 对象名={

属性1:属性值1

.。。

函数名称:function(){

}

}

JSON介绍

JavaScript Object Notation,Js对象标记法

JSON是通过js对象标记法书写的文本

{

键值对。。

};

键值对中键必须是字符串类型,值任意

如果值是数组,存在方括号中,值是对象,存在花括号中

定义JSON

var 变量名='{"key1":value1,"key2":value2}'

    //定义JSON

    var jsonStr = '{ "name": "Tom","age"=18,"addr"=["北京","上海"]}';

JSON字符串转为JS对象

var jsObject=JSON.parse(jsonStr)

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject)

    //定义JSON

    var jsonstr = '{ "name": "Tom", "age"=18," addr"=["北京","上海"]}';

    alert(jsonstr.name);

    //json 格式的字符串转化为js对象

    var obj = JSON.parse(jsonstr);

    alert(obj.name);

    alert(JSON.stringify(obj));

BOM

概念:浏览器对象模型,允许js与浏览器对话,js将浏览器的各个组成部分封装为对象

Window:浏览器窗口对象

属性:

history

location

navigator

方法

alert()

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框

    //获取

    window.alert("hello bom");

    alert("hello bom window");

    //方法

    //confirm-对话框

    var flag = confirm("您确认删除?");

    alert(flag);

   

setInterval() 按照指定的周期来调用函数或者计算表达式

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

    //定时器-setInterval-周期执行一次

    i = 0;

    setInterval(function () {

        i++;

        console.log("定时器执行了" + i + "次")

    }, 2000)

    //定时器-setTimeout-延迟指定时间执行一次

    setTimeout(function(){

        alert("你是猪")

    },2000)

获取:直接使用window,其中window.可省略

Location:地址栏对象

href:设置或者返回完整的url

location.href="https://www.123.cn"

DOM

文档对象模型

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

分为三个部分

1.Core DOM

Document:整个文档对象

Element:元素对象

Doucument对象提供了许多获取e对象的函数

可以根据id,标签名称,name属性值,class属性等获取

Attribute:属性对象

Text:文本对象

Comment:注释对象

事件监听

点击

鼠标移动

按下键盘。。。

事件绑定

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

   

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

你可能感兴趣的:(html,前端)