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

一、前端

1. 什么是前端

前端：

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

用户体验中所看到所用到的，都属于前端

2. 前端技术栈

前端范畴包括：

HTML（内容）
CSS（样式）
JavaScript（行为）

浏览器端（前端） 通过网络协议与 服务器端进行通信传输

HTML是名词，CSS是形容词/副词，JavaScript是动词

3. 前端关注的方面

前端应该关注哪些方面：

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

（功能完备，赏心悦目，普遍适用，安全保障，性能高效，可跨平台）
一切为了更好的用户体验

4. 前端的边界

前端技术是不断扩展更新，需要我们不断跟进学习

5. 前端的开发环境

前端开发环境：

浏览器
编辑器

学习前端的技术、前端的工具

二、HTML5

1.什么是HTML

HTML：

HyperText Markup language 超文本标记语言
- 超文本：图片、标题、链接、表格...（比文本更丰富的格式）
- 标记语言：标签包裹内容的语言（具有属性，属性名="属性值"）
  
  eg. < h1 >文章的标题< /h1 >

2. HTML标签

HTML部分标签：

doctype标签--->标记文件版本(标准模式/怪异模式)
html标签 ---> 根标签
head标签 ---> 记录元信息
body标签 ---> 呈现正文内容
标题标签h1~h6 ---> 标题重要性决定
有序列表ol、无序列表ul、自定义列表dl
链接a
图片img、音频audio、视频video
表单标签：
- input文本输入框(有多种类型可用)
- textarea多行文本框
- select > option下拉框>下拉选项
- datalist输入待选项
文本标签：
- blockquote块级引用
- cite名称的短引用、q内容的短引用
- code代码的短引用
- pre代码的多行引用
- strong重要性强调标注
- em语气强调标注
内容划分标签：
- header页头
- main主体
- aside侧边栏
- footer页脚
- nav导航
- article文章

3. DOM树

DOM树：

浏览器解析HTML代码生成的节点树

4. 语义化

什么是语义化：

元素、属性、属性值都有特定含义
开发者应该遵循语义来编写HTML

eg. 有序列表用ol、无序列表用ul、lang属性表示内容所使用的语言

语义化的好处：

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

如何做到语义化：

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

5. HTML语法

HTML语法：

不区分大小写，通常推荐使用小写
空标签可不闭合，比如input、meta
属性值使用双引号
一些属性值可以省略不写，比如required、readonly

HTML传达的是内容，而不是样式

6. HTML使用者

谁在使用HTML：

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

前端与HTML5 | 青训营笔记