2. 程式人生 > 其它 >場景學習：HTML入門

場景學習：HTML入門

阿新 • • 發佈：2022-05-27

體驗簡介

本場景雲起實驗室將提供一臺配置了Windows Server 2019版本的ECS例項（雲伺服器）。

通過本教程的操作，您可以基於已有的環境快速安裝Visual Studio Code，並學習到HTML的基本知識，幫助您瞭解各種常用標籤的意義以及基本用法。
體驗此場景後，可以掌握的知識有：

Visual Studio Code操作。
HTML基本知識。

登入Window Server桌面

資源建立成功後介面顯示loading(這是正常的)

登入Window Server桌面

\1. Windows遠端登入(在自己的電腦上)：

a. 按win+r鍵。

b. 在執行對話方塊中，輸入mstsc，單擊確定。

c. 在遠端桌面連線對話方塊中，單擊隱藏選項，輸入計算機和使用者名稱，單擊連線。

配置說明：

  • 計算機：輸入已建立的ECS例項的公網IP地址。您可以在雲產品資源查詢ECS公網地址。
  • 使用者名稱：administrator。

d. 在Windows安全中心對話方塊中，輸入ECS例項的登入密碼（在雲產品資源獲取ECS例項登陸密碼），單擊確定。

登入成功介面如下。

\2. MAC遠端登入：下載安裝Microsoft Remote Desktop 10遠端工具進行遠端連線，具體操作，請參見幫助文件。

安裝Visual Studio Code及配置

\1. 開啟瀏覽器並訪問Visual Studio Code官方下載連結，下載Windows版安裝包。

\2. 將Visual Studio Code安裝包貼上到Windows遠端機器的桌面下，並雙擊安裝包。

\3. 在安裝對話方塊中，單擊確定。

\4. 在許可協議對話方塊中，選擇我同意此協議，單擊下一步。

\5. 在選擇附加任務對話方塊中，選中建立桌面快捷方式和新增到PATH，單擊下一步。

\6. 在準備安裝對話方塊中，單擊安裝。

\7. 等待安裝完成後，勾選執行Visual Studio Code，單擊完成。

\8. 在Visual Studio Code左側導航欄中，單擊，輸入Preview on Web Server，選擇Preview on Web Server1.3.0版本

後單擊Install。

\9. 在遠端伺服器桌面新建一個名為test的資料夾。

\10. 在Visual Studio Code左側導航欄中，單擊 ，然後單擊Open Folder。

\11. 在Open Folder頁面中，雙擊桌面。

\12. 在Open Folder頁面中，選中test資料夾，單擊選擇資料夾。

建立HTML檔案

HTML（超文字標記語言）是一種用於建立網頁的標準標記語言。HTML不需要編譯，可以直接由瀏覽器執行，它的解析依賴於瀏覽器的核心。它不是一種程式語言，而是一種標記語言。

\1. 在上方選單欄中，選擇File > New File。

\2. 在新建檔案Untitled-1中，輸入如下程式碼。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    Hello Aliyun
  </body>
</html>

程式碼說明：

  • ：這是我們的文件宣告頭。它告訴了瀏覽器，本文件處理的是HTML文件。
  • ：該標籤即根元素，此處表示文件的開始。
  • <head>：該標籤是網頁的頭部，設定網頁的相關資訊。
  • <title>：該標籤設定網頁標題。
  • <body>：該標籤定義文件的主體，也就是我們的主要內容。

\3. 按下Ctrl+S鍵，然後在Save As頁面中，將檔名設定為test1.html，單擊儲存。

\4. 在左側test資料夾中，將游標放置在test1.html上，開啟右鍵選單，單擊vscode-preview-server:Preview on side panel。

在右側Preview框中，你可以看到test1.html的內容。

使用HTML常用標籤

HTML標記標籤通常被稱為HTML標籤。HTML標籤是HTML語言中最基本的單位。HTML標籤是HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標籤的大小寫不敏感，例如和表示的意思是一樣的，都代表“主體”，推薦使用小寫。

\1. 使用雙標籤。

雙標記也稱體標記，是指由開始和結束兩個標記符組成的標記。其基本語法格式如下。

<標記名></標記名>

常見的雙標籤有：

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <a href="https://www.aliyun.com/">Hello Aliyun</a>
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\2. 使用單標籤。

單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下。

<標記名/>

常見的單標籤有：

<br />
<!--換行-->
<hr />
<!--水平分隔線-->
<meta />
<img />

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <a href="https://www.aliyun.com/">Hello Aliyun</a>
    <hr />welcome Aliyun
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\3. h系類標籤的使用。

h系標籤有六種，具體包括h1、h2、h3、h4、h5、h6。它們表示標題。

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\4. 使用p標籤。

