什么是前端？｜青训营笔记

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

什么是前端?

• 解决 GUI 人机交互问题

GUI是啥？
GUI的全称为Graphical User Interface，图形化界面或图形用户接口，是指采用图形方式显示的计算机操作环境用户接口。

与早期计算机使用的命令行界面相比，图形界面对于用户来说更为简便易用。

GUI的广泛应用是当今计算机发展的重大成就之一，它极大地方便了非专业用户的使用人们从此不再需要死记硬背大量的命令，取而代之的是通过窗口、菜单、按键等方式来方便地进行操作。

• 跨终端

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

• Web技术栈

Hyper Text Markup Language

• Hyper Text ==> 「图片」「标题」「链接」「表格」
• Markup Language ==>  <h1>文章标题</h1>

HTML 语法

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

!DOCTYPE

它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。\

语义化

语义化是什么？

• HTML中的元素，属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML

举个🌰

// 导航
<nav></nav>
// 下部｜尾部
<footer></footer>
// 主体
<main></main>

• 有序列表用ol，无序列表用ul
• lang属性表示内容所使用的语言

是谁在使用我们写的HTML

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

语义化的好处

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

• 感谢阅读～