HTML5學(xué)習(xí)筆記

隨著5G網(wǎng)絡(luò)逐漸普及，手機(jī)已經(jīng)成為了我們的一部分，從前出門要還要想著帶個(gè)什么樣子的包，現(xiàn)在的出門只要記得帶好手機(jī)就足矣！以前手機(jī)要實(shí)現(xiàn)一個(gè)功能就需要安裝相應(yīng)的APP，而現(xiàn)在微信小程序等帶給我們不一樣的體驗(yàn)，我們不再需要安裝各種各樣的APP，很多都可以在微信小程序上完成。微信小程序的開發(fā)門檻雖然低了很多，但我們還是需要掌握一定的基礎(chǔ)知識(shí)，而作為基礎(chǔ)中的基礎(chǔ)，HTML5是我們必須學(xué)習(xí)的。

一、HTML代碼基礎(chǔ)

1、HTML5的語法要求非常寬松，屬性值可以用單引號(hào)、雙引號(hào)包含起來，甚至可以不加引號(hào)。如：

id="wl" id='wl' id=wl 這三個(gè)是一樣的效果。

但需要注意的是如果屬性值中含有空格、單引號(hào)、大于小于號(hào)、反引號(hào)等字符時(shí)，則必須加引號(hào)，而當(dāng)屬性值中含有單引號(hào)時(shí)，可以加雙引號(hào)，而值中有雙引號(hào)時(shí)就可以加單引號(hào)。為了養(yǎng)成一個(gè)好的習(xí)慣，建議好始終給屬性值加雙引號(hào)。

2、內(nèi)容標(biāo)簽是標(biāo)簽中包含一段內(nèi)容，如p和strong這樣的元素；非內(nèi)容標(biāo)簽（空元素）是指標(biāo)簽不包含內(nèi)容，比如換行等，它只有起始標(biāo)簽，不需要結(jié)束標(biāo)簽，以HTML5以前為了強(qiáng)調(diào)結(jié)束，經(jīng)常把非內(nèi)容標(biāo)簽寫成<br />樣子，而在HTML5中規(guī)定，非內(nèi)容標(biāo)簽不需要關(guān)閉。常見的非內(nèi)容標(biāo)簽有：<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。

3、注釋：不論單選還是多行，只需要把注釋放在。

4、HTML頁面根元素，在整個(gè)頁面中html是根元素，在這個(gè)元素中一般有兩個(gè)屬性，一個(gè)是lang，另一個(gè)是manifest。

<html lang="zh-cmn-Hans">：聲明頁面的語言為簡(jiǎn)體中文。（非標(biāo)準(zhǔn)寫法為lang="zh-CN"）；manifest屬性用于設(shè)定頁面緩存，它一旦設(shè)置后，瀏覽器便會(huì)將需要緩存的文件保存在本地，主要適用于不依賴網(wǎng)絡(luò)，且下載后不需要再次更新的HTML5游戲、應(yīng)用等，如果頁面內(nèi)容需要頻繁更新的應(yīng)該少用該屬性，具體用法可以查詢HTML5手冊(cè)，這里不詳細(xì)說明。

5、Head元素包含五個(gè)主要部分，分別是title、link、style、base和meta元素。title元素即網(wǎng)頁的標(biāo)題；link元素定義了文檔與外部資源的關(guān)系，除了CSS外，還有許多的外部資源也通過這一元素引入頁面；style元素用于在頁面中定義樣式；base元素用于標(biāo)記文檔的基礎(chǔ)URL地址，還可被用于設(shè)置全局的瀏覽器打開方式，如：<base target="_blank">設(shè)置頁面中所有的鏈接均在新窗口中打開

;meta元素是head中各類最豐富的一個(gè)元素，雖然它包含了多種多樣的元數(shù)據(jù)，但它被規(guī)定了必須包含name（元數(shù)據(jù)名稱），http-equiv（編譯指令）和charset（字符編碼）三種屬性的其中一種。如不希望頁面被抓取并公開時(shí)，我們可以在頁面中添加名為robots的meta標(biāo)記，如：<meta name="robots" content="none">，反之則所有都被檢索到<meta name="robots" content="all">

。meta元素還能完成諸如刷新、重定向、緩存時(shí)間等功能。

6、HTML5新增了header元素，專門用來表述這樣的頭部區(qū)域，section元素對(duì)應(yīng)不用的內(nèi)容版塊，文章可以用article元素來表示，頁面的側(cè)邊欄可以用aside元素來表示，而且不僅可以放在整個(gè)頁面的代表側(cè)邊欄區(qū)域，還能放入section或article中，來容納一些與版塊和文章相關(guān)的內(nèi)容。

