前端——HTML

時間  2020-02-18
標籤 前端 html 欄目 HTML 简体版
原文   原文鏈接

　　HTML稱爲超文本標記語言，不屬於編程語言的範疇，HTML使用標記標籤來描述網頁。HTML運行在瀏覽器上，由瀏覽器來解析。網頁運行在瀏覽器上，是數據展現的載體。網頁由瀏覽器、服務器和協議組成。php

  • 服務器：向服務器發送用戶請求指令並接收和解析數據展現給用戶。
  • 服務器：存儲數據，處理並響應請求。
  • 協議：規範數據在傳輸過程當中的打包方式

網頁有兩大優點即時響應和無需安裝和更新。css

  • 即時響應：更新服務端頁面即完成更新，客戶端從新加載即兌現內容。
  • 無需安裝和更新：無需安裝任何應用軟件，只須要一個瀏覽器執行便可。

開發前的準備html

  • 運行環境：瀏覽器，默認選擇chrome瀏覽器，做爲網頁文件的運行環境。
  • 調試工具：瀏覽器自帶的調試工具，使用快捷鍵"F12"或右鍵"檢查"打開。
  • 開發工具：不限，選用我的習慣的便可。（Sublime、VSCode、pycharm、EditPlus、Webstrom等）

語法介紹

　　HTML又稱爲超文本標記語言，超文本標記語言可以讓瀏覽器識別和解析的語言，經過標籤的形式構建頁面結構和填充內容。HTML書寫的網頁文件使用.html或.htm做爲文件後綴。python

代碼基本結構

　　每一個網頁基本的代碼結構，都是由如下代碼結構組成的。經過下面的代碼可知，每一個網頁都是由HTML標籤代碼 + JS代碼 + CSS樣式代碼 組成的。HTML代碼不區分大小寫，建議都小寫。CSS、JS、HTML的註釋語法都不一樣，其實註釋語法不須要特別記憶，只須要ctrl+/ 快捷鍵就能自動註釋(pycharm默認編輯器，點setting>Languages&Frameworks>python Template Languages>HTML>Template Languages>none)。chrome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*網頁CSS樣式代碼*/
    </style>
</head>
<body>
<!--    HTML標籤結構-->

    <script>
        // 網頁事件,JS代碼
    </script>
</body>
</html>

代碼解析：編程

<!DOCTYPE html>：這句話告訴瀏覽器，使用HTML5標準來解析這個網頁canvas

<html>：HTML文檔開始的標誌和文檔結束標記瀏覽器

<head>：網頁的頭部，可在head中設置網頁標題，還能夠引入外部的資源文件
服務器

<title>：包含文檔的標題併發

<body>：網頁的身體，包含可見的頁面內容

<!--註釋-->：註釋

<script>：網頁的事件，包含Java Script代碼

<style>：網頁的樣式，包含css代碼

HTML標籤

HTML標籤也會成爲標記或元素，用於網頁中標記內容，是由< >包圍的關鍵詞成對出現的，標籤名不區分大小寫，推薦小寫表示。標籤對中第一個標籤是開始標籤，第二個標籤是結束標籤。

<標籤>內容</標籤>

標籤分爲行內標籤（inline）和塊標籤（block）

  • 行內元素：每一個行內元素獨佔一行，高和外邊距不可改變；寬度就是他的文字和圖片寬度；內聯元素只能容納文本或者其餘的內聯元素。經常使用的行內元素有：<span>、<a>、<br>、<input>、<img>
  • 塊元素：塊元素老是在新的一行上開始，且多個塊元素能同時在一行；高度、行高以及內外邊距均可以設置；寬度缺省是他的容器的100%，除非設定一個寬度。塊元素能夠容納其餘塊元素和內聯元素，p元素除外，段落標籤只能嵌套行內元素,不能嵌套塊元素。經常使用的塊元素有：<div>、<h1>~<h6>、<form>、<hn>、<ul>、<table>

HTML標籤分爲雙標籤和單標籤

  • 雙標籤：成對出現，包含開始標籤和結束標籤 <html></html>
  • 單標籤：只有開始標籤，沒有結束標籤，能夠手動添加「/」表示閉合，也能夠不加「/」。<br>或者<br/>均可以

標籤的屬性：標籤屬性書寫在開始標籤中，使用空格與標籤名隔開，用於設置當前標籤的顯示內容或者修飾顯示效果。由屬性名和屬性值組成，屬性值使用雙引號表示。

