前端板书1

《网站前端程序设计》

1、课程介绍

前端：在浏览器运行的全部对象
前端包括三个部分：html+css+JavaScript(js)

• html:内容
• css:表现
• js：行为

2、前端框架

• js框架:jQuery、Angular.js、Vue.js、Node.js
• web框架:Bootstrap（响应式的web框架）
• 移动web框架：mui

3、开发工具和浏览器

• 开发工具：
  文本编辑器（sublime、Hbuilder、EditPlus）
• 浏览器：
  Chrome（谷歌）、Firefox（火狐）、Safari（苹果）、Opera（欧朋）、IE（微软）

html（超文本标记语言）

常见的标记：

<h1>~<h6>标题
<p>:段落
<hr>:水平线
<br>:换行
&nbsp;:空格

使用sublime设计静态网站的通常步骤：

1. 先建文件夹（站点）
2. 在sublime中打开文件夹
3. 在站点中新建页面
4. 编码(在sublime中按下"!"，再按TAB键自动生成网页的基本结构)

注：输入html标记的方法：先输入标记名，再按TAB键会自动生成一对标记。

CSS（层叠样式表）

在html页面中输入css代码

1. 在标记内，输入一对

CSS经常使用的属性

font-size: 24px;/*字号为24像素*/
text-align: center;/*对齐方式为居中;取值为left时表示左对齐;取值为right表示右对齐*/
color: blue;/*文本颜色为蓝色*/
border-color: #ff0000;/*边框颜色为红色;#ff0000至关于red,故也可写做red*/

代码标点符号一概使用英文标点

JavaScript

在html页面中输入js代码：

一、可在html的任何位置，输入一对<script>标记
例如：
<script>
alert('hello!');
</script>

代码标点符号一概使用英文标点

sublime的快捷键

TAB:缩进
shift+TAB:反向缩进
Ctrl+鼠标的滚动：缩放视角
ctrl+/:注释
ctrl+shift+D:快速复制当前选中的内容