HTML初學者入門視頻教程，簡單明了，學html看這一篇就夠了

TML是制作網頁的基礎，我們在網站建設中談論的靜態網頁就是基于HTML的網頁。

早期的網頁直接用HTML代碼編寫，但現在有許多智能網頁制作軟件（常用的如frontpage，dream weaver等）通常不需要手動編寫代碼，而是由這些軟件自動生成。雖然不需要自己寫，但是理解HTML代碼仍然是非常重要的。

了解HTML是什么？它是學習網站建設的重要技術基礎知識

下面我們自己可以動手創建一個非常簡單的網頁，首先我們讓計算機顯示擴展，方法是打開我的電腦，然后現在欄目工具》文件夾選項》查看》高級設置中找到《隱藏已知文件類型的擴展名》將其不勾選，并單擊“應用”以確認設置。然后在桌面上創建一個新的TXT文件，將此文件命名為“xxx.html”（擴展名也可以是htm），這樣你就可以用瀏覽器打開它，你就會看到自己制作的最簡單的頁面。

進一步的簡單理解什么是html？

html是一種超文本標記語言，即html（hypertext markup language），是一種用來描述網絡文檔的標記語言。在頁面的開頭和結尾使用<html></html>標簽。

總結：

1）HTML是我們常說的靜態網頁；

2）HTML是以Html或htm為擴展名的文件；

3）HTML某些標簽代碼規則，讓內容在瀏覽器中呈現出我們所需要的樣式；

4）HTML可以使用記事本創建，并以.html或.htm為擴展名保存。

html文件中的代碼由具有一定的規則規律標簽與內容組成。以指定的HTML結構和內容形成完整的html文件。我們可以直接使用瀏覽器來打開，查看網頁效果。

如果您想在瀏覽器中顯示各式各樣的網頁，我們就需要html文件（HTML基本結構+內容+標簽）和css文件（css樣式）來實現我們需要的漂亮網頁。

HTML基礎學習教程

動力節點老杜講解的html學習教程，非常詳細全面，完全適合小白入門

內容：講解了HTML基礎語法、HTML概述、W3C概述、B/S架構系統原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。

通過html教程的學習之后，不但可以開發基本的網頁，還可以看懂別人編寫的HTML頁面。

HTML完整資料下載：
http://www.bjpowernode.com/?toutiaoweb.chai

HTML課程目錄

1.HTML教程:課程內容概述

2.HTML教程:BS結構介紹

3.HTML教程:軟件環境準備

4.HTML教程:HTML概述

5.HTML教程:我的第一個HTML

6.HTML教程:HTML的基本標簽

7.HTML教程:HTML的實體符號

8.HTML教程:HTML的表格

9.HTML教程:HTML的單元格合并1

10.HTML教程:HTML的單元格合并2

11.HTML教程:thead tbody tfoot

12.HTML教程:背景色和背景圖片

13.HTML教程:HTML圖片img標簽

14.HTML教程:HTML超鏈接

15.HTML教程:超鏈接的作用-request和response的概念

16.HTML教程:HTML列表

17.HTML教程:form表單初步

18.HTML教程:用戶注冊表單的實現

19.HTML教程:下拉列表支持多選

20.HTML教程:form的file控件

21.HTML教程:隱藏域hidden控件

22.HTML教程:隱藏域hidden控件2

23.HTML教程:readonly和disabled

24.HTML教程:控件的maxlength屬性

25.HTML教程:HTML文檔中節點的id屬性

26.HTML教程:div和span在網頁中的應用

家好，今天給大家介紹一款，JavaScript+css實現的響應式登錄注冊頁面web前端html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

響應式設計，適應各種分辨率（圖2）

圖2

登錄界面（圖3）

圖3

注冊界面（圖4）

圖4

源碼完整，需要的朋友可以下載學習（圖5）

圖5

本源碼編碼：10200，需要的朋友，訪問下面鏈接后，搜索10200，即可獲取。

就愛UI - 分享UI設計的點點滴滴

錄

一、寫在前面

二、效果圖

三、實現思路

四、實現代碼

1、login總界面

2、registercheck總代碼

3、logoutcheck總代碼

4、amendcheck總代碼

相關文章

一、寫在前面

哈嘍~大家好，這篇呢我們來看看用 JSP 連接 MySQL 登入注冊項目實踐，這里就可能有人問了，唉？追桑~前些天不是寫了 jsp 登入注冊的項目嗎？怎么這次還在寫呢？哈哈，您別擔心，這次呢，肯定和上次不同，我們先來看看效果吧！

二、效果圖

數據庫界面

感覺是不是不一樣了，哈哈哈，那么接下來我們來看看是怎么實現的。

三、實現思路

首先我們這里很明顯，有四個總頁面分別是 login(登入界面)、logout(注銷界面)、amend(修改界面)、register(注冊界面)，這四個總頁面分別對應著檢查頁面(check)、成功頁面(success)、失敗頁面(fail)。建立之好后，通過 from 的 action 來進行跳轉，我們先來看看 MySQL (數據庫)表名叫 login。

