前端与HTML（第二次笔记）

一、什么是前端

1.解决GUI人机交互问题

人机交互界面（User Interface，简称UI）是系统和用户之间进行交互和信息交换的桥梁。

用户向UI输入信息，UI将用户的输入翻译成机器语言，交由机器来处理，机器将处理结果在UI上转变成人类可知的信息，再输出给用户。

2.跨终端

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

3.Web 技术栈

*** 其中前端技术栈包括了三个方面：JavaScript（代表着行为） CSS（样式） HTML（内容）**

~~三者通过网络协议与服务器端相连接~~

二、前端应该关注哪些方面

1.七方面

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

2.前端的边界与开发环境

边界：如node.jsh和WebGL等

开发环境：门槛低，一款现代浏览器（如新版Chrome），一款集成式编译器如Vscode

三、HTML是什么

1.是包含了图片，标题，链接，表格的的超文本语言

2.包含了许多标签和属性

DOM树如图：

graph LR;
A[document]-->B(HTML)
B-->C(<<head>head>)
B-->D(<<body>body>)
C-->E[<<meta>meta>]
C-->F(title)
D-->G(h1)
D-->H(p)

~~后三个标签由于格式问题省略了<>~~

3.HTML语法

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

一个网页的结构可以进行划分：分为header以及nav块（nav是navigation导航的意思），还有main块（包括artist）以及aside和footer（页脚）

四、语义化

1.语义化是什么

HTML中的元素，属性，以及属性值都拥有某些含义
开发者应当遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言（方便浏览器识别）

由于众多开发者和众多浏览器以及搜索引擎还有屏幕阅读器需要我们写的HTML，所以制定一个统一的语法和标准是必须的

2.语义化的好处

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

==在开发中我们需要传达的是内容而非样式==

3.如何做到语义化

了解标签的属性和含义
思考什么标签最适合描述这些内容
不借助外部工具直接生成代码

最后一些小tips：

标签和属性可以翻阅官网查找用法与含义，更多的应该结合实例去思考才能更好的体会。

前端与HTML（青训营第二次笔记）