前端三剑客 - - HTML、CSS、JavaScript

1、HTML:

(1)简介:

html 属于 xml 的一种,遵循 xml 格式:
在这里插入图片描述

  • html是网页文件,可以通过html提供页面元素(dom元素)
  • html整体结构是一个树形结构,也叫dom树(多字数)
  • 学习html就是学习页面元素(dom、标签)

(2)常见元素 标签

  • ① h 标签:标题
    在这里插入图片描述
  • ② 段落标签:
    在这里插入图片描述
  • ③ 换行标签:(html中,内容中使用换行符不会让网页展示的内容换行)
    在这里插入图片描述
  • ④ 链接标签:
    在这里插入图片描述
  • ⑤ 图片:
    在这里插入图片描述
  • ⑥ 列表:
    在这里插入图片描述
  • ⑦ 表格:
    在这里插入图片描述
  • ⑧ 表单:
    在这里插入图片描述
  • ⑨ 块:
    在这里插入图片描述

2、CSS:

(1)直接在dom元素上使用 style 属性,绑定dom元素的样式:
在这里插入图片描述
(2)css文件,或html < style> 标签中设置的样式:

  • ① 通过标签指定样式:所有标签都使用该样式:
    在这里插入图片描述
  • ② 通过 id 指定样式:dom元素绑定唯一 id

在这里插入图片描述

  • ③ 通过 class 指定样式:多个dom元素可以绑定相同的class

在这里插入图片描述

3、JavaScript

(1)变量:

JavaScript 是一个弱类型语言(变量只有在运行时,才会加载,类型可以在运行变化)

  • var x : 定义一个全局变量(动态类型)
  • let x :定义一个局部变量

(2)简单的类型:

  • 数值(number)
  • 字符串(可以使用单引号 / 双引号)
  • boolean
  • 数组 var x = new Array(); var x = [1,2,3];
  • json对象:{key1:value1,key2:value2}
  • undefined:未定义 var x;
  • null:特殊类型,表示空, var x = null;
  • function:函数对象 var x = function(){} 、 function x(){}
    定义好函数以后,可以执行:x()

(3)类型的使用:

① 数组:

  • 定义:let x = new Array(); x = [];
  • 添加元素:x.push(元素)
  • 遍历:for(let i in x) i = 数组索引
        for(let e of x) e = 数组中每一个元素 e = x[i]

② json:

  • 定义:let x = {};
  • 添加键值对:x.键 = 值 ; x.id = 1; - - > x = {id:1}
          x[‘键’] = 值 ; x[‘id’] = 1;(键可以使用变量)
  • 遍历:for(let k in x){}  键 = k, 值 = x[k];

③ function:

  • 定义:let x = function(){} / function x(){}
  • 方法参数:可以使用以上任意类型 x = function(y){} (方法也可以作为方法参数)
  • 返回值:可有可无

(4)特殊:

① console.log() // 在开发者工具控制台打印日志

② JavaScript 内置对象:

  • window、document(页面初始化就有的对象,已经携带属性)
  • window.location.href = “跳转的路径”; // 当前页面会跳转到指定路径
  • document.getElementById(“dom元素的id”) // 获取某个dom元素
    类似 jquery 框架中:$("#某个dom元素的id") 返回 jquery 的dom对象
  • document.getElementById("#xxx").innerHTML = …; // dom元素标签内容修改

③ html 和 js 结合使用:(dom元素都是基于事件驱动)

常见的事件:

  • onload:body标签使用,文档加载完执行事件函数
  • onclick:鼠标点击事件,dom元素都有的事件
  • onchange:input标签,select,改变内容时执行函数
  • onfocus:获取焦点时执行 < input type=“text” οnfοcus=“函数名()”/>
  • onblur:失去焦点时执行
  • onsubmit:表单元素绑定提交事件 < form οnsubmit=“函数名()”>…< /form>

猜你喜欢

转载自blog.csdn.net/qq_45658339/article/details/113105902