7、footer元素和header元素并非區(qū)塊內(nèi)容，在這兩種元素之內(nèi)不能再嵌套放入類似section之類的元素。

8、不是所有的文字段落都適用p元素，如一段文字為聯(lián)系信息時(shí)，則應(yīng)使用address元素。

9、定義列表的除了有ul和ol外，還有一種更加自定義的形式，它由三種元素的組合而成，分別是dl、dt和dd。

10、內(nèi)容分組元素figure元素，它主要用于展示插圖、圖表、照片、代碼列表等。

11、HTML5加入了一種新的內(nèi)容分組元素，用來指定頁面的主要內(nèi)容，main元素，每一個(gè)頁面中最多只能有一個(gè)main元素，另外還有像水平分隔線的hr,表示源代碼的pre，代表引用的blockquote等都同樣屬于內(nèi)容分組元素。

12、在過去HTML版本中，a還可以當(dāng)成錨點(diǎn)，如<a name="a1"></a>，但在HTML5中把這一特性去掉了，當(dāng)href屬性缺失時(shí)，它被視作一個(gè)占位符，而不會(huì)顯示為一個(gè)超鏈接。

13、span元素是一種常見的文本元素，但如果不對(duì)span設(shè)置樣式，則spqn中的文本和其他的文本看上去不會(huì)有任何差異。

14、在HTML5中有兩種表示強(qiáng)調(diào)的文本元素，分別為em和strong，em元素更多代表語義、語氣的加強(qiáng)，而strong則更加強(qiáng)調(diào)頁面文本的重要性、緊急程度等，瀏覽器中em默認(rèn)的顯示為斜體，而strong則顯示為粗體。

15、big標(biāo)記的文本顯示大于普通的段落文本，而small標(biāo)記的文本則小于普通的段落文本；當(dāng)需要插入某句被引用的話，或者某段文字摘錄時(shí)，可以使用q元素，而當(dāng)需要插入文獻(xiàn)的標(biāo)題、作者、鏈接時(shí)使用cite元素，q元素默認(rèn)在頭和尾加上雙引號(hào)，而cite元素默認(rèn)顯示為斜體。

16、表單在制作時(shí)需要設(shè)置method和action屬性，分別用來指定表單提交數(shù)據(jù)的方式和目的頁面；數(shù)據(jù)提交的方式有兩種，get和post，get是把數(shù)據(jù)放在URL中，以明文的方式發(fā)送給后臺(tái)，它不能傳輸過大的數(shù)據(jù)，也不能傳輸文件類數(shù)據(jù)，而post是把數(shù)據(jù)放在數(shù)據(jù)體內(nèi)再發(fā)給后臺(tái)，數(shù)據(jù)不能直接被看到，可傳輸?shù)臄?shù)據(jù)量較大，所以一般都選擇使用post方式。

17、在文本輸入框可以加入placeholder（占位符）屬性，值為框內(nèi)顯示的文本，也可以為input元素添加required屬性使該表單項(xiàng)必填，也可以添加autofocus屬性使其自動(dòng)獲得焦點(diǎn)，一般設(shè)置第一個(gè)字段。

18、HTML5為input元素增加了很多新的類型，如電話的tel，電子郵件的email，日期的date等。

19、radio表示單選按鈕，同一組的單選按鈕具有相同的name屬性，它的值由value屬性決定，checked屬性表示該按鈕默認(rèn)選中。如：

<p>
<label for="sex">性別：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

還可以使用分區(qū)度更高的fieldset元素，它可以對(duì)表單內(nèi)容的一部分進(jìn)行打包，生成一組相關(guān)的表單字段，它使用legend元素指定標(biāo)題。

checkbox的input元素為復(fù)選框，checked屬性為選中狀態(tài)；select元素生成下拉菜單，元素使用option元素標(biāo)記。

TML5 為前端開發(fā)者帶來了許多表單增強(qiáng)功能，這些功能使得創(chuàng)建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實(shí)際項(xiàng)目中應(yīng)用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數(shù)據(jù)輸入，比如電子郵件、日期等。

例子：電子郵件和網(wǎng)址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網(wǎng)址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨(dú)占一行 */
            margin-bottom: 5px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框?qū)挾?*/
            padding: 8px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個(gè)元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時(shí)的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個(gè)人網(wǎng)站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網(wǎng)址。如果用戶輸入的不符合格式，瀏覽器會(huì)在提交表單前顯示一個(gè)警告。

