前端學習之HTML

HTML基礎

HTML，即超文本標記語言 — Hyper Text Markup Language。

何爲超文本，可以理解爲超出文本的範圍。超文本包括：文字、圖片、音頻、視頻、動畫等。

標記語言：<>

HTML的發展史

1993年：HTML
1995年：HTML2.0
1996年：HTML3.2
1997年：HTML4.0
1999年：HTML4.01
2000年：XHTML1.0
2001年：XHTML1.1
XHTML2.0 由於改動過大，學習成本高，沒被使用。
2013年：HTML5

目前網頁中常用的是HTML5，其提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。

HTML5的優勢：

世界知名瀏覽器廠商對HTML5的支持
微軟
Google
蘋果
Opera
Mozilla
市場的需求
市場需要一個統一的標準
Wed兼容性的問題，修改bug的時間成本高
跨平臺
這是天然的優勢，因爲是B/S開發

W3C標準

W3C：World Wide Web Consortium — 萬維網聯盟。成立於1994年，是Web技術領域最權威和具影響力的國際中立性技術標準機構。

http://www.w3.org/

http://www.chinaw3c.org/

W3C標準包括：

結構化標準語言 — HTML、XML
表現標準語言 — CSS
行爲標準 — DOM(文檔對象模型)、 ECMAScript標準(—> JavaScript)

很多瀏覽器還停留在ES5規範上，但是開發人都使用的是ES6規範

常見的前端開發工具

常見的有：

記事本
Nodepad++
Subline
Dreamweaver
VScode(前端專業)
WebStorm（前端專業）
IDEA
…

使用IDEA創建一個前端項目：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一個HTML</title>
</head>
<body>
我的第一個HTML
</body>
</html>

< body > 、< /body >等成對的標籤，分別叫做開放標籤和閉合標籤。
單獨呈現的標籤(空元素)，如< hr/ >，意爲用 / 來關閉空元素，稱爲自閉合標籤。

HTML的基本結構

HTML 的基本結構：
所有的HTML 標籤都以<>開頭，以</>結尾。
正常的網頁都要放在< body >標籤中。

上圖就是HTML 的基本結構，具體說明：

DOCTYPE文檔類型，默認聲明：表示告訴瀏覽器這個網頁使用什麼規範，默認使用的是HTML
title標籤：網站的小標題名稱
meta標籤，用於描述信息，一般用來做SEO(Search Engine Optimization，搜索引擎優化)。

<!-- 建議規範編碼，統一使用UTF-8-->
<meta charset="UTF-8">
<!-- 網站關鍵字描述 -->
<meta name="keywords" content="java">
<!-- 網站的描述-->
<meta name="description" content="學習java真快樂">

網站的基本標籤

標題標籤

標題標籤用於標題的描述，可以描述六級標題，分別用< h1 >< /h1 >到< h6>< /h6 >來進行描述。

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!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>
</body>
</html>

段落標籤

段落標籤用於描述段落。用 < p >< /p >標籤來表示。

<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落標籤</title>
</head>
<body>
<p>
    CSDN介紹
</p>
<p>
    中國專業IT社區CSDN (Chinese Software Developer Network) 創立於1999年，致力於爲中國軟件開發者提供知識傳播、在線學習、職業發展等全生命週期服務。
</p>
<p>
    旗下擁有：專業的中文IT技術社區： CSDN.NET；移動端開發者專屬APP： CSDN APP、CSDN學院APP；新媒體矩陣微信公衆號：CSDN資訊、程序人生、GitChat、CSDN學院、AI科技大本營、區塊鏈大本營、CSDN雲計算、GitChat精品課、人工智能頭條、CSDN企業招聘；IT技術培訓學習平臺： CSDN學院；技術知識移動社區： GitChat；人工智能新社區： TinyMind；權威IT技術內容平臺：《程序員》+ GitChat；IT人力資源服務：科銳福克斯；IT技術管理者平臺：CTO俱樂部。
</p>
</body>
</html>