p標籤是我們的文字標籤。

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>我是第一段文字，阿里雲，體驗實驗室</p>
    <p>我是第二段文字，阿里雲，體驗實驗室</p>
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\5. 使用div標籤。

標籤

可將網頁頁面分割成不同的獨立部分，通常用於定義文件中的區域或節。該標籤是一個塊級元素，瀏覽器會在和所標記的區域前後自動放置一個換行符。

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="width:200px;height:200px;background:pink">
    <p>阿里雲</p>
    </div>
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\6. 使用span標籤。

標籤通常作為文字的容器，它沒有特定的含義和樣式，只有與CSS同時使用才可以為指定文字設定樣式屬性。該標籤是一個內聯元素，它與塊級元素相反，內聯元素不會自動在前後自動放置換行符，因此內聯元素會預設顯示在同一行。

在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="width:200px;height:200px;background:pink">
    <p>這是div標籤，自動換行</p>
    </div>
    <input type="text" /><span>這是span標籤，不自動換行</span>
  </body>
</html>

在右側Preview框中，你可以看到test1.html的內容。

\7. 使用無序列表與有序列表。

無序列表是一個專案的列表，列表專案使用實心圓、空心圓、方塊進行標記，無序列表使用

    標籤。同樣，有序列表也是一列專案，列表專案使用數字進行標記。有序列表始於
    標籤。每個列表項始於
  1. 標籤。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>無序列表</p>
    <ul>
        <li>列表項1</li>
        <li>列表項2</li>
    </ul>
    <p>有序列表</p>
    <ol>
        <li>列表項1</li>
        <li>列表項2</li>
    </ol>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \8. 使用HTML標籤定義style屬性。

    我們可以通過style屬性來改變HTML標籤的樣式。

    a. 背景顏色的改變。

    在test1.html檔案中，輸入以下程式碼。通過設定background-color屬性，為p標記對新增背景顏色。按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="background-color:orange">Aliyun</p>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    b. 字型、顏色和尺寸的改變。

    在test1.html檔案中，輸入以下程式碼。通過設定font-family屬性來設定字型，通過設定color屬性值來設定顏色，通過設定font-size屬性值來設定字型大小。按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="font-family:arial;color:orangered;font-size:50px;">阿里雲</p>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    c. 文字對齊。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1 style="text-align: center;font-family:arial;color:orangered;font-size:50px;">阿里雲</h1>>
  </body>
