首頁向大家介紹一下，什麼是工程師

Web前端工程師

負責網頁編寫
Web後端工程師
負責數據庫和查詢邏輯編寫
Web全棧工程師

上述二者和項目控制

博主我，正往着，Python後端和全棧工程師發展，並且Python知識已經完全寫在我的博客分類專欄，相信，很多人都是準備往着這兩個方向進擊，那麼作爲後端工程師，需要掌握前端知識，從今天開始，更新作爲後端工程師需要掌握哪些知識。

這是我做的思維導圖，有需要的小夥伴們，評論下方。

一、Html介紹

HTML： 超文本標記語言，主要作用是用來編寫網站頁面。
超文本：文本是含有完整含義的文字組成的段落或者文件，超文本是在表達形式上超出文字範圍：
    超鏈接，含有跳轉的對象，
    圖片，
    聲音，
    視頻
    
標記：指的的HTML的代碼風格，HTML依賴標籤進行內容的表述：
    標籤：
          <標籤名稱  屬性=”值”>
    單標籤
          <標籤名稱  屬性=”值”>
    雙標籤
          <標籤名稱  屬性=”值”></標籤名稱>

在Pycharm中創建一個html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <h1> hello</h1>
    <h2> hello</h2>
    <h3> hello</h3>
    <h4> hello</h4>
    <h5> hello</h5>
</body>
</html>

點擊運行可以看到如下效果

基於上面的案例要有以下的認識：

html文件的後綴是.html
html的標籤是固定的，單標籤和雙標籤都是固定好的，我們需要做的事在學習完成之後總結。
html的基本結構
向搜索引擎表示該頁面是html語言，並且語言爲英文網站，其"lang"的意思就是“language”，語言的意思，而“en”即表示english頁面如果是中文頁面，可將其改爲<html lang="zh">zh即表示中文

html標籤是HTML文件的最大一個標籤，也被稱爲根標籤
html的標籤通過嵌套來聲明層級
在html標籤內部把整個html分爲了頭部（head標籤）和內容部分（body部分）
頭部負責聲明頁面的屬性，title就是頁面的標題
內容部分負責頁面上的內容

二、常用的HTML標籤

1、h標籤

標題標籤，一共是h1-h6六個等級，再html當中代表標題。

2、文本常用標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <!-- ①html文本常用標籤 -->
    <p>1、使用文本內容去表達</p><!-- 文本標籤 一個p一行 -->
    <p>2、使用文本內容<br>去表達</p> <!-- br標籤用於換行 -->
    <hr><!-- hr標籤換行一條線 -->
    <p>3、使用文本內容&nbsp;&nbsp;&nbsp;去表達</p><!-- &nbsp空格表示 -->
    <p>4、hello&lt;wrold</p><!-- &lt符號< -->
    <p>5、hello&gt;wrold</p><!-- &ge符號> -->
</body>
</html>

3、文本修飾標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <!-- ②html文本修飾標籤 -->
     <i>穩穩c9___html學習筆記</i>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 傾斜，具有語句含有，表強調 -->
    <em>文本修飾標籤</em>&nbsp;&nbsp;&gt;<!-- 僅僅傾斜 -->
    <b>第二階段</b>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 加粗 -->
    <strong>Web學習</strong>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 加粗，表強調 -->
    <u>hello</u>&nbsp;&nbsp;&gt;&nbsp;&nbsp;<!-- 下劃線 -->
    <del>world</del> <!-- 刪除線 -->
</body>
</html>

4、div 盒子標籤

Html佈局歷史：
現在學習的內容是將內容放到頁面上，之後的學習一定要涉及到頁面佈局，就是把今天學習到的標籤如何放到頁面合適的位置，這樣技術就是佈局。
在最初html流行表格佈局類似於現在的簡歷模板，將整個頁面看成一共表格，然後進行表格的合併，最後形成網頁佈局。

後來隨着網絡的發展，表達的形式越來越複雜，表格佈局有寫蒼白，就有了新的佈局方式，盒子佈局，將整個頁面看作一個盒子，在裏面嵌套小盒子，通過描述盒子的位置，邊框，邊距進行佈局。

div 就是盒子模型一個元素，頻繁使用在網頁佈局中
後面會詳細說道

5、img 圖片標籤

