企业官网建设流程全解析

一，前言

大前端开发：网页 小程序 数据可视化 服务器 客户端

HTML:HTML4 HTML5

CSS:CSS2 CSS3

先驱：图灵 冯.诺依曼

计算机包含硬件和软件 其中软件包括系统软件和应用软件

应用软件C/S架构（client客户端）：要安装 更新 不跨平台

B/S架构（browser浏览器）：无需下载 更新 可跨平台

浏览器相关五大浏览器四大内核

网页相关

网址：输入的地址

网页:呈现的页面

网站：由一个或多个网页构成

网页标准

二，HTML(超文本标记语言)

代码

<html> <head> <title>网络标题</title> </head> <body> ...... </body> </html>

注释：Ctrl+/ (不会呈现在页面中，但源代码中可见){不可嵌套}

<!--这是注释-->

文档声明

字符编码

计算机对数据：存储时编码 读取时解码 都遵循字符集 常用如下

<meta charset="UTF-8"/>

html设置语言：<html lang="zh-CN"> 简中

HTML标准结构

删除一行：光标放在行上ctrl+shift+k 向下复制：shift+alt+↓

10.1作业如下

<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>卡牌排序</title> <link rel="stylesheet" href="style.css"> </head> <style> h2{ color: darkblue; text-align: center; } h3{ color: grey; text-align: center; } div{ color: black; text-align: center; } /*这里修改样式*/ </style> <body> <main> <h2>梅花</h2> <h3>2~4</h3> <p> <img width="100" height="150" src="images/C2.png" alt="梅花2"> <img width="100" height="150" src="images/C3.png" alt="梅花3"> <img width="100" height="150" src="images/C4.png" alt="梅花4"> </p> <H2>方片</H2> <h3>5-7</h3> <p> <img width="100"height="150" src="images/D5.png" alt="方片5"> <img width="100" height="150" src="images/D6.png" alt="方片6"> <img width="100" height="150" src="images/D7.png" alt="方片7"> </p> <h2>红桃</h2> <h3>8-10</h3> <p> <img width="100" height="150" src="images/H8.png" alt="红桃8"> <img width="100" height="150" src="images/H9.png" alt="红桃9"> <img width="100" height="150" src="images/H10.png" alt="红桃10"> </p> <h2>黑桃</h2> <h3>j-k</h3> <p> <img width="100" height="150" src="images/SJ.png" alt="黑桃J"> <img width="100" height="150" src="images/SQ.png" alt="黑桃Q"> <img width="100" height="150" src="images/SK.png" alt="黑桃K"> <img width="100" height="150" src="images/SA.png" alt="黑桃A"> </p> </main> </body> </html>