前端与HTML | 青训营笔记

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

课前准备

安装浏览器

请下载安装一个「现代」浏览器，推荐使用 Chrome。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。推荐使用 Visual Studio Code。

课程内容

一、本堂课重点内容：

• 什么是前端？

• HTML 的概念、语义化和常用的 HTML 标签。

二、详细知识点介绍：

一、前端

• （1）什么是前端？

• 解决 GUI 人机交互问题

• 跨终端

  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR 等

• Web 技术栈

• （2）前端技术栈

• （3）前端应该关注哪些方面？
• 功能、体验、美观、安全、兼容、性能、无障碍等

二、HTML

HTML的定义

定义： HTML --> 超文本标记语言（Hyper Text Markup Language）

超文本：顾名思义就是指超越文本，也就是指图片、链接、标题、表格等。

标记语言：使用标签表示各种各样的元素。HTML的标签一般是成对出现的，如：<h1></h1>等。也有不成对的标签，如<img src="photo.jpg" />，其中，src是属性名，"photo.jpg"表示属性值。

DOM树

讲这个概念首先讲一下什么是DOM，DOM的全名是文档对象模型（Document Object Model），其将文档作为一个树形结构，树的每个节点表示一个HTML标签。

HTML语法

这部分与其说是语法，我倒更觉得是一些建议。内容如下：

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

三、具体知识点：

• 1. html文件结构
• 2. 文本标签
• 3. 图片
• 4. 音频与视频
• 5. 超链接
• 6. 表单
• 7. 列表
• 8. 表格
• 9. 语义标签
• 10. 特殊符号

四、课后个人总结：

• HTML内容繁多且零散，适合用到的时候去MDN官方文档中查找

五、引用参考：

• 在官方文档中可以更多HTML 的基础知识「 HTML 介绍 」。