JAVA程式設計學習記錄（JavaWeb-Html）

學程式設計的鹿發表於2018-03-29
Java程式設計WebHTML

學習Java之前需先搞懂Java能做些什麼、需要學什麼、有哪些方向：
Java能做的：
    ①Web開發
    ②客戶端開發（銀行、學生管理、醫院等）
    ③移動裝置軟體開發（Android軟體）

Java需要學的：
    ①JavaWeb
    ②JavaSe
    ③JavaEE-MVC
    ④Oracle和MySQL等資料庫管理系統
Java以後的方向：
    ①Java軟體工程師
    ②Java架構師
    ③大資料工程師


第一週：從前端開始

//先從簡單的Html和CSS開始，入門學習一些思路，為以後的程式設計之路打下基礎

Web的入門介紹：

    ①C/S結構:Client->Server 客戶端和伺服器端之間的互動
            典型特點：客戶端的軟體必須升級才能使用伺服器端高版本的功能
            應用：阿里巴巴、QQ、飛秋；
    ②B/S結構:Browser->Server瀏覽器端和伺服器端之間的互動
            典型特點：瀏覽器端的軟體不需要特定的升級就能訪問伺服器的網站；
            應用：大型遊戲網站、各種入口網站；
什麼是網站？
網站：將基於B/S的應用都叫網站。網站有很多的html標籤組成；

Html部分

什麼是HTML?
HTML: 全稱：Hyper Text Markup Language：超文字標記語言；
超文字標記：針對字型的顏色、大小、格式
                    針對圖片、動畫、音視訊等進行操作
HTML語言結構：
<html>
        <head>       //編碼規範的（gbk/utf-8） -->標頭檔案標籤
                    <title>標題標籤</title>
        </head>
        <body>
                        html主體部分：這些內容最終會在瀏覽器中顯示
        </body>
</html>        //有標籤體的標籤
HTML結構解釋
            html：根標籤，其中包含很多子標籤
            head：標頭檔案
            body：網頁的主體部分，會顯示內容
文字標籤

標題標籤：<h1>標題</h1>~<h6>標題</h6>  //標題是由大到小的

水平線標籤：<hr>
換行標籤：<br/>
段落標籤：<p>
       段落縮排：<blockquote></blockquote>
原樣輸出標籤：<pre></pre>
上標標籤：<sup></sup>
下表標籤：<sub></sub>
空格：&nbsp;  //一定不能少了分號（；）
版權所有：&copy ©
註冊商品：&reg ®
列表標籤：
        有序號的列表：
                                <ol type="A">            //type預設引數為"1":
                                        <li>貝克漢姆</li>
                                        <li>C羅</li>
                                        <li>梅西</li>
                                </ol>
                    效果：
                            A.貝克漢姆
                            B.C羅
                            C.梅西
        無序號的列表：
                   選課管理：
                                <ul type="square">   //type預設引數為"○"
                                        <li>成績管理</li>
                                        <li>科目管理</li>
                                        <li>學生管理</li>
                                </ul>
                      效果：
                                
影象標籤
src：匯入圖片的路徑
width：圖片的寬度-->①指定固定的大小px（畫素）②百分比大小顯示
height：圖片的高度-->①指定固定的大小px（畫素）②百分比大小顯示
title：滑鼠懸浮在圖片上會顯示文字
alt：代替文字，當圖片載入失敗的時候，代替文字就會起作用
例：
         <img src="123.jpg"  width="100%  height="100%"  title="這是一張圖片"  alt="這塊是一張圖片">
超連結標籤
a標籤：<a></a>
常用屬性：herf：連結資源地址(URL)或者資原始檔
                 target：開啟資源的方式：
                               ①_self：當前視窗直接開啟
                               ②_blank：新的視窗開啟
常見的協議：
                    file://     -->檔案協議：開啟本地檔案的協議

                    http://   -->hosts檔案中找是否有ip對應的域名，找不到則呼叫網路卡進行聯網
                    thunder:// -->迅雷協議 mailto：郵件協議
超連結的作用：
        ①可以連線資原始檔
        ②可以作為錨連結來使用      
                   方式1：針對在同一個html頁面下
                                a.打錨點（標記一個位置）<a name屬性="錨點名稱"></a>
                                b.建立跳轉連結  <a href="#錨點名稱">跳轉到錨點指定位置</a>
                   方式2：針對不同html頁面下
                                a.在另一個頁面的某個位置打錨點（標記）  <a name屬性="錨點名稱"></a>
                                b.在當前頁面下建立跳轉連結   <a href="連線到的資原始檔或地址#錨點">跳轉</a>
表格標籤

<table></table>

<th></th>:表頭標籤-->自動居中 加粗
<tr></tr>:行標籤
<td></td>:列標籤
單元格合併：行合併：rowspan
                    列合併：colspan
修飾表格屬性：border：邊框-->可設定畫素 百分比
                        align：表格在瀏覽器中的對齊方式-->center、left、right
                        width：寬度
                        height：高度
表單標籤

form標籤：

                action：填提交地址
                method：提交方式：
                                ①get：將使用者的資訊提交到位址列中；檔案大小不超過64kb；
                                ②post：不會將資訊提交到位址列中，檔案大小無限制；
                文字輸入框：<input type="text" name="username">
                密碼輸入框：<input type="password" name="pwd">  //name屬性必須填，用來給系統後臺標記
單選框：<input type="radio" name="gender" value="男">
              <input type="radio" name="gender" value="女">//name將性別資料看成同一組資訊
核取方塊：<input type="checkbox" name="hobby" value="足球">
              <input type="checkbox" name="hobby" value="籃球">
              <input type="checkbox" name="hobby" value="跑步">
隱藏域：無效果顯示，可攜帶資料給後臺<input type="hidden" name="hid">

文字域:textarea
            rows:多少行
            cols:一行多少字元
            <textarea rows="5" cols="25">JavaWeb</textarea>
提交按鈕:會將當前表單中的使用者資訊提交到指定的地址(後臺地址)
                <input type="submit" value="提交">
重置按鈕：重置表單內已填資訊
                <input type="reset" value="重置">
按鈕：<input type="button" value="點我試試" onclick="testClick()">

相關文章