Web前端入门学习

article/2025/10/9 11:15:12

导言
- - 1.拨云见日
  - 2.溯本求源
  - 3.风生水起
  - 4.巧夺天工
Web的入门知识
- - 1.什么是HTML、CSS？
  - 2.VS code 编辑器？
  - 3.学习编辑器的基本使用
  - 4.chrome浏览器？
  - 5.了解网站开发？
  - 6.HTML基础知识与属性
  - 7.HTML的初始代码
  - 8.HTML注释？
  - 9.HTML语义化
  - 10.标题与段落
  - 11.文本修饰标签
  - 12.图片标签
  - 13.引入文件的地址路径
  - 14.跳转链接？
  - 15.跳转锚点
  - 16.特殊符号
  - 17.列表标签

导言

1.拨云见日

基础部分：HTML、CSS；
切图流程：传统切图、智能切图、公司流行切图；
实战阶段；PC企业站布局、PC游戏站布局；

2.溯本求源

HTML、CSS的扩展；
语法：HTML5、CSS3;
兼容与修改：hack;

3.风生水起

布局：弹性布局、网格布局、移动布局、响应式布局；
布局框架：Bootstrap;

4.巧夺天工

工程：预编译CSS、postrcss;
架构：CSS架构；
高级功能：CSS的高级功能；
交互：CSS与JS的交互；

Web的入门知识

1.什么是HTML、CSS？

都是做网站的编程语言，一般情况下要配合使用，是作为网站开发的基础语言。
HTML
CSS

2.VS code 编辑器？

vs code 是针对编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可以用于Windows、macos和linux。它具有对Java Script、TypeScript和Node.js的内置支持，并具有丰富的其他语言和运行时扩展的生态系统。

3.学习编辑器的基本使用

ctrl + s：保存
ctrl + a：全选
ctrl + x：剪切
ctrl + c、ctrl +v: 复制、粘贴
ctrl + z、ctrl +y：撤销、前进
shift + end：从头选中一行
shift +home：从尾选中一行
shift + alt +↓：快速复制一行
alt + ↑或↓：快速移动一行
tab ：向后缩进
tab + shift：向前缩进
alt +鼠标左键：多光标
ctrl + d：选择相同元素的下一个

4.chrome浏览器？

Google Chrome基于开源引擎Webkit、Blink，提供了浏览器扩展框架。

5.了解网站开发？

一个大型网站开发，需要一个团队：

ui设计师
Web前端开发工程师（h5开发）
将设计稿转化为代码
将数据库里的数据显示到页面上
核心技术：HTLM、CSS、Java Script
HTML：网站的结构
CSS：网站的样式
Java Script:与用户的交互行为
Web后端开发工程师：将产生的数据进行储存、管理

6.HTML基础知识与属性

是一种超文本标记语言：

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：也称标签，<单词>
单标签：<单词>
双标签：<单词></单词>
标签可以是上下排列，也可以组合镶嵌
标签的属性：来修饰标签的，设置当前标签的一些功能
创建标签的快捷键：单词 + tab键
语言：编程的语言
HTML的常见标签：标签

7.HTML的初始代码

每一个html都需要添加初始代码，无论写什么网页，都需要初始代码
创建HTML初始代码的快捷键：！+tab键
初始代码：
<! DOCTYPE html> 文档声明:告诉浏览器这是HTML文件
< html lang=“en”> html最外层标签，包裹着所有HTML代码，lang="en"表示是一个英文网站，lang="zh-cn"表示是一个中文网站
< head>
< meta charset =“UTF-8”> 元信息：是编写网页中的一些赋值信息
< title>Document 是网页的标题
< /head>
< body>
显示网页内容的区域
< /body>
< /html>