JavaWeb筆記(1)-HTML學習

B/S架構詳解

1. 資源分類
    a. 靜態資源：
        使用靜態網頁開發技術發佈的資源
        特點：
            所有用戶訪問得到的結果是一致的
            如：文本，圖片，音頻，視頻等 -- HTML，CSS，JavaScript
        如果用戶請求的是靜態資源，則服務器會直接將靜態資源發送給瀏覽器
        瀏覽器中內置了靜態資源的解析引擎
    b. 動態資源：
        使用動態網頁技術發佈的資源
        特點：
            所有用戶訪問，得到的結果可能不一致
            如：jsp/servlet,php,asp...
            如果用戶請求的動態資源，那麼服務器會執行動態資源轉化爲靜態資源，再發送給瀏覽器
    c. 靜態資源分工：
        HTML：用於搭建基礎網頁，展示頁面的內容
        CSS：用於美化頁面，佈局頁面
        JavaScript：用於控制頁面的元素，讓頁面有一些動態的效果

HTML學習

1. HTML：超文本標記語言(Hyper Text Markup Language)
    a. 超文本：
        超文本使用超鏈接的技術，將各種不同空間的文字信息組織在一起的網狀文本
    b. 標記語言：
        有標籤構成的語言。如html，xml
        標記語言不是編程語言，沒有邏輯性
2. 語法格式：
    a. 標籤分類：
        1. 圍堵標籤：
            有開始標籤和結束標籤，如<html></html>，<head></head>等
        2. 自閉和標籤：
            開始標籤和結束標籤在一起，如換行標籤<br/>
    b. 標籤可以嵌套
    c. 在開始標籤內可以定義屬性
        屬性是由鍵值對構成的，值需要使用引號(單雙都行)括起
    d. 標籤不區分大小寫，建議用小寫

HTML標籤學習

1. 文件標籤：構成html的最基本標籤
    * html：html文檔的根標籤
    * head：頭標籤。用於指定html文檔的屬性，或者引入一些外部資源
    * title：標題標籤
    * body：體標籤
    <!DOCTYPE html>是HTML5中定義文件的類型爲html文檔
2. 文本標籤：
    * 註釋：<!--註釋內容-->
    * <br />：換行標籤。html中製表符和換行符等會被解析爲一個空字符
    * <h1> to <h6>：標題標籤。自帶換行，1~6字體從大到小
    * <p>：段落標籤
    * <hr />：分隔水平線。已廢棄，其中有屬性可以更換樣式，但是不建議在html中定義樣式，後期將在CSS中定義。
    * <b>：字體加粗
    * <i>：斜體
    * <font>：字體標籤。通過屬性來修改字的顯示--color(字體顏色)，size(字體大小)，face(字體樣式)
            color有三種定義方式：
                1. 英文單詞
                2. rgb(值1,值2,值3)：三原色的值來指定，每個範圍0~255。(已廢棄)
                3. #值1值2值3：三原色值來指定，每個範圍00~FF。
            size有兩種定義方式：
                1. 像素值
                2. 基於父類元素的百分比
    * <center>：文本居中標籤。(已廢棄)
3. 圖片標籤：
    * <img \>：圖片標籤
        src屬性：圖片的文件路徑
            默認路徑在當前下開始查找：(../表示父目錄),(./表示當前目錄)
        alt屬性：圖片加載失敗時，圖片處顯示的文本信息
        align屬性：佈局屬性
        width：寬 -- 像素值
        high：高 -- 像素值
4. 列表標籤：
    a. 有序列表
        * <ol>：有序列表 -- 用於包裹整個列表內容
            type屬性：用於定義有序列表的排序規則與序號類型，默認數字1開始
            start屬性：用於定義開始的編號
        * <li>：列表項 -- 用於包裹每個數據內容
    b. 無序列表
        * <ul>：無序列表 -- 用於包裹整個列表內容
            type屬性：用於定義無序列表列表項的標識類型，默認爲黑色實心圓
        * <li>：列表項 -- 用於包裹每個數據內容
5. 超鏈接標籤
    * <a>：超鏈接標籤
        href屬性：指定訪問資源的URL
            * 可以寫資源的URL
            * 可以寫郵箱，例如：<a herf = "xxx@xx">聯繫我們</a>
        target屬性：指定打開超鏈接資源的窗口，默認是自身標籤頁，即自身標籤頁來加載連接的資源頁面
                    默認爲_self
                    設爲_blank，則標識在新標籤頁加載連接的資源
        可以在文本位置放置資源，例如圖片等，點擊資源就會跳轉到herf屬性指定的連接
        例如:
            <a herf = "www.baidu.com" target = "_blank"><img src = "imgPath"></a>
    * 阻止跳轉：
        1. 超鏈接功能：
            -- 可以被點擊<必須要有href屬性才能被點擊>
            -- 點擊後跳轉到href指定的url，href爲空值時跳轉自身頁面
        2. 如果需要點擊超鏈接後，在當前頁面執行某些效果，而不在跳轉頁面(也不刷新自身頁面)
            解決方法：
                將href屬性值設置爲"javascript:void(0);"
                <a href="javascript:void(0);">點擊不跳轉</a>
