HTML/CSS快速入門_ZenDei技術網路在線

Web概念 JavaWeb 使用java語言開發基於互聯網的項目軟體架構 C/S架構:Client/Server 客戶端/伺服器用戶本地有一個客戶端程式,在遠程有一個服務端程式如QQ,英雄聯盟....... 優點用戶體驗好缺點開發,安裝,部署,維護麻煩 B/S架構:Browser/Ser ...

Web概念

JavaWeb
- 使用java語言開發基於互聯網的項目
軟體架構
- C/S架構:Client/Server 客戶端/伺服器
  - 用戶本地有一個客戶端程式,在遠程有一個服務端程式
  - 如QQ,英雄聯盟.......
  - 優點
    - 用戶體驗好
  - 缺點
    - 開發,安裝,部署,維護麻煩
- B/S架構:Browser/Server 瀏覽器/伺服器端
  - 只需要一個瀏覽器,用戶通過不同的網址(URL),客戶端訪問不同的伺服器端程式
  - 優點:
    1. 開發,安裝,部署,維護簡單
  - 缺點:
    1. 如果應用過大,用戶體驗可能受到影響
    2. 對硬體要求過高
B/S 架構詳解
- 資源分類:
  1. 靜態資源:
    - 使用靜態網頁開發技術發佈的資源
    - 特點:
      - 所有用戶訪問,得到的結果是一樣的
      - 如:文本,圖片,音頻,視頻,HTML,CSS,JavaScript
        
        HTML:用於搭建基礎網頁,展示頁面的內容
        
        CSS:用於美化頁面,佈局頁面
        
        JavaScript:控制頁面的元素,讓頁面有一些動態的效果
      - 如果用戶請求的是靜態資源,那麼伺服器會直接將靜態資源發送給瀏覽器,瀏覽器中內置了靜態資源引擎
  2. 動態資源:
    - 使用動態網頁實時發佈的資源
    - 特點:
      - 所有用戶訪問,得到的結果可能不一樣
      - 如:jsp/Servlet,php,asp.....
      - 如果用戶請求的是動態資源,那麼伺服器會執行動態資源,轉換為靜態資源,再發給瀏覽器

HTML

概念:是最基礎的網頁開發語言
- Hyper Text Markup Language 超文本標記語言
  - 超文本:
    - 超文本是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網狀文本
  - 標簽語言:
    - 由標簽構成的語言.<標簽名> 如html,xml
    - 標記語言不是編程語言
快速入門:
- 語法:
  1. html文檔尾碼名.html或者.htm
  2. 標簽分為
    1. 圍堵標簽:有開始標簽和結束標簽.如
    2. 自閉和標簽:開始標簽和結束標簽在一起.如
  3. 標簽可以嵌套:
    - 需要正確嵌套,不能你中有我,我中有你
    - 錯誤:
    - 正確:
  4. 在開始標簽中可以定義屬性.屬性是由鍵值對構成,值需要引號(單雙都可)引起來
  5. html中不區分大小寫,建議小寫
標簽學習
1. 文件標簽:構成html最基本的標簽
  - html:html根標簽
  - head:頭標簽
  - title:標題標簽
  - body:體標簽
2. 文本標簽:
  - 註釋:<!-- 註釋內容--!>
  - to
    :標題標簽
  - :段落標簽
  - :換行標簽
  - :水平線
    - color:顏色
    - size:大小
    - width:寬度
    - align:對齊方式
      - center:居中;
      - left: 左對齊
      - right: 右對齊
  - :加粗
tr:定義行

bgcolor:背景色

align:對齊方式

td:定義單元格

colspan:合併列

rowspan:合併行

th:定義表頭單元格

:表格標題

:表格的頭部分

:表格的體部分

:表格的腳部分

表單標簽

表單:

概念:用於採集用戶輸入的數據,用於和伺服器進行交互.

form:用於定義表單,可以定義一個範圍,範圍代表採集用戶數據的範圍.

屬性:

action:指定提交數據的URL;

method:指定提交方式

分類:一共有7種,2種比較常用

get:

請求參數會在地址欄中顯示

請求參數大小有限制

不太安全

post:

請求參數不會在地址欄中顯示,,會封裝在請求行中

請求參數的大小沒有限制

較為安全

表單項中的數據要想被提交,必須指定其name屬性

表單項標簽:

input:可以通過type屬性值,改變元素展示的樣式

type屬性:

text:文本輸入框,預設值

placeholder:指定輸入框的提示信息,當輸入框的內容發生變化,會自動清空提示信息

password:密碼輸入框

radio:單選框

註意:

要想讓單選框實現單選的效果,則多個單選框的name屬性值必須一樣

一般會給每一個單選框提供value屬性指定其被選中後提交的值

checked屬性,可以指定預設值

checkbox:覆選框

註意:

一般會給每個單元框提供,指定其被選中後提交的值

checked屬性,可以指定預設值

file:文本選擇框

hidden:隱藏域,用於提交一些信息

按鈕:

submit:提交按鈕

button:普通按鈕

image:圖片提交按鈕

src屬性指定圖片提交的路徑

date

datetime-local

email

number

label:指定輸入項的文字描述信息

註意:

label的for屬性一般會和input的id屬性值對應,如果對應了,則點擊label區域會讓input輸入框獲取焦點

seelct:下拉列表

子元素:option,指定列表項

textarea:文本域

cols:指定列數,每一行有多少個字元

rows:預設多少行

CSS

概念:Cascading Style Sheets層疊樣式表

層疊:多個樣式可以作用在同一個html的元素上,同時生效

好處:

功能強大

將內容和樣式控制分離

降低耦合度

讓分工合作更容易

提高開發效率

CSS使用:CSS與html結合方式

內聯樣式

<div style="color: red;">aaa</div>

內部樣式

<style> div{ color:gray; } </style> <div>aaa</div>

外部樣式

定義css資源文件

在head標簽中定義link標簽,引入外部的資源文件
```html
aa.css
div {
color:red;
}

<link rel="stylesheet" type="text/css" href="css/aa.css" /> 或 <style> @import url("css/aa.css"); </style> <div>aaa</div>
```

css語法:

格式:
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
....
}

選擇器:篩選具有相似特征的元素

註意:

每一對屬性需要使用;隔開,最後一對屬性可以不加

選擇器:篩選具有相似特征的元素

分類:

基礎選擇器

id選擇器:選擇器具有的id屬性值的元素,建議在一個html頁面中id值唯一

語法:#id屬性值{}

元素選擇器:選擇具有相同標簽名稱的元素

類選擇器:選擇具有相同的class屬性值的元素

語法:.class屬性值{}
###### 註意:
優先順序:id選擇器>類選擇器>元素選擇器

擴展選擇器

選擇所有元素

語法:*{}

並集選擇器:

語法:*{}

子選擇器:篩選選擇器1的父元素選擇器2

語法:選擇器1 選擇器2 {}

父選擇器:篩選選擇器2的父元素選擇器1

語法:選擇器1>選擇器2 {}

屬性選擇器:選擇元素名稱.屬性名=屬性值的元素

語法:元素名稱[屬性名="屬性值"]{}

偽類選擇器:選擇一些元素具有的狀態

語法:元素.狀態{}

如:

狀態

link:初始狀態

visited:被訪問狀態

active:正在訪問狀態

hover:滑鼠懸浮狀態

屬性

字體、文本

font-size

text-align

line-height

背景

background

邊框

border

尺寸

width

height

盒子模型

margin:外邊距

padding:內邊距

預設情況下內邊距會影響整個盒子的大小

box-sizing:border-box;設值盒子的屬性,讓width和height就是盒子最終的大小

float:浮動

left

right

HTML/CSS快速入門

Web概念

對硬體要求過高

HTML

to

:標題標簽

值1值2值3:值的範圍:00~FF之間.如#FF00FF

CSS