这是我参与「第五届青训营 」伴学笔记创作活动的第1天，活动详情查看：📚 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营 - 掘金 (juejin.cn)
1. 前端
1.1 什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
1.2 前端技术栈：Javascript（行为）+ CSS（样式）+ HTML（内容）
1.3 前端应该关注：美观、安全、功能、体验、性能、兼容性...
2. HTML
2.1 HTML是 hypertext markup language（使用标记语言来表示超文本）
一个标准的HTML文档的示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容。</p>
</body>
</html>
<!doctype html>放在HTML文档最前面，标记了HTML版本，浏览器会按照W3C的HTML5标准来解析渲染页面<html>根元素，包含整个页面的内容<head>对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等<body>该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等
最终在浏览器里的呈现效果为：
2.2 DOM树是把HTML代码解析为对应树形结构
2.3 HTML语法
- 空标签可以不闭合，如img、input、br等
- HTML元素标签不区分大小写
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，比如required、readonly
2.4 HTML元素
- 标题h1~h6
- 列表：有序列表，无序列表，属性列表
- 链接
- 图片，音频，视频
- 输入
- 选项选择
- 文本类标签
2.5 HTML内容划分
页面的布局结构如下图：
<header>
- 展现介绍性信息
- 通常包含⼀组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
- 不能放在
<footer>、<address>或者另⼀个<header>元素内部
<nav>
- 在当前⽂档或其他⽂档中提供导航链接，如菜单、目录、索引等
- ⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到
<footer>里置于底部
<main>
- 页面主体部分，一个页面只有一个
<main>标签
<article>
- 独⽴的⽂档、⻚⾯、应⽤、站点
- 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提 交的评论、交互式组件等
<aside>
- 表示⼀个和其余⻚⾯内容⼏乎⽆关的部分，或者说单独拆出来不会影响整体的内容
- 通常放在侧边栏，⽤于展示⼴告、tips、引⽤内容等
<footer>
- 表示最近⼀个章节的⻚脚
- 通常包含该章节作者、版权数据或者⽂档链接等信息
<footer>内的元素不属于章节内容，不包含在⼤纲中
2.6 HTML语义化
- HTML中的元素、属性及属性值都拥有某种含义
- 开发者应该遵循语义来编写HTML
-
- 有序列表以ol;无序列表用ul
-
- lang属性表示内容所使用的语言
2.7 谁在使用我们写的HTML？
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎.提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
2.8 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
2.9 如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