2. 占位符屬性

placeholder 屬性允許我們?cè)谳斎胱侄沃性O(shè)置一個(gè)提示文本，當(dāng)輸入字段為空時(shí)顯示，一旦開始輸入，提示文本就會(huì)消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨(dú)占一行 */
            margin-bottom: 10px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框?qū)挾龋瑴p去內(nèi)邊距和邊框的寬度 */
            padding: 10px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個(gè)元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內(nèi)邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時(shí)的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請(qǐng)輸入搜索關(guān)鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請(qǐng)輸入搜索關(guān)鍵字" 就是一個(gè)占位符，它會(huì)在用戶輸入之前顯示在搜索框中。

3. 自動(dòng)聚焦屬性

autofocus 屬性可以讓頁面加載時(shí)自動(dòng)將焦點(diǎn)放到某個(gè)表單元素上。

例子：自動(dòng)聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動(dòng)聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，當(dāng)頁面加載完成后，姓名輸入框?qū)⒆詣?dòng)獲得焦點(diǎn)。

4. 表單驗(yàn)證

HTML5 為表單驗(yàn)證提供了內(nèi)置支持，通過簡(jiǎn)單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進(jìn)行基本的驗(yàn)證。

例子：表單驗(yàn)證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗(yàn)證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內(nèi)邊距在內(nèi)的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請(qǐng)輸入5位數(shù)字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，年齡字段要求用戶輸入一個(gè)介于 18 到 99 之間的數(shù)字，而郵編字段要求用戶輸入一個(gè)符合特定模式（5位數(shù)字）的文本。

結(jié)語

HTML5 的表單增強(qiáng)功能大大簡(jiǎn)化了表單處理和驗(yàn)證的工作，使得開發(fā)更加高效，同時(shí)也提高了用戶體驗(yàn)。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創(chuàng)建功能強(qiáng)大且易于使用的表單。隨著技術(shù)的不斷進(jìn)步，我們作為開發(fā)者應(yīng)該不斷學(xué)習(xí)和實(shí)踐，以便更好地利用這些新工具來構(gòu)建更好的網(wǎng)頁。

們經(jīng)常在設(shè)置生日的時(shí)候需要設(shè)置最大不能今天，年齡不能超過60歲等等；其實(shí)可以很簡(jiǎn)單就判斷了；

<script>
	$(function () {		
	
		var date_now = new Date();
		//得到當(dāng)前年份
		var year = date_now.getFullYear();
		//得到當(dāng)前月份
		//注：
		// 1：js中獲取Date中的month時(shí)，會(huì)比當(dāng)前月份少一個(gè)月，所以這里需要先加一
		// 2: 判斷當(dāng)前月份是否小于10，如果小于，那么就在月份的前面加一個(gè) '0' ， 如果大于，就顯示當(dāng)前月份
		var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
		//得到當(dāng)前日子（多少號(hào)）
		var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
		//設(shè)置input標(biāo)簽的max屬性
		$("#birthday").attr("max",year+"-"+month+"-"+date);
		//$("#birthday").attr("min",(year-59)+"-"+month+"-"+date);
		$("#birthday").attr("min",(year-59)+"-01-01");
	});
</script>

下面是HTML 標(biāo)簽

<div class="col-xs-12 col-sm-3">出生年月日<em>*</em> <input type="date" name="birthday" id="birthday" class="form-control" required /></div>

日期輸入類型還有一些其它屬性需要注意。

屬性描述值這是HTML里input元素的通用屬性。就是輸入框里的數(shù)據(jù)。
min日期或時(shí)間的最小值
max日期或時(shí)間的最大值
step步長(zhǎng)。
不同的類型有不同的缺省步長(zhǎng)。Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分鐘
DateTime – 缺省是1分鐘
Local DateTime – 缺省是1分鐘

本地日期時(shí)間(<input type="datetime-local"/>)

日期+時(shí)間(<input type="datetime"/>) 支持不是很好，建議使用datetime-local

時(shí)間(<input type="time"/>)

月份(<input type="month"/>)

周(<input type="week"/>)

日期(<input type="date"/>)

在線咨詢

上一篇：HTML常用基礎(chǔ)標(biāo)簽：圖片與超鏈接標(biāo)簽全解！
下一篇：Js實(shí)現(xiàn)百度搜索框提示功能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商