我們這里數據庫共三列，第一列叫 name （用戶名）、pass（密碼）、time（注冊時間），name 與 pass 都是 int（整型）類型的，time 是 varchar （可變長類型），如圖。

四、實現代碼

1、login總界面

首先我們先有個頁面，有基本的用戶名框，密碼框，兩按鈕，一個注冊，一個注銷，通過 from進行跳轉，代碼如下

 <form method="post" action="check.jsp">
        <input type="text" name="user" style="width: 300px;height: 50px" placeholder="請輸入用戶名："
        > <br>
        <input type="password" name="pass" style="width: 300px;height: 50px" placeholder="請輸入密碼：" > <br>
        <button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">登錄</button>
        <button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>
        <br>
        沒有賬號?<a href="register.jsp">點擊注冊</a><br>
        不想用了?<a href="logout.jsp">點擊注銷</a>
    </form>

用 check 連接數據庫(如何連接數據庫，前面文章已經給出了，有興趣的小伙伴可以看看前面寫的文章，也放在前面了) 同樣的道理，還是那五個步驟（這里就不過多的解釋，可以看看上面表格給出的文章），先來看看代碼。

String user = request.getParameter("user"); // getParameter  與 getAttribute  區別
        String pass = request.getParameter("pass");
        // String getParameter(String name):根據參數名稱獲取參數值
        // getAttribute()獲取的是服務器設置的數據。getAttribute() 方法返回指定屬性名的屬性值。
 
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/db1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";
            String user1 = "root";
            String pass1 = "123456";
            Connection connection = DriverManager.getConnection(url,user1,pass1);
            String sql = "select * from login where name=? and pass=?";
 
            PreparedStatement ps = connection.prepareStatement(sql);
            ps.setString(1,user);
            ps.setString(2,pass);
            ResultSet re = ps.executeQuery();
 
            if (re.next()){
                response.sendRedirect("loginsuccess.jsp");
                session.setAttribute("user",user);
            }else {
                response.sendRedirect("loginfail.jsp");
            }
 
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }

這里 response.sendRedirect 跳轉了兩個頁面一個 loginsuccess 和 loginfail 的兩個界面，下面我們來看看，這兩個文件（其實很簡單）

loginsuccess 代碼

 <div class="form">
                <h2> <h22>登錄成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br>    歡迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>

loginfail 代碼：

<h2> <h22>登錄失敗</h22><br>
                </h2>
                <fon>寶~是不是賬號或密碼記錯惹？ <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">點擊修改密碼</a></p1>
                </fon>

這里我們點擊運行看看效果

這里我們用兩個升級大裝備（html）(css) 來美化一下我們的頁面，這里我們頁面美化的，用的是這位大佬的頁面（博主名為鍵盤奏鳴曲），大家可以來看看，點擊鏈接

HTML 代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>

</head>

<body>

</div>

</div>

</div>

點擊這里

</a></p>

注冊

</a></p>

</form>

</div>

</section>

</body>

</html>

CSS 代碼

/*.center{*/
/*    text-align:center;*/
/*    margin-top: 50px;*/
/*}*/
.fon{
    font-size: 40px;
}
/*body{*/
/*    background: url("images/image-2.jpg") no-repeat 0 0;*/
/*    background-size: 100% 100%;*/
/*    text-decoration:none;*/
/*}*/
 
/*input {*/
/*    background-color: transparent;*/
/*    outline: none;*/
/*    color: black;*/
/*}*/
/*.clear{*/
/*    opacity:0.3;*/
/*}*/
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 使用flex布局，讓內容垂直和水平居中 */
 
section {
    /* 相對定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函數用于創建一個表示兩種或多種顏色線性漸變的圖片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
 
/* 背景顏色 */
 
section .color {
    /* 絕對定位 */
    position: absolute;
    /* 使用filter(濾鏡) 屬性，給圖像設置高斯模糊*/
    filter: blur(200px);
}
 
/* :nth-child(n) 選擇器匹配父元素中的第 n 個子元素 */
 
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}
 
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}
 
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
 
.box {
    position: relative;
}
 
/* 背景圓樣式 */
 
.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter屬性為一個元素后面區域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(濾鏡) 屬性，改變顏色。
    hue-rotate(deg)  給圖像應用色相旋轉
    calc() 函數用于動態計算長度值
    var() 函數調用自定義的CSS屬性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 調用動畫animate，需要10s完成動畫，
    linear表示動畫從頭到尾的速度是相同的，
    infinite指定動畫應該循環播放無限次*/
    animation: animate 10s linear infinite;
    /* 動態計算動畫延遲幾秒播放 */
    animation-delay: calc(var(--x) * -1s);
}
 
/* 背景圓動畫 */
 
@keyframes animate {
    0%, 100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}
 
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}
 
