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

前端基础知识-前端与HTML | 青训营笔记

什么是前端?

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

web领域的前端指的是和用户交互的页面。

前端技术栈

HTML（内容）， CSS（样式），JavaScript（行为），网络协议（如HTTP协议）。

前端应该关注哪些方面？

功能（核心）
美观
无障碍
安全
性能
兼容性
体验

前端的边界？

Node.js 【Node.js 就是运行在服务端的 JavaScript。】（Node.js (nodejs.org)）
Electron 【Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架】（Electron | 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。 (electronjs.org)）
React Native 【React Native 将原生开发的最佳部分与 React 相结合，致力于成为构建用户界面的顶尖 JavaScript 框架。】（React Native 中文网 · 使用React来编写原生应用的框架）
Web RTC 【WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的。】（WebRTC中文网-最权威的RTC实时通信平台 |）
WebGL 【WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。】（WebGL - Web API 接口参考 | MDN (mozilla.org)）
WebASSEMBLY 【缩写WASM，使C++/Rust等语言代码可以在浏览器运行】（WebAssembly）

前端的开发环境

浏览器（Chrome，Firfox，Safari，Edge，IE，...）
编辑器（VSCode，WebStorm，Vim，...）

HTML是什么

HyperText Markup Language

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

<!doctype html>：声明为 HTML5 文档
<html>：HTML 页面的根元素
<head>：包含了文档的元（meta）数据
<title>：文档标题
<body>：可见的页面内容
<h1>：一级标题
<p>：段落内容

DOM树

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如requi red、readonly

一些参考资料

HTML 基础知识。HTML 介绍
MDN 上的 HTML 参考，包含每个标签和属性的详细说明。developer.mozilla.org/en-US/docs/…
最新版的 W3C HTML5 规范。html.spec.whatwg.org/multipage/

内容划分

语义化

语义化是什么?

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用 ul
- lang属性表示内容所使用的语言

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码