雖然我們可以使用換行標籤< br/ >也能達到換行的目的，但是它和段落標籤是有區別的。使用段落標籤得到的每一段之間的間距是比較大的，但是使用 < br/ >標籤得到的間距是比較小的。

換行標籤

<br/>

水平線標籤

<hr/>

字體樣式標籤

<em></em>    斜體
<strong></strong>    加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體樣式標籤</title>
</head>
<body>
<h1>Java</h1>
<p>
    <em>Java是一門面向對象編程語言，不僅吸收了C++語言的各種優點，還摒棄了C++裏難以理解的多繼承、指針等概念，因此Java語言具有功能強大和簡單易用兩個特徵。Java語言作爲靜態面向對象編程語言的代表，極好地實現了面向對象理論，允許程序員以優雅的思維方式進行復雜的編程</em>
</p>
<p>
    <strong>Java具有簡單性、面向對象、分佈式、健壯性、安全性、平臺獨立與可移植性、多線程、動態性等特點。Java可以編寫桌面應用程序、Web應用程序、分佈式系統和嵌入式系統應用程序等</strong>
</p>

</body>
</html>

特殊符號標籤

空格、大於小於號、版權公式等都是特殊符號。

&nbsp;    空格符
&gt;      大於號
&lt;      小於號
&copy;    版權符號
要使用什麼符號，我們可以使用 & ;來找

爲什麼會有空格符，是因爲我們在寫html程序的時候，我們以爲寫兩個以上的空格會在程序運行時也顯示相對應的空格數，但是實際上不論我們寫了幾個空格，只顯示一個空格。此時就需要空格符來幫忙了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符號標籤</title>
</head>
<body>
hello,&nbsp;&nbsp;&nbsp;&nbsp;world!
</body>
</html>

圖像標籤

常見的圖像格式有：.jpg、.png、.jepg、.gif、.bmp
但是 .png會有瀏覽器兼容問題，一般使用 .jpg、.gif多一點。
我們使用圖像標籤 < img >。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片標籤</title>
</head>
<body>
<img src="../statics/images/chang.jpg" alt="圖片" title="風景" width="300" height="300">
</body>
</html>

src：資源圖片，即圖片的路徑
alt：圖片加載失敗時，表示圖片的問題，也即圖片的描述。
title：鼠標放在圖片上的懸浮提示
width：圖片的寬
height：圖片的高

超鏈接

超鏈接：簡單來講，就是指按內容鏈接、指從一個網頁指向一個目標的連接關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
我們可以將超鏈接理解爲：表示從一個地方跳轉到另一個地方。

超鏈接的標籤爲：< a >< /a >，也稱a標籤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超鏈接</title>
</head>
<body>
<!--<a href="https://www.baidu.com/" title="百度" target="_self">百度</a>-->
<a href="https://www.baidu.com/" target="_blank">
    <img src="../statics/images/chang.jpg" width="100" height="100">
</a>
</body>
</html>

href：表示的是要跳轉的地址
target：表示的是目標打開的窗口是在當前頁面打開，還是在新窗口打開。
_self：表示在當前頁面打開
_blank：表示在新窗口打開

錨鏈接

錨鏈接有三種方式：

用於頁面間指定位置跳轉：可以快速定位目錄
可以在同一頁面中跳轉
可以在不同頁面中跳轉

錨點：
在使用錨鏈接時，我們需要設置錨點。

<a name="markerA">A</a>

功能性標籤
郵件鏈接：

藉助第三方平臺

塊元素、行內元素

塊元素：不論多少內容，都是獨佔一行的。如p標籤、標題標籤

行內元素：只能根據內容的長度來擴展。如a標籤、strong、em等

列表、表格、媒體元素

列表

列表的作用是展示結構。列表分爲：

無序列表
有序列表
自定義列表、

無序列表

無序列表可以用來進行導航、側邊欄新聞、在文章中一般會使用它來進行排列。無序列表標籤爲：< ul >< /ul >

