前端三件套速成

一、HTML

1、基本的文档结构

html 复制代码
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

2、标记文本:标题<h1>、段落<p>、列表<ul> <ol>

属性

3、图像

复制代码
<img src="images/firefox-icon.png" alt="My test image" />

4、超链接<a>

html 复制代码
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

5、表格

速成视频:为初学者准备的:HTML 速成_哔哩哔哩_bilibili

网站:菜鸟教程、HTML 基础 - 学习 Web 开发 | MDN

二、CSS

1、四种类型选择器

标签选择器、Id选择器、类选择器、属性选择器

2、三种html引入CSS方式

  1. 外部引入CSS文件 import xxx.css
  2. 嵌入式:在head下body外<style></style>嵌入选择器
  3. 内联式(特殊情况用,极少用) 在标签内部写style=""

3、文本大小、类型、颜色。。。

4、盒子模型 :

在html构建结构时,常使用<div>多层嵌套

然后针对每个div进行style渲染

速成教程:为初学者准备的:CSS 速成_哔哩哔哩_bilibili

三、JavaScript

常识:JavaScript解释性语言,不用编辑器,必须要使用JavaScript引擎来运行,但一般浏览器才会内置JS引擎,一位天才使用c++编写了node.js 内置了JS引擎,实现外部环境也可以运行JS代码

1、变量

原生数据类型也就是String、boolean、number、null、Array、

语法中只有const常量、let变量、var(少用)

2、数组

let arr = new Array(1,"xiaowang","shiixna",2,4);

数组内部元素数据类型可不同。

3、对象

javascript 复制代码
const person = {
    lastName: "houhh",
    age: 30,
    hobbies: ["football","eat","sports"],
    address: {
        street: "34 main st",
        city: "Boston",
        state: "MA",
    },

}

4、构造函数、条件语句、循环语句也都差不多 多写几道算法题就好了。

5、事件、操作网页啥的 也用不到。用到再学。

教程:为初学者准备的:JavaScript 速成_哔哩哔哩_bilibili

相关推荐
程序员小寒2 分钟前
Vue.js 为什么要推出 Vapor Mode?
前端·javascript·vue.js
白菜__9 分钟前
去哪儿小程序逆向分析(酒店)
前端·javascript·爬虫·网络协议·小程序·node.js
前端老曹9 分钟前
Jspreadsheet CE V5 使用手册(保姆版) 二
开发语言·前端·vue.js·学习
IT_陈寒11 分钟前
SpringBoot3.0实战:5个高并发场景下的性能优化技巧,让你的应用快如闪电⚡
前端·人工智能·后端
秋邱11 分钟前
AR 定位技术深度解析:从 GPS 到视觉 SLAM 的轻量化实现
开发语言·前端·网络·人工智能·python·html·ar
云飞云共享云桌面18 分钟前
佛山某机械加工设备工厂10个SolidWorks共享一台服务器的软硬件
大数据·运维·服务器·前端·网络·人工智能·性能优化
开发者小天22 分钟前
React中使用classnames的案例
前端·react.js·前端框架
简单的话*29 分钟前
Logback 日志按月归档并保留 180 天,超期自动清理的配置实践
java·前端·python
困惑阿三32 分钟前
深入理解 JavaScript 中的(Promise.race)
开发语言·前端·javascript·ecmascript·reactjs
我命由我1234533 分钟前
微信小程序 bind:tap 与 bindtap 的区别
开发语言·前端·javascript·微信小程序·小程序·前端框架·js