第一节课的学习笔记｜ 青训营

新新雷
106 阅读2分钟

前端语言（三大件HTML+CSS+JavaScript）

HTML：提供框架，如同骨骼。

1、标签（元素）

①文档型； ②闭合型：闭合标签、空标签； ③换行型：块级标签、行内标签； ④H5新元素：语义化标签、媒体标签、表单标签、功能标签。 

mindmap
      标签
          文档型
          闭合型
            闭合标签
            空标签
          换行型
            块级标签
            行内标签
          H5新元素
            语义化标签
            媒体标签
            表单标签
            功能标签

2、HTML5新功能

语义化标签，建议：用对>不用>用错。
存储：cookies、local storage、session storage、indexedDB
音视频：Video
浏览器API
可视化相关：WebGL or WebGPU

2、文本:text or ; 3、注释:; 4、DTD:; 5、处理信息:.

CSS：提供样式，如同皮肤。

伪元素使用两个冒号，元素内容使用伪元素。

伪类使用一个冒号，元素自身状态使用伪类。

JS：提供网页互动，存如同肌肉。

借鉴了c语言的基本语法；借鉴了java的数据类型和内存管理；函数作为第一位。
有6个基本类型：
1、string，文本类，"The Text is Hello World"；
2、number，数字类，1145141919；

OIP-C.jpg
3、Boolean，逻辑类，true or false；
4、null; 5、undefined；
6、symbol，标志类，可以提供唯一值；
7、bigint，范围更大的整数值，能安全地表示 -9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1) 之间的整数，任何超出此范围的整数值都可能失去精度。
对象类型：array；function。继承于object类。类似于cpp和java中的对象。
function类似于Java和cpp中的函数方法。

引擎

Browser

QQ截图20230726182514.png

Trending

QQ截图20230726191523.png

三件套的互相使用

CSS in HTML

Inline CSS
<p style="color: blue;">This is a paragraph. </p>
Internal CSS
<head>
<style type = text/css>
body {background-color: blue;}
P { color: yellow;}
</style>
</head>
External CSS
<head>
<link rel="stylesheet" type="text/Css" href="style.css">
</head>

Javascript in HTML

<button onclick="showContent( )">Show hidden content</button> <template>

<h2>Flower</h2>
<img src="转存失败，建议直接上传图片文件 img_ white_ .flower. jpg" width="214" height="204" alt="转存失败，建议直接上传图片文件">

<script>
function showContent() {
var temp = document . getElementsByTagName("template")[0];
var clon = temp. content. cloneNode(true);
document. body. appendChild(clon);
</script>

QQ截图20230726192632.png

HTML in Javascript

<html>
<body onload=" renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
<script src="https: //unpkg. com/ mustache@latest"></script>
<script src=" render.js"></script>
</body>
</html>

CSS in JavaScript

in react

import React from " react" ;
import " ./App.css";
function App() {
return (
<div C lassName="App">
<header C lassName="App-header">
<h2 style={{ color: "blue", backgroundColor: "white" }}>
Hello F rom React
</h2>
</header>
</div>
);
}
export default App;

in vue

<template lange"jade ”>
div
p { greeting }} World!
other -component
</template>
<script>
import OtherComponent from ' ，/0therComponent，vue '
export default {
data () {
return {
greeting: 'Hello'
}
},
components : {
OtherComponent
}
</script>
style Lang-" stylus" scoped>
font-size 2em
text-align center
</style>

avatar
文章
阅读
粉丝