同一個標籤中能夠添加若干組標籤屬性，使用空格間隔。

<img src="imgs/img01.jpg" width="200px" height="200px">

標籤嵌套：在雙標籤中書寫其餘標籤，稱爲標籤嵌套；

標籤元素的嵌套關係：嵌套結構中，外層元素稱爲父元素，內層元素稱爲子元素；多層嵌套結構中，全部外層元素統稱爲祖先元素，內層元素統稱爲後代元素；平級結構互爲兄弟元素

經常使用標籤

<!doctype html>：文檔類型聲明，便於瀏覽器正確解析標籤及渲染樣式

<!doctype html>

<html> </html>：HTML文檔開始的標誌和文檔結束標記

<html> </html>

<head>頭部元素

頭部設置，可在head中設置網頁標題，引入外部的資源文件

 <head>元素中能夠插入 <title>、<script>、<style>、<meta>、<link>、 <noscript>、<base>

<base> </base>：設置網頁的默認URL，所以該網頁的其餘 src 可使用相對路徑。案例。

<head>
　　<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link> </link>：定義了一個文檔和外部資源之間的關係。一般用來連接樣式

<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> </style>：能夠定義文檔樣式文件引用地址；也能夠直接在<style>中添加樣式

<head>
　　<style type="text/css">
　　　　body {background-color:yellow}
　　　　p {color:blue}
　　</style>
</head>

<meta>元素：定義基本的元數據，以供瀏覽器解析。

<meta>標籤有如下做用：

爲搜索引擎定義關鍵詞：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

爲網頁定義描述內容

<meta name="description" content="免費 Web & 編程 教程">

定義網頁做者

<meta name="author" content="Runoob">

每30秒刷新當前頁面

<meta http-equiv="refresh" content="30">

設置網頁字符編碼，若是中文出現亂碼，能夠設置編碼格式爲utf-8，或者gbk。

<meta charset="utf-8">

<script> </script>：定義JavaScript腳本文件，或者寫JS代碼

經過 JavaScript 輸出 "Hello world"：

<head>
    <script>
        document.write("Hello World!")
    </script>
</head>

<title> </title>：設置網頁標題，顯示在網頁選項卡上方

<title>網頁標題</title>

<body>主體元素

</body>網頁主體部分，顯示網頁主要內容

<body>
   網頁主體內容
</body>

接下來連在一塊兒窺探一下網頁的基本結構框架。

<!-- HTML文檔開始的標誌 -->
<html> 
   <!-- 頭部設置，可在head中設置網頁標題，引入外部的資源文件 -->
   <head>
       <!-- 設置網頁標題，顯示在網頁選項卡上方 -->
       <title>網頁標題</title>
       <!-- 設置網頁字符編碼 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 網頁主體部分，顯示網頁主要內容 -->
   <body> 
       網頁主體內容
   </body>
</html><!-- 文檔結束-->

文本標籤

標題標籤

自帶加粗效果，從h1~h6字體大小逐級遞減

 <h1>一級標題</h1>
 <h2>二級標題</h2>
 <h3>三級標題</h3>
 <h4>四級標題</h4>
 <h5>五級標題</h5>
 <h6>六級標題</h6>

段落標籤<p></p>

<p>段落文本</p>

屬性:

  • title="文字"：鼠標移上去顯示的文字
  • style="text-align:center"：文本居中

文本格式化標籤

<b>或<strong>：加粗文本

<i>或<em>：定義斜體文本

<u>或<del>：刪除線

<ins>：下劃線

<big> & <small>：放大字體 & 縮小字體

<sub> & <sup>：下標(塊元素) &  上標(塊元素)

<pre>：定義預格式文本，被包裹的文本 是什麼格式就以什麼格式輸出

<address>：定義地址

<bdo>：定義文字方向，rtl：從右向左，ltr：從左向右

<span>：行分區，用於對特殊文本進行特殊處理

<br>：換行，單標籤

<hr>：水平線，單標籤

　　某些狀況下，瀏覽器會將一些特殊字符按照 HTML 的方式解析，影響顯示結果。此時須要將這類字符轉換爲其餘的形式書寫。

使用 &lt; 在頁面中呈現 "<"
使用 &gt; 在頁面中呈現 ">"
使用 &nbsp; 在頁面中呈現一個空格
使用 &copy; 在頁面中呈現版權符號"©"
使用 &yen; 在頁面中呈現人民幣符號"￥"

