HTML基础

1计算机简介

特点：

1.可以进行逻辑运算

2.具有存储记忆的功能

组成：

硬件系统：看得见摸得着

处理器 控制器 存储（内部存储和外部存储） 输入设备 输出设备

软件系统：看得见摸不着

系统软件：操作系统（windows、Linux、Unix、macOS、安卓、iOS 、鸿蒙）

应用软件：wps、美团、QQ、微信、学习强国、有道云笔记 、浏览器、 ......

2cs和BS架构

c/s架构

C：client 客户机

S：server 服务器

优点：安全性高 交互体验更好

缺点：对于用户来说，需要安装，需要更新 使用更麻烦一些 开发成本高

开发安卓手机应用的程序员 安卓工程师

开发苹果手机应用的程序员 iOS工程师

需要开发两套适配应用

B/S架构

B：brower 浏览器

S：server 服务器

优点：更新的周期没有限制 自己可以随意安排 无需审核 开发成本低

缺点：安全性低 用户体验感没有App好

开发网站应用的程序员 前端工程师

3网站的建设流程

1.注册域名（网址）：比如www.baidu.com

2.利用服务器（其实就是一台电脑）

3.网站制作

以前的制作流程：

1.产品经理（提需求）产品经理会给出一个交付物，叫做产品原型

规划了整个网站包含哪些功能 哪些内容 以及各种逻辑

2.UI：根据需求设计网页

3.前端：需要把UI设计好的页面，用代码的形式，呈现在浏览器上

4.后台：（服务器）数据处理，功能实现

5.测试：测试已经完成的项目（需求）测试出的问题，反馈给对应的研发部门，进行处理

6.上线：一般都会在用户活跃度低的时间发布（工作日的晚上）

现在的制作流程：（前后端分离）

1.产品经理（提需求）

2.UI和前端、后端同时工作

3.联调：多个部门之间将完成的内容组合到一起

4.测试

5.上线

4.推广

免费推广：从代码上可以进行一些处理，搜索引擎的优化（seo）

付费推广：广告、视频平台（抖音、快手、B站）、百度推广

5.维护

一般网页有一些无伤大雅的bug，只要不影响功能和使用（盈利）公司会选择线上线再进行优化

4前端和后台

前端

也可称之为客户端，前端之所以叫前端是应为距离客户最近，所做的工作都是用户看的到的

后台

也称之为服务端，服务端，是因为所写的代码都是运行在服务器上的，服务器端做的工作用户是看不到的

前端和后台的关系

前端用来检测用户的行为，收集用户数据并且给用户展示数据。所以当用户的行为触发通信的逻辑，我们 需要将用户输入的内容，先进行校验（只能校验格式，不能校验真伪）目的是为了拦截一些无效的通信请求。

如果格式正常，通过后台程序员预先提供给我们（前端）的那些对应接口 进行通信 返回给前端（我们）数据的判断结果

前端展示给用户

5web网站和网页

web前端

web：全称word wide web；广域网、万维网、互联网 简称3W

web：可以通俗的理解为是无数个网站的集合，形成的一个网络称之为万维网（互联网）

网站：就是无数个网页的集合

网页的组成

网页的结构（HTML）：由于超链接、图片、列表、文本、视频、音频....搭建的网页结构

网页的表现（css）：用于修饰结构，让结构更加的好看

网页的行为（JavaScript）：实现和网页的交互效果，主要的工作就是添加交互效果，检测用户行为，数据 处理与展示

6浏览器介绍

非主流浏览器

360 搜狗浏览器 猎豹浏览器 QQ浏览器 UC浏览器 2345浏览器 夸克

网页需要在浏览器中运行

浏览器兼容：浏览器解析代码的结果不一样的情况，这个是由浏览器的内核决定的

我们需要兼容的就是主流浏览器

IE edge Firefox Chrome Safari Opera

浏览器内核

Trident 不能跨平台：IE浏览器

Gecko 开源：Firefox火狐浏览器

webkit 轻量级：Safari 苹果浏览器 Chrome浏览器（旧版）

blink 由webkit内核衍生而来的 Chrome浏览器（新版） Opera浏览器（新版）

presto（Opera前内核，已废弃）改用blink

7web标准

我们的代码需要标准化，要有一个统一的标准才能够在众多浏览器当中完美运行

web标准

结构：HTML5 HTML的文件扩展名 .html

表现：css3 css文件的拓展名 .css

行为：JavaScript js文件的拓展名 .js

计算机语言

c c++ java go python .net php ...

1.W3C 万维网联盟，创建于1994年是web技术领域最具权威和影响力的国际中立性技术组织

2.ECMA 欧洲计算机制造商协会，是一个开发计算机硬件、通信和程序语言标注的非盈利性组织

8编辑器的使用

1.软件安装

vscode安装

2.插件安装

Chinese 中文汉化插件

live server 用于启动一个本地服务

open in brower 在浏览器当中 打开HTML

vscode-icons 图标插件

Auto Close Tab

Auto Rename Tag

3.项目存在的基本文件夹

css文件夹：存放css文件

js文件夹：存放js文件

images（imgs）文件夹：存放图片

html文件夹：可能不存在 用于存放于首页意外的html文件

index.htnl 表示首页

4.编辑器快捷键

! + 回车键 生成html文档结构

Ctrl + N 新建

Ctrl + C 复制

Ctrl + V 粘贴

Ctrl + A 全选

Ctrl + Z 撤销

Ctrl + Y 撤回/还原

Ctrl + S 保存

Ctrl + / 添加/撤销注释

Ctrl + D 删除光标所在行

Ctrl + F 在文档内进行关键字搜索

Ctrl + 回车 向下换行（不论光标在本行的何处）

Ctrl + shift + 回车 向上换行

alt + shift + 向下箭头 复制粘贴当前行

注释：是程序员写在自己代码上的批注 对代码进行解释

9文件命名规范

1.小写英文字母，或者字母、数字、下划线 ’ _ ‘、连接符 " - "的组合

2.其中不得包括汉字、空格与特殊字符

3.必须是英文字母开头

4.不可以数组开头

注意：

标点符号，必须都必须使用半角符号

5.语义化命名：见名识意 index.html news.html

6.结构化命名：header（头部区域）footer（底部区域） main（中间的主体内容）

main-top main-bottom main-left main-right