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