【TcaplusDB知識庫】TcaplusDB有損搬遷與無損搬遷介紹
HTML （超文字標記語言）
001 軟體架構
C/S(客戶端/伺服器架構),B/S（瀏覽器/伺服器架構）
002 資源分類
1）靜態資源：使用靜態頁面開發技術釋出的資源
特點；
① 所有使用者訪問得到的結果是一樣的
② 如，文字、視訊、音訊，html，css，javascript
③ 如果使用者請求的是靜態資源，那麼伺服器會將靜態資源傳送給瀏覽器，瀏覽器中內建了靜態資源的解析引擎，可以展示靜態資源
2）動態資源：使用動態網頁技術釋出的資源
①所有使用者訪問的結果可能不一樣
②如果用請求的是動態資源，那麼伺服器會執行動態資源，並轉換為靜態資源，然後傳送給瀏覽器
圖示
003 ：靜態資源相關技術及功能
html：用於搭建基網頁，展示網頁的內容css：用於美化頁面，佈局頁面 javascript：控制網頁的元素，讓頁面具有一些動態的效果
004 html概念
- Hyper Text Markup Language： 超文字標記語言
- 超文字是用超連結的方法，將各種不同空間文字資訊組織在一起的網狀文字
- 標記語言：由標籤構成的語言。 <標籤名稱> 如html，mxl
- 標記語言不是程式語言
005 html語法入門
語法：
- Htm文件字尾名：名稱.html 或者名稱.htm
- 標籤分為：
- 圍堵標籤：有開始標籤和結束標籤。如<html></html>自閉合標籤：
- 自閉合標籤：開始標籤和結束標籤在一起：如<br/>
- 標籤可以巢狀
- 需要正確的巢狀，不能你中有我，我中有你
-
錯誤的巢狀方式： <a><b></a></b>；正確的寫法：<a><b></b></a>
- 在開始標籤中可以定義屬性，屬性是由鍵值對構成，值需要用引號（單雙都可）引起來
- Html的標籤不區分大小寫，但是建議使用小寫
006 html標籤
01 文字標籤：構成html最基本的標籤
(1) html：html文件的根標籤
(2) head：頭標籤。用於指定html文件的一些屬性，引入外部的資源
(3) title：標題標籤
(4) body：體標籤
(5) <!DOCTYPE html>:html5中定義html文件
(6) <meta charset=”UTF-8”>：指定字符集編碼
02 文字標籤：和文字有關的標籤
(1) 註釋： <!--註釋的內容--->
(2) h1-h6:標題標籤，從大到小
(3) p: 段落標籤
(4) <br/>: 換行標籤
(5) <hr/>:水平線標籤
① 屬性：
1) 顏色： color
2) 寬度： width
3) 高度：size
4) 對齊方式：align（center居中，left左對齊，right右對齊）
(6) <b>:字型加粗
(7) <i>:字型斜體
(8) <center>:文字居中{已淘汰}
(9) <font>:字型屬性{已淘汰}
① 屬性：
1) color：顏色
2) size：大小
3) face：字型
② 屬性定義：
1) Color:
1. 英文單詞：red,green,blue
2. rgb(值1,值2,值3)：值的取值範圍：0~255【知道就行】
3. #值1值2值3：值的範圍：00~FF之間。如：#FFFFFF
2) Width：
1.數值：width='20'，數值的單位，預設是px（畫素）
2.數值%,表示佔比相對於父元素的比例
03 圖片標籤
(1) <img/> ：圖片標籤
① 屬性src： 指定圖片的位置
② 路徑寫法：相對路徑（./表示當前目錄; ../表示上一級目錄）
04列表標籤
(1) 有序列表{少用}：給一堆資料新增列表語義，並IE一推資料中是由先後順序的
格式：
<ol>
<li></li>
</ol>
(2) 無序列表{常用}:給一堆資料新增列表，並且資料中所喲的資料都是無先後順序的
格式：
<ul> <li></li> </ul>
說明：
標籤：使用<ul>和<li>標籤
方法：<ul>和<li>標籤的type屬性指定符號的樣式，取值如下： disc：實心的圓圈，square：實心的方塊，circle：空心的圓圈
(3) 自定義列表：給資料新增列表語義格式：
<dl> <dt></dt><!-- dt就是用來定義列表中標題 --> <dd></dd><!-- dd是給每個標題新增描述資訊 --> </dl>
05 超連結標籤
語法格式：<a href="跳轉目標" target="目標視窗的彈出方式"> 文字或影象 </a>
屬性：
href：指定訪問資源的URL（統一資源定位符）
target：指定開啟資源的方式
_self:預設值，在當前頁面開啟
_blank:在空白頁面開啟
1.外部連結
例如<a href=“http://www.baidu.com” target="_self">百度</a>
2.內部連結：網站內部頁面的相互連結，直接連結內部頁面名稱即可
例如<a href=“index.html”>首頁</a>
3.空連結
如果當時沒有確定連結目標時，<a href="#">首頁</a>
4.下載連結
如果href裡面地址是一個檔案或者壓縮包（地址連結是檔案.exe或zip等壓縮包形式），會下載這個檔案，<a href=“hawen.rar”>下載檔案</a>
5.網頁元素連結
在網頁中的各種網頁元素，如文字，影象，表格，音訊，視訊等都可以新增超連結
6.錨點連結
（1）在連結文字的href屬性中，設定屬性值為 #名字 的形式，如<a href="#two">第2集</a>
（2）找到目標位置標籤，裡面新增一個id屬性=剛才的名字，如<h3 id=“two”>第2集介紹</h3>
06 div和span
(1) Div：每一個div佔滿一整行。塊級標籤
(2) Span：文字資訊在一行展示，行內標籤，內聯標籤
07 語義化標籤：html5中為了提高程式的可讀性，提供了一些標籤
(1) <header>:頁首
(2) <footer>:頁尾
08 表格標籤
(1) table：定義表格
① width：寬度
② borde：邊框
③ cellpadding：定義內容和單元格的距離
④ cellspacing：定義單元格之間的距離，如果指定為0，則單元格之間的線會合為一條
⑤ bgcolor：背景色
⑥ align：對齊方式
(2) tr:定義行
(3) td：定義單元格
(4) th：定義表頭單元格
(5) <caption>:表格標題
(6) <thead>：表示表格的頭部分
(7) <tbody>:表示表格的體部分
(8) <tfoot>: 表示表格的腿部分
09 表單標籤
form: 用於定義表單的，可以定義一個範圍，範圍代表採集使用者資料的範圍
屬性：
action：指定資料提交的URL
method： 指定提交的方式
分類：一共有7種，2種比較常見
get:
1. 請求引數會在位址列中顯示，會封裝到請求行中（HTTP協議之後講解）
2. 請求引數長度是有限制的
3. 不太安全，容易在位址列中被查到
post
1. 請求引數不會在位址列中顯示，會被封裝到請求體中（HTTP協議之後講解）
2. 請求引數長度沒有限制
3. 較為安全
注意：
表單項中的資料要想被提交，必須指定其name屬性
表單項標籤
input：可以通過type屬性值，改變元素展示的樣式
type屬性：
text：文字輸入框，預設值
* placeholder： 指定輸入框的提示資訊，當輸入框的內容發生變化時，會自動清空提示資訊
password：密碼輸入框
radio：單選框
注意：
1） 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣
2） 一般會給每一個單選框提供value屬性，來指定其被選中後提交的值
3） checked屬性，可以指定預設值
checkbox：複選框
注意：
1） 一般會給每一個單選框提供value屬性，來指定其被選中後提交的值
2） checked屬性，可以指定預設值
file: 檔案選擇框
hidden：隱藏域,用於一些資訊的提交
按鈕：
1. submit：提交按鈕，可以提交表單
2. button：普通按鈕
3. image：圖片提交按鈕
src屬性用來指定圖片的路徑
label：指定輸入項的文字描述資訊
注意：
label的for屬性一般會和input的id屬性對應，如果對應了，則點選label區域，會讓input輸入框獲取焦點
select：下拉列表
子元素： option指定列表項
例如
<select name="rpovince">
<option value="">--請選擇--</oprtion>
<option value="1">北京</oprtion>
<option value="2" selected>上海</oprtion>
<option value="3">南京</oprtion>
</select>
textarea：文字域
cols: 指定行數，每一行有多少個字元
rows： 預設多少行
例如-註冊頁面
<form action="#" method="get"> <label for="username">使用者名稱:</label> <input name="username" id="username"> <br/> 密碼:<input name="password"><br/> 性別： <input type="radio" name="gender" value="man" checked>男 <input type="radio" name="gender" value="woman">女<br/> 愛好: <input type="checkbox" name="hobby" value="shopping" checked>購物 <input type="checkbox" name="hobby" value="java">java <input type="checkbox" name="hobby" value="game">遊戲 圖片： <input type="file" name="file"> 隱藏域： <input type="hidden" name="hidden"> 取色器：<input type="color" name="color"> 日期： <input type="date " name="date"> 日期： <input type="datetime-local " name="date"> 省份： <select name="rpovince"> <option value="">--請選擇--</oprtion> <option value="1">北京</oprtion> <option value="2" selected>上海</oprtion> <option value="3">南京</oprtion> </select> 文字域： <textarea name="name" cols="30" rows="23"></textarea> <input type="submit" value="登入"> <input type="button" value="一個按鈕"> <input type="image" value="圖片地址"> </form>
其中 :表示空格