HTML5基礎入門一天學完

YYWantMore發表於2021-03-06
HTML

HTML

什麼是HTML

  • HTML：Hyper Text Markup Language（超文字編輯語言）

  • HTML的發展史

  • HTML5優勢

    • 世界知名瀏覽器廠商對HTML5的支援
    • 市場的需求
    • 跨平臺

W3C標準

  • W3C
    • World Wide Web Consortium
    • 成立於1944年，Web技術領域最權威和最具影響力的世界中立機構。
  • W3C標準包括
    • 結構化標準語言（HTML,XML）
    • 表現標準語言（CSS）
    • 行為標準（DOM,ECMAScriot)

常見IDE

  • Dreamweaver
  • IDEA
  • WebStorm
  • 。。。

HRML基本結構

<html>
    <head>
        <title>標題</title> <!--網頁頭部 -->
    </head>
    <body>
        內容     <!-- 網頁主體-->
    </body>
</html>
等成對的標籤，分別叫開放標籤和閉合標籤，

單獨呈現的標籤，如

；意為/來關閉空元素

網頁的基本資訊

  • DOCTYPE宣告
  • title標籤
  • meta標籤

這裡是一個示例

<!--DOCTYPE:告訴瀏覽器我們要使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!--head標籤表示網頁頭部-->
<head>
<!--    meta描述性標籤，用來描述網站的一些資訊-->
<!--    meta標籤一般用來做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="YY" >
    <meta name="description" content="這是我的第一個網頁">
<!--    網頁標題-->
    <title>標題</title>
</head>
<body>
<!--body標籤代表網頁主體-->
 Hello1，World！

</body>
</html>

結果如圖

網頁的基本標籤

  • 標題標籤
  • 段落標籤
  • 水平線標籤
  • 字型樣式標籤
  • 註釋和特殊符號

標籤的運用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本標籤學習</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<!--段落標籤-->
<!--這裡我們用一段歌詞來演示-->
<p>兩隻老虎愛跳舞</p>

<p>小兔子乖乖拔蘿蔔</p>

<p>我和小鴨子學走路</p>

<p>童年是最美的禮物</p>

<p>小螺號呀嘀嘀地吹</p>

<p>我學海鷗展翅飛</p>

<p>不怕風雨不怕累</p>

<p>快快把本領都學會</p>
<!--水平線標籤-->
<hr/>
<!--換行標籤-->

兩隻老虎愛跳舞 <br/>

小兔子乖乖拔蘿蔔 <br>

我和小鴨子學走路 <br/>

童年是最美的禮物<br/>

小螺號呀嘀嘀地吹<br/>

我學海鷗展翅飛<br/>

不怕風雨不怕累<br/>

快快把本領都學會<br/>
<!--粗體，斜體-->
<h2>字型樣式標籤</h2>
粗體：<strong>study</strong>
斜體：<em>study</em>
<!--特殊符號-->
空     格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大於符號&gt;<br/>

小於&lt<br/>
版權符號&copy;版權所有YY<br/>
<!--還有很多特殊符號用的時候查百度就行，記住最常用的幾個。-->
</body>
</html>

結果如圖：

注意這裡段落標籤和換行標籤的區別，還有值得注意的是換行br和br/使用效果相同，水平線標籤也可以不加/。

字型的修改其實最常用的還是在css中控制，這裡記下這一個就行；對於空格特殊符號，在程式碼中我敲了不止一個空格，但是網頁上只有一個，所以要想新增更多空格，就必須使用&nbsp，其餘的特殊符號使用的時候自行百度。

影像標籤

基本格式

應用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影像標籤</title>
</head>
<body>
<!--img學習
scr: 圖片地址（必填）
     相對地址（推薦），絕對地址
     ../ --返回上一級目錄
     alt: 圖片名字（必填）
-->
<img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300">
</body>
</html>

結果如圖

這裡呢，把滑鼠放在圖片上就會顯示ht，如果圖片載入失敗就會顯示這張圖的名字。

除了以上width，height，還有其他的引數控制圖片，這裡不一一列舉。

連結標籤

  • 文字超連結
  • 影像超連結
  • 錨連結
  • 功能性連結

基本格式：

應用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連結標籤</title>
</head>
<body>
<a name="top">頂部</a> <!-- 錨標記-->
<!--a標籤
href: 必填,表示轉跳到的網站
target:表示視窗在哪裡開啟
       _blank:在新標籤頁中開啟
       不設定target預設在本網頁中開啟
