前端技术栈 JavaScript（行为）CSS（样式）HTML（内容）通过网络协议与服务器端相联系
HTML vsCSS vs JavaScript有什么区别
虽然这三种前端语言都用于设计网站，但它们都有自己的特定用途和复杂性。例如，HTML 和 CSS 之间的主要区别在于HTML 创建网页的文档结构，CSS 通过添加格式和样式来美化网页。 JavaScript 可以说是三者中最复杂的，用于使网站更具交互性，并支持开发更复杂的网站——弹出框、更改颜色的按钮以及您喜欢的网站的所有其他动态方面都可能启用通过JavaScript。
他们三者的作用如下： HTML：互联网的基石 HTML 代表超文本标记语言。它是一种相对简单的语言，允许开发人员创建网站的基本结构。即使是最复杂的网站也以 HTML 为核心。根据最近的 Stack Overflow 调查，它也是开发人员使用第二多的编程语言。 原因在于，HTML（与其他标记语言一样）不是使用编程语言来执行所需的功能，而是使用标签来注释或“标记”网页上不同类型的内容并确定它们各自的用途页面的整体设计。实际看到的 HTML 片段可能比意识到的要多。有没有人注意到打印出来的电子邮件底部的文字是“ ”之类的？那就是HTML的具体提现。标记语言还可以帮助 Web 开发人员避免单独格式化项目类别的每个实例（例如，将网站上的标题加粗），从而节省时间并避免错误。
HTML 使用“元素”或标签来表示诸如段落开头、字体加粗或添加照片标题之类的内容。通过这种方式，它控制网页的外观、文本的分隔和格式以及用户看到的内容。对于以前从未使用过编程语言的人来说，HTML 是一个很好的起点。
CSS 如果 HTML 代表网站的构建块，那么 CSS 是一种塑造和增强这些块的方法。CSS 是一种样式表语言，用于指定网页不同部分对用户的显示方式。换句话说，它是一种为人们已经使用 HTML 构建的内容添加一些样式和附加格式的方法。
例如，也许有人已经使用 HTML 添加标题文本，现在希望该标题具有更令人愉悦的字体、背景颜色或其他格式元素，使其更加时尚、专业和时尚。这就是 CSS 的用武之地。CSS 还可以帮助网站适应不同的设备类型和屏幕尺寸，以便你的页面在智能手机、平板电脑或台式电脑上呈现同样出色的效果。
要了解 HTML 和 CSS 之间的区别，了解它们的历史很重要。当 HTML 于 1990 年发明时，它只是被设计用于通知文档的结构内容（例如，将标题与正文分开）。然而，当字体和颜色等风格元素被开发出来时，HTML 无法适应。为了解决这个问题，CSS 被发明为一组可以为 HTML 元素分配属性的规则，在现有标记语言的基础上创建一个更复杂的网页。
JavaScript JavaScript 是本文讨论的三种前端语言中最复杂的一种，建立在 HTML 和 CSS 之上。如果你想比较这些语言，可以这样想：虽然 HTML 为网站创建了基本结构，但 CSS 为该结构添加了样式，而 JavaScript 承担了所有这些工作，并使其具有交互性且功能更复杂。
JavaScript 工作原理的一个经典示例是您习惯于在大多数网站的顶角看到的菜单按钮。您知道其中的一个 - 三个堆叠的行显示了单击时可以访问的网站部分列表。由于 JavaScript，这些按钮及其功能都存在。它还可以帮助您开发键盘快捷键或在光标悬停在按钮上时更改按钮的颜色。
JavaScript 对所有 Web 开发都至关重要。所有现代网络浏览器都支持它，并且几乎在网络上的每个站点上都使用它。根据 Stack Overflow 最近的一项调查，JavaScript 是全球开发人员最常用的编程语言，67.7% 的开发人员将其用于工作中。所以，如果你对学习 Web 开发感兴趣——无论是专业的还是只是作为一种爱好——你学习 JavaScript 会很聪明。
前端介绍
解决GUI人机交互问题
前端关注的方面： 功能，美观，无障碍（色盲），安全，性能，兼容性，用户体验
前端的开发环境 浏览器：IE，Chrome,Firefox,Safari
编辑器：VsCode,Vim,WebStrom
HTML定义
HyperText. 超文本（图片，标题，链接，表格）
Markup. Language（标记语言）
标签上记录属性：img src（属性名）=“photo.jpg”（属性值）/>
HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input,meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required,readonly 标题分类 h1～h6表示一级标题～六级标题
标签 •序列表：ol表示有顺序的，如排行榜，每个列表项用li表示
•无序列表：如购物表，用ul表示
•dl解释属性值，如导演：陈凯歌（下分dt定义列表；dd具体的属性值）
链接a
href表示引入超链接地址
img插入图片（src是图片地址；width宽度；alt替代图片加载不出来的文字） audio,video(音频，视频）都有src,controls
输入（input)
placeholder占位符，用户啥都不写默认的文字
type=“range”一段范围（滑动块）
指定数值：type=“number”min=“1” max=“10”
指定日期：type=“date”min=“2018-02-10”
多行文字：textarea
让用户可多选几个值：type=“checkbox”;单个值：type=“radio”
多个选项值可以下拉:select,每个选项用option表示
blockquote长引用别人的一段话；cite短引用，如作品名字；q短引用，具体引用的内容；code引用代码
表示强调：strong(内容重要），em（一段话需要重读的词）
内容划分
标头用header标签，导航栏用nav,主体部分用main（一般只有一个），与内容有关但不重要：aside
正文article（可以有多个），footer表示参考文献之类的
语义化
- HTML中的元素、属性、属性值都有某种含义
- 开发者应遵循语义编写HTML（有序列表ol，无序列表ul；lang表示内容使用的语言） 使用者
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
语义化优点 代码可读性，可维护性，搜索引擎优化，提升无障碍性
如何做到语义化
了解每个标签，属性的含义；思考什么标签最适合描述这个内容；不使用可视化工具生成代码
通过本次课的学习，我了解到了前端中HTML的基础知识，前端工程师的指责是开发并实现产品功能从而服务用户，在设计时更多的要关注内容而不是样式；同时要编写符合规范的代码，根据工作安排高效高质地完成代码编写，确保符合前端代码规范
