WEB全棧---HTML
HTML,CSS,JAVASCRIPT
PYTHON WEB
PYTHON + HTML + CSS + JAVASCRIPT
(Django)
1、WEB概述
1、什麽是WEB
WEB就是互聯網上的一種應用程序 - 網頁
典型的程序：
1、C / S
C : Client(客戶端)
S : Server(服務器)
2、B / S
B : Browser(瀏覽器)
S : Server(服務器)
2、WEB的組成 & 運行流程
由服務器，瀏覽器 和 通信協議 組成
服務器：處理用戶的請求和響應
瀏覽器：代替用戶向服務器發送請求(User Agent)
通信協議：規範了數據是如何打包和傳遞的 - http
http: Hyper Text Transfer Protocal
3、WEB服務器
1、作用
用於接受用戶的請求並給出響應
存儲WEB的信息
具備基本的安全功能
2、產品
1、APACHE
2、TOMCAT
3、IIS
3、技術
1、JSP
2、php
3、ASP.NET
4、ASP
5、Python WEB（Django，Flask）
4、WEB 瀏覽器
1、作用
1、代替用戶向服務器發送請求
2、作為響應數據的解釋和執行引擎
2、主流瀏覽器產品
1、Microsoft Internet Explorer (IE)
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
瀏覽器靠內核處理數據，內核包含兩部分： 1、內容排版引擎 - HTML，CSS 2、腳本解釋引擎 - JS 3、瀏覽器技術 HTML，CSS，JavaScript
2、HTML概述
1、HTML介紹 和 基本語法
1、什麽是HTML
HTML:Hyper Text Markup Language
超級 文本 標記 語言
編寫網頁的一款語言
超文本：具備特殊功能的文本就是超文本
普通文本 a : 普通字符 a
超文本 a : 表示超鏈接的功能
普通文本 b : 普通字符 b 超文本 b : 表示文字加粗的功能 標記：超文本的組成形式 普通文本：a 超文本a ：<a></a> 超文本b ：<b></b> 語言：語言有自己的語法規範 2、HTML在計算機中的表現 所有的網頁(HTML)文件在計算機中都是以 .html 或 .htm 作為結尾的文件 開發工具：所有的文本編輯軟件都是開發工具 1、記事本 2、Editplus，Sublime 3、Dreamweaver,... ... 運行工具：瀏覽器 推薦使用 Google Chrome
3、HTML 基礎語法(重點)
1、標記的語法
1、什麽是標記
在網頁中，用於表示功能的符號稱為"標記/標簽/元素"
2、語法
所有的標記在使用時，必須用 <> 括起來
標記分為 雙標記 和 單標記
1、雙標記
有顯示的開始 和 顯示的結束
<標記>內容</標記>
ex:
1、<a>...</a>
2、<b>...</b>
3、<p>...</p>
4、<div>...</div>
註意：雙標記，有開始，必須有結束，否則會出錯
2、單標記
只有一個標記，既能表示開始，也能表示結束
<標記> 或 <標記/>
ex:
1、<br> 或 <br/> : 換行
2、<hr> 或 <hr/> : 水平線
3、<img> 或 <img/> : 一幅圖像
2、標記的嵌套
在一對標記中，再嵌套其他的標記，相當於是功能的嵌套
ex：加粗的超鏈接
<a><b>百度</b></a>
<b><a>百度</a></b>
為了良好的可讀性，被嵌套的內容盡量獨占一行，並添加縮進
<a>
<b></b>
</a>
練習：
1、編寫一對 html 標記
2、在 html 標記內部嵌套一對 head 標記
3、在 html 標記內部嵌套一對 body 標記
<html> -- 父元素 / 父標記
<head></head> -- 子元素 / 子標記
<body></body> -- 子元素 / 子標記
</html>
3、標記的屬性和值
1、什麽是屬性
在標記中，用來修飾標記顯示效果的內容就是屬性
2、語法
1、屬性必須聲明在開始標記中
<標記 屬性的聲明位置處></標記>
2、屬性和標記名稱之間要用空格隔開
<標記 屬性名稱></標記>
3、屬性和值之間是哦用那個=連接，屬性值要用"" 或 ‘‘ 引起來
<標記 屬性名稱=‘值‘>
4、一個元素允許有多個屬性，並且排名不分先後，多屬性之間使用 空格 隔開即可
<標記 屬性1=‘值1‘ 屬性2=‘值2‘>
練習：
1、創建一對 p 標記，內容隨意
2、增加屬性，屬性名為 align,值為 center
3、增加屬性，屬性名為 id 值為 p1
<p align=‘center‘ id=‘p1‘>xxx</p>
4、HTML中的註釋
<!-- 註釋內容 -->
註意：
1、註釋不能出現在 <> 中
<p <!-- --> ></p>
以上寫法是錯誤的
2、註釋不能嵌套
<!--
這是一段註釋
<!--
又是一段註釋
-->
-->
以上寫法是錯誤的4、HTML 文檔結構
1、文檔類型聲明
出現在網頁的最頂端的第一個標記
作用：告訴瀏覽器使用HTML的哪個版本
<!doctype html> --使用HTML5的版本
<!DOCTYPE HTML> --效果同上
2、HTML頁面
在文檔類型聲明之下，使用一對html根標記組成
<html></html>
在html中包含兩對子元素
1、<head></head>
表示網頁的頭部
2、<body></body>
表示網頁的主體
練習：(3~5分鐘)
1、創建 01-page.html 網頁文件
2、搭建網頁結構
1、增加文檔類型聲明
2、增加 html 根標記
3、在 html 中增加頭部和主體
4、增加適當的註釋
3、<head></head>
表示網頁的頭部信息，通常會指定些控制級別的信息如：編碼，
允許包含兩個子元素：
1、<title>標題內容</title>
2、指定網頁編碼格式
<meta charset=‘utf-8‘>
告訴瀏覽器按照utf-8的編碼進行網頁解析
註意：保證網頁文件的編碼也是utf-8
4、W3C - 萬維網聯盟
World Wide Web Consortium5、文本相關標記
1、HTML中特殊字符
1、 表示一個空格
2、< 表示 <
3、> 表示 >
4、© 表示?
5、¥ 表示 ￥
2、文本樣式標記
1、作用
修改文本在網頁中的表現形式
2、標記
1、<i></i> : 斜體顯示文本
2、<u></u> : 下劃線顯示文本
3、<s></s> : 刪除線的方式顯示文本
4、<b></b> : 加粗顯示文本
5、<sup></sup> : 以上標的形式顯示文本
6、<sub></sub> : 以下標的形式顯示文本
練習：(3分鐘)
這是一段有加粗，斜體，刪除線，下劃線，
上標 和 下標的文本
將以上文本使用對應的標記將對應的效果體現出來
特點：
該組標記能夠與其他標記和文本在一行內顯示
3、標題標記
1、作用
以不同的文字大小以及加粗的方式顯示文本
2、語法
<h#></h#>
# : 1-6
h1 : 一級標題，文字最大
... ...
h6 : 六級標題，文字最小
練習：
靜夜思
李白
床前明月床
疑是地上霜
舉頭望明月
低頭思故鄉
特點：
1、會改變文字大小以及加粗效果
2、每個標題都會具備垂直的空白距離
3、每個標題獨占一行
4、每個標題都具備一個屬性
屬性：align
作用：控制文本的水平對齊方式
取值：
1、left ：左對齊
2、center ：居中對齊
3、right ：右對齊
4、段落元素
1、作用
突出顯示一段文本，每段文本獨占一行/塊，並且每個段落都會具備一小段的垂直空白距離
2、語法
<p></p>
屬性：align
取值：left / center / right
練習：
天長地久有時盡
此恨綿綿無絕期
5、換行元素
語法：<br> 或 <br/>
6、分區元素
1、塊分區元素
標記：<div></div>
特點：獨占一行/塊
作用：在網頁中做布局(配合css)
2、行內分區元素
標記：<span></span>
作用：設置同一行文本的不同樣式(配合css)
特點：允許在一行內顯示多個span，並能夠與其他的文本在一行內顯示
7、行內元素 與 塊級元素
1、塊元素
只要在網頁中能獨占一行的元素就都是塊元素
div,p,h1,h2,h3,h4,h5,h6
所有的塊元素都具備 align 屬性，取值為 left / center / right
2、行內元素
多個元素能夠在一行內顯示的，就是行內元素
span,i,b,s,u,sup,sub6、列表
1、列表的組成
1、列表的類型
1、有序列表 - <ol></ol>
2、無序列表 - <ul></ul>
2、列表項
<li></li>
ex:
<ol>
<li>內容1</li>
<li>內容2</li>
</ol>
練習：
1、創建一個網頁03-list.html
2、在body中創建一個有序列表，四個列表項分別顯示四大名著的名稱
3、在body中創建一個無序列表，四個列表項分別顯示四大天王的名稱
2、列表的屬性
1、<ol>
屬性：type
取值：
1、1:按數字方式排列，默認值
2、A:按大寫英文字符方式排列
3、a:按小寫英文字符方式排列
4、I:按大寫羅馬數字方式排列
5、i:按小寫羅馬數字方式排列
2、<ul>
屬性：type
取值：
1、disc:實心圓點，默認值
2、circle:空心圓點
3、square:實心方塊
4、none:不顯示任何標識
3、列表的嵌套
在一個列表項中，又出現一個列表
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
<li></li>
</ul>
練習：
1.水滸傳
a.西門慶
b.潘金蓮
c.武大郎
2.三國演義
i.呂布
ii.貂蟬
iii.關羽7、圖像 和 超鏈接
1、URL
Uniform Resource Locator
統一資源定位器，用於標識網絡中資源的位置，俗稱路徑
1、URL分類
1、絕對路徑
訪問互聯網上的資源時，使用絕對路徑
ex:
http://www.baidu.com
http://www.baidu.com/img/bd_logo.png
2、相對路徑
從當前文件所在的位置處去查找資源文件所經過的路徑
1、同目錄下
2、在子目錄下
3、在父目錄下
3、根相對路徑
從WEB站點所在的根目錄查找資源文件
註意：
1、url中不能出現中文
2、url是嚴格區分大小寫
2、圖像
1、標記
<img>
2、屬性
1、src
指定要顯示的圖片的URL
2、width
寬度，以px為單位的數值(允許省略px)
3、height
高度，以px為單位的數值(允許省略px)
註意：
如果寬度 和 高度只設定一個屬性值的花，那麽另外一個屬性值也跟著等比縮放WEB全棧---HTML