-->
<a href="影像標籤.html" target="_blank">點選檢視頭像</a>
<br>
<a href="http://www.baidu.com" target="_blank">點選跳轉到百度</a>
<br>
<a href="基本標籤學習.html">
    <img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300">
</a>
<hr>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>



<!--錨連結
 1. 需要一個錨標記
 2. 使用#跳轉到標記
 -->
<a href="#top">回到頂部</a> <br>

<!--功能連結
郵件連結 ：mailto:

qq連結
-->
<a href="mailto:123456@qq.com">點選聯絡我</a> <br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我，看小電影！" title="加我，看小電影！"/></a>
</body>
</html>

點選第一個檢視頭像會跳轉到新的標籤頁，點選下面的影像連結因為target為預設自身開啟，所以不會跳轉到新頁面。

對於錨連結使用時，應該設定一個錨標記作為跳轉點，可以在本頁面中跳轉，也可以在其他網頁中設定錨標記然後跳轉到對應位置。

如圖

點選回答頂部就會跳轉到之前在頂部設定好的錨標記點；

對於功能性連結，最基礎的mailto是呼叫計算機本身的郵箱來進行傳送，而QQ聯絡是騰訊弄的一個qq推廣

如圖：

把程式碼複製上去就行了。

行內元素和塊元素

  • 塊元素
    • 無論內容多少，元素獨佔一行
    • （p,h1...h6...）
  • 行內元素
    • 內容撐開寬度，左右都是行元素的可以排在一行
    • (a,strong,em...)

列表

什麼是列表

  • 列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的資訊

  • 列表的分類
    ◆無序列表

    ◆有序列表

    ◆定義列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>運維</li>

</ol>
<!--無序列表-->
<hr/>
<ul>
    <li>java</li>
    <li>python</li>
    <li>運維</li>

</ul>
<!--自定義列表
    dt:標籤
    dt:列表名字
    dd：列表內容
-->
<dl>
    <dt>學科</dt>

    <dd>Java</dd>
    <dd>python</dd>
    <dd>Linux</dd>

    <dt>位置</dt>

    <dd>北極</dd>
    <dd>南極</dd>
    <dd>西湖</dd>


</dl>
</body>
</html>

如圖所示：

表格

  • 為什麼使用表格

    • 簡單通用

    • 結構穩定

  • 基本結構

    • 單元格table
    • 行tr
    • 列td
    • 跨行clospan
    • 跨列rowspan

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格學習</title>
</head>
<body>
<!--表格
行 tr
列 td
-->
<table border="1px"> <!--設定表格邊框粗細為1畫素-->

    <tr>
        <!--colspan跨列-->
        <td colspan="3">1-1</td>

    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>


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

這裡我將第一行的三列跨行合併，第二三列跨列合併。

視訊和音訊

  • 視訊元素
    • video
  • 音訊元素
    • audio

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音訊和視訊</title>
</head>
<body>
<!--音訊和視訊
src:路徑
controls:控制播放，沒有這個就不能播放視訊
autoplay:自動播放
-->
<video src="../video/YOASOBI-怪物%20(TV動畫《動物狂想曲》第二季片頭曲)(高清).mp4" controls autoplay>一部MV</video>
<audio src="../audio/狐小黎%20-%20平淡日子裡的刺%20(cover_%20宋冬野).mp3" controls autoplay>一首歌曲</audio>
</body>
</html>

src:路徑
controls:控制播放，沒有這個就不能播放視訊
autoplay:自動播放（非必選）

記住這三點就行了，注意：如果沒有controls，音訊就是一片空白，什麼也沒有。

頁面結構分析

其中header，footer，nav是比較常用的，這些元素主要是為了後面css等等控制方便服務的。

iframe內聯框架

基礎用法

iframe的使用方法1：網頁裡面巢狀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!--iframe的使用方法1：網頁裡面巢狀-->
<iframe src="https://www.baidu.com" frameborder="0" width="500" height="400"></iframe>

</body>
</html>

iframe的使用方法2：往iframe裡面裝東西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!--iframe的使用方法1：網頁裡面巢狀-->
<iframe src="" frameborder="0" name="name" width="500" height="400"></iframe>
<a href="影像標籤.html" target="name">點選跳轉</a>
</body>
</html>

表單post和get提交

基本使用語法

  • get提交與post提交：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸註冊</title>
</head>
<body>
<!--form
   action：表單提交的的位置，可以是網站，也可以是一個請求處理的地址
   method:提交的方式post和get
          post：相對較為安全，可以傳輸大檔案
          get：可以在url中看到提交資訊，效率高，不安全

