學習筆記整理
發(fā)布時間:2020-08-28 來源: 演講稿 點擊： 
Web 前端課程 程 筆記
簡介
- UI 設計
色彩、設計
布局、用戶體驗 - 頁面制作 - 功能添加
動態(tài)效果
業(yè)務邏輯和數(shù)據處理
和服務器交互
----------設計和前端------------ - 前端：用戶體驗度，上線速度；
- 服務端處理(Java、PHP、.NET) - 測試 - 推廣 （拉勾網）
---------推廣（網絡營銷）--------
前端 web 界面設計與制作->實現(xiàn)產品界面與功能->優(yōu)化，兼容->與后端交互 (編寫->調試->實踐)
課程設置
第一階段：
- HTML5 基礎
- CSS3
- Web UI設計
第二階段：
- JS
(javascript)
- DOM
(文檔對象模型)
- Server
�。ǚ⻊掌鳎�
第三階段：
- HTML5 高級
- JQuery
- Ajax
�。ó惒� js和 xml->局部刷新）
第四階段：
- Bootstrap
- Angular Js
- 階段項目
目錄
1 HTML5BASIC
1.1 Unit01 1 ：
Web b 基礎知 識
、
HTML L 快速入 門
、
文本
【Web 基礎知識】
web 又稱萬維網或環(huán)球網，即 Wide Web）,把信息和服務進行無縫連接； - Web 與 Internet：Web 是運行在 Internet 的應用；
1.Internet：互聯(lián)網；信息共享；
2.Internet 提供的主要服務：Telnet（遠程登錄）、Email、(電子公告板：天涯論壇、百度貼吧)、FTP（上下傳協(xié)議、上傳、下載）；
3.基本實現(xiàn)技術：
- 分組交換原理：信息在 Internet 上被分成許多小數(shù)據包（分組）進行傳輸，到達目的后將數(shù)據包重組為信息；
- TCP/IP協(xié)議族：用于找到指定的服務器；
4.web 簡介
又稱萬維網或環(huán)球網，即 WWW
把各種類型的信息與服務無縫連接，提供生動的圖形用戶界面（文檔）
- 信息：文字、圖片、聲音、視頻等
- 服務：News、、Mail等 - Web 的工作原理
現(xiàn)在計算機應用的程序結構：
1、c/s : Client / Server
客戶端/ 服務器 模型
通過指定的客戶端來訪問指定的服務器
代表：QQ，魔獸世界，酷狗音樂盒...
2、B/S :Browser / Server
瀏覽器 / 服務器 模型
可以通過瀏覽器來訪問指定服務器上的信息；
B/S多于 C/S;
請求（request）
瀏覽器---------HTTP 協(xié)議-------->服務器
瀏覽器 <-------HTTP 協(xié)議------------服務器
響應（response）
3、PC：Personal Computer:個人計算機；
4、通信協(xié)議采用的是 HTTP協(xié)議：Hypertext Transfer Protocol
FTP協(xié)議：
只上傳或下載文件，不作文本傳輸；
HTTP協(xié)議：超級文本傳輸協(xié)議；
- 規(guī)定了如何傳遞數(shù)據
-
以及傳遞的數(shù)據格式是什么
DNS:域名解析器；將域名解析為 IP地址
5.web 主要以網頁的形式來發(fā)布多媒體信息；
- 超文本標記語言 HTML Hyper Text Markkup Language
6.瀏覽器連接到 Web 服務器并獲取頁面； - Web 服務器
1.主要功能：
- 存儲 web上的信息，提供管理環(huán)境
- 響應瀏覽器請求，執(zhí)行服務器端程序
- 安全功能
2.主要服務器產品：TOMCAT IIS APACHE...
- Web 瀏覽器
1.主要功能
- 提交請求
- 作為 HTML 解釋器和內嵌腳本程序執(zhí)行器
- 用圖形化得方式顯示 HTML 文檔；
2.主要 Web瀏覽器
IE Firefox Chrome Opera Safari - Web 的相關技術
client----Server-------DB（數(shù)據庫 ）
1.服務器端技術<----->數(shù)據庫（DB）
- PHP
- JSP
- ASP
- aspx
請求 Request 與響應（response）
2.客戶端技術
- 表現(xiàn)：HTML CSS
- 交互：JS
【HTML 快速入門】
1.HTML 概述：
- web 是一個超文本文件的集合；
- 超文本：超文本文件是 WEB 的基本組成單元，也稱為網頁或 HTML 文檔、web頁等，通常以.html 或.htm、.shtml 為后綴的文件；web 頁通過超鏈接組織在一起；
- web 頁之間通過超文本中的超級鏈接組織在一起；
HTML HyperText Markup Language
超文本標記語言
- 使用帶尖括號的“標記”將網頁的內容逐一標識出來；
-由瀏覽器解釋執(zhí)行； 2.HTML 基本語法
- 標記導致不同的顯示效果；
- 標記必須使用尖括號括起來；
1、HTML：超文本標記語言
2、HTML 文檔格式
- 標記有封閉類型（成對），也有非封閉類型；
封閉：成對出現(xiàn)。有開始，有結束（雙標簽）
<a> :開始
</a>：結束
非封閉：只有開始沒有結束；（單標簽）
<br>
:即表示開始，又可以表示結束；HTML5中可以這么寫。
<br />:
<p></p>:雙標簽中,可以將一些文本寫在標簽內，這些文本收當前標簽樣式控制； **********注意：封閉標簽。必須成對出現(xiàn)； 3.元素
1.即標記；
- 元素可以包含文本內容和其他元素，也可以是空的；
元素嵌套：
- 嵌套順序：用縮進的方式進行體現(xiàn)；
<P>
<a></a>
</p>
2.屬性和值：
屬性：用來修飾元素；
- 屬性的聲明必須位于開始標簽里；
<標記名稱 屬性名="屬性值" 屬性名="屬性值"></標記名稱>
- 一個標簽內、屬性可以有多個、不分先后順序、多個屬性間用空格區(qū)分；
<p align="center">ppp</p>
align 功能：控制文本在標簽內的水平對齊方式 left / center / right; **********標準屬性（公共屬性、通用屬性）：大部分標簽所具備的屬性；
- id
: 定義所在標簽唯一標識名稱；
- title ：鼠標移到當前標簽所在區(qū)域時所顯示的文本；
- class ：引用樣式表中的指定“類”樣式；
- style ：定義當前標簽的行內樣式；
3.注釋：不會被瀏覽器或服務器所翻譯的內容；
- 解釋說明；
<!--------html 注釋-------->
/*********css注釋*********/
- 注釋是不能嵌套；
<!--
<!----錯誤----->
-->
- 注釋不能寫在標簽聲明里；
<a <!-----錯誤----->></a> 4.HTML 與 XHTML
1999 年 12月 24 日，W3C 推薦標準 HTML4.01；
XHTML1.0 于 2000 年的 1 月 26 日成為 W3C 標準
- 與 HTML 幾乎相同；
- 更嚴格、更純凈的 HTML 版本；
<p>This is a<br>paragraph
XHTML 元素必須被關閉，空標記也要關閉；
<p>This is a<br />paragraph</p>
HTML5:
更為簡潔的 HTML 代碼；
<p align="center">This is a<br />paragraph</p>
html5:
<p align=center>This is a<br>paragraph</p>
********* 屬性值加的引號""和結束標簽的"/" 最好加上； 5.文檔結構
1.文檔類型聲明：
- 放在 DOCTYPE 標簽里；
- Strict DTD 嚴格類型；
- Transitional DTD 過度類型；html4.01與 xhtml1.0 之間過度；
- Frameset DTD 框架類型，（很少用）
-HTML5 的文檔類型聲明：
<!DOCTYPE html>
charset：字符集
ISO-8859-1：支持英文編碼解析
utf-8:支持中文，支持英文
<meta charset="utf-8">
2.html 頁面：
- <html></html>:整個網頁里有且只有這一對根元素； ******* - 按照嚴格版本，版本是“xhtml1.0”且是嚴格模式（Strict DTD）時，html 標簽必須包括“命名空間標識符”
<html xmlns=""></html>
-兩個子元素：
<html>
<head></head>
<body></body>
</html>
1. 2 Unit02 2 ：
圖像和鏈 接
、
表 格
、
結構標記
1.瀏覽器：解析 HTML 代碼以及 JS語言； 2.<head>元素：主要包含網頁的說明信息；
1.網頁標題
2.網頁的編碼格式；
3.聲明內部樣式表；
4.引入外部樣式表；
5.聲明 JS腳本；
6.引入外部腳本；
7.聲明其它元素：關鍵字，描述等。
- 標題：<title></title>:標簽頁，沒有任何屬性，只能出現(xiàn)在 head 里； 3.網頁編碼格式：
1.默認編碼：ISO-8859-1 -> 不支持中文；
- 改編碼，通過 meta 標簽
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
描述 描述內容類型
<meta charset="utf-8" />
字符集
utf-8
2.添加的描述和關鍵字；
meta：一般作說明信息的聲明；
- 常用屬性：
http-equiv 修改編碼
charset
修改編碼
content
name ******** - 添加"關鍵字"：
<meta name="keywords" content="html,css,js,web 前端" />
面向搜索引擎；
- 添加"描述"：
<meta name="description" content="描述內容" />
搜索出來對標題的解釋； 4. 特殊字符：
通過轉義字符來標識特殊符號；如空格、<、>;
轉移字符：改變單詞原有的意思，被解釋成一種全新的意義；
- & 與
- 空格
- < less than <
- > greater than >
- 企業(yè)標識：© company
- ¥人民幣 5.文本樣式：
<b></b>
加粗
<i></i>
傾斜
<u></u>
下劃線
<s></s>
刪除線
<sup></sup> 上標
<sub></sub> 下標 6.標題元素：
<h1></h1>
<h6></h6> 一級標題到六級標題； 7、分區(qū)元素
1.塊級元素：多數(shù)用于布局；
自己獨自占一行的元素都稱為塊級元素，
div
,p
,hn(h1-h6)、
hr、
ol
、ul
、li
2.行內元素：
包圍文本，方便為文本添加效果；
與其他的行內元素可以在一行內顯示，
span,
b,
u,
i
s
********行內元素寬和高是由內容決定的，不受 width 和 height 控制； 8.水平線 ：<hr> horizontal
常用屬性：
- size:水平線的粗細
- width:水平線的長度；數(shù)值/百分比；
- align：水平對齊方式
- color:顏色； 9.預格式化標簽
<pre></pre>:保留源文檔中的格式，保留原來的空格和換行； 【圖像和鏈接】
目錄結構：
* 目錄就是 web 站點中文件夾的名稱；
- 包含多個子目錄
-
1.URL(統(tǒng)一資源定位符)：要需找的資源的地址；路徑 ；
- 文件，圖片、音視頻、其他頁面。
相對路徑：相對于當前頁面而言；
平級用名字，子級進目錄，父級向上返；
Koala.jpg
img/Koala.jpg
../Koala.jpg
根相對路徑：
服務器上：以/開始
/images/user.jpg
絕對路徑：又叫全路徑，就是資源文件在計算機中的位置/文件從最高級目錄下開
始的完整的路徑；無論當前資源路徑是什么，使用絕對路徑總能找到需要的資源；
D:/向成云/Day02/img/Koala.jpg
組成：
1.協(xié)議：http://
2.主機名/域名；
3.目錄路徑； img
4.請求的資源名；logo.png
2.圖像<img />；
圖像格式：
- JPEG
- GIF
- PNG
src 屬性：指定顯示的圖像的路徑
width 屬性：圖像的寬
height 屬性：圖像的高
title 屬性：鼠標移到圖片上顯示的文字
alt
3.鏈接；
<a href="">點擊文本</a>
<a href="test2.html">點擊文本</a>
<a href="c/test2.html">點擊文本</a>
目標：target="_self"
在本頁打開
target="_blank"
在新頁面打開
a 標簽也有 title 屬性； ********** name 屬性：定義錨點名稱；例子：“回到頂部”
--------------------------------------
鏈接接的各種表現(xiàn)形式：
1.下載資源：
<a href="test2.zip/rar">點擊文本</a>
2.網頁跳轉：
<a href="c/test2.html">點擊文本</a>
3.電子郵件鏈接：
<a href="mailto:">聯(lián)系我們</a>
4.返回頁面的空鏈接；
<a href="#"></a>
5.鏈接到 javascript;
6.<a href="2015-9-01 課堂筆記.txt">打印出 txt 文檔</a> 【錨點】
通過 a 定義錨點：
HTML 中的錨點相當于 HTML 文檔中某個位置的記號；
1.定義錨點；
<a name="anchorName"></a>
2.跳轉到錨點；
<a href="#anchorName">跳轉到錨點</a>
錨點也可以指向 id；
跳轉其它頁面錨點處：
<a href="頁面 URL#anchorName">跳轉到錨點</a> 【table】
屬性：
width
height
border
bordercolor="color" ->邊框顏色
align="center"
->表格相對父元素的對齊方式
cellspacing="10px"
->單元格間距
cellpadding="20px"
->單元格與內容的邊距 padding
bgcolor="#ccc"
->背景顏色 ************* background="images/Lighthouse.jpg"->背景圖片
tr屬性：
height:
align:
->控制單元格里面的內容水平對齊方式
valign：top、middle、bottom ->垂直對齊方式
td 屬性
width
height
bgcolor="#ccc"
->背景顏色
background="images/Lighthouse.jpg"->背景圖片
align:
->控制單元格里面的內容水平對齊方式/
valign：top、middle、bottom ->垂直對齊方式
colspan
->跨列 向右合并；
rowspan
->跨行 向下合并；
表格標題：
caption
列標題：
th：與 td 平級；
行分組：
表頭行分組：
thead
表主題行分組：tbody
表尾行分組：
tfoot
********如果 tr和 td 都設置了 width和 height：值大的有效； table 布局的缺點：網頁中要把所有的圖像等都下載完才顯示；
【HTML5 結構標記】
<header></header>
頁頭
<nav></nav>
導航
<section></section>主體內容
<article></article>引用的文章、帖子、博客.....
<aside></aside>
側導航、邊欄等
<footer></footer>
頁尾
【列表】
顯示多條相關信息的組件；
1.有序列表；
----type="i/a":序列類型
start="3" ：從 3 開始；
<ol type="i" start="3">
order list
<li></li>
列表項 list item
</ol>
2.無序列表；
-----type="square/circle/disk" 方塊/空心圓/實心圓
<ul type="square">
<li></li>
</ul>
ol 和 ul 中間只能嵌套 li，li 里可以嵌套任何 html 標簽；
3.定義列表：
<dl>
<dt></dt> --標題 / 圖
<dd></dd> --文字描述
</dl>
圖文混排
1.3 Unit03 3 ：
列 表
、
表 單
、
其他常用標記
【表單】
1.表單標簽：<form></form>
作用：用于定義表單中的基本信息，如提交地址，提交方式等。
*************** 如果表單元素沒有出現(xiàn)在 from里，是不能提交到服務器。
屬性：
- action 提交地址 服務器處理數(shù)據的程序地址，由服務器端開發(fā)人員提供。默認提交到本頁。
- method 表單以什么方式將數(shù)據提交給服務器（明文還是密文）
默認值是get；
常用值：
1.post
- 密文
- 有密碼選 post 提交
- 不限傳遞數(shù)據長度
2.get
- 明文
- 有傳遞數(shù)據長度限制
IE：2KB；
- name
定義表單名稱；方便使用 js來獲取表單；
- enctype 表單數(shù)據的編碼方式；
不同的數(shù)據使用不同的方式，主要體現(xiàn)在“普通文本”傳輸和“文件”傳輸上；
取值：
-- application/x- 普通文本
默認按文本方式將數(shù)據傳遞；
-- multipart/form-data 上傳文件時的編碼值
-- text/plain 也是普通文本編碼方式 但有時候不符合規(guī)定不能傳；
2.表單元素（控件）：用于接受用戶數(shù)據；
- input：
屬性：
-- type：
用于區(qū)分不同的 input 元素的樣式和功能；
1.text
->txt 文本框 沒有安全性；
2.password
->txt 密碼框 密文/密碼錄入；
---文本框和密碼框其他的屬性:
maxlength:
readonly:
***************** 3.checkbox
->復選框
注意：作為一組復選框，name 屬性值必須一致；
4.radio
->rdo 單選按鈕
-- name 分組
注意：如果一組單選按鈕中只有一個能被選上，他們的 name 屬性必須一樣；
Gender
性別
Male
FeMale
-- checked
5.submit
-> 用于提交表單到服務器；
reset
-> 將所有表單元素恢復到默認值；
button
-> 執(zhí)行自定義的腳本內容；
6.隱藏域
-> 在頁面看不見的地方保存一段信息；如用戶注冊的id 號；
hidden
-> 一般情況下，會將安全系數(shù)較高的并且不想讓用戶看見的數(shù)據保存在隱藏域中；
文件框
-> 能實現(xiàn)文件選擇的功能；
->上傳文件；
******************* file
注意：上傳文件必須把 form的屬性 enctype改成：multipart/form-data；
-- name：
當前表單元素的名稱，用于提交給服務器使用；
-- valve：
默認值；
-- disabled 禁用控件
- textarea 多行文本域
<textarea></textarea> 使用場合：注冊信息時的詳細條款等。
屬性：
cols：指定文本區(qū)域的列數(shù) 一行顯示多少個字；
rows：指定文本區(qū)域的行數(shù) 顯示多少行；
超出顯示滾動條；
- select 與 option : 從下拉框選擇內容；
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
分類：
1.下拉列表
2.滾動列表
select 屬性 sel
name：
size：顯示被選信息數(shù)量 大于等于 3 條就顯示滾動條；
multiple:是否多選；
option 屬性
value：
選項值
selected：預選中
- 其他元素
1.label: 與表單元素相關聯(lián)；點擊該 lable 時如同點擊關聯(lián)的表單元素；
<label>文本</label>
屬性：
for：關聯(lián)表單元素的 id；
2.為空間分組：
fieldset：為控件分組；
legend
�。悍纸M的標題；
【其他常用標記】
1.浮動框架：在一個頁面中顯示多個 html 文檔內容，也就是將其他的頁面嵌入到當前頁面中；
<iframe></iframe>
屬性：
src :浮動框架中的網頁 url；一個頁面可以出現(xiàn)多個 iframe
height：
width：
frameborder:邊框
2.摘要與細節(jié)：
作用：將網頁一部分信息通過類似于下拉列表的方式進行顯示與隱藏；
<details></details> 用于定義細節(jié)
<summary></summary> 顯示當前 details的標題
注意：summary必須要出現(xiàn)在 details的第一個子元素的位置；
3.度量元素：
<meter></meter>
多數(shù)進度的顯示、比例的顯示。
屬性：
min：范圍的最小值；默認為 0；
max：范圍的最大值；默認為 1；
value：度量值；默認為 0；
4.時間元素：
<time>顯示內容</time> 定義公歷時間 24 小時制；或日期；
屬性：
datetime：規(guī)定日期和時間；日期與時間通過“T”來表示分割；
5.高亮顯示文本元素：
<mark>文本</mark>
突出顯示文本； 2 CSS3BASIC
2.1 Unit01 1 ：
CSS
概 述
、
CSS
語 法
、
尺寸與邊框
【css : Cascading Style sheet】
層疊樣式表
級聯(lián)樣式表 1、作用：
已統(tǒng)一的方式為頁面定義外觀；
熱點文章閱讀