</html>

    說明： 我們可以通過對text-align屬性的設定來設定文字的對齊方式。

    在右側Preview框中，你可以看到test1.html的內容。

    \9. 綜合使用HTML常用標籤。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:500px;height:300px;background-color:orange">
      <h1 style="text-align:center">阿里雲體驗實驗室</h1>
      <p style="text-align:center">
        體驗更多有趣實驗就上<a href="https://developer.aliyun.com/adc/labs/">體驗實驗室</a>
      </p>
      <hr />
      <p>在體驗實驗室你可以體驗到的雲產品有：</p>
      <ul>
        <li>ECS伺服器</li>
        <li>RDS資料庫</li>
        <li>檔案儲存NAS</li>
        <li>...</li>
      </ul>
    </div>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    HTML表格與div的應用

    本步驟我們將重點講解HTML表格的相關內容，並比較表格與div。

    • 表格

    表格由

    標籤來定義。每個表格均有若干行，每行是由標籤來定義。每行被分割為若干單元格，每個單元是由
    標籤來定義。字母td指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等。

    \1. 建立表格。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \2. 給表格新增標題。使用

     定義表格的標題 。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <caption>
        表格標題
      </caption>
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \3. 給表格新增標題。表格的標題使用
    標籤進行定義，標題通常用於表示列名字。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <caption>
        表格標題
      </caption>
      <tr>
        <th>第一個表頭</th>
        <th>第二個表頭</th>
      </tr>
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \4. 設定單元格跨行合併和跨列合併，我們可以使用colspan（合併行）和rowspan（合併列）屬性來實現跨行和跨列。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="300px" height="150px">
      <h3>單元跨兩列</h3>
      <tr>
        <th>姓名</th>
        <th colspan="2">電話</th>
      </tr>
      <tr>
        <td>張三</td>
        <td>344 22 112</td>
        <td>211 32 123</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>433 31 212</td>
        <td>234 21 654</td>
      </tr>
    </table>
    
    <table border="1" cellspacing="0">
      <h3>單元跨兩行</h3>
      <tr>
        <th>姓名</th>
        <td>張三</td>
      </tr>
      <tr>
        <th rowspan="2">電話</th>
        <td>344 22 112</td>
      </tr>
      <tr>
        <td>234 21 654</td>
      </tr>
    </table>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    • div和表格的區別。

    \1. div佈局。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:100%;border:2px solid #d4d4d4"></div>
      <div style="background-color:orange">阿里雲體驗實驗室</div>
      <div style="background-color:orangered">阿里雲體驗實驗室</div>
    </div>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \2. 表格佈局。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table style="width:100%;border:2px solid #d4d4d4">
      <tr>
        <td style="background-color:orange">
          阿里雲體驗實驗室
        </td>
      </tr>
      <tr>
        <td style="background-color:orangered">
          阿里雲體驗實驗室
        </td>
      </tr>
    </table>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \3. 通過前面兩步的比較，我們得出以下結論。

    • 表格佈局優缺點： 表格中的內容容易理解。 在不同的瀏覽器裡面看到的效果一般相同。 佈局的時候靈活度不高。 程式碼冗餘度高。
    • div佈局優缺點： 內容和樣式的分離，使頁面和樣式的調整變得更加方便。 節省代寬，程式碼冗餘度低。 表現和結構分離，在團隊開發中更容易分工合作而減少相互關聯性。

    使用HTML表單

    HTML表單用於收集不同型別的使用者輸入。表單是一個包含表單元素的區域。表單元素是允許使用者在表單中輸入的內容，比如：文字域（textarea）、下拉列表、單選框（radio-buttons）、複選框（checkboxes）等。表單使用表單標籤

    來設定，常見的表單格式如下。 
    <form name="" method="" action=""></form>

    引數說明：

    • name：定義表單的名字。
    • method：定義表單結果從瀏覽器傳送到伺服器的方式，預設引數為get。post安全性更高，因此常用作傳輸密碼等，而get安全性較低，一般用於查詢資料。
    • action：傳送資料要去的地址。它的值必須是一個有效的 URL，可以是相對URL也可以是絕對 URL。如果沒有提供此屬性或者action="#"，則資料將被髮送到包含表單的頁面的URL。

    網頁中的表單由許多不同的表單元素組成，這些表單元素包括文字欄位、單選按鈕、複選框、按鈕等，具體使用方法如下所示。

    \1. 文字欄位。

    在網頁中最常見的表單元素就是文字欄位，使用者可以在文字欄位內輸入字元或者單行文字。 語法如下。

    <input
  type="text"
  name="控制元件名稱"
  value="文字欄位的預設取值"
  size="控制元件的長度"
  maxlength="最長字元數"
/>

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      姓名：<input type="text" name="name" size="20" /><br />
      年齡:<input type="text" name="age" size="40" value="10" maxlength="3" />
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \2. 密碼輸入框。

    密碼輸入框是一種特殊的文字欄位，它的各個屬性和文字欄位是相同的，但是輸入進密碼輸入框的字元使用星號（*）脫敏顯示，保證周圍人看不見輸入的文字。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action=""></form>
      密碼：<input type="password" name="pwd" />
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \3. 單選按鈕。

    單選按鈕可以使使用者從選擇列表中選擇一個選項。我們可以把幾個單選按鈕name值設定為相同的，那麼這幾個單選按鈕就可以連線在一起，並且同一個組中只允許選擇一個按鈕。如果沒有選中任何一個，那麼整個單選按鈕組就被認為處於未知狀態，且不會隨表單提交。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <input type="radio" name="sex" value="male" checked />男<br />
      <input type="radio" name="sex" value="female" />女
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \4. 複選框。

    複選框可以讓使用者從一個選項列表中選擇超出一個的選項。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <input type="checkbox" name="music" checked />語文<br />
      <input type="checkbox" name="art" />數學<br />
      <input type="checkbox" name="math" />英語<br />
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \5. 下拉選單。

    下拉選單能夠節省頁面空間，正常狀態下顯示一個選項，單擊展開所有選項。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <select name="select">
        <option value="成都">杭州</option>
        <option value="廣州">廣州 </option>
        <option value="四川">西安</option>
        <option value="上海">上海</option>
      </select>
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \6. 列表項。

    在頁面中列表項可以顯示出幾條資訊，一旦超出這個資訊量，在列表項右側會出現滾動條，拖動滾動條可以看到所有選項。

    在test1.html檔案中，輸入以下程式碼，按下Ctrl+S鍵。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <select name="select" size="3" multiple="multiple">
        <option value="成都">成都</option>
        <option value="廣州">廣州 </option>
        <option value="四川">西安</option>
        <option value="上海">上海</option>
      </select>
    </form>
  </body>
</html>

    在右側Preview框中，你可以看到test1.html的內容。

    \7. 文字域。

    當您想要填入多行文字時，就可以使用文字域。文字域使用

相關推薦

場景學習：HTML入門

體驗簡介 本場景雲起實驗室將提供一臺配置了Windows Server 2019版本的ECS例項（雲伺服器）。