Image 圖片，鏡像，html當中的圖片標籤採用的是image的縮寫 img 和上面的標籤相比，我們在圖片標籤就要接觸到標籤的屬性了。
<img>

  src 圖片地址可以使用絕對路徑
            Windows下以盤符開頭 D:\\
            Linux下以根開頭 /usr/root/
  也可以使用相對路徑指的是以當前文件爲參照，其他文件的位置
            ./當前路徑 默認可以不寫
            ../代表上一層
            / 項目的根目錄

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img src="img/3.jpg" title="測試圖片" alt="圖片找不到" wigth="50px"> <!-- 圖片標籤image 單標籤 -->
    </body>
</html>

6、超鏈接標籤 a

我們單純文本表述，就不需要有過多的屬性，比如：span,h,p,br,hr
如果是超文本就需要屬性：圖片需要地址，標題，錯誤提示，高寬
在HTML當中a標籤是超鏈接標籤，a標籤是雙標籤
<a></a> 超鏈接也是超文本，所以a標籤也是需要參數：

href：超鏈接的地址，鏈接到哪裏
target: 代表打開鏈接的方式

src 可以加載外部網頁，也可以是錨點操作

加載外部網頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">點擊我,新打開一個網頁</a>
    <hr>
    <a href="https://www.baidu.com/" target="_self">點擊我，原網頁刷新</a>
</body>
</html>

錨點操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <a href="#1" >跳轉文章底部</a>
    <hr>



    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>
    <p >文本文本文本</p><br>

    <h1 id="1">文章底部</h1>
</body>
</html>

不好貼圖，這裏就是相當於，跳轉目錄一樣

7、列表標籤

1. ol 有序標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <ol>
        <li>Python</li>
        <li>Java</li>
    </ol>
    
    <ol type="A" start="2">
        <li>Python</li>
        <li>Java</li>
    </ol>
</body>
</html>

默認是i羅馬數字可以通過 type指定類型，以及start開始位置

2. ul 無序標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <ul>
        <li>Python</li>
        <li>Java</li>
    </ul>

    <ul type="circle" >
        <li>Python</li>
        <li>Java</li>
    </ul>
</body>
</html>

默認是disc 實心圓點，可以通過type指定

3. dt 自定義標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <dl>
        <dt>目錄</dt>
        <dd>1、Python</dd>
        <dd>1、JAVA</dd>
    </dl>
</body>
</html>

其實就是分級目錄的意思、

自定義列表沒有前面的字符
自定義列表可以按照需求進行縮進
通常會用作導航欄
有序或者無序列表是可以嵌套的

8、表格標籤

1. table 標籤表格

table有一系列的屬性

1、 cellspacing cellspacing 單元格和單元格直接的距離
2、cellpadding cellpadding 單元格和內容的距離
3、width 表格的寬度
4、height 表格的高度，由於數據條數不固定，所以通常不設置高度

這裏提前用到 tr 和 td 標籤，分別表示行，列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

我們可以看到，像表格，但是又不像。這是因爲table屬性的原因

設置table屬性，讓它更像表格，讀者可以自己調節數據，測試一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

發現距離變遠了

其實沒有邊框，那麼這裏先超前使用邊框css樣式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="20" cellpadding="10" width="300px">
        <tr>
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

讀者可以，根據這個源碼去調試感受下 table屬性

2. tr 標籤【行】

tr 全稱 table row 也是就是表格行的意思
當然也有自己的屬性
屬性都是在標籤內部寫的比如 <tr align=" center"> </tr>
表示，裏面的內容都居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

3. td 和 th 標籤【列】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }


    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <tr align="center">
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td align="center">小明</td>
            <td>18</td>
        </tr>
        <tr>
            <th>小紅</th>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

4. 表格結構

