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

第一节：前端与HTML

HTML(HyperText Markup Language)是用于构建网页及其内容的代码。HTML是一种超文本标记语言。

什么是前端？

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

前端应该关注那些方面？

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

前端的边界？

开发环境

HTML是什么？

HTML 语法

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

标签

HTML包含6个标题级别，<h1>-<h6>

链接

使用<a>,"a"是"anchor"的缩写, 为<a>元素指定一个属性，<a href=""></a>把相应的网站填写在""中

网页内容划分

语义化是什么？

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

谁在使用我们写的HTML

• 开发者-修改、维护页面
• 浏览器-展示页面
• 搜索引擎-提取关键字、排序
• 屏幕阅读器-给盲人读页面内容

语义化的好处

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

如何做到语义化

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