《网站前端程序设计》
一、课程介绍
前端:在浏览器运行的所有对象
前端包括三个部分: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>:换行
:空格
使用sublime设计静态网站的一般步骤:
- 先建文件夹(站点)
- 在sublime中打开文件夹
- 在站点中新建页面
- 编码(在sublime中按下"!",再按TAB键自动生成网页的基本结构)
注:输入html标记的方法:先输入标记名,再按TAB键会自动生成一对标记。
CSS(层叠样式表)
在html页面中输入css代码
- 在标记内,输入一对
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:快速复制当前选中的内容