區域塊

塊級元素在瀏覽器顯示時，一般會以新行來開始。

塊級容器 <div> </div>

<div>元素沒有特定的含義，因爲它是塊級元素，瀏覽器會在其先後拆行，<div>元素經常使用於文檔佈局結構劃分，結合CSS實現網頁佈局

快捷鍵: div#top

<div id="main">頁面主體區域</div>
<div id="bottom">頁面底部區域</div>

行內容器 <span> </span>

<span>元素沒有特定的含義，因爲它是內聯元素，所以能夠在同一行顯示。

媒體標籤

圖片標籤 <img>

<img src="" alt="">：用於在網頁中插入一張圖片

<img href="#top" src="" width="" height="" title="鼠標停留時顯示" alt="圖片加載失敗">

屬性：

  1. href：錨, 能夠快速定位到錨所對應的位置.
  2. src：用於給出圖片的URL，必填。
  3. alt：用於設置圖片加載失敗後的提示文本
  4. width/height：用於設置圖片尺寸，取像素值，默認按照圖片的原始尺寸顯示。
  5. title：用於設置圖片標題，鼠標懸停在圖片上時顯示

<map name=""></map>：定義圖像地圖，name值要等於<img>的usemap屬性值。

<area></area>：定義圖像地圖中可點擊的區域

屬性

  • coords：規定區域的座標
  • href：規定區域的目標 URL
  • shape：規定區域的形狀。default(默認)、rect(矩形)、circle(圓圈)、poly(鏈接線)

