这是我参与「第四届青训营 」笔记创作活动的的第1天.
什么是前端
一句话概括：前端工程师就是使用web技术栈解决多端人机交互问题的工程师。
前端技术栈：
- HTML(内容：主要是文字，图片部分)
- CSS（样式：包括字体，布局等）
- Javascript（行为：函数）
- 网络协议HTTP
前端页面的特点：
- 功能：页面本身的功能
- 美观
- 无障碍：考虑弱势群体
- 安全
- 性能：用户体验
- 兼容性：不同设备，浏览器
前端还能做什么
开发客户端，p2p，编译代码。。。
开发环境
- 浏览器：Edge，chrome，Firefox，safari
- 编译器：VScode，Vim，Webstorm
HTML
HyperText Markup Language 超文本（图片，链接，表格）标记语言（使用标签表示超文本）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
<!DOCTYPE html> 标记HTML版本->浏览器的渲染模式
<html>根标签
<head>给开发者的信息（用户看不到）dom树
树代码是树形结构，每个节点称为dom节点
HTML语法
<li>无序列表
<ul>有序列表
<dl>定义列表
<dt>定义</dt>
<dd>内容</dd>
链接/跳转：<href> <src=....com> <alt>
多媒体：<audio> <video>
输入：
<input placeholder="默认字符">
<input type="样式">
<textarea>文本框</textarea>
选择：
<label><input type="radio" name="sport" />选项</label>
<select>
<option>下拉选项</option>
</select>
<input list="快捷提示">
引用：
<blockquote>快捷引用，长引用<cite>短引用，表作品名字或章节<q>引用之前的内容，一般也是短引用，表示章节内容
代码：
<pre><code>
强调：
<strong>含义重要
<em>重音
页面划分：
（图片见PPT）
HTML语义化
开发者应该根据语义来使用标签，使得浏览器和用户更好地理解页面含义。 代码能呈现页面原意，而不是只专注于样式。传达内容，而不是样式
谁在使用HTML
- 开发者:维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键字
- 屏幕阅读器：为视障人士提供内容
如何做到语义化
- 了解每个标签和属性的含义（学好基础语法）
- 思考什么标签能更好的展示内容的原意
- 不使用可视化工具
