23通识课

最新推荐文章于 2024-07-14 16:43:41 发布

️Dou

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量1.6k

点赞数 36

文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/Dou_TEACHER/article/details/135908481

版权

本文介绍了前端开发的基础，包括HTML构建网页结构、CSS定义样式、JavaScript实现交互。讲解了HTML的标签、CSS的选择器、盒模型和JavaScript的引擎工作原理，以及如何使用VSCode和DOMAPI进行网页操作和CSS/JS控制。

摘要由CSDN通过智能技术生成

title: 前端第一节课
author: Dou
categories: 前端
keywords: 2023通识教案/2023新生通识教学

学计算机一定要有一个非常强大的心理状态，计算机的所有东西都是人做出来的，别人想的出来，我也一定想的出来。在计算机里头没有任何黑魔法。计算机所有东西只是我现在还不知道而已，总有一天我会把所有细节搞明白。——翁恺

前端技术基础

html提供基本骨架，css提供样式。js让网页和用户产生交互，并且控制前两者。

<!DOCTYPE html>//现代 HTML 文档的标准声明方式。
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color:blue;
        }
    </style>
</head>
<body>
    <p>
        Hello world!
    </p>
    <script>
        document.querySelector('p').addEventListener('click',()=>{
            const div = document.createElement('div')
            div.textContent = 'div元素'
            document.body.append(div)
        })
    </script>
</body>
</html>

安装VScode

HTML

超文本标记语言(HyperText Markup Language)简称HTML，用于创建网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

控制台

在控制台查看HTML

块级元素，行内元素

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。

<p>hello</p>
<p>world</p>

<span>hello</span>
<span>world</span>

CSS

层叠样式表(Cascading Style Sheets)为HTML或XML添加样式

对刚才的网页修改

<style>
     h1{
          color: aqua;
          font-size: 24px;
          font-weight: 400;
     }
</style>

控制台

在控制台查看CSS

选择器

文本

基本，class/ID

盒模型

背景

background-color,background-image

边框

布局

深入理解浏览器解析渲染 HTML

JavaScript

在浏览器中运行JavaScript:

引擎（如果是浏览器，则引擎被嵌入在其中）读取（“解析”）脚本。
然后，引擎将脚本转化（“编译”）为机器语言。
然后，机器代码快速地执行。

控制台

在控制台编写JS代码

引入JS

变量、常量

数据类型

七种基本数据类型：
- 布尔值（Boolean），有 2 个值分别是：true 和 false。
- null，一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
- undefined，和 null 一样是一个特殊的关键字，undefined 表示变量未赋值时的属性。
- 数字（Number），整数或浮点数，例如： 42 或者 3.14159。
- 任意精度的整数（BigInt），可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。
- 字符串（String），字符串是一串表示文本值的字符序列，例如："Howdy"。
- 代表（Symbol，在 ECMAScript 6 中新添加的类型）。一种实例是唯一且不可改变的数据类型。
以及对象（Object）。

基础语法

Function

声明函数

调用函数

函数传参

Object

let obj = {
    "a":1,
     b:2,
    function fn1(){
        console.log(1)
    }
}

DOM

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树 (en-US)。

DOM 树包含了像<body>,<div>等元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL，如何在文档中创建一个新的元素这样的问题。

document.querySelector()拿到dom，从document.querySelector()外表看，document是一个对象，querySelector是document中的一个函数。

输出document来找querySelector

操控DOM

dom.addEventListener

dom.addEventListener('click',function(){})

通过js操控html,css

classList,className

️Dou

关注

36
点赞
踩
49

收藏

觉得还不错? 一键收藏
打赏
0
评论
23通识课

它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL，如何在文档中创建一个新的元素这样的问题。外表看，document是一个对象，querySelector是document中的一个函数。html提供基本骨架，css提供样式。js让网页和用户产生交互，并且控制前两者。所有元素可以分成两大类：块级元素（block）和行内元素（inline）。接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是。)简称HTML，用于创建网页。在控制台查看HTML。在控制台编写JS代码。
复制链接

扫一扫