-PythonWeb開發(fā)技術與應用（Flask版）（微課版）-PPT 第二章 Web前端基礎_第1頁
-PythonWeb開發(fā)技術與應用（Flask版）（微課版）-PPT 第二章 Web前端基礎_第2頁
-PythonWeb開發(fā)技術與應用（Flask版）（微課版）-PPT 第二章 Web前端基礎_第3頁
-PythonWeb開發(fā)技術與應用（Flask版）（微課版）-PPT 第二章 Web前端基礎_第4頁
-PythonWeb開發(fā)技術與應用（Flask版）（微課版）-PPT 第二章 Web前端基礎_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

講師：李粵平Flask課程——第二章Web前端基礎了解HTML、CSS、JavaScript的作用掌握構建HTML表單的方法掌握Bootstrap網格系統(tǒng)的使用方法學習目標Bootstrap前端框架Web前端概述Html基礎小結Web前端概述Scenarioimport泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西01Web前端概述Web前端是什么？Web前端指的是構成網頁用戶界面的各種可見部分，即用戶在瀏覽器中直接與之交互的內容。前端開發(fā)涉及到使用HTML、CSS和JavaScript等技術來創(chuàng)建和呈現網頁的外觀、布局和交互效果。HTMLCSSJavaScriptHTML是一種標記語言，用于創(chuàng)建網頁的結構和內容。通過使用各種標簽（例如<p>、<h1>、<img>等），開發(fā)者可以定義標題、段落、圖像、鏈接等各種元素。HTML提供了文檔的語義結構，讓瀏覽器和搜索引擎能夠正確地解釋和顯示內容。CSS用于定義網頁的樣式、布局和外觀。通過選擇器和屬性，開發(fā)者可以控制元素的顏色、字體、間距、邊框等樣式。CSS的分離性允許開發(fā)者將樣式與內容分開，從而使樣式的修改和維護更加靈活。JavaScript是一種腳本語言，用于為網頁添加交互性和動態(tài)效果。開發(fā)者可以使用JavaScript處理用戶輸入、更改頁面內容、創(chuàng)建動畫、請求服務器數據等。JavaScript使得網頁可以根據用戶行為做出響應，從而實現更豐富的用戶體驗。概念解釋Html基礎02基本語法“<xxx></xxx>”為“標簽”語句?！?lt;xxxattr1='test'attr2='test'></xxx>”標簽語句中的“attr1”項目與“attr2”項目為其中的“屬性”?！?lt;xxx>test</xxx>”標簽語句中的“test”是標簽對所包含的“內容”。后面從以下幾個方面去講述Html語法1、網頁標題2、文本、圖像、鏈接3、表格4、表單5、CSS6、JavaScript基本語法1、網頁標題每打開一個網頁，瀏覽器的標題欄文字都會發(fā)生變化，而定義這一項內容的標簽便是<title>標簽。<title>標簽用于設置網頁的標題。具體代碼和效果圖如下所示?；菊Z法2.1、文本每打開一個頁面，就有文字映入眼簾，這些文字通常是用文本標簽來顯示出來的。常用HTML文本標簽標簽有許多，如下表所示。標簽描述示例用法<p>定義段落<p>這是一個段落。</p><a>定義鏈接，用于跳轉到其他頁面<ahref="">示例鏈接</a><ul>定義無序列表<ul><li>條目1</li><li>條目2</li></ul><ol>定義有序列表<ol><li>第一步</li><li>第二步</li></ol><li>列表項，用于包裹每個條目<ul><li>蘋果</li><li>橙子</li></ul><br>換行標簽這是第一行<br>這是第二行<hr>水平分割線<p>段落內容</p><hr><p>分割線后的內容</p><span>行內元素容器，用于設置樣式或添加腳本<p>這是一個<spanstyle="color:blue;">藍色</span>文本。</p>基本語法代碼和展示的效果如下圖所示。<!--文本演示--><h1>這是一級標題文本</h1><h2>這是二級標題文本</h2><h3>這是三級標題文本</h3><h4>這是四級標題文本</h4><h5>這是五級標題文本</h5><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p><!--<br/>為換行標簽--><p>這是一個段落。這是一個段落。這是一個段落。<br/>這是一個段落。這是一個段落。這是一個段落。<br/>這是一個段落。</p>基本語法2.2、圖像我們在瀏覽網頁的時候也會發(fā)現有許多圖片，以及視頻等，常用的圖像標簽及其屬性如下表所示。標簽描述示例用法<img>嵌入圖像<imgsrc="image.jpg"alt="描述性文本">src圖像文件的URL<imgsrc="image.jpg"...>alt圖像的替代文本，圖像無法加載或無法顯示時顯示<img...alt="替代文本">width和height圖像的顯示寬度和高度（像素為單位）<img...width="300"height="200"><video>嵌入視頻<videocontrols><sourcesrc="video.mp4"type="video/mp4">...</video>controls顯示視頻播放器控制條<videocontrols>...</video><source>指定不同格式的視頻源文件<sourcesrc="video.mp4"type="video/mp4">基本語法圖片和視頻的用法有使用網絡鏈接和本地靜態(tài)鏈接兩種用法，這里用本地的方式來給大家演示。首先先創(chuàng)建“static”目錄，用于存放靜態(tài)資源（如圖像、視頻等），如下圖所示。基本語法然后隨意取一幅圖像（常見的JPG、PNG格式文件）放入“static”目錄，如下圖所示。向<body>標簽對內添加以下代碼。<!--圖像演示--><!--alt為文字描述，在圖像加載失敗時顯示--><imgalt="這是一張圖像"src="static/img.png">基本語法效果如下圖所示?；菊Z法2.3、鏈接鏈接在互聯(lián)網世界中非常重要，它們構建了網頁和網站之間的關系，使用戶能夠輕松地瀏覽和訪問不同的內容。鏈接使得整個互聯(lián)網成為一個相互關聯(lián)的信息網絡，從而實現了信息的快速傳遞和共享。無論是在網頁上還是在應用程序中，鏈接都是連接不同資源的基本方式之一。鏈接標簽（<a>）與圖像標簽（<img>）類似，都需要添加屬性以指向相應的資源，而鏈接標簽使用“href”屬性來定義跳轉的鏈接?；菊Z法演示代碼如下，效果圖如右圖所示。<!--鏈接演示--><ahref="">百度</a><br/><ahref=""target="_blank">百度（新窗口打開）</a><br/><ahref="/"><!--圖像鏈接--><imgalt="github"src="static/img.png"></a>基本語法3、表格表格通常用于數據展示頁，如后臺用戶信息展示，相對前面的鏈接來說更為復雜。表格由多個標簽組成，最簡單的表格包含<table>（表格標簽）、<tr>（表格行標簽）、<th>（表格標題列標簽）、<td>（表格列標簽）基本語法演示代碼如下所示。效果圖如右圖所示。<!--表格演示--><table><tr><th>id</th><th>用戶名</th><th>郵箱</th><th>操作</th></tr><tr><td>1</td><td>John</td><td>john@</td><td><ahref="#">編輯</a><ahref="#">刪除</a></td></tr></table>基本語法4、表單表單（Form）是在計算機編程和互聯(lián)網領域中，用于收集和提交用戶輸入數據的一種交互式元素。通過表單，用戶可以向網站或應用程序提供各種類型的信息，如文本、數字、選擇、日期等，然后將這些數據發(fā)送給服務器進行處理或存儲。一個典型的表單通常由以下幾個主要組成部分構成：輸入字段（InputFields）：輸入字段用于接收用戶輸入的數據。這些字段可以包括文本框、密碼框、單選按鈕、復選框、下拉菜單、日期選擇器等。標簽（Labels）：標簽用于描述每個輸入字段的用途或要求。它們幫助用戶理解應該在每個字段中輸入什么類型的信息。按鈕（Buttons）：表單通常包含提交按鈕，用戶點擊該按鈕以將填寫好的數據提交給服務器。還可能包含重置按鈕，用于清除表單中的所有數據。動作（Action）：表單需要指定一個處理數據的目標，即數據提交到服務器的位置。這通常通過設置表單的action屬性來實現。方法（Method）：表單提交數據的方式，通常是使用HTTP協(xié)議的POST或GET方法。這由表單的method屬性來指定?；菊Z法下面是一個簡單的HTML表單代碼。<formaction="submit.js"method="post"><labelfor="username">用戶名：</label><inputtype="text"id="username"name="username"required><br><labelfor="password">密碼：</label><inputtype="password"id="password"name="password"required><br><inputtype="submit"value="提交"></form>在這個示例中，用戶可以輸入用戶名和密碼，然后點擊"提交"按鈕，表單將數據發(fā)送到服務器上的"submit.js"文件進行處理。交流探究在HTML表單中，method屬性有兩個常用的值：GET和POST。這兩種方法有什么區(qū)別？在設計表單時，如何選擇合適的方法？基本語法5、CSS是一門基于規(guī)則的語言——你能定義用于你的網頁中特定元素樣式的一組規(guī)則。比如“我希望頁面中的主標題是紅色的大字”下面這段代碼使用非常簡單的CSS規(guī)則實現了之前提到的效果：h1{color:red;font-size:5em;}語法由一個選擇器（selector）起頭。它選擇了我們將要用來添加樣式的HTML元素。在這個例子中我們?yōu)橐患墭祟}（主標題<h1>(en-US)）添加樣式。接著輸入一對大括號{}。在大括號內部定義一個或多個形式為屬性（property）—值（value）對的聲明。每個聲明都指定了我們所選擇元素的一個屬性，之后跟一個我們想賦給這個屬性的值。冒號之前是屬性，冒號之后是值。不同的CSS屬性對應不同的合法值。在這個例子中，我們指定了color屬性，它可以接受許多顏色值；還有font-size屬性，它可以接收許多sizeunit值?；菊Z法CSS通常有3種使用方式。（1）在標簽中添加“style”屬性，編寫CSS語句。<pstyle="color:blue;font-size:16px;">這是一個藍色的段落。</p>在這個例子中，<p>標簽的style屬性內嵌了CSS樣式，用于設置文本顏色為藍色并設置字體大小為16像素基本語法（2）在網頁頭部使用<style>標簽定義樣式。<!DOCTYPEhtml><html><head><style>p{color:green;font-size:18px;}</style></head><body><p>這是一個綠色的段落。</p></body></html>在這個例子中，<style>標簽被放置在網頁的頭部，里面定義了一組樣式規(guī)則，將所有<p>標簽的文本顏色設置為綠色，字體大小設置為18像素?；菊Z法（3）在網頁頭部使用<link>標簽，從其他位置引入CSS樣式文件。<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="styles.css"></head><body><p>這是一個從外部CSS文件應用的段落樣式。</p></body></html>在這個例子中，通過<link>標簽將一個名為"styles.css"的外部CSS樣式文件引入到網頁中。在"styles.css"文件中，可以定義各種樣式規(guī)則，例如：/*styles.css*/p{color:purple;font-size:20px;}基本語法6、JavaScriptHTML控件的應用實現了對網頁控件的描述；CSS的應用實現了網頁控件的布局、上色等；而JavaScript則可以實現網頁控件在瀏覽器端與用戶的交互。HTML表單在沒有JavaScript相關代碼的情況下，只能與服務器進行交互；在有了JavaScript相關代碼后，很多用戶操作都可以不經過服務器，直接根據事先設計好的前端邏輯，由瀏覽器實現與用戶的交互。JavaScript通常用于對用戶輸入進行本地校驗，對不符合規(guī)則的輸入進行提示；JavaScript還可用于實現控件之間的交互、播放控件動畫、加載表單數據、異步加載頁面等，其功能十分強大?；菊Z法JavaScript也有三種使用方式，和CSS大同小異在這個例子中，點擊按鈕時會觸發(fā)onclick屬性中嵌入的JavaScript代碼，彈出一個警示框顯示"Hello,World!"。(1)內聯(lián)方式：在HTML元素的屬性中直接嵌入JavaScript代碼。<!DOCTYPEhtml><html><head><title>內聯(lián)方式</title></head><body><buttononclick="alert('Hello,World!')">點擊我</button></body></html>基本語法在這個例子中，使用<script>標簽內嵌了一個JavaScript函數showMessage()，并在按鈕的onclick屬性中調用這個函數。(2)內部腳本：在HTML文件內使用<script>標簽嵌入JavaScript代碼。<!DOCTYPEhtml><html><head><title>內部腳本</title></head><body><script>functionshowMessage(){alert('Hello,World!');}</script><buttononclick="showMessage()">點擊我</button></body></html>基本語法在這個例子中，JavaScript代碼被保存在名為"script.js"的外部文件中，通過<script>標簽引入到HTML文件中(3)外部腳本：將JavaScript代碼保存在外部的.js文件中，然后使用<script>標簽引入外部腳本。<!--index.html--><!DOCTYPEhtml><html><head><title>外部腳本</title><scriptsrc="script.js"></script></head><body><buttononclick="showMessage()">點擊我</button></body></html>//script.jsfunctionshowMessage(){alert('Hello,World!');}Bootstrap前端框架03框架介紹Bootstrap是一個流行的開源前端框架，用于快速構建響應式、現代化的網頁和Web應用程序。由Twitter開發(fā)并開源，它提供了一系列預定義的HTML、CSS和JavaScript組件，幫助開發(fā)者快速搭建具有一致外觀和交互的界面。Bootstrap的目標是使網頁開發(fā)變得更加簡單、快速和一致。為什么使用BootstrapBootstrap框架的特性：1、移動設備優(yōu)先：自Bootstrap3起，框架包含了貫穿整個庫的移動設備優(yōu)先的樣式2、瀏覽器支持：Firefox，Google等主流瀏覽器都支持Bootstrap3、容易上手：只需要具備HTML和CSS的基礎知識即可4、響應式設計：Boostrap的響應式CSS能使網頁能夠適應不同的設備和屏幕尺寸，從而提供更好的用戶體驗。5、包含功能強大的內置組件，易于定制。6、Bootstrap引入了12欄柵格結構的布局理念，使設計質量高、風格統(tǒng)一的網頁變得十分容易。如何使用BootstrapBoostrap提供了幾種快速開發(fā)的方式用于生產環(huán)境的Bootstrap：編譯并壓縮后的CSS、JavaScript和字體文件。不包含文檔和源碼文件。Bootstrap源碼：Less、JavaScript和字體文件的源碼，并且?guī)в形臋n。需要Less編譯器和一些設置工作。Sass：這是Bootstrap從Less到Sass的源碼移植項目，用于快速地在Rails、Compass或只針對Sass的項目中引入。推薦參考網址如下：Bootstrap中文網：/Bootstrap官網：/下載Bootstrap我們教材使用的版本是3.3.7，我們可以去官網去直接下載/2016/07/25/bootstrap-3-3-7-released/#:~:text=Download%20the%20latest%20release%E2%80%94source%20code%2C%20compiled%20assets%2C%20and,options.%20Also%2C%20remember%20we%E2%80%99re%20available%20on%20npm%2C%20too.并將其放入“static”目錄，然后引入Bootstrap所依賴的靜態(tài)資源，代碼如下所示。在<head>標簽對中添加以下內容。<linkrel="stylesheet"href="static/bootstrap.min.css">在<body>標簽對尾部添加以下內容。<scriptsrc="static/jquery.min.js"></script><scriptsrc="static/bootstrap.min.js"></script>此時，Bootstrap就可以正常使用了。Bootstrap包含的內容1、預編譯版如果下了Bootstrap的已編譯版本，解壓ZIP文件，會看到下圖的文件內容。這是Bootstrap的最基本形式：預編譯文件，可在幾乎任何Web項目中快速使用。我們提供編譯的CSS和JS，以及編譯和縮小的CSS和JS。CSS源映射可用于某些瀏覽器的開發(fā)人員工具。包括來自Glyphicon的字體，以及可選的Bootstrap主題。bootstrap.*bootstrap.min.*bootstrap.*.mapBootstrap包含的內容2、源代碼版Bootstrap源代碼下載包括預編譯的CSS，JavaScript和字體資產，以及源代碼Less，JavaScript和文檔。如下圖所示簡單模板右圖是一個簡單的Bootstrap模板，有以下幾點要注意。語句<metaname="viewport"content="width=device-width,initial-scale=1">可以實現對不同手機屏幕分辨率的支持包含了Bootstrap.min.css文件，這個文件用于讓一個常規(guī)的Html頁面變成為使用了Bootstrap框架的頁面如果要用bootstrap這種js插件，bootstrap3版本還是依賴jquery的支持，所以在引入js文件的時候一定要先把jquery的依賴放在bootstrap的前面，但是在4和5版本，bootstrap才開始不依賴jquery，大家可以自行去搜索。柵格系統(tǒng)Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin用于生成更具語義的布局。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下Bootstrap柵格系統(tǒng)的工作原理：“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。類似.row和.col-xs-4這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語義化的布局。通過為“列（column）”設置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。負值的margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個.col-xs-4來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何.col-lg-*不存在，也影響大屏幕設備。柵格系統(tǒng)通過下表可以詳細查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設備上工作的柵格系統(tǒng)/css/在網址里面的內容有實際的情況給大家來測試，內容如下圖所示。大家可以多去測試一下，對bootstrap有更好的了解Bootstrap表單我們前面有用表單，但是很簡陋，Boostrap也有內置表單，下面是個簡單的例子，效果如下Bootstrap表單代碼如下<form><divclass="form-group"><labelfor="e

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論