这是我参与「第四届青训营 」笔记创作活动的的第1天
预习部分
了解HTML基础知识，参考MDN上HTML 介绍 - 学习 Web 开发 | MDN
1. 前端
-
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。
-
解决GUI人机交互问题
-
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
1.1 技术栈
1.2 前端关注的内容
功能、美观、安全、体验、无障碍、性能、兼容性
1.3 开发环境
- 浏览器（谷歌、edge、火狐）
- 编辑器（VSCode；Vim；Webstorm）
1.4 前端的边界
2. HTML
2.1 HTML介绍
-
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
-
HyperText Markup Language
- HyperText：超文本（图片/标题/链接/表格）
- Markup Language :标记 （标签）
2.3 HTML语法
标签内：属性 = 属性值
-
<img src = "photo.jpg" />
<!doctype html> <!--指明html版本，指定浏览器渲染模式-->
<html> <!--根标签-->
<head> <!--页面源数据，用户不可见-->
<meta charset="UTF-8"> <!--设置页面编码格式-->
<title>页面标题</title> <!--网页标题标签-->
</head>
<body> <!--页面主体数据，用户可见-->
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
2.3.1 DOM树
2.3.2 语法规范提示
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如
inputmeta - 属性值推荐用双引号包裹
- 某些属性可以省略，比如
requiredreadonly
2.3.3 标题h1~h6
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.3.4 列表标签
-
有序列表（orderlist）
<ol> <li>阿凡达</li> <li>泰坦尼克号</li> <li>复仇者联盟</li> </ol> -
无序列表（unorderlist）
<ul> <li>🍇</li> <li>🍉</li> <li>🍎</li> </ul> -
定义列表
<dl> <dt>导演：</dt> <dd>陈凯歌</dd> <dt>主演：</dt> <dd>张国荣</dd> <dd>张丰毅</dd> <dd>巩俐</dd> <dt>上映日期：</dt> <dd>1993-01-01</dd> </dl>
-
导演：
陈凯歌
-
主演：
- 张国荣
- 张丰毅
- 巩俐
-
上映日期：
1993-01-01
-
2.3.5 链接
<!--本页面打开-->
<a href = "https://www.bytedance.com/">字节跳动官网</a>
<!--新标签页打开-->
<a href = "https://www.bytedance.com/" target = "_blank">字节跳动官网</a>
2.3.6 多媒体
<!--图片-->
<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
alt="Metal movable type"
width="400"
/>
<!--音频-->
<audio
src="/assets/music.ogg"
controls
></audio>
<!--视频-->
<video
src="/assets/video.mp4"
controls
></video>
<!--controls属性用于打开控件-->
2.3.7 输入
<!--默认输入框，palceholder设置背景文字-->
<input placeholder="请输入用户名">
<!--滑动条-->
<input type="range">
<!--数字输入框，在1~10范围-->
<input type="number" min="1" max="10">
<!--日期选择框，起始时间2018-02-10-->
<input type="date" min="2018-02-10">
<!--文本输入区域-->
<textarea>Hey</textarea>
2.3.8 选择
<!--勾选框-->
<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏</label>
</p>
<!--互斥勾选框-->
<p>
<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</label>
</p>
<!--下拉选择框-->
<p>
<select>
<option>🥑</option>
<option>🥩</option>
<option>🥓</option>
</select>
</p>
<!--下拉文本输入框-->
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
2.3.9 文本展示
<!--blockquote是块引用-->
<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
<!--cite标签是短引用，引用作品名称或章节标题-->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<!--q标签表示引用上文的内容-->
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<!--code 代码-->
<p><code>const</code>声明创建一个只读的常量。</p>
<!--保留格式-->
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
<!--strong标签，含义上强调-->
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<!--em标签,一句话中的突出强调-->
<p>Cats <em>are</em> cute animals.</p>
2.4 内容划分
2.5 HTML的语义化
2.5.1 语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用 ol；无序列表用 ul
- lang 属性表示内容所使用的语言
2.5.2 HTML的页面的使用者
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
2.5.3 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
2.5.4 目标
传达内容，而不是样式
2.5.5 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