6. div和span標籤
    * <span>：行內標籤(內聯標籤)，包裹的信息會在一行顯示
                默認無任何效果。用於結合CSS控制樣式
    * <div>：塊級標籤。每個div佔滿一行
7. 語義化標籤：
    a. HTML5中爲了提高程序可讀性，提供了一些標籤
        * <header>：
        * <footer>：
        ...
8. 表格標籤：
    a. html中表格只有行的概念，每一行中再定義單元格
        * <table>：定義一個表格
            width：寬度
            height：高度
            border：邊框
            cellpadding：定義內容和單元格的距離 -- 0表示內容頂格
            cellsapcing：定義單元格之間的距離 -- 0表示單元格之間的線合併爲一根
            bgcolor：背景色
            align：對齊方式
        * <tr>：定義一行
            bgcolor：背景色
            height：高度
            align：對齊方式
        * <td>：在一行內定義一個單元格(即一個數據項)
            用於合併單元格的屬性：
            colspan：表示當前單元格佔的列數
                如果一個單元格佔多列，該屬性定義在該單元格最左邊的單元格內
            rowspan：表示當前單元格佔的行數
                如果一個單元格佔多行，該屬性定義在最上的那一行的單元格屬性中，下面的行的單元格都要減少數量
        * <th>：定義表頭的單元格，默認加粗居中顯示
        * <caption>：表格的標題
        //下面標籤用於表示標識內容，配合CSS樣式
        * <thead>：表示表格的頭部分
        * <tbody>：表示表格的體部分
        * <tfoot>：表示表格的尾巴部分
    b. 使用table佈局：
        1. 如果某一行只有一個單元格，則使用<tr><td></td></tr>完成
        2. 如果某一行有多個單元格，則相互合併單元格過於繁瑣，使用表格嵌套
            <tr>
                <td>
                    <table></table>
                </td>
            </tr>
9. 表單標籤：
    a. 表單：用於採集用戶輸入的數據，用於和服務器交互
    b. 使用標籤：
        * <form>：用於定義表單。可以定義一個範圍，範圍表示採集用戶數據的範圍
            1. 使用form標籤包裹採集到的數據纔會被提交
            2. 屬性：
                action：指定提交數據的URL
                method：指定提交方式 -- 一共7種，常用兩種
                    get：
                        1. 請求的參數會在地址欄中顯示，會封裝在請求行中
                        2. 請求參數的大小是有限制的(由於URL有長度限制)
                        3. 不太安全
                    post：
                        1. 請求參數不會在地址欄中顯示，會封裝爲請求體中
                        2. 請求參數的大小沒有限制
                        3. 比較安全
                name：數據項的名稱
            3. 表單數據要想被提交，必須爲每個數據指定name屬性
    c. 表單項標籤：
        * <input />：輸入框標籤
            1. type屬性：可以同type屬性改變元素展示的樣式
                text值：文本輸入框
                    -- value屬性可以設置默認值，但是效果是默認值不會消失
                    -- 應該使用placeholder屬性設置默認提示信息，當點擊輸入後，默認值會消失
                password值：密碼輸入框
                    -- value屬性可以設置默認值，但是效果是默認值不會消失
                    -- 應該使用placeholder屬性設置默認提示信息，當點擊輸入後，默認值會消失
                radio值：單選框 
                    -- 要想多個單選框實現單選，必須將其name屬性相同
                    -- 一般會給每個單選框指定value屬性值，用來標識單選的是哪一個內容
                    -- 默認被選擇，使用checked屬性，checked="checked"
                checkbox值：複選框
                    -- 要想多個複選框實現複選組，必須將其name屬性相同
                    -- 一般會給每個選框指定value屬性值，用來標識選的是哪一個內容
                    -- 默認被選擇，使用checked屬性，checked="checked"
                file值：選擇文件框
                    -- 用於打開文件管理器選擇文件
                hidden值：隱藏域
                    -- 雖然不會顯示，但是可以設置其value屬性的值，提交表單時也會將該值提交
                    -- 主要用於提交一些信息
                按鈕：
                    button值：普通按鈕
                        -- 時常配合JavaScript來實現點擊效果
                    submit值：提交按鈕
                        -- 用於提交表單
                        -- value屬性值爲按鈕上的字符顯示
                    image值：圖片按鈕
                        -- src屬性設置圖片路徑
                        -- 也可以提交表單
                date/datetime-local值：日曆輸入框
                email值：可以校驗郵箱格式的輸入框
                number值：僅數字輸入框
            2. <label>標籤：指定輸入項的文字描述信息
                -- label標籤中的for屬性值需要與input的id屬性相同
                -- 如果相同，則點擊label區域的文字描述信息，會讓input輸入框獲取輸入焦點
        * <select />：下拉列表
            1. <option>列表項標籤
                value屬性值：用於區分提交的選項
            2. 需要對select定義name屬性，才能提交內容
            3. 默認選擇selected
        * <textarea />：文本域
            1. cols屬性：
                指定列數，每一行有多少個字符
            2. rows屬性：
                定義默認能寫多少行

JavaWeb筆記(1)-HTML學習

SQL優化-20231016

JavaWeb筆記(14)-Listener

工具-SVN與Git

SQL筆記(4)-Redis數據庫

JavaWeb筆記(10)-會話中的Cookie

JavaWeb筆記(31)-Spring Security

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結