.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
 
.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
 
.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}
 
.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}
 
/* 登錄框樣式 */
 
.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
 
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
 
/* 登錄標題樣式 */
 
.form h2 {
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
 
.form h2 h22 {
    top: -40px;
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
 
.form .a1, .form p1 {
    bottom: -90px;
    left: 50px;
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}
 
.form p1 a{
 
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}
 
.form fon {
    top: -30px;
    left: 30px;
    position: relative;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
/* 登錄標題的下劃線樣式 */
 
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
 
.form h2 h22::before {
    content: "";
    position: absolute;
    /*left: 0;*/
    /*bottom: -10px;*/
    /*width: 0px;*/
    /*height: 3px;*/
    /*background: #fff;*/
    /*transition: 0.5s;*/
}
 
.form h2:hover:before {
    width: 53px;
}
 
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
 
/* 輸入框樣式 */
 
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
 
.form .inputBox input::placeholder {
    color: #fff;
}
 
/* 登錄按鈕樣式 */
 
.form .inputBox input[type="submit"],.form .inputBox input[type="reset"]  {
    background: #fff;
    color: #666;
    max-width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}
 
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
 
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

同樣的道理我們來升級一下 loginsuccess 與 loginfail 。

loginsuccess 代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入成功界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入成功界面</p>--%>
<%--    <p class="fon1">恭喜您成功登入，歡迎使用</p>--%>
<%--    <a href="login.jsp">點擊退出,返回登入界面</a>--%>
<%--</div>--%>
 
<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登錄成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br>    歡迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>
        </div>
    </div>
</section>
 
</body>
</html>

loginfail 代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入失敗界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入失敗界面</p>--%>
<%--    <p class="fon1">對不起，您賬號或密碼有誤，請返回登入界面</p>--%>
<%--    <a href="login.jsp">返回登入界面</a><br>--%>
<%--    忘記密碼？<a href="amend.jsp">點擊修改密碼</a>--%>
<%--</div>--%>
 
<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登錄失敗</h22><br>
                </h2>
                <fon>寶~是不是賬號或密碼記錯惹？ <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">點擊修改密碼</a></p1>
                </fon>
                
            </div>
        </div>
    </div>
</section>
 
</body>
</html>

點擊運行，我們來看看效果

那么這里我們是完成了，login總界面的效果，同樣的道理，代碼都差不多，我們直接 cv 大法，這里就給出重點要改的代碼。

2、registercheck總代碼

里面要重點改的代碼，一個是 sql 語句插入，另一個是時間格式轉換。

tring sql = "insert into login(name, pass,time)VALUES(?,?,?)";

SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 時間轉換，要不然就會是國際時間格式

String data = formatter.format(new Date());// 記錄的是當前的時間

ps.setString(3,data);

3、logoutcheck總代碼

里面要重點改的代碼，是 sql 語句刪除。

String sql = "DELETE FROM login WHERE name =? and pass =?";

4、amendcheck總代碼

里面要重點改的代碼，是 sql 語句更新。

String sql = "update login set pass='"+pass+"'";

然后分別是各個總頁面的 success 與 fail 頁面來實現好，這里有一個小細節，我們在作拋出異常，這里可以 out.println 來打印出信息來測試，可以輸出在網頁上，這樣可以方便知道那里有異常。


catch (ClassNotFoundException e) {
            e.printStackTrace();
            out.println("1");
            // response.sendRedirect("registerfail.jsp");
        } catch (SQLException e) {
            e.printStackTrace();
            out.println("2");
            // response.sendRedirect("registerfail.jsp");

好了，點擊運行，完成總效果。

作者：一個名叫追的程序猿

原文出處:https://blog.csdn.net/aasd23/article/details/124458396?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase

在線咨詢

上一篇：web編程教程-jsp入門學習的筆記
下一篇：前端基礎入門（HTML）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML初學者入門視頻教程，簡單明了，學html看這一篇就夠了

進一步的簡單理解什么是html？

HTML基礎學習教程

HTML課程目錄

家好，今天給大家介紹一款，JavaScript+css實現的響應式登錄注冊頁面web前端html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

響應式設計，適應各種分辨率（圖2）

登錄界面（圖3）

注冊界面（圖4）

源碼完整，需要的朋友可以下載學習（圖5）

本源碼編碼：10200，需要的朋友，訪問下面鏈接后，搜索10200，即可獲取。

就愛UI - 分享UI設計的點點滴滴

一、寫在前面

二、效果圖

四、實現代碼

1、login總界面

2、registercheck總代碼

您的項目需求

家好，今天給大家介紹一款，JavaScript+css實現的響應式登錄注冊頁面web前端html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

源碼完整，需要的朋友可以下載學習（圖5）

本源碼編碼：10200，需要的朋友，訪問下面鏈接后，搜索10200，即可獲取。

一、寫在前面

二、效果圖

1、login總界面

2、registercheck總代碼