前端板書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:快速複製當前選中的內容