1、什么是前端？
-
解决
GUI人机交互问题（GUI：图形用户界面） -
跨终端
PC/ 移动浏览器- 客户端 / 小程序
VR/AR等
-
Web技术栈
总结：前端工程师使用Web技术栈来解决多种终端图形用户界面下的人机交互问题。
2、前端技术栈
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
- 网络协议（如HTTP协议）
浏览器通过HTTP协议与服务器端进行通信，浏览器把前端的HTML、CSS、JS代码从服务器获取到，然后对页面进行渲染。
浏览器也可以把用户填写的内容或行为通过HTTP协议提交到服务器端。
3、前端应该关注哪些方面？
- 功能（核心）
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
- 体验
4、前端的边界？
- Node.js：服务器端应用
- ELECTRON、React Native：客户端应用
- WebRTC：点对点在线传输（多人聊天室）
- WebGL：3D游戏
- WebASSEMBLY：使C++/Rust等语言代码可以在浏览器运行
前端技术发展更新很快，只有不断持续学习才能跟上技术发展。
5、前端的开发环境
6、什么是 HTML ？
HyperText（超文本）：如图片、标题、链接、表格
Markup Language（标记语言）：<h1>文章标题</h1>
<!doctype html>：声明为 HTML5 文档<html>：HTML 页面的根元素<head>：包含了文档的元（meta）数据<title>：文档标题<body>：可见的页面内容<h1>：一级标题<p>：段落内容
浏览器通过解析HTML结构就会得到这样的一个DOM树，然后再将其渲染。
7、HTML 语法
- 标签和属性不区分大小写，推荐
小写 - 空标签可以不闭合，比如
input、meta - 属性值推荐用
双引号包裹 - 某些属性值可以省略，比如
required、readonly
7.1 标题 h1 ~ h6
7.2 列表
- 有序：
ol>li
-
无需：
ul>li自定义列表：
dl>dt(标题)>dd(内容)
7.3 链接
<a href="https://juejin.cn/user/3312156514989543">我的掘金主页</a>
href：跳转目标target：打开新的标签（_blank）
7.4 多媒体标签
<img>、<audio>、<video>
7.5 输入
<input>
plcaeholder：用户未输入，默认显示type：范围（range）、数字（number）、多选框（checkbox）、单选框（radio）min/max：最大值最小值（type="number"）、日历（type=“date”）
textarea ：文本域
7.6 列表
<select>><option><datalist>><option>
7.7 文本
引用：
<blockquote>：快捷引用<cite>：短引用，标题<q>：短引用，具体引用内容<code>：单行代码的引用<pre>><code>：多行代码的引用
强调：
<strong>：含义的强调<em>：语气的强调
7.8 内容划分
<header>：页头<nav>：导航<main>：主体<article>：文章<aside>：侧边栏<footer>：页尾
8、语义化是什么？
- HTML 中的
元素、属性及属性值都拥有某些含义 - 开发者应该遵循
语义来编写HTML- 有序列表用
ol；无序列表用ul lang属性表示内容所使用的语言
- 有序列表用
9、谁在使用我们写的 HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键字、排序
- 屏幕阅读器：给盲人读页面
内容
10、语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而不是样式
11、如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
