前端与HTML|青训营笔记

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

什么是前端

解决GUI人机交互问题。

跨终端

1. PC/移动浏览器
2. 客户端/小程序
3. VR/AR等
4. Web技术栈

前端技术栈

HTML（内容）

CSS（样式）

JavaScript（行为）

前端应该关注哪些方面

1. 功能
2. 美观
3. 无障碍
4. 安全
5. 性能
6. 兼容

开发环境

HTML

Hyper Text Markup Language，超文本标记语言。

doctype标记了当前html的版本。

html:根标签，所有的标签放在html标签中。

head:存放页面元素句（页面上需要但又不需要提供给用户的），比如页面标题、页面编码。

body:存放需要展示给用户的元素，如标题、文字。

DOM树

将html代码转化成树形结构，其中的每个节点称为树形节点。

HTML语法

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

h1~h6：标题

ol：有序列表

ul：无序列表

dl：定义列表

a：链接（anchor）

href：超链接属性

img：图片

src：资源属性

alt：替代性文本属性

audio：音频

video：视频

input：文本输入框

blockquote：块级引用

cite：短引用，作品的名字或章节

q：短引用，内容

code：代码

strong：重要

em：语气强调

内容划分

header:页头

main:主体

aside:相关

article:正文

footer:页尾

语义化

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

谁在使用我们写的HTML

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

好处

1. 代码可读性
2. 可维护性
3. 搜索引擎优化
4. 提升无障碍性

如何做到语义化

传达内容而不是样式。

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