<ul>
    <li></li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無序列表</title>
</head>
<body>
<ul>
    <li>數學</li>
    <li>語文</li>
    <li>英語</li>
</ul>

</body>
</html>

有序列表

有序列表一般用於問答試卷、測試，或者需要排序的場景。
有序列表標籤爲：< ol >< /ol >

<ol>
    <li></li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>熱搜1</li>
    <li>熱搜2</li>
    <li>熱搜3</li>
    <li>熱搜4</li>
</ol>
</body>
</html>

自定義列表

自定義列表一般用在網頁的底部，用於標記項。
自定義列表的標籤爲：< dl >< /dl >

<dl>
    <!--標題-->
    <dt></dt>
    <dd></dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義列表</title>
</head>
<body>
<dl>
    <dt>科目</dt>
    <dd>語文</dd>
    <dd>數學</dd>
    <dd>英語</dd>
</dl>
</body>
</html>

表格

表格(table)結構簡單且通用。

表格的基本結構：

表格標籤爲：< table > < /table >，表格的行爲< tr >< /tr >，列爲< td >< /td >

<table>
	<tr>
		<td></td>
	</tr>
</table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <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>
</table>
</body>
</html>

跨行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td rowspan="2">11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
    </tr>
</table>
</body>
</html>

rowspan代表所跨的行數。

跨列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">111</td>
    </tr>
    <tr>
        <td>444</td>
        <td>555</td>
        <td>666</td>
    </tr>
</table>
</body>
</html>

colspan代表所跨的列數。

音頻、視頻

音頻

音頻，audio。
音頻標籤爲 < audio > < /audio >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音頻標籤</title>
</head>
<body>
<audio src="../statics/videos/3a3.m4a" autoplay controls></audio>
</body>
</html>

src：代表音頻的路徑
controls：提供播放按鈕、進度條、下載按鈕、音量按鈕。
autoplay：自動播放

視頻

視頻，video。
視頻標籤爲 < video > < /video >

網頁結構分析

一個網頁主要分爲三部分：

頁面的頭部

<header>
</header>

頁面的主體
頁面的尾部

<footer>
</footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁結構</title>
</head>
<body>
<header>
    這是頭部
</header>

<nav>導航欄</nav>
<aside>側邊欄</aside>
<article>文章主體</article>
<section>獨立區域</section>
<footer>
    這是尾部
</footer>

</body>
</html>

內聯框架

內聯框架：iframe。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內聯框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" target="_self" width="300" height="300"></iframe>
</body>
</html>

表單

常見的網站的登錄、註冊、以及搜索框等，都可以視爲是表單。

基礎表單

表單的標籤是< form >< /form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎表單</title>
</head>
<body>
<form action="test.html" method="post">
    <p>用戶名：<input type="text" name="username"></p>
    <p>密碼：<input type="password" name="password"></p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

action：提交的地址
method：提交的方式。有兩種，一種是get，這種提交方式是會攜帶參數的，參數可以在url中看到，該方式不安全，且有大小限制。另一種方式是post，這種提交方式，參數不可見，該方式是安全的，且大小沒有限制，一般常用該方式提交表單。
input標籤是表示輸入框的。name必須寫上，該標籤有13種類型。

表單元素

所有的表單元素都要寫在form表單中，必須加上name屬性，否則提交的時候會取不到值
表單元素有13種，如下：

文本框

文本框的類型是 text。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單元素</title>
</head>
<body>
<p>用戶名：<input type="text" name="username" value="用戶名" size="20" maxlength="10"></p>
</body>
</html>

value：文本框默認的初始值
size：文本框的長度
maxlength：文本框的最大輸入長度

密碼框

密碼框的類型是password。

<!--密碼框-->
<p>
    密碼：<input type="password" name="password" size="20">
</p>

單選框

單選框的類型是radio。

<p>
    <input type="radio" value="男" name="sex">男
    <input type="radio" value="女" name="sex">女
</p>

