这是我参与「第四届青训营」笔记创作活动的的第1天

什么是前端？

我们要解决的是一个什么样的问题？
图形界面下的人机交互问题。
跨终端
    PC 浏览器/移动浏览器
    App /小程序
    AR / VR 等设备
Web 技术栈
HTML 、 CSS 、 JavaScript 、 HTTP 网络协议等。

总结

前端工程师通过使用 web 技术栈解决多端问题、图形界面问题、人机交互问题的工程师。

前端技术栈主要分为三层：

      HTML : 负责结构和内容，用于描述页面的结构，像房子；
      CSS : 负责表现或样式，用于控制页面中元素的样式，像给房子装修；
      JavaScript : 负责行为，用于相应用户操作，像给房子通水。

      HTML 、 CSS 、 JavaScript 都是在浏览器里边运行的，浏览器可以通过 HTTP 协议从服务器中拿到这些前端代码（浏览器和服务器之间通过 HTTP 协议进行通信），拿到之后浏览器把它渲染成我们看到的页面。

      HTML 、 CSS 、 JavaScript 、 HTTP 构成了前端最基础的技术栈。

前端应该关注哪些方面：

      人机交互涉及到的那些方面。
      前端不仅要懂技术，还要关注功能、界面的美观、无障碍（做的网站是不是对所有人都可以用，比如说有色盲症的人群，我觉得用“适用人群”可能会更好理解）、安全、性能（网站加载速度、动画流畅、……）、兼容性。
      用户对于产品最直观的感受基本上取决于前端，前端对于用户的体验来说是非常重要的。

前端的边界

      随着新的技术不断的发展，前端能做的东西已经远远超出了页面这个简单的范畴。
              • 使用 Node.js 去开发一些服务器端的应用；
              • 使用 Electron 、 React Native 去开发一些客户端的应用；
              • 使用 WebRTC 进行 p2p 方式的多人会议；
              • 使用 WebGL 开发出非常流畅的 3D 游戏；
              • 使用 WebASSEMBLY 把 C++ 、 Rust 等其它语言写的代码编译成可以直接在浏览器里边运行的代码；
              • ……

部分标签

<!doctype html> 指明文件使用的 html 的版本，决定浏览器使用哪种渲染模式；不写，浏览器会以比较老旧的怪异模式去渲染页面，造成页面的展示效果和实际的不符。
<html></html> 文档的根标签，包含 <head></head> 和 <body></body>。
<head></head> 存放页面的源数据
<body></body> 存放用户可见的内容

无序列表 —— ul

      列表项 —— li
      ul 的属性：
          type 列表标识类型：
            • disc : 实心圆（默认值）
            • circle : 空心圆
            • square : 实心矩形
            • none : 不显示标识

有序列表 —— ol

      列表项 —— li
      ol 的属性：
          1. type 列表标识类型：
            • 1 : 数字（默认值）
            • a : 小写字母
            • A : 大写字母
            • i : 小写罗马字符
            • I : 大写罗马字符
          2. start 列表表示的起始编号，默认为1

自定义列表 —— dl

列表项头 —— dt 列表项 —— dd

部分 input 属性

      1. placeholder 规定可描述输入 <input> 字段预期值的简短的提示信息；
      2. type 规定要显示 <input> 的类型（这里列出部分）：
        • checkbox : 多选框（通过 input 的 name 属性实现分组）
        • radio : 单选框（通过 input 的 name 属性实现单选）
        • number
<input type="number" min="1" max="10">
通过点击右侧两个按钮值会在 1 到 10 之间，直接输入不受限
        • date : 日期选择框（通过 input 的 min 属性和 max 属性指定可选择日期的区域）
            <input type="date" min="2022-07-12" max="2022-07-28">

        • range

下拉框

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

上面的下拉框不支持输入，改进：

<input list="chooseList">
<datalist id="chooseList">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</datalist>

与文章有关的部分标签

<blockquote></blockquote> 块级引用， cite 属性引用来源；
<cite></cite> 短引用，表示引用作品名字或者章节，例如： <cite>第一章</cite>
<q></q> 短引用，与 cite 区别就是 q 引用具体的内容，例如:<q>灵根育孕源流出　心性修持大道生</q>(西游记第一章网上随便找的)；
<code></code> 引用代码；
<strong></strong> 和 <em></em> 的区别：strong 强调这个东西非常的重要、严重、紧急; em 强调语气。

内容划分

BCJSS7D%@_~Y_41N%IP1D2P.png

前端及部分标签|青训营笔记