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

课程简介

本节课程会介绍下前端是什么、要解决的问题和技术栈等。本节也会介绍 HTML 的概念、语义化和常用的 HTML 标签。

课前准备

安装浏览器

请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。

提前阅读

课前可以先了解下一些 HTML 基础知识

前端技术栈

• javascript(行为)
• css(样式)
• HTML(内容) 通过http协议, 与服务器交流

解决的问题

• 功能
• 安全
• 无障碍
• 兼容
• 性能
• 美观
• ......

前端的边界

• node.js服务器
• electron 桌面应用
• react native app
• webrtc 在线传输
• WebGL 3d游戏
• webASSEMBLY
• ......

HTML语法

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

一些标签

官网地址👉 www.w3.org

• <em> 重要
• <code> 代码
• <strong> 加粗
• ...

HTML语义化

HTML中的元素、属性及属性值所拥有的含义

开发者应该遵循语义来编写HTML

有序列表用ol；无序列表用ul

lang属性表示内容所使用的语言

如何做到语义化

了解每个标签和属性的含义

思考什么标签适合描述这个内容

不使用可视化工具生成代码

总结

HTML代码不仅是用来显示的, 同时也有很多语义化作用!

开发者: 阅读代码

浏览器: 展示页面

搜搜引擎: 提取关键字, 便于SEO优化

屏幕阅读器: 为盲人读出内容

课后阅读材料

MDN 上的 HTML 参考，包含每个标签和属性的详细说明

developer.mozilla.org/en-US/docs/…

最新版的 W3C HTML5 规范

html.spec.whatwg.org/multipage/