-->
<form method="get" action="表格學習.html">
    <p>名字：<input type="txt" name="username"> </p>
    <p>密碼：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

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

get提交可以在url中看到表單資訊

而post相對安全一點

我們post提交時，右鍵審查網頁元素，點選network然後提交表單資訊

可以抓到一條資訊

然後開啟它，點選header，往下拉可以看到傳送的表單資訊

當然，實際生活中post方法還會在這裡進行加密處理，不會那麼容易洩露資訊。

表單元素格式

文字輸入框與單選框

應用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單元素</title>
</head>
<body>
<form action="../表格學習.html" method="get">
    <!--文字輸入框 input type="text"
    value ="YYes" ,預設初始值
    maxlength 最長可輸入的字元數
    size   文字框的長度

-->
    <p>
        <input type="text" name="username" value="YYes" maxlength="8" size="30">
    </p>
    <!--密碼輸入框 input type="password" name="pwd"-->
    <p>
        <input type="password" name="pwd">
    </p>
<!--    單選框-->
    <p>性別：
        <input type="radio" value="boy" naime="sex" >男
        <input type="radio" value="girl" name="sex">女

    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

文字輸入框 input type="text"
value ="YYes" ,預設初始值
maxlength 最長可輸入的字元數
size 文字框的長度

值得注意的是：單選框name要相同才能成為一個組，不然無法實現單選。

按鈕和多選框

<!--    多選框-->
    <p>
        <input type="checkbox" value="sleep" name="hobby">睡覺
        <input type="checkbox" value="study" name="hobby">學習
        <input type="checkbox" value="girl" name="hobby">妹子
        <input type="checkbox" value="game" name="hobby">遊戲
    </p>

多選框提交結果如上圖

下面是按鈕

input type="button"普通按鈕
input type="image"圖片按鈕

input type="submit"提交按鈕

input type="reset" 重置

<!--    按鈕
input type="button"
input type="image"
-->
    <p>按鈕：
        <input type="button" name="bt1" value="點選一夜暴富">
        <input type="image" src="../../imge/頭像.jpg">
    </p>

這裡是圖片按鈕和按鈕

value：設定按鈕上面的文字

注意：點選這個圖片按鈕就會直接提交

下拉框

<p>幸運數字：
        <select name="列表名稱">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </p>

option:下拉框選項

補充：如果在option裡面加上selected，則會改變下拉框預設初始選項

文字域

<!--    文字域-->
    <p>反饋：
        <textarea name="text" cols="30" rows="10"></textarea>

    </p>

檔案域

<!--    檔案域-->
    <p>
        <input type="file" name="files">
    </p>

搜尋框，滑塊，簡單驗證

<!--    搜尋框-->
    <p>
        搜尋 <input type="search" name="search">
    </p>
<!--    滑塊-->
    <p>
        滑塊：<input type="range" name="range" min="0" max="100">
    </p>
<!--    一些簡單驗證-->
    <p>
        郵箱驗證：<input type="email" name="mail"> <br>
        數字驗證： <input type="number" name="num" min="0" max="100" step="2">
    </p>

這裡搜尋沒有什麼特別的，滑塊裡面min和max分別設定滑塊的範圍，郵箱驗證如果提交不符合驗證的機制就會提示錯誤，不過驗證機制只是有無@符號和@符號前後必須有內容，驗證機制比較low，數字驗證後面的step是設定調節數字的，這裡設定為每次+2

表單應用

  • 禁用disabled
  • 隱藏hidden
  • 只讀readonly

分別新增到標籤中可以實現各自效果

補充：增強滑鼠可用性

<label for="id">點選</label>

id跟上面name一樣，是元素裡面的屬性

表單初級驗證

  • 高階驗證需要css，所以....

  • 之所以要驗證，第一是安全性，第二可以減輕伺服器壓力。

  • 常用方式

    • placeholder提示資訊

    • required 非空判斷

       <p>
        <input type="text" name="username"  maxlength="8" size="30" placeholder="使用者名稱" required>
    </p>

    這裡加上placeholder後可以提示這種灰色的字而且不影響輸入，require控制非空

    • pattern 正規表示式：
    <p>
        自定義郵箱：<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

看得出來我們自定義的這個驗證機制比自帶的好用。

正規表示式一般網上搜尋最方便。

總結

html總的來說比較簡單，一天完全可以搞定。把每個練習一遍就夠了，網頁的美化和功能設計僅僅看HTML是不夠的，更重要的是css和jsp。

本篇文章是本人的學習日記，有不足之處希望指出。

相關文章