【程式設計鹿】害 學element-ui 看這篇就夠了
阿新 • • 發佈：2020-11-23
一、JavaSE的C/S軟體架構與JavaEE的B/S軟體架構
- JavaSE即JavaStandard Edition，允許支援開發部署在桌面、伺服器、嵌入式環境和實時環境中的Java應用程式，包含了支援Web服務的一些API，為JavaEE提供了基礎
- C/S軟體架構，客戶端部署在桌面-----------伺服器端
- JavaEE即JavaEnterprise Edition，JavaEE是在JavaSE的基礎上構建的，提供了web服務
- B/S軟體架構，客戶端：瀏覽器--------------伺服器端：Web伺服器
二、網頁的三大組成部分
- 內容：即在網頁中所能看到的資料，用Html技術進行展示
- 表現：即網頁中各項表格，文字等的具體樣式，用CSS技術進行完成
- 行為：即網頁與使用者進行互動產生的響應，用JavaScript技術進行展示
三、Html
- 概念：Html（Hyper type makeup language）超文字標記語言，通過不同的標籤來告訴瀏覽器我所要展示的內容，本身也是一種文字檔案，可以在標籤內新增標記符告訴瀏覽器如何展示
- 書寫規範：
<html> <!--html頁面的開始--> <head> <!--頭資訊-->
<title>$Title$</title> <!--html檔案的標題--> </head> <body> <!--頁面的主題內容--> </body> </html> - 標籤
- 格式：<標籤名>封裝的資料</標籤名>
- 標籤名大小寫不敏感
- 屬性：基本屬性、事件屬性
- 基本屬性如color,bgcolor等
- 時間屬性如onClick,onblur等，可設定時間響應後的程式碼
- 分類
- 單標籤：<br/> 換行符 <hr/>水平線 <img src = '路徑'/>
- 雙標籤：<p></p> <div></div> <span></span>
- 語法
- 標籤必須正確閉合
- 標籤不能交叉巢狀
- 註釋內容不能巢狀在標籤體內(<!-- 這是html註釋 -->)
- 常用的標籤介紹
- <font color='red' size='7' face='微軟雅黑' >我是字型標籤</font>
- 特殊字元：
- < <
- > >
- 空格  
- <h1>標題標籤</h1>
- <a href='網址' target='_self'>超連結</a>
- 無序列表<ur type='none'>
-
- <li>列表項
- </li>
- </ul>
-
- 圖片<img src=''></img>
- 表格
<table align='center' cellspacing='0'>表格標籤 <tr>行標籤 <td>單元格標籤 </td> </tr> </table>
- 跨行跨列--- <table colspan='2' rowspan='2'>
- iframe框架<iframe src='' height='' width='' name=''></iframe>在html頁面中顯示一個單獨的視窗，設定name屬性時，可成為超連結跳轉的target目標地點
- 表單：用來收集使用者所有資訊的元素的集合並提交給伺服器
<form action="http://local:8080/ " method="get"> 使用者名稱：<input type="text" name="username" value="預設的文字框中的值"/><br/> 密碼：<input type="password" name="password" value=""><br/> 性別：男<input type="radio" name="sex" value="man" checked="checked">女<input type="radio" name="sex" value="woman"><br/> 興趣愛好：cpp<input type="checkbox" name="hobby" value="cpp"><br/> java<input type="checkbox" name="hobby" value="java"><br/> js<input type="checkbox" name="hobby" value="js"><br/> 國家： <select> <option value="none">----請選擇國籍----</option> <option value="中國">中國</option> <option value="美國">美國</option> <option value="德國">德國</option> <option value="日本">日國</option> </select><br/> 自我評價： <textarea name="desc" rows="10" cols="10">我是預設文字框中的值</textarea> <button type="submit" >提交</button> </form>
- action設定提交的伺服器地址
- method是提交方法，預設是get，可設定為post
- 成功提交後（以get請求為例）action?name=value&name=value
- 表單沒有成功提交的情況
- 表單項沒有name屬性值
- 單選，複選要設定value屬性值
- 不在form標籤內
- 其他標籤<div>預設獨佔一行</div> <span>預設是文字的長度</span> <p>段落標籤，前後會空出一行，如已空行，則不空行</p>
- 格式：<標籤名>封裝的資料</標籤名>
四、CSS
概念：CSS即層疊樣式表單，是允許網頁內容與樣式資訊相分離的一種標記性語言。
語法： 選擇器{ color:red;屬性:值;屬性:值; }
瀏覽器根據選擇器所標記的受樣式資訊確定被影響的標籤
屬性和值之間用冒號分開，結尾用分號結束
多個宣告之間也可用分號分割
註釋：/*註釋內容*/
CSS與HTML的結合方式
-
- 第一種：在標籤的style屬性中進行設定
<div style="height: 9px;color: blue;size: A4">我是DIV</div>
- 說明：這樣設定程式碼缺乏重用性，且容易造成混亂與冗雜，程式碼量十分龐大
- 第二種：在<head>的<style type="text/css">標籤中進行設定
<style type="text/css"> div{ border: 1px red solid; } span{ border: 1px red solid; } </style>
- 說明：僅能在同一頁面中設定樣式，若頁面龐大則需要每個頁面中都設定樣式資訊，程式碼不好維護，重用性還有待提高。
- 第三種：將CSS樣式寫成一個單獨的檔案，需要時再引用
- 說明：<link rel="stylesheet" type="text/css" href="./styles.css/" /> link標籤專門用於引入CSS程式碼
- 第一種：在標籤的style屬性中進行設定
選擇器
- 標籤名選擇器：可以決定哪些標籤被動的使用這個樣式
- id選擇器 #id{ 屬性:值; 屬性:值; } 可以通過標籤的id屬性決定當前標籤的樣式資訊
- 類選擇器 .class{屬性:值;屬性:值;} 可以通過標籤的class屬性決定當前標籤的樣式資訊
- 組合選擇器#id,.class{ 屬性:值;屬性:值;}
常用樣式
- color:顏色;
- width:?px;
- height:?px;
- font-size:?px;
- background-color:顏色
- border:?px 顏色 線條
- maigin-left:auto;DIV標籤中的屬性
- margin-right:auto;DIV標籤中的屬性
- text-align:center;
- text-decoration:none;超連結去下劃線
- list-style:none;列表去下劃線