前端与HTML | 青训营笔记

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

本堂课重点内容

• 介绍了前端的目标、技术栈、框架等
• 介绍了HTML的定义、语法
• 介绍了HTML的语义化

知识点具体内容

前端介绍：

前端的目标： 跨终端地解决GUI人机交互问题

前端技术栈： HTML, CSS, JS, 网络协议

前端框架： Node.js, React Native, Electron, WebRTC, WebGL

前端的关注点： 功能、美观、兼容、用户体验、数据安全、性能

HTML介绍：

HTML: HyperText Markup Language

HyperText (超文本）：图片、标题、表格、链接等等

Markup Langauge (标记语言）：将文本内容与文本信息结合起来并使用标记进行标识的语言

HTML 语法：

• 标签和属性不区分大小写
• 空标签可以不闭合
• 属性值用双引号包裹
• 某些属性值可省略

常用 HTML 标签:

• 标题 (h1 ~ h6)
• 段落 (p, article)
• 链接 (a)
  • href为跳转的链接地址
  • target = "_blank"使该链接在新的标签页打开
• 输入 (input)
• 内容划分 (header, main, aside, footer)
• 列表 (ol, ul, dl)
  • ol：有序列表
  • ul: 无序列表
  • dl: 数据列表
• 图片 (img)
  • src: 图片源
  • alt: 加载不出图片时的替代方案
• 音视频 (audio, video)
  • src: 媒体源
  • controls: 控制按钮组

HTML 语义化：

含义：

• HTML中的元素、属性和属性值都具有某些含义
• 开发者应遵循语义来编写HTML，即用正确的标签做正确的事情

好处：

• 提升代码可读性以及可维护性
• 使页面的内容结构化，便于浏览器、搜索引擎解析
• 提升用户阅读页面的体验

如何做到语义化：

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 传达内容，而不是样式 --> 将HTML与CSS区分开
• 不使用可视化工具直接生成代码

个人总结

本节课由浅入深地介绍了前端以及HTML，让我更清晰地认识到前端具体的工作内容以及目标。

同时，对HTML语法，代码规范和语义化的介绍对之后的开发大有好处。

不过由于HTML标签丰富多样，还需要多记忆、多使用，才能更好地编写HTML代码。