企业官网建设流程全解析

001-简介

前端开发：

前端学习内容：

学习顺序：

002-认识两位先祖

图灵 人工智能之父 研究出图灵机

冯诺依曼 现代计算机之父 提出：二进制 明确计算机组成部分 制定：现代计算机标准

003-计算机基础

计算机 硬件 CPU 内存 硬盘 键盘 鼠标 音箱 显示器.......

中央处理器 存储器 输入设备 输出设备

！内存 暂时性存储 读写速度快 通俗：能同时玩几个游戏，取决于内存的大小

硬盘 持久化储存 容量大 换算关系：1024GB=1TB 通俗：能安装多少个游戏，取决于硬盘的大小

004-CS架构与BS架构

C：客户端 自我理解：CS即客户端与服务器为集合的架构

B：浏览器

S：服务器

对服务器理解：

CS和BS对比得出：看似BS更好，实际一个都不能抛弃。

大型专业应用，安全性要求较高的应用，还要采用CS架构

005-浏览器相关知识

浏览器内核：浏览器的核心，用于处理浏览器所得到的各种资源

五大浏览器 四大内核

006-网页相关知识

网址 网页xn 构成了：网站

一个网页的构成部分：

007：HTML简介

HTML发展历史：

009-HTML初体验

变网页——！文件格式！——后缀改为.html即变为网页

<marquee>任意字符</marquee> 源代码——经网页渲染后变成页面

<marquee>任意字符</marquee> 滚动

浏览器网页看代码：查看网页源代码

010-HTML标签

<input> 输入框

<marquee>任意字符 <input></marquee>

层次：

<marquee>

任意字符

<input>

</marquee>

<input>

注意：前面四个空格

嵌套和并列关系

缩进：Tab

其他注意事项：

011：HLMT标签属性

<marquee loop=“1” bgcolor=“green”>

任意字符

<input type=“password”>

</marquee>

loop 循环 bgcolor 背景色

注意：loop bgcolor对于input不可用 type可用

标签详解：

<input dsiabled>

disabled 禁用

注意点：

012-HTML基本结构

基本结构：

<html>

<head></head>

<body>

<marquee>任意字符</marquee>

<body>

</html>

处理前代码查询：右键“检查”

<html>

<head>

<title>我的网页</title>

</head>

</html>

注意：

013-安装vscode

014-安装liveserver插件

015-HTML注释

对代码进行解释：

<!--我是注释-->

自我编写代码：

016-文档声明

<!DOCTYPE html>

H5声明

017-HTML字符编码

编码与解码

原则1：

原则2：

代码：

018-设置语言

按住shift 强刷

拓展知识：

019-HTML标准格式

按TAb可以直接输入代码

ctrl+shift+k 快速删除一行代码

ctrl+z 撤销

输入！再按回车生成代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

</body>

</html>

报错：想呈现图标未成功

点击1按住shift全选放进文件夹“移动”

注意：图标不能放进1文件夹中

020：开发者文档

标签页面：

学习网站：W3School MDN

021-HTML排版标签

h1~h6 六级标题

h1标题最重要！在整个body里面

段落标签 无加粗 有间隔

<p></p>

<div> 用于统一管理段落

<p>里面不能套h1 不能套<p> <div>

快速换行并不断开ctrl+shiift

总结：

022-HTML语义化标签

h1放大效果不重要，CSS可以随意改变

但不能随意改变标签，语义最重要！

优势：

023-块级元素和行级元素

body内标签：marquee跑马灯效果 loop循环 bg背景颜色 h1.....

快速向下复制一次代码快捷键：shift+alt+向下键

复习：ctrl+shift快速删除

发现：除了input都是独占一行

独占一行：块级元素 多个站一行：行内元素

span 行级元素 input也是行级元素

块元素:h1-h6 div p ul

marquee已被废弃，不建议写

024-常用的文本标签

025-不常用的文本标签

备注：026-图片标签

新标签<img srg alt

srg为图片路径

同级直接写图片名称

alt作用：搜索引擎可以通过这个得知图片的内容

width宽 height高 例：300×300 单位：px

！img行内元素