其實就是爲了，好閱讀，可以不寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table,tr,td{
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="10" width="200">
        <caption>人員信息調查表</caption>
        <thead>
            <tr align="center">
            <td>姓名</td>
            <td>年齡</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">小明</td>
                <td>18</td>
            </tr>
            <tr>
                <th>小紅</th>
                <td>20</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>時間：2020-1-1 </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

5. 表格合併

現在有這麼個需求

如果你前面有試過table屬性的cellspacing 和cellpadding 你就知道能夠做出一張表格

可以看到，是不是需要合併照片部分的行，或者合併幾個列

先從一個簡單的表格做起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到這是一個表格

如果我們要求合併1-2 和 1-3 兩列
可以遵循從左往右原則，第一個列中設置屬性
colspan = " 2 " 其中2 代表合併兩列，所以 1-3 哪列註釋掉，刪除也行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td colspan="2">1-2</td>
<!--            <td>1-3</td>-->
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到效果出來了

我們還是用原來表格源碼

需求改變，合併第二行 2-2 和第三行 3-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <table  border="1" cellspacing="0" cellpadding="0" width="200">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td rowspan="2">2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
<!--            <td>3-2</td>-->
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

可以看到成功了

9、表單標籤

爲什麼要用表單，什麼是表單？
之前學習的內容都是爲了在html上向用戶展示數據，但是沒有獲取用戶數據的地方，問題是web開發要實現用戶和網站的交互。表單技術就是獲取用戶反饋的一個重要手段。

1. form 表單標籤

提前用到點後面控件知識

使用get方法顯示用戶輸入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
        <!--
        action：提交的地址
        method：提交的方式
            get:參數會拼接到url中，一般不建議將敏感信息放在這裏，不能上傳超過4kb
            post:參數不會拼接到url中，相對get，更安全，文件上傳必須使用post
        enctype：數據類型
            application/x-www-form-urlencoded：非文件上傳，默認值，可以不寫
            multipart/form-data：文件上傳必須這是這個值，同時method設置爲post-->
    <form action="#" method="get" enctype="application/x-www-form-urlencoded">
            <table>
                <tr>
                    <!--
                    input: 輸入控件
                    type=“ text” ：控件類型爲文本
                    name: 控件名稱  鍵
                    placeholder: 用戶提示信息
                    -->
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

可以看到頁面出現了這個東西你品，你細品

這就是我們平時輸入賬戶一樣，隨便輸入

回車後，看url 網址變化

get 是明文顯示的，post跟它相反，這裏不做例子，修改上面源碼即可試試

現在我們可以按F12 或者在設置找到開發者終端

點擊玩最後一個，往下面找找，可以看到我們在控件
<input type="text" name="username" placeholder="請輸入用戶名"> 中name就是我們定義的鍵username 得到用戶輸入的value 值。
組合成字典 { " key" : "value "} 在後期會介紹怎麼獲取前端頁面的值，在後端處理，這就是表單數據交互的基本使用。

2. input 控件

其實這些控件一般都是要配合 form使用的，作爲前後端數據交互，並且設置name，前面已經提及

input 控件相信各位都已經有了大概的概念，在前面已經用到通過 type 指定爲什麼控件

那麼我就通過進展案例來演示，也就是逐步使用上面圖片控件

版本v1.0 密碼控件

password 表名爲面控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    
    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v2.0 單選框

控件屬性說明：
radio 選擇的圓圈
name = " sex" 控件名爲性別
value = " 0 或 1" 就是明確只能有一個，要麼男要麼女
checked 默認選項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v3.0 複選框

`checkbox` 表示多選複選框，比如一個人的愛好有多個，值得注意的是一定要設置其`value` 爲相同，因爲並不是唯一選項不像男女 `value` 要麼0 要麼 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的愛好是什麼？</td>
                </tr>
                <tr>
                    <td>
                        籃球<input type="checkbox" name="lanqiu" value="hobby">
                        網球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v4.0 文件框

file 上傳文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的愛好是什麼？</td>
                </tr>
                <tr>
                    <td>
                        籃球<input type="checkbox" name="lanqiu" value="hobby">
                        網球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        請選擇您要上傳的頭像<input type="file" name="pic">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

因爲沒有，關注佈局，那個密碼那麼飛的老遠了，大家忽略不計。

版本v5.0 隱藏域

hidden 用戶在前端頁面看不到，用來測試的，一般不用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的愛好是什麼？</td>
                </tr>
                <tr>
                    <td>
                        籃球<input type="checkbox" name="lanqiu" value="hobby">
                        網球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        請選擇您要上傳的頭像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本v6.0 提交框重置框

`submit` 用戶註冊好了，用來提交的按鈕 `reset` 重置按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的愛好是什麼？</td>
                </tr>
                <tr>
                    <td>
                        籃球<input type="checkbox" name="lanqiu" value="hobby">
                        網球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        請選擇您要上傳的頭像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="提交">
                        <input type="reset" name="重置">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

版本 v7.0 button按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>

    <form action="#" method="get">
            <table>
                <tr>
                    <td>賬戶</td>
                    <td>
                        <input type="text" name="username" placeholder="請輸入用戶名">
                    </td>
                </tr>
                <tr>
                    <td>密碼</td>
                    <td>
                        <input type="password" name="passowrd" placeholder="請輸入密碼">
                    </td>
                </tr>
                <tr>
                    <td>
                       男 <input type="radio" name="sex" value="0" checked>
                       女 <input type="radio" name="sex" value="1">
                    </td>
                </tr>
                <tr>
                    <td>您的愛好是什麼？</td>
                </tr>
                <tr>
                    <td>
                        籃球<input type="checkbox" name="lanqiu" value="hobby">
                        網球<input type="checkbox" name="wangqiu" value="hobby">
                        足球<input type="checkbox" name="zhuqiu" value="hobby">
                    </td>
                </tr>
                <tr>
                    <td>
                        請選擇您要上傳的頭像<input type="file" name="pic">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="hidden" name="hid">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="提交">
                        <input type="reset" name="重置">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="按鈕一">
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

3. name value

這裏有必要總結下

1、在密碼框中 name = “username” 沒有設置value ，而是用戶輸入的值就是value，以字典形式保存，通過F12查看{“username”：“用戶輸入”}
2、在 radio 單選框中，name=“ sex” , value="1" , value="0" ,分別表示性別單選，只能選一個
checkbox複選框中，name="zhuqiu",name=" wangqiu"，所有value =" hobby"都爲相同，name代表不同名稱，value表示多選
3、在input控件中 button 設置 value =“按鈕一” 則表示控件中間名稱

4. select 控件多選

配合option使用
selected 屬性表示默認選項，回憶下radio 和 checkbox 裏面也有checked默認選項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    <select>
        <option>湖南</option>
        <option selected>廣東</option>
        <option>上海</option>
    </select>
</body>
</html>

可以看到我設置了默認廣東

5. testaera 文本域

經常會遇到表單，讓你有其它意見的話，就填入
textarea 設置文本域
cols 設值列
rows 設置行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>

    </style>
</head>
<body>
    其它意見
    <textarea cols="40" rows="3">

    </textarea>
</body>
</html>

6. 按鈕

按鈕其實在前面已經說過了
主要是 input控件裏面的 submit ，reset ，button 按鈕

7. 控件屬性

這邊略過，控件屬性可以進行這些操作

三、html案例

1、【文本標籤文本修飾標籤錨點】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="text-align: center" id="top">廣州百度百科</h1>
    <h2>簡介</h2>
     廣州，簡稱“穗”，別稱羊城、花城，是廣東省省會、副省級市、國家中心城市、超大城市，國務院批覆確定的中國重要的中心城市、<br>
    國際商貿中心和綜合交通樞紐 [1]。<br>
    截至2018年，全市下轄11個區，總面積7434平方千米，建成區面積1249.11平方千米，常住人口1530.59萬人，城鎮化率86.46%。 [2-3]

    <h2>目錄</h2>
    <a href="#1">1、歷史</a>
    <br><br>
    <a href="#2">2、地理環境</a>

    <h2 id="1">歷史</h2>
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]
    傳說廣州最早的地名爲“楚庭”（或“楚亭”）。越秀山上的中山紀念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。<br>
    不少史籍將“楚庭”視爲廣州的雛型，是廣州最早的稱謂，距今已有2847年。<br>
    傳說有五位仙人，身穿五彩衣，騎着五色羊，拿着一莖六穗的優良稻穀種子，降臨“楚庭”，將稻穗贈給當地人民，並祝福這裏永無饑荒。<br>
    說完後，五位仙人便騰空而去，五隻羊則變成了石頭。當地人民爲紀念五位仙人，修建了一座五仙觀，傳說五仙觀即爲“楚庭”所在。<br>
    由此，廣州又有“羊城”、“穗城”的別名。 [22]

    <h2 id="2">地理位置</h2>
    廣州地處中國南部、廣東省中南部、珠江三角洲中北緣，是西江、北江、東江三江匯合處，瀕臨中國南海，東連博羅、龍門兩縣，西鄰三水、南海和順德 <br>
    北靠清遠市區和佛岡縣及新豐縣，南接東莞市和中山市，隔海與香港、澳門相望，是海上絲綢之路的起點之一，中國的“南大門”， <br>
    是廣佛都市圈、粵港澳都市圈、珠三角都市圈的核心城市。 [33]  <br>
    <br>
    廣州位於東經112度57分至114度3分，北緯22度26分至23度56分。市中心位於北緯23度06分32秒，東經113度15分53秒。 [34]
    <br><br><br><br><br><br>
    <a href="#top">返回文章頂部</a>

