前端与HTML | 青训营笔记

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

什么是前端

• 解决GUI人机交互问题

• 跨终端

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

• Web技术栈

前端技术栈

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

前端的边界

• node.js服务端开发
• ELECTRON客户端桌面应用程序开发
• React Native客户端应用开发
• Web RTC P2P通讯
• WebGL 3D网站开发
• WebASSEMBLY 让C、C++、Java等原生语言编写的模块运行在浏览器上

开发环境

• 浏览器

  • IE/Edge
  • Chrome
  • FireFox
  • Safari

• 编译器

  • VSCode
  • Vim
  • WebStrom

HTML

什么是HTML

HTML=HyperText Markup Language=超文本 标记 语言

HTML标签

一个简单的HTML

这样的HTML代码会在浏览器中被解析成一棵DOM树

并最终在渲染在浏览器页面上

HTML语法

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

更多HTML标签

标题 h1~h6

HTML 列表

输入框

文本

内容划分

什么是语义化

• HTML中的元素、属性及属性值都拥有某些语义

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

  • 例如有序列表用ol；无序列表用ul；自定义列表用dl
  • lang属性表示内容的语言；disabled属性表示禁用

为什么要语义化

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

怎么语义化

传达内容，而不是样式

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

总结

这节课是青训营第一节课，小试牛刀，是前端最基础的基本知识，主要价值在于构建前端知识体系，更多关于HTML的教程可以参考

[菜鸟教程|HTML5]  www.runoob.com/html/html5-…