value：表單提交的值
name：name的名字相同，那麼會自動分組。單選框必須要分組。所以name必須要有，同時相同
checked：表示默認選中
disabled：表示禁用，即不能選
單選框默認沒有值，需要在 input type=“radio” 後增加單選框的屬性

複選框

複選框的類型是 checkbox。

<!--複選框-->
<p>
    <input type="checkbox" name="fruit" value="apple">蘋果
    <input type="checkbox" name="fruit" value="banana">香蕉
    <input type="checkbox" name="fruit" value="orange">橘子
</p>

name：必填項，如果是分組，則名稱一致
value：表單提交的值
checked：默認選中
disabled：禁用
默認沒有值，需要在 input type=“checkbox” 後增加多選框的屬性

下拉列表框

下拉列表框的標籤是select。

<select>
        <option></option>
</select>

<!--下拉列表框-->
<!--下拉列表框-->
<p>
    <select name="科目">
        <option value="0"></option>
        <option value="1">語文</option>
        <option value="2" selected>數學</option>
        <option value="3">英語</option>
        <option value="4">物理</option>
    </select>
</p>

select：
name：組件名稱，必填項
size：顯示的數目，默認是1
option(選項)：
value：必填項
option標籤中間寫下拉框的值
selected：表示默認選中

按鈕

按鈕分爲三種類型：

特定按鈕

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

普通按鈕

<p>
    <input type="button" value="點擊">
</p>

會和JavaScript集合使用

圖片按鈕
type=“image”

<p>
    <input type="image" src="../statics/images/chang.jpg" width="100" height="50">
</p>

src表示圖片的路徑

文本域

文本域的標籤是textarea。

<textarea></textarea>

<!--文本域-->
<p>
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>

cols：代表列
rows：代表行

文件域

表單有的時候會提交複雜的文件，會用到文件域，文件上傳也會用到。
文件域的類型是 type=“file”

<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

郵箱

郵箱的類型是：type=“email”

<p>
    郵箱：<input type="email" name="email">
</p>

網址

網址的類型是：type=“url”

<!--網址-->
<p>
    url:<input type="url" name="url">
</p>

數字

數字的標籤是：type=“number”

<p>
    <!--數字-->
    <input type="number" min="0" max="10" step="2"> 
</p>

滑塊

滑塊是可調節的，標籤爲 type=“range”

<p>
    <!--滑塊-->
    <input type="range" name="range" min="0" max="100" step="10">
</p>

搜索框

搜索框的類型是：type=“search”

<p>
    <!--搜索框-->
    搜索框：<input type="search" name="search">
</p>

搜索框自帶了關閉按鈕。

表單的應用

表單的應用有以下幾方面：

隱藏域
只讀和禁用
標註
初級表單驗證

隱藏域：
隱藏域的信息是不在網頁上顯示的。

<p>
    <input type="hidden" name="count" value="10">
</p>

只讀和禁用：

<p>
    用戶名：<input type="text" name="username" readonly>
</p>
<p>
    密碼：<input type="password" name="password" disabled>
</p>

標註：
在填寫輸入框的時候，我們只能點擊輸入框來喚醒輸入框，不能通過點擊文字喚醒，但是通過標註我們可以做到通過文字來喚醒。
通過 for = “name” 來鏈接到表單中的指定id。

<p>
    <label for="name">用戶名：</label>
    <input type="text" name="username" id="name">
</p>

初級表單驗證：
進行表單驗證的目的是爲了減輕服務器的壓力。

默認提示：
默認提示時告訴用戶應該這麼做。使用placeholder屬性。

<p>
    用戶名：<input type="text" name="username">
</p>
<p>
    密碼：<input type="password" name="password" size="30" placeholder="密碼爲5-16位數字、字母或下劃線">
</p>

必填：
必填表示必須填寫該字段，使用required屬性。

<p>
    密碼：<input type="password" name="password" required>
</p>

正則表達式

<p>
    手機號碼：<input type="password" name="password" pattern="^1[3578]\d{9}">
</p>