1.前端语言的基本能力
（1）“三剑客”的联系和区别
联系
区别
①HTML（Hypertext Markup Language)
主要作用是构建框架结构，控制内容布局，为Web设计师提供一个层次结构,是所有Web页面的即始。
②CSS（Cascading Style Sheet)
主要作用是给网站添加样式，具体包含给元素添加样式，适应不同尺寸的屏幕，是网站外表和体验的重要工具。
③Javascript
主要作用是提供网页交互，处理复杂的函数和特性，优质代码，保证更高的效率及可用性。
发展历程
创始人
语言设计特点
(1)借鉴C语言的基本语法。
(2)借鉴Java语言的数据类型和内存管理。
(3)借鉴Scheme语言，将函数提升到”第一等公民”(first class) 的地位。
(4)借鉴Self语言，使用基于原型 (prototype) 的继承机制。
基本语法
2.前端语言的协作配合
CSS in HTML
Inline CSS
<p style="color: blue;">This is a paragraph.</p>
Internal CSS
<head>
<style type=text/css>
body {background-color: blue;}
p { color: yellow;}
</style>
</head>
External CSS
引用web的样式
<head>
<link rel="stylesheet" type="text/css" href=style.css">
</head>
Javascript in HTML
HTML in JavaScript
function renderHello() {
var template = document.getElementById('template').innerHTML;
var rendered = Mustache.render(template, { name: 'Luke' });
document.getElementById('target').innerHTML = rendered;
}
<html>
<body onload="renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
<script src="https://unpkg.com/mustachelatest"></script>
<script src="render.js"></script>
</body>
</html>
你不知道的HTML
HTML并非图灵完备，它只是一门标记语言
基本语法
HTML全部标签分类
①文档型:< IDOCTYPE> < chead> < body>
②闭合型：
闭合标签：< p>< / p >
空标签： < br> < img> < input>
③换行型：
块级标签 < div> < h1>,< h2>...< 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类型 可内嵌代码，可外链文件
个人感受:第一天的课程初步了解了三剑客的区别与联系，JavaScript的发展史，以及一些HTML的标签分类......对我这样渴望学习前端的小白来说受益良多。
