前端

什么是前端？

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

前端技术栈

HTML（内容）

CSS（样式）

Javascript（行为）

前端应该关注哪些方面？

美观，安全，功能，性能，无障碍，兼容，体验。

前端的边界

前端的边界非常模糊，通常来说，前端负责浏览器端的内容展示和交互逻辑，但是在一些项目中，前端也会涉及到后端的部分，比如模板引擎、Web框架等。因此，前端开发人员需要掌握一定的后端知识，以便更好地与后端人员协作。此外，前端还需要关注用户体验、性能优化、代码架构等方面的问题，以提供更好的产品和服务。前端在互联网行业中是一个发展非常快的领域，需要持续的学习。

开发环境

浏览器+编辑器

HTML

Html是HyperText Markup Language的缩写。

HyperText标记语言，用于制作网页。HTML由一系列的元素组成，这些元素描述了网页的结构和内容。HTML标记语言采用了标记的形式，使用一些列的标签来描述网页中的各种元素，比如文字、图像、音频和视频等。除了纯文本，HTML还可以包含其他类型的媒体，比如图像和视频等。

HTML基础模板

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html> 是 HTML5 的文档类型声明，它告诉浏览器正在使用哪个 HTML 版本来解析这个文档。DOCTYPE 声明通常放在 HTML 文档的最开始处，告诉浏览器这个文档使用的是 HTML5 规范。

在 HTML4 中，DOCTYPE 声明用于指定使用哪个 DTD（文档类型定义）来验证 HTML 文档的正确性。而在 HTML5 中，DOCTYPE 声明不再指定 DTD，只需要使用 <!DOCTYPE html> 即可。

DOCTYPE 的作用是告诉浏览器如何解析文档，如果缺少 DOCTYPE 声明，浏览器解析文档时可能会进入怪异模式，导致页面出现各种错误。

HTML标签用于描述网页的结构和内容。其中，head标签和body标签是HTML文档的两个主要部分。head标签用于定义文档的头部，包含了文档的元信息和其他相关信息，如文档的标题、字符集、引用外部样式表和脚本等。body标签用于定义文档的主体，包含了文档的实际内容，如文本、图像、超链接等。在HTML文档中，head标签和body标签是必须要有的，且head标签必须在body标签之前定义。

DOM树

文档对象模型（DOM）是一种用于Web文档的编程接口。它表示页面，以便程序可以更改文档的结构、样式和内容。DOM将文档表示为节点和对象。因此，编程语言可以与页面交互。

HTML语法

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

语义化是什么？

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

语义化的好处

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

如何做到语义化

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

前端与HTML | 青训营

前端