前端架构

一、前端认知Web 开发

参考：[菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web)

​   W3Schools 在线教程

1. 前端是做什么的？

前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。

2. 开发流程

接下来给大家介绍一下各个角色。

  • 项目委员会：这是一个很虚的角色，即能确定项目是否要做的那帮人，有时候可能就是一个高级经理就能拍板确定。
  • PM：产品经理，也是一个项目的推动者，即兼职项目经理的角色。
  • UE：交互设计师，负责页面布局、交互的设计，不负责视图的细节。
  • UI：视觉设计师，交互确定之后，设计页面样式。注意，很多情况下，UE 和 UI 是一个人。
  • RD：后端开发人员。
  • CRD：客户端开发人员，安卓和 ios 都是。
  • FE：前端开发人员。
  • QA：测试人员。
  • OP：服务器运维人员，一般负责审批上线单。
3. 前端开发的核心语言

HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的：

  • HTML——结构：一门赋予网站内容结构和意义的语言
  • CSS——样式：一门美化网站页面的语言
  • JS——行为：用来为网站创建动态功能的脚本语言
  • HTML是用来标记内容的（重在内容组织上）

​ HTML是超文本标记语言的简称，它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。

  • CSS是用来修饰内容样式的（重在内容样式美化展示上）

​ CSS是层叠样式表的简称，它用来表现HTML文件样式的，简单说就是负责HTML页面中元素的展现及排版。

  • JavaScript是用来做交互的

​ JavaScript是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。

HTML与CSS、JS是不同的技术，三者的关系：

  • HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；

  • CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；

  • JS可以脱离HTML和CSS而独立存在；

  • JS可以操作HTML和CSS。

总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。

image-20230608114223338

二、HTML 基础

​ 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。其元素包括：

HTML 元素
  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
  • 内容（Content）：元素的内容，本例中就是所输入的文本本身
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素
image-20230608152608521 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开始学习 CSS</title>
</head>

<body>

    <h1>我是一级标题</h1>

    <p>这是一个段落文本。在文本中有一个 <span>span element</span>
并且还有一个 <a href="http://example.com">链接</a>.</p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 <em>三</em></li>
    </ul>

</body>

</html>
image-20230608144458638

三、CSS基础

​ HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，您可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

<link rel="stylesheet" href="styles.css">
image-20230608145206000

四、JavaScript

image-20230608153253042

posted @   德琪  阅读(136)  评论(0)  编辑  收藏  举报
相关博文：
· 程序员面试
· 点餐项目解析
· 前端工程狮
· web前端简介 | 什么是前端
· 前端知识点总结（一）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