本讲义特别针对零此基础老师，传授中文网站合作开发四个此基础控制技术：HTML、CSS、JS，带你加速进阶！
本讲义的大部份习题，均为核心理念，要掌控！
看三百三十一讲义，你将专精委员会：
认知HTML、CSS、JS各别的促进作用自学HTML、CSS、JS基本上句法能写两个单纯的页面为加速上手练，能采用新浪网GUI，专精委员会此基础句法后，再浏览专精的中文网站合作开发GUI/合作开发自然环境（参见本讲义天然资源部份）。
1. HTML
HTML即LZ77标识词汇，是中文网站合作开发最此基础的词汇，单纯简练。
HTML用作表述中文网站的内部结构及文本，配置文档前缀为.html。
当他们在应用程序里查阅中文网站源代码（ ctrl + u ）或按F12关上合作开发人员辅助工具，具体来说看到的是中文网站的HTML源代码：
上面花 5 两分钟，自学下 HTML 句法。
1.1 条码
HTML采用条码句法表述FTP和内部结构，细密单纯。条码又可叫作原素。
两个基本上的HTML文档文本如下表所示：
条码具备如下表所示特征：
等距：两组条码有筑有闭，如 相关联 ，东道主条码圆括号里单字完全相同。
层级：条码可嵌套条码，体现了中文网站内部结构层级关系，比如两个框里能嵌套文字文本。
简易：条码名为英文单字或简写，方便联想记忆。
上面介绍常用条码：
HTML中，采用 表示注释，不会显示在页面中。
内部结构条码，大部份标准网页都要有且仅有两个：
…
…
很好记忆，把两个页面比喻成两个人，head是他们的大脑，存储重要的信息，body是他们的身体，用来表示文本。head在body上。
元信息条码，用来表述中文网站的基本上信息，放在head条码中：
他们发现 meta 条码内部以 / 结尾，没有和它相关联的条码，他们把这种条码叫作自闭条码。
文本条码
…
一级标题
二级标题
六级标题
段落换行啦
“>超链接
<img src=”https://t.cn/RCzsdCq“/>
其中，br、img 条码都是自闭条码。
代码运行效果如下表所示：
其他条码如table（表格）、ul（无序列表）、ol（有序列表）等可先不了解，均可用div条码替代。
1.2 属性
在上面的代码中，你可能发现，有些条码中除了条码名，还有其他文本，比如：
图像条码中的src是img条码的属性。属性用作改变条码的样式或行为，两个条码能设置多个属性。句法为：
由于很多属性可用CSS或JS替代，此处了解常用属性即可，不同条码具备的属性也不同。
2. CSS
CSS即层叠样式表，是美化页面的词汇，单纯简练。
CSS用作表述中文网站的样式和动画，配置文档前缀为.css。
2.1 引入
想要在html中应用css样式，需要先引入css，有三种方式：
文档引入
通过link条码（head条码内）引入css文档：
<link href=”https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css” rel=”stylesheet”>
href：要引入的css文档地址（绝对路径/相对路径）
rel：对于css文档，固定为stylesheet
内置样式
在style条码中（head条码内）书写css样式代码，仅对当前页面有效：
div {
color: red;
}
内联样式
在要应用样式的条码中，添加style属性，仅对当前条码有效：
2.2 选择器
页面中有那么多的条码，如何给指定的条码应用样式呢？比如有两个框，怎么让它们两个白色两个红色，或者都变成红色呢？
选择器是CSS核心理念概念，表述了一套选择条码的句法，能给指定的条码应用指定的样式。
要了解常用选择器：
假设他们有如下表所示html文本：
初始运行效果如下表所示：
通配选择器
选择页面的大部份条码（原素），句法如下表所示：
* {
…
}
采用较少。通常用作初始化两个页面，为大部份原素清除应用程序自带的默认样式。
条码选择器
选择指定名称的大部份条码，句法如下表所示：
条码名 {
…
}
能将上面css代码应用到上述html文本中，改变大部份div条码的字体颜色：
div {
color: red;
}
运行效果如下表所示：
id选择器
上面讲到，同两个页面中，id值要唯一（像身份证），能用id选择器改变唯一原素的样式。句法如下表所示：
#id值 {
…
}
能将上面css代码应用到上述html文本中，给两个盒子不同的背景颜色：
#box1 {
background: red;
}
#box2 {
background: yellow;
}
运行效果如下表所示：
class选择器
当他们要改变多个原素样式时，能给它们添加完全相同的class属性，然后用class选择器改变它们的样式。句法如下表所示：
.class值 {
…
}
能将上面css代码应用到上述html文本中，给大部份box盒子添加完全相同背景色：
.box {
background: red;
}
运行效果如下表所示：
其他选择器如子父节点选择器、兄弟节点选择器、伪选择器等可先不了解，采用较少，且均可用上述选择器替代。
2.3 样式
CSS能控制布局、块（原素）、文本（块内的文字、图片）等样式，以及增加动画效果。
上面介绍CSS常用的样式：
CSS中，注释用/* 注释文本 */表示。
2.3.1 布局
运行效果如下表所示：
能发现，本来每个盒子独立占一行，用了float布局后，变为了一行，从左往右依次排列。这和块级行级原素有关，后续讲义会讲到。
2.3.2 块
运行效果如下表所示：
2.3.3 文本
运行效果如下表所示：
CSS中支持多种颜色表示方式（background、color等属性）：
常用颜色英文单字：red\green\yellow 等rgb值：如rgb(0, 0, 0)或rgba(0, 0, 0, 0.8)16进制颜色值：如#000000以上是CSS常用样式，一定要自己多加练，查阅不同样式带来的页面效果变化。
3. JS
JS全称JavaScript，是能运行在应用程序中的脚本词汇，非常灵活强大。NodeJS出现后，为JavaScript带来了更多的可能性，也能作为后端合作开发词汇。
JS用作表述中文网站的交互行为，配置文档前缀为.js。
交互行为有很多种，比如点击按钮弹窗、填写提交表单、动态更新页面文本等。JS能极大地增强中文网站的功能和趣味性。
JS和CSS一样，都需要被html文档或其他js引入才能采用。
3.1 引入
想要在html中应用js脚本，需要先引入js，有两种方式：
文档引入
通过script条码（通常在body条码最底部或head条码）引入js文档：
…
src：要引入的js文档地址（绝对路径/相对路径）
type：对于js文档，固定为text/javascript
注意，script不同于引入css的link条码，script是等距条码。
内置脚本
直接在script条码中（通常在body条码最底部或head条码）写js脚本，仅对当前页面有效：
…
let a = 1;
…
3.2 基本上句法
自学任何词汇，都先从基本上句法学起，JS也是一样。如果之前学过其他编程词汇，进阶会更快。
上面介绍JS基本上句法：
JS中，单行注释用 // 注释文本 表示，多行注释用 /* 注释文本 */ 表示
3.2.1 基本上句法
JS是弱类型词汇，通过let关键字，能表述两个变量，支持传入各种类型（整数、小数、字符串、数组、对象等）：
console.log 是JS中最常用的函数，类似于C词汇的printf，能输出变量的值或信息，帮助他们调试。
3.2.2 表述函数
函数能够完成两个功能。给定输入参数，通过计算，得到输出结果。
现在页面有两个按钮，如何点击按钮后，触发弹窗呢？
他们能给按钮绑定两个鼠标点击事件（添加属性即可），当用户点击按钮时，触发相关联的JS函数：
运行效果如下表所示：
除了通过给条码加属性绑定事件，还能通过JS绑定事件，后续讲义会讲到。
4. 总结
让他们复习下中文网站合作开发基本上词汇HTML、CSS、JS的各别促进作用。
HTML：内部结构层， 表述页面内部结构和文本
CSS：表现层，表述中文网站的样式和动画
JS：行为层，表述中文网站的交互行为
合作开发中文网站时，三层通常按照顺序合作开发，要先有html，表述好中文网站的内部结构和文本，再用CSS美化中文网站，最后用JS给中文网站添加交互效果。
天然资源
主要是一些前端合作开发GUI / 合作开发自然环境。
HTML/CSS/JS新浪网GUI轻量、快略轻量、快重量、适合合作开发项目略轻量、有时不稳定HBuilder 略轻量、不够安全
