技術文章 » HTML&CSS再出發—線上教育從後端到APP全鏈路學習實戰

HTML&CSS再出發—線上教育從後端到APP全鏈路學習實戰

2021-03-10 12:00:58

1 Web概念概述

1.1 javaWeb

Java Web，是用Java技術來解決相關web網際網路領域的技術棧。web包括：web伺服器端和web使用者端兩部分。Java在使用者端的應用有java applet，不過使用得很少，Java在伺服器端的應用非常的豐富，比如Servlet，JSP和第三方框架等等。Java技術對Web領域的發展注入了強大的動力。
就是使用Java語言開發基於網際網路的專案。

1.2 軟體架構

C/S：Client/Server 使用者端/伺服器端：在使用者本地有一個使用者端程式，在遠端有一個伺服器端程式，如QQ等；
B/S：Browser/Server 瀏覽器/伺服器：只需要一個瀏覽器，使用者通過不同的網址可以存取不同的伺服器端程式。

Column 1Column 2Column 2
C/S使用者體驗好開發、安裝、部署、維護麻煩
B/S開發、安裝、部署、維護簡單1、如果應用過大，使用者體驗可能會受到影響如網頁遊戲，體量大時，受頻寬限制，會發生卡頓；2、對硬體要求過高；

1.3 B/S架構詳解

靜態資源：使用靜態網頁技術釋出的資源，比如看到的新聞，圖片；其特點：

  • -》所有使用者存取，得到的結果是一樣的；
  • -》如：圖片、文字、音訊、視訊，HTML、CSS、JavaScript；
  • -》若使用者請求的是靜態資源，伺服器會直接將靜態資源傳送給瀏覽器，瀏覽器內建了靜態資源的解析引擎，可以展示這些靜態資源。
    動態資源：使用動態網頁技術釋出的資源。其特點：
  • -》所有使用者存取的結果可能不一樣；
  • -》如：jsp/servlet,php,asp…
  • -》如果使用者請求的是動態資源，伺服器會去執行這些動態資源，轉化為靜態資源再傳送給瀏覽器。
    在這裡插入圖片描述
    以上分析可知，我們要學習動態資源，必須要先學習靜態資源。靜態資源三劍客，各自的作用：
    HTML：用於搭建基礎網頁的，展示頁面內容；
    CSS：用於美化頁面，佈局頁面；
    JavaScript：控制頁面 的元素，讓頁面有動態的效果。

2 網頁的組成

2.1 HTML：結構

HTML 是用來描述網頁的一種語言，是超檔案標示語言 (Hyper Text Markup Language)；超文字就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素；HTML不是一種程式語言，而是一種標示語言 (markup language)。
標示語言是一套標記標籤 (markup tag)，HTML使用標記標籤來描述網頁。
學習網站：https://www.w3school.com.cn/index.html。

2.2 CSS：樣式

CSS全稱為「層疊樣式表 (Cascading Style Sheets)」，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型等。

2.3 JavaScript：互動

JavaScript是一種有著較強生命力和發展潛力的指令碼語言，可被直接嵌入到HTML檔案中，供瀏覽器解釋執行；直接響應使用者端事件，如驗證資料表單合法性等，並呼叫相應的處理方法，迅速返回處理結果並更新頁面，實現 Web互動性和動態的要求。同時將大部分的工作交給使用者端處理，將Web伺服器資源消耗降到最低。

3 HTML

3.1 HTML基本結構

<html></html>為HTML頁面中的根標籤，所有的HTML網頁中的標籤都在中。
<head>標籤用於定義檔案的頭部，它是所有頭部元素的容器。頭部元素有、

3.2 HTML常用的標籤

標籤由英文尖括號 < 和 > 括起來，如：<html>;
html中的標籤一般都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多一個/，…；還有一些是自結束標籤，如：<br/>；
標籤與標籤之間是可以巢狀的，但先後順序必須保持一致，如：<div>裡巢狀<p>，那麼</p>必須放在</div>的前面。如：<div><p>..</p></div>
註釋是不可以巢狀的,如：<!-- -->
HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫。

3.2.1 標題標籤

<h1>...</h1> ~ <h6>...</h6>

3.2.2 div標籤

<div>...</div>，相當於一個容器,可以把一些獨立的邏輯部分(如網頁中獨立的欄目版塊)劃分出來,如下圖：
在這裡插入圖片描述
注意：Visual Studio要想方便執行html檔案，需要安裝外掛，如下圖所示：
在這裡插入圖片描述

3.2.3 段落標籤

<p>...</p>

3.2.4 無序列表

<ul>
	<li>...</li>
	<li>...</li>
</ul>

3.2.5 圖片標籤

<img alt="" src="" title=""/> 
     alt:圖片無法顯示時顯示的描述性文字
     src:圖片的地址
     title:滑鼠放在圖片上時顯示的描述性文字

路徑檔案：

  • 目標檔案與當前檔案在同包，直接查詢目標檔案
  • 目標檔案與當前檔案不在同包，先找目標檔案的父包，再找目標檔案。
  • 返回上一級：…/

3.2.6 超連結

<a href="" target=""></a>
    href:指向一個連結地址
    target:目標視窗 
    值為」_self」時在向當前視窗(預設)開啟新的網頁
    值為」_blank」時在新的視窗開啟

3.2.7 表格

* 語法
	<table>
		<tr>
			<th></th>|<td></td>
		</tr>
	</table>
* 跨行跨列
	* 跨行：rowspan
	* 跨列：colspan

在這裡插入圖片描述
在這裡插入圖片描述

3.2.8 表單

* 語法
	<form action="表單提交路徑" method="提交方式（get|post）">
		<input></ input>
		<select>
			<option></option>
		</select>
	</form>
* input標籤中的屬性
	type表單項的型別：text|password|radio|checkbox|reset|submit  
		file檔案域
		hidden隱藏域
	name名稱：無name，就無法提交該資料
	value值：text|password預設值，sumbit按鈕的文字值
	checked: radio&checkbox:預設選中
	id:唯一

在這裡插入圖片描述

4 CSS

CSS全稱為「層疊樣式表 (Cascading Style Sheets)」，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型等。

4.1 基本語法

4.1.1 CSS樣式的基本組成

CSS樣式由選擇符(選擇器)和宣告組成，而宣告又由屬性和值組成，如下圖所示：（當有多條宣告時，中間用英文分號」;」分隔）
在這裡插入圖片描述

4.1.2 選擇器

標籤選擇器：p|h2
類選擇器：
    定義：.類名{}
    呼叫：class="類名"
ID選擇器：
    定義：#ID名{}
    呼叫：id="ID名"

4.2 CSS嵌入方式

4.2.1 寫在標籤的style屬性中

<p style=「font-size: 30px」>字型大小用px表示</p>
注：多個屬性間用分號;分割。

style標籤一般寫在head標籤與title標籤之間。
   <style type="text/css">
	     p{
 		    color: blue;
           }
   </style>

4.2.3 引入外部CSS檔案

<link rel="stylesheet" type="text/css" href="style.css">
在這裡插入圖片描述