若是規定的區域是矩形：(左上角頂點座標爲(x1,y1)，右下角頂點座標爲(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

若是規定的區域是園：(圓心座標爲(X1,y1)，半徑爲r)

<area shape="circle" coords="x1,y1,r" href=url>

合在一塊兒使用

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

音頻標籤<audio> 

<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
</audio>

<audio> 元素支持的3種文件格式：MP三、Wav、Ogg。

屬性：

  • autoplay：音頻就緒後立馬播放
  • controls：顯示音頻控件（播放/暫停 按鈕）
  • src：規定音頻文件的URL
  • loop：循環播放
  • muted：靜音播放

視頻 <video> 

　　<video> 元素提供了 播放、暫停和音量控件來控制視頻。<video>分別支持MP四、WebM、Ogg格式的音頻。<video> 元素支持多個 <source> 元素，<source> 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式：

<video width="320" height="240" controls>
    <!--瀏覽器將使用第一個可識別的格式-->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <!--提供給不支持 video 元素的瀏覽器顯示的-->
    您的瀏覽器不支持 HTML5 video 標籤。
</video>

圖形標籤 <canvas> </canvas>

　　<canvas>標籤用來定義圖形容器，必須經過腳本(JavaScript)來繪製圖形。

繪製畫布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Canvas 座標

　　繪製正方形fillRect(x1,y1,x2,y2)，使用JavaScript來繪製圖像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas"); //找到 <canvas> 元素對象
    var ctx = c.getContext("2d");   //建立 context 對象
    ctx.fillStyle = "#FF0000";  // ctx對象填充紅色樣式
    ctx.fillRect(0, 0, 150, 75);    //ctx對象填充正方形(x1,y1,x2,y2)
</script>

注意：getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

Canvas 路徑

  • moveTo(x,y) 定義線條開始座標
  • lineTo(x,y) 定義線條結束座標
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas");//找到 <canvas> 元素對象
    var ctx = c.getContext("2d");//建立 context("2d") 對象
    ctx.moveTo(0, 0);       //定義線條開始座標
    ctx.lineTo(200, 100);   //定義線條結束座標
    ctx.stroke();　　　　//使用stroke()方法來繪製線條 </script>

 

Canvas 圓形

arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

 

Canvas 文本

  • font - 定義字體
  • fillText(text,x,y) - 在 canvas 上繪製實心的文本
  • strokeText(text,x,y) - 在 canvas 上繪製空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas - 漸變

漸變能夠填充在矩形, 圓形, 線條, 文本等，各類形狀能夠本身定義不一樣的顏色

  • createLinearGradient(x, y, x1, y1) - 建立線條漸變
  • createRadialGradient(x, y, r, x1, y1, r1) - 建立一個徑向/圓漸變
  • addColorStop()方法指定中止顏色，必須使用兩種或兩種以上中止顏色，參數使用座標來描述，能夠是0至1.
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    // 建立漸變
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    // 填充漸變
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
</script>

Canvas - 圖像

drawImage(image, x, y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

超連接標籤

　　用戶能夠點擊超連接實現跳轉至其餘頁面，默認狀況下，連接將以如下形式出如今瀏覽器中：

  • 一個未訪問過的連接顯示爲藍色字體並帶有下劃線。
  • 訪問過的連接顯示爲紫色並帶有下劃線。
  • 點擊連接時，連接顯示爲紅色並帶有下劃線。
<a href="http://www.taobao.com" target="_self">淘寶</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

屬性：

  1. href：錨，用於設置目標文件的URL，也能夠指向某個id號屬性的元素，必填。
  2. target：用於設置目標文件的打開方式，默認在當前窗口打開。
    • target="_self"：當前窗口打開
    • target="_blank"：新建窗口打開
    • target="_top"：回到網站首頁
    • target="_parent"：回到上一界面

列表標籤

無序列表 ul>li

默認用實心圓點標識列表項

快捷鍵: ul>li*3

<ul>
    <li>列表項 1</li> 
    <li>列表項 2</li>
    <li>列表項 3</li>
</ul>

有序列表 ou>li

默認使使用阿拉伯數字標識每條數據，可使用start屬性設置起始的值，默認爲1

快捷鍵: ol>li*3 
<ol>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

列表嵌套，在已有列表中嵌套添加另外一個列表

<ol>
    <li>
        西遊記
        <ul>
            <li>孫悟空</li>
            <li>豬八戒</li>
            <li>沙和尚</li>
        </ul>
    </li>
</ol>

表格標籤<table>

表格由行和單元格組成，經常使用於直接的數據展現或輔助排版，基本結構以下：

<table></table>：建立表格

屬性：

  • border：規定單元格邊框

<caption>表名</caption>：表名

<tr></tr>：行標籤，建立一行

<td></td>：列標籤，建立一列

3行5列表格快捷鍵    table>tr*3>td*5 
<!-- 建立表格標籤,寬度200個像素,表框1,表格間距0 -->
<table width="200px" border="1" cellspacing="0">
　　<caption>表名</caption>

     <!-- 建立行標籤 -->
    <tr>
        <!-- 行中建立單元格以顯示數據 -->
        <td>姓名</td>
        <td>年齡</td>
        <td>班級</td>
    </tr>
    <tr>
        <td>張三</td>
        <td>20</td>
        <td>一(1)班</td>
    </tr>
</table>

單元格合併

　　用於調整表格結構，分爲跨行合併 和 跨列合併，合併以後須要刪除被合併的單元格，保證表格結構完整。

單元格屬性 做用 取值
colspan 跨列合併單元格 無單位數值
rowspan 跨行合併單元格 無單位數值 
<table border="1">
    <tr>
        <th>姓名</th>
        <td>李小明</td>
    </tr>
    <tr>
        <th rowspan="2">電話</th>
        <td>010-1234567</td>
    </tr>
    <tr>
        <td>13912321213</td>
    </tr>
</table> 

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">電話</th>　　<!--跨越兩列-->
    </tr>
    <tr>
        <td>李小明</td>
        <td>010-1234567</td>
        <td>13912321213</td>
    </tr>
</table>

表單標籤 <form> </form>

　　表單用於收集數據並提交給服務器，由表單元素和表單控件組成。表單元素容許用戶在表單中輸入內容，好比：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

表單標籤 使用<form> </from>來設置

屬性：

  • action：設置數據的提交地址
  • method：設置數據的提交方式，默認爲get方式，能夠設置爲post
  • onsubmit：設置表單數據提交時的觸發事件的執行函數（事件綁定中詳細介紹）
<form action="" method="" onsubmit="">
    <!--此處爲表單控件-->
</form>

輸入元素 input

輸入類型是由類型屬性type定義。文本域的默認寬度是 20 個字符。

屬性

  • type：設置控件類型，若是值爲"password"則表示密碼不可見，若是爲「text」則爲普通文本
    • text：普通文本
    • password：密碼，不可見
    • radio：單選按鈕
    • checkbox：複選按鈕
    • submit / reset：提交和重置
    • button：按鈕
    • color：選擇顏色
    • data：選擇日期
  • name：設置控件名稱，最終與值一併發送給服務器
  • value：設置控件的值
  • placeholder：設置輸入框中的提示文本
  • maxlength：設置輸入框中可輸入的最大字符數
  • checked：設置單選按鈕或複選按鈕的默認選中
  • selected：設置下拉菜單的默認選中
  • readonly：只讀,就是不讓輸入

普通文本 type="text"

<label for="name">姓名：</label>
<input type="text" id="name" readonly placeholder="請輸入用戶名" name="name">

密碼 type="password"

        <div>
            <label for="pass">密碼：</label>
            <input type="password" 
                   id="pass" 
                   placeholder="請輸入密碼"
                   name="pass">
        </div> 

單選按鈕 type="radio"

<input type="radio"  name="sex" value="1"  checked readonly />男
<input type="radio" readonly name="sex" value="2" />女

複選按鈕 type="checkbox"

<input type="checkbox" name="like" />編程
<input type="checkbox" name="like2" checked />遊戲
<input type="checkbox" name="like3" />閱讀

提交和重置 type="submit \ reset"

<input type="submit" value="註冊" />
<input type="reset" disabled value="重置" />

按鈕 type="button"

<input type="button" value="Hello world!">

輸入多行文本內容

<textarea name="demo" id="demo" cols="30" rows="10">
    默認文本
</textarea>

下拉列表

下拉列表select，id要對應label的值

<option>中若是定義了selected屬性，則會默認先選中它。

<select name="xl" id="xl">
    <option value="1">大學</option>
    <option value="2">中學</option>
    <option value="3" selected>小學</option>
</select>

最後融會貫通的運用一下表單元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">姓名：</label>
            <!-- 佔位符 -->
            <input type="text"
                   id="name"
                   readonly
                   placeholder="請輸入用戶名"
                   name="name">
        </div>
        <div>
            <label for="pass">密碼：</label>
            <input type="password"
                   id="pass"
                   placeholder="請輸入密碼"
                   name="pass">
        </div>
        <div>
            <label for="xl">學歷：</label>
            <!-- 下拉列表框元素 使用 option 設置列表項 value 是列表的值-->
            <select name="xl" id="xl">
                <option value="1">大學</option>
                <option value="2">中學</option>
                <option value="3">小學</option>
            </select>
        </div>
        <div>
            <label for="sex">性別：</label>
             <!-- 單選按鈕元素 相互排斥時，將 name 屬性值設置爲同一個-->
             <input type="radio"
                    name="sex"
                    value="1"
                    checked
                    readonly
                    />男
             <input type="radio" readonly name="sex" value="2" />女
        </div>
        <div>
            <label for="like">愛好：</label>
            <input type="checkbox" name="like" />編程
            <input type="checkbox" name="like2" checked />遊戲
            <input type="checkbox" name="like3" />閱讀
        </div>
        <div>
            <label for="demo">簡介：</label>
            <!-- 輸入多行多列文本內容 -->
            <textarea name="demo"
                      id="demo"
                      cols="30"
                      rows="10">
            </textarea>
        </div>
        <div>
            <input type="submit" value="註冊" />
            <input type="reset" disabled value="重置" />
        </div>
    </form>
</body>
</html>
View Code

HTML屬性

　　HTML能夠設置屬性，通常在開始標籤中添加標籤屬性信息，屬性老是以名稱/值對的形式出現，好比：name="value"。

因爲HTML每一個標籤都包含不少屬性，菜鳥教程總結了經常使用標元素的屬性 HTML 標籤參考手冊

在此列出用的最多的幾個屬性：

 屬性  描述
class 爲html元素定義一個或多個類名(classname)（類名從樣式文件引入）
id 定義元素的惟一id
style 規定元素的行內樣式（style）
title 描述了元素的額外信息（做爲工具條使用）

HTML全局屬性

語義元素

　　語義元素可以清楚的描述其意義給瀏覽器和開發者。

　　許多現有網站都包含如下HTML代碼： <div id="nav">，<div class="header">，或者 <div id="footer">，來指明導航連接，頭部，以及尾部。

　　HTML5 提供了新的語義元素來明確一個Web頁面的不一樣部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

<header>元素：描述了文檔的頭部區域，在頁面中可使用多個<header>元素。

<nav>元素：定義頁面導航連接

<article>元素：定義獨立的內容，

<section>元素：定義文檔中的節，好比章節、頁眉、頁腳或文檔的其餘部分。

<aside>元素：定義頁面主區域以外的內容（好比側邊欄）

<footer>元素：描述了文檔的底部區域

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程