前端板书1

《网站前端程序设计》

一、课程介绍

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

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

二、前端框架

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

三、开发工具和浏览器

• 开发工具：
  文本编辑器（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代码：

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

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

   sublime的快捷键

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