</body>
</html>

2、【表單，控件，控件屬性】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="text-align: center">問卷調查</h1>
    <br>
    <p>您好！</p>
    <p>感謝您選擇了本平臺，爲了更好的瞭解您的需求和期盼，爲您提供更加優質的服務，我們誠摯邀請您參加本客戶端滿意程度調查，
        請您就下列問題發表寶貴意見，您的答案對於我們不斷改進各項工作具有非常重要的價值，感謝您的配合！
    </p>
    <form action="#" method="post" >
        <table cellpadding="5">

            <tr><td>1、課程設計是否滿意</td></tr>
            <tr><td><input type="radio" name="question1" value="a1">滿意</td></tr>
            <tr><td><input type="radio" name="question1" value="a2">一般</td></tr>
            <tr><td><input type="radio" name="question1" value="a3">不滿意</td></tr>
            <tr><td><input type="radio" name="question1" value="a4">非常不滿意</td></tr>

            <tr><td>2、講師的授課風格是否滿意</td></tr>
            <tr><td><input type="radio" name="question2" value="b1">滿意</td></tr>
            <tr><td><input type="radio" name="question2" value="b2">一般</td></tr>
            <tr><td><input type="radio" name="question2" value="b3">不滿意</td></tr>
            <tr><td><input type="radio" name="question2" value="b4">非常不滿意</td></tr>

            <tr><td>3、食宿是否滿意</td></tr>
            <tr><td><input type="radio" name="question3" value="c1">滿意</td></tr>
            <tr><td><input type="radio" name="question3" value="c2">一般</td></tr>
            <tr><td><input type="radio" name="question3" value="c3">不滿意</td></tr>
            <tr><td><input type="radio" name="question3" value="c4">非常不滿意</td></tr>

            <tr><td>4、整體感觀是否滿意</td></tr>
            <tr><td><input type="radio" name="question4" value="d1">滿意</td></tr>
            <tr><td><input type="radio" name="question4" value="d2">一般</td></tr>
            <tr><td><input type="radio" name="question4" value="d3">不滿意</td></tr>
            <tr><td><input type="radio" name="question4" value="d4">非常不滿意</td></tr>

            <tr><td>5、對於本客戶端您有什麼好的建議？客戶服務方面我們還需要做哪些改進？</td></tr>
            <tr><td><textarea name="respose" cols="80" rows="10"></textarea></td></tr>

            <tr><td>非常感謝您的支持和配合！我們講不斷努力，爲您提供滿意的服務</td></tr>

            <tr><td>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td></tr>

        </table>
    </form>
