前端语言串讲
前端语言的基本能力
对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑。
-
HTML
HTML主要负责构建框架结构，包含控制布局，为web设计师提供一个层次结构，是对前端开发最重要的基本语言，是构成网站的重要组成部分，负责 Web 的结构部分，用于指示浏览器网站中的元素，向 CSS 和 javascript 文件的链接
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="keywords" content="qtf">
<meta name="description" content="qtf的home">
<title>HOME</title>
</head>
<body>
Hello World！
</body>
</html>
-
CSS
CSS 的作用是美化界面。它负责字体、颜色、图像以及页面布局。它可以是内联文件，也可以是外部文件。
h1 {color:blue;front-size:12px;}
-
Javascript
JavaScript使页面更具交互性。JavaScript 把更多的功能附加到网站。从而使你可以轻松构建地图、在线游戏和交互式网站。但是，如果没有 HTML 和 CSS，JavaScript 是无法运行的。
(1)借鉴C语言的基本语法;
(2)借鉴Java语言的数据类型和内存管理;
(3)借鉴Scheme语言，将函数提升到"第一等公民" (first class)的地位;
(4)借鉴Self语言，使用基于原型(prototype) 的继承机制。
基本语法：
- Seven types
- String 2. Number 3.Boolean 4.Null 5.Undefined 6.Symbol 7.Object
- Basic Vocabulary
var a = 7+"2"
- Object
var user={
name: "Aziz Ali",
yearOfBirth:1988,
calculateAge:Function()
}
运行
HTTP——>构建DOM树——>计算CSS树——>排版——>渲染合成——>绘制
前端语言的协作配合
CSS样式
- 内联（行内）样式：
写在标签的属性里面，直接使用 - 内部样式表：
样式写在<style> </style>标签之间 - 外部样式表：
为一个独立的.css文件，需要通过<link href="路径"/>导入以便使用
优先级
优先级：(就近原则)内联样式>内部样式表>外部样式表
Javascript in Html
使用<script>元素将JavaScript插入HTML页面。<script>元素的src属性可以设置为存在HTML页面所在域之外的完整URL，如以下示例所示：
<script src="![]()http://www.somewhere.com/afile.js"></script>
当浏览器解析该资源时，它将向src属性中指定的路径发送GET请求以检索该资源（可能是JavaScript文件）。 最初的请求不受浏览器跨域限制的约束，但是返回并执行的任何JavaScript都会。 当然，此请求仍受父页面的HTTP / HTTPS协议的约束。
- 在HTML里嵌入JavaScript
在HTML文档里嵌入客户端JavaScript代码有4中方法：
- 内嵌，放置在
<script>和</script>标签之间 - 放置在有
<script>标签的src属性指定的外部文件中 - 放置自HTML事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定它
- 放在一个URL里，这个URL使用特殊的协议”javascript“协议
CSS inJavaScript
用 JavaScript 对 CSS 进行赋能，除了解决上述问题以外，还具备以下优点：
- 组件化，方便开发维护和测试
- JavaScript 和 CSS 可以方便的共享变量和方法
CSS Module
模块化 CSS，将依赖的 CSS 文件以模块的形式注入到 JavaScript 里，基本上解决了全局污染、命名混乱、样式重用和冗余的问题，但是还是以文档方式组织，维护起来比较麻烦。 目的：解决 CSS 中全局作用域的问题
你不知道的HTML(5)
HTML DTD
基本语法
- 标签(元素)Element
- 文本 Text
- 注释 Comment
- DTD Document Type Defination
- 处理信息 ProcessingInstruction
HTML标签分类
-
文档型
<!DOCTYPE><head><body> -
闭合型
闭合标签
<p> </p>
空标签
<br> <img> <input>
- 换行型
块级标签
<div> <h1>...<h6>
行内标签
<span> <a>
- H5新元素型 语义化标签
媒体标签
<video> <audio> <embed>
表单标签
<input type="date"> <input type="color">
功能标签
<canvas> <progress>
HTML head标签
- title:标题，全局唯一
- base：向页面所有相对URL提供前缀，全局唯一，不建议使用
- meta:通常是约定好的键值对，除：charset ,http-equiv
- link:rel决定类型，href决定引入地址
- script:type指定MIME类型，可内嵌代码，可外链文件
HTML5
- 语义化标签
类似于 p，span，img 等这样的，看见标签就知道里面应该保存的是什么内容的是语义化标签。
- 表单增强
<form action="get">
<!--颜色选择-->
<input type="color" name="color"> <br>
<!--邮箱输入-->
<input type="email" name="email"> <br>
<!--网址输入，只能输入完整的网址，包含‘http’这样的-->
<input type="url" name="url"> <br>
<!--电话号输入，只有手机号码-->
<input type="tel" name="tel"> <br>
<!--滑块 可以设置最大值，最小值，初始值-->
<input type="range" name="range" min="100" max="200" value="100"> <br>
<!--搜索类型的，多了一个快速清除的按键-->
<input type="search" name="search" id=""> <br>
<!--日期选择-->
<input type="date" name="date"> <br>
<!--提交-->
<input type="submit">
</form>
里面的name是用来发给后端的。
- 增加的表单属性
autofocus属性：
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required属性：
验证输入不能为空
Multiple:
可以输入一个或多个值，每个值之间用逗号分开
例：<input type=“email”multiple/>
还可以应用于file
pattern ：
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
- HTML5 PWA
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后借助于 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。
- HTML5 Audio
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
- HTML5 video
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
<video> 标签定义视频，比如电影片段或其他视频流。
- HTML5 Web Worker
web worker是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
HTML5提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。
- HTML5 Web Socket
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。（双向通信协议）
拓展分享
Web的风靡
- 对用户友好
无需安装，无需强大硬件，升级非常方便，容错率强，传播方便
- 对开发者友好
心智模型成熟，丰富的API能力，框架、工具标准化，开发、调试简单，具备跨平台能力
- 领域成熟度
浏览器厂商整合，各类web应用风靡，商用平面设计标准化，全面组件化
- 未来的方向
效率工具，服务端容器化，低（无）代码站点，大前端的统一，三维可视化
总结
这次课程中，老师从基础、协作、HTML、拓展交流四个方面讲解。基础部分主要讲HTML、CSS、JavaScript最基本也是最必须的3个技能。协作部分主要讲如何应用。第三部分先介绍标签，然后详细介绍了HTML5。最后进行拓展。
