HTML5基礎入門一天學完

時間 2021-03-07

標籤 css html java python 正則表達式瀏覽器安全服務器框架運維欄目 HTML5 简体版

原文原文鏈接

HTML

什麼是HTML

HTML：Hyper Text Markup Language（超文本編輯語言）css
HTML的發展史html

HTML5優點java
- 世界知名瀏覽器廠商對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>

等成對的標籤，分別叫開放標籤和閉合標籤，

單獨呈現的標籤，如python

；意爲/來關閉空元素

網頁的基本信息

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。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。