</body>
</html>

3、【個人簡歷表格】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格合併</title>
    <style>
        td{
            width: 40px;
        }
    </style>
</head>
<body >
    <div>
    <table border="1" cellspacing="0" cellpadding="0" width="800" >
        <caption>個人簡歷</caption>
        <tr >
            <td>姓名</td>
            <td> </td>
            <td>性別</td>
            <td> </td>
            <td>出生年月</td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td> </td>
            <td>政治面貌</td>
            <td> </td>
            <td>身高</td>
            <td> </td>
        </tr>
        <tr>
            <td>學制</td>
            <td> </td>
            <td>學歷</td>
            <td> </td>
            <td>戶籍</td>
            <td></td>

        </tr>
        <tr>
            <td>專業</td>
            <td> </td>
            <td colspan="2">畢業學校</td>
            <td colspan="2"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">技能、特長或愛好</td>
        </tr>
        <tr>
            <td>外語等級</td>
            <td colspan="2"> </td>
            <td>計算機</td>
            <td colspan="3"></td>
        </tr>
        <tr >
            <td colspan="7" align="center">個人履歷</td>
        </tr>
        <tr>
            <td>時間</td>
            <td colspan="2">單位</td>
            <td colspan="4">經歷</td>
        </tr>
        <tr>
            <td>2002年4月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003年3月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>2003年8月</td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">聯繫方式</td>

        </tr>
        <tr>
            <td>通訊地址</td>
            <td colspan="3"></td>
            <td>聯繫電話</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>email</td>
            <td colspan="3"></td>
            <td>郵編</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">自我評價</td>
        </tr>
        <tr>
            <td colspan="7" height="160"></td>
        </tr>
    </table>
    </div>
</body>
</html>

四、個人淺談

後端工程師，所需要的是要看懂前端的大體內容，這樣你才能進行數據交互設計

網上有需要好多的學習網站，在這裏推薦給大家

菜鳥聯盟
w3cschool

html_後端工程師必備知識-這些你都懂了嗎？

文章目錄