前端學習：HTML（一）

什麼是 HTML？ HTML 是用來描述網頁的一種語言。 HTML 指的是超文字標記語言（英語：Hyper Text Markup Language，簡稱：HTML）

JavaWeb學習：Spring入門

一、概述 　　Spring是一個分層的SE/EE一站式輕量級開源框架 　　一站式框架：有EE開發的每一層解決方案。

前端學習筆記一：HTML 特點 基本結構 doctype文件型別宣告 網頁編碼設定 html標籤屬性 文字和段落標籤 特殊符號

<!DOCTYPE html> <html lang=\"en\"> <head> <!--網頁頭部內容--> <meta charset=\"UTF-8\"><!--如果內容有中文編碼要是utf-8orgb1315-->

【Golang學習筆記】入門：環境變數與Package

Golang入門學習 環境變數 Golang的環境變數有GOROOT和GOPATH GOROOT GOROOT是Golang的安裝路徑，以mac為例，通過Homebrew安裝好的Golang之後，可以配置區域性環境變數。

amis學習系列之一：amis入門

　　amis是什麼，是一個後端開發者開發前端的福音，我們看看他的介紹吧 　　amis doc　　

《深度學習框架PyTorch入門與實踐》示例——AI插畫師：生成對抗網路

執行環境：Anaconda3 + PyCharm + PyTorch + python3 這是《深度學習框架PyTorch入門與實踐》的第七章示例，利用生成對抗網路生成動漫人物頭像。

基於《Python程式設計：從入門到實踐》的學習筆記 Chapter8

技術標籤：Python 第八章 函式 定義函式 def 函式名(形參): """用三引號生成函式的註釋"""

Qt學習筆記Day01：Qt入門

技術標籤：# C++ 目錄 0x00 Qt的組成 0x01 第一個QT程式 0x02 QT中比較重要的類 0x00 Qt的組成

《深度學習框架PyTorch入門與實踐》示例——AI藝術家：神經網路風格遷移

這是我在學習《深度學習框架PyTorch入門與實踐》第九章的筆記。原書實現了Fast Neural Style，實現將輸入圖片轉換為對應圖片風格的型別。

學習筆記：C#入門（四）迴圈練習--用for迴圈寫三角形

技術標籤：C#&unity 遊戲開發自學c# 迴圈練習–用for迴圈寫三角形 嘗試了用巢狀的for迴圈寫三角形。 也是新手入門時最常見的題了。 以前未接觸過此型別的題，做的時候耗費了一段時間。

python程式設計：從入門到實踐 （第一版） 第七章學習筆記

技術標籤：python基礎python 第7章：使用者輸入和while 迴圈 input() prompt = "If you tell us who you are, we can personlize the message you see."

python程式設計：從入門到實踐 （第一版） 第二章學習筆記

技術標籤：python基礎python 第二章:變數和簡單資料型別 使用方法修改字串的大小寫

HTML學習：表格

table標籤是表格標籤<table> 可在table標籤中加入boder設定邊框。 在table標籤下<tr></tr>表示表格行，<td></td>表示表格列。一般格式是tr行標籤中鑲嵌幾個td列標籤

HTML學習：媒體元素、行元素、塊元素

<audio>是音訊元素，通過src填寫資源路徑。但是新增檔案之後沒有視覺化視窗，需寫入concrols才能看見播放視窗。<video>也是相同用法，但video可以設定寬和高。

學習筆記：C#入門（六）繼承&多型：方法重寫override virtual&abstract虛方法和抽象方法

技術標籤：C#&unity 遊戲開發自學c#多型繼承 首先來一段程式碼，看一下繼承的關係

css 圖片換行_前端學習口訣VI：html+css口訣結尾篇，值得收藏！

技術標籤：css 圖片換行 學習是一個永恆的話題，也是每個人一生都應該踐行的主題，它沒有時間、年齡的限制，只要你想開始，那隨時都是最好的時機。

Python爬蟲入門2：HTML知識簡介

技術標籤：Python爬蟲入門pythonhtmlcss爬蟲程式語言 ☞ ░ 前往老猿Python部落格 https://blog.csdn.net/LaoYuanPython ░

HTML入門筆記2：HTML常用標籤

技術標籤：自學筆記html HTML入門筆記2：HTML常用標籤 a標籤的基礎知識 1.作用 跳轉到外部頁面 跳轉到內部錨點 跳轉到郵箱或者電話

Java IO學習筆記八：Netty入門

作者：Grey 原文地址：Java IO學習筆記八：Netty入門 多路複用多執行緒方式還是有點麻煩，Netty幫我們做了封裝，大大簡化了編碼的複雜度，接下來熟悉一下netty的基本使用。