HTML-Thymeleaf 快速入門

本文轉載自查看原文 2020-06-14 15:33 639 其他

一、瀏覽器內核分類

Trident——IE/Edge瀏覽器使用
Gecko——火狐瀏覽器使用
Webkit——safari瀏覽器使用
Chromium/Blink——Chrome瀏覽器使用
Presto——Opera瀏覽器使用（新版Opera已經使用Blink內核）

二、Web標准構成

Web標准是由W3C及其他標准化資質制定的標准集合。包括：結構（Structure）、表現（Presentation）、行為（Behavior）

結構標准：用於對網頁元素進行整理和分類，包括 xml、xhtml 兩部分
樣式標准：用於設置網頁元素的版式、顏色、大小等外觀，主要指 Css
行為標准：網頁模型的定義及交互的編寫。包括 DOM和ECMAScript兩部分

所以，理想狀態下，一個網頁的源碼中需要包含：.html、.css、.js

三、HTML開發工具

Dreamweaver、Sublime、WebStorm、HBuilder、Visual Studio Code

四、html基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1、<!DOCTYPE>

位於文檔的最前面，用於向瀏覽器說明當前.html文件使用的是哪種HTML或者XHTML標准規范。瀏覽器會按照此處指定的規范對html文件進行解析。

HTML5可以向下兼容，所以，現在直接指定為<!DOCTYPE html>即可。

2、charset（字符編碼集）

GB2312：簡體中文字符集，含6763個常用漢字
BIG5：繁體中文，港澳台地區使用
GBK：含全部中文字符，是對GB2312的擴展，支持繁體字
UTF-8：支持中文和英文等，是最常用的字符集

五、HTML標簽

HTML大量使用語義化標簽，所謂語義化就是見名知意，

1、排版標簽

（1）、標題標簽

h 即 head 的簡寫
有
、
、
、
、
、
6種，從左到右字號依次變小。
基本格式<h1></h1>
像這種錯誤的標簽在展示時不起作用

（2）、段落標簽

p 即 paragraph 的簡寫
基本格式<p>段落內容</p>
段落中的文本內容超出瀏覽器寬度之后會執行自動換行

（3）、水平線標簽

hr 即 horizontal 的縮寫
其作用是在頁面中插入一條水平線
基本格式<hr />
這是一個自閉合標簽。（普通標簽成對出現；自閉合標簽不需要包裹內容，自己就執行了開始和結束的操作）

（4）、`容器標簽 <div></div> 和 <span></span>`

div 即 division 的縮寫，分割、區分的意思
span 即 span ，跨度、范圍的意思
這倆本質上是一個容器，類似於 Android 中的ViewGroup
基本格式<div>這是div標簽中的內容</div> <span>這是span標簽中的內容</span>

2、文本格式化標簽

標簽	效果
、	加粗，XHTML推薦使用
、	斜體，XHTML推薦使用
、	刪除線，XHTML推薦使用
、	下划線，XHTML推薦使用

關於 HTML 和 XHTML的區別，可以參考http://www.w3school.com.cn/xhtml/xhtml_html.asp、https://www.zhihu.com/question/19783105

3、標簽的屬性

基本格式：<標簽名屬性1=”屬性值1“ 屬性2=”屬性值2“></標簽名>
標簽可以擁有多個屬性
屬性必須寫在開始標簽中，位於標簽名后面
屬性之間不區分順序
標簽名與屬性、屬性與屬性之間使用空格隔開
任何屬性都有默認值，省略該屬性表示使用默認值

4、圖像標簽

img 即 image 的縮寫
基本格式<img src="圖片URI/URL" />
常用屬性如下：

屬性	屬性值	屬性含義
src	URI/URL	圖像的路徑
alt	文本	圖像無法正常顯示時的提示文本
title	文本	鼠標懸停於圖像時顯示的文本
width	像素（XHTML 不支持按頁面百分比顯示）	圖像的寬度
height	像素（XHTML 不支持按頁面百分比顯示）	圖像的高度
border	數字	設置圖像邊框的寬度

設置圖像的寬高時，如果想等比縮放，則只設置其中一個即可

5、超鏈接標簽

(1)超鏈接標簽

anchor 的縮寫
基本格式
```
<a href="跳轉目標url" target="目標窗口的彈出方式">超鏈接文本或圖像</a>
```
- href 即 HyperText Reference , 指定要跳轉的URL地址
- target , 指定目標窗口的打開方式。取值為 self / blank , self 為默認值，blank 表示新窗口打開

注意：

外鏈需要添加 http:// 或 https:// 前綴

內部鏈接直接鏈接內部頁面名稱即可，如 <a href="index.html">首頁</a>

如果當時沒有確定鏈接目標時，可以為 href 賦值為 “#” ,即 href="#",表示一個空連接

各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以作為超鏈接的載體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超鏈接文本示例</title>
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng簡書</a>
    <br/>
    <a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
    <br/>
    <a href="aTag.html" target="_blank">內部鏈接--再打開一個aTag.html</a>
    <br/>
    <a href="#">空的超鏈接</a>
</body>
</html>

（2）錨點

通過創建錨點，可以快速定位到目標內容區域
創建錨點分為兩步
- 為目標內容（即錨點）創建id 並賦值
- 將超鏈接文本與錨點的id 關聯，<a href="#id名稱"> 超鏈接文本 </a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#createAnchor">點擊跳轉到錨點位置</a>
    <br/>
    通過創建錨點，
    可以快速定位到目標內容區域

    <!--加這一堆br是為了增加頁面高度，不然顯示不出錨點效果-->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>

    <h3 id="createAnchor">創建錨點分為兩步</h3>
    <hr/>
        為目標內容（即錨點）創建id 並賦值
    <br/>
        將超鏈接文本與錨點的id 關聯，&lt;a href="#id名稱"&gt; 超鏈接文本 &lt;/a&gt;
</body>
</html>

6、標簽

標簽可以限定同一頁面內所有超鏈接的打開方式。``
設置之后依舊可以為某個單獨的超鏈接設置打開方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base 標簽</title>

    <!--指定頁面中所有超鏈接的默認打開方式為 blank -->
    <base target="_blank">
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng簡書</a>
    <br/>

    <!--雖然 head 中設置了base,但此處依舊可以單獨指定打開方式為 self,實現重載-->
    <a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>

    <br/>
    <a href="aTag.html">內部鏈接--再打開一個aTag.html</a>
    <br/>
    <a href="#">空的超鏈接</a>

</body>
</html>

、 < br/>、

、都是自閉合標簽

7、轉義字符

8、注釋標簽

格式為 < !-- 注釋內容 -- >

9、路徑

（1）、相對路徑

圖像文件和HTML文件位於同一文件夾中，只需要輸入圖像文件的名稱即可，<img src="logo.gif"/>
圖像文件位於Html文件的下一級文件夾，輸入文件夾名和文件名，二者之間用“/” 隔開，<img src="image/logo.gif"/>
圖像文件位於HTML文件的上一級，在文件名之前加 " ../ ", 上兩級則使用 " ../../ ",依次類推。<img src="../image/logo.gif"/>

(2）、絕對路徑

本地絕對路徑： D:\web\img\logo.gif
網絡絕對路徑：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

10、列表標簽

（1）、無序列表

所謂無序列表就是以小圓點或者小方塊作為行首標志的列表
無序列表的各項之間是並列的，沒有順序級別的區分

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

</body>
</html>

注意：

之間只能嵌套

,不允許嵌套其他標簽

之間相當於一個容器，可以嵌套任意標簽

（2）、有序列表

內部也是嵌套
默認以 1、2、3...作為行首排序標志

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

（3）、自定義列表

為外層標簽、
為內層標簽、
下還可以嵌套
自定義列表項前不具有任何項目符號，既沒有小圓點也沒有1234

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義列表</title>
</head>
<body>
    <dl>
        <dt>自定義列表項1</dt>
            <dd>自定義列表項1 的內容解釋1</dd>
            <dd>自定義列表項1 的內容解釋2</dd>
        <dt>自定義列表項2</dt>
            <dd>自定義列表項2 的內容解釋1</dd>
            <dd>自定義列表項2 的內容解釋2</dd>
    </dl>
</body>
</html>

效果圖如下：

11、表格標簽 table

用來定義表格，
用來定義行，嵌套在
中
用來定義行中的單元格，嵌套在中
中只能嵌套 , 但相當於一個容器，可以嵌套任意元素

表格相關的屬性如下：

屬性名稱	含義	屬性取值
border	表格的邊框。默認 border="0",即無邊框	像素值
cellspacing	單元格與單元格邊框之間的間距。默認 cellspacing="2"	像素值
cellpadding	單元格內容與單元格邊框的間距。默認 cellpadding="1"	像素值
width	表格的寬度	像素值
height	表格的高度	像素值
align	表格在頁面中的水平對齊方式	left 、center 、right
caption	標題	文本
colspan	從當前列向后橫跨幾列, 應用於td、th	數字
rowspan	從當前行向下豎跨幾行, 應用於td、th	數字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

12、表頭標簽

表頭一般位於表格的第一行或者第一列。
表頭標簽為，在顯示的時候默認會顯示為加粗的效果
增加表頭時，使用替代對應位置的即可

下圖即是設置了表頭的表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表頭</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
    <caption>caption標簽是啥？標題？</caption>
    <tr>
        <th>屬性</th>
        <th>含義</th>
        <th colspan="2">取值</th>
    </tr>
    <tr>
        <th>border</th>
        <td>單元格邊框</td>
        <td>像素值，默認0</td>
        <td rowspan="3">rowspan從當前單元格向下跨三行</td>
    </tr>
    <tr>
        <th>cellspacing</th>
        <td>單元格與單元格邊框的間距</td>
        <td>像素值，默認2</td>
    </tr>
    <tr>
        <th>cellpadding</th>
        <td>單元格內容與單元格邊框的間距</td>
        <td>像素值，默認1</td>
    </tr>
</table>
</body>
</html>

13、表格結構(了解)

使用表格時，可以將表格分為頭部、主體、頁腳（頁腳有兼容問題）

用來定義頭部。必須位於
中，一般包含網頁的logo和導航等頭部信息。
用來定義表格的主體，一般包含網頁中除頭部和底部之外的其他內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
    <thead>
    <tr>
        <th>屬性名稱</th>
        <th>含義</th>
        <th>取值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>colspan</td>
        <td>向右橫跨幾列</td>
        <td>數值</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>向下豎跨幾行</td>
        <td>數值</td>
    </tr>

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

14、網頁元素檢查（開發者模式）

基於 chrome 瀏覽器，在頁面中右擊，然后選擇 “檢查”

15、表格標題標簽 caption

標簽用來定義標題的標簽
必須寫在
中，和平級

相關代碼可以參考 表頭標簽 的代碼。

16、單元格合並

適用於、
colspan 跨列合並（水平合並）
rowspan 跨行合並（垂直合並）

相關代碼可以參考 表頭標簽 的代碼。

17、表單標簽

html 中一個完整的表單通常由表單元素、提示信息、表單域（即多個表單的父容器）三部分組成。

（1）、imput 輸入標簽

為單標簽（自閉合標簽）
type 是其基本屬性，用來控制輸入的類型

input 、br、hr 、img、 base 都是單標簽

屬性	取值	含義
type	text	單行文本輸入框（不換行的）
type	password	密碼輸入框
type	radio	單選框（配合name 可以實現單選效果）
type	checkbox	復選框
type	button	普通按鈕
type	submit	提交按鈕
type	reset	重置按鈕
type	image	圖像形式的提交按鈕
type	file	文件域, 點擊之后打開文件選擇器
name	任意文本	控件名稱 , name 相同則表示是同一組數據
value	任意文本	默認文本值
size	正整數	顯示大小
checked	checked	默認是否被選中
maxlength	正整數	控制輸入的最大字符數量

多個 radio 使用相同的 name ，則表示這是一組數據，這樣可以實現單選效果。如果不加 name 多個 radio 可同時被選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input標簽</title>
</head>
<body>
    用戶名：<input type="text" maxlength="15"/>
    <br/>

    <!--次數密碼中間的空格使用了是全角輸入法，全角輸入法中，空格占一個漢字的大小-->
    密　碼：<input type="password"/>
    <br/>

    <!--使用name 限定了一組內容，從而實現單選-->
    性　別：
    <input type="radio" name="sex" checked="checked"/> 男
    <input type="radio" name="sex"/> 女
    <br/>

    愛　好：
    <input type="checkbox" name="hobby"/> 看電影
    <input type="checkbox" name="hobby"/> 讀書
    <br/>

    <input type="button" value="普通按鈕"/>
    <br/>
    <input type="submit" value="提交按鈕"/>
    <br/>
    <input type="reset" value="重置按鈕"/>
    <br/>
    <input type="image" src="../image/imgButton.png"/>
    <br/>

    請選擇文件：<input type="file"/>

</body>
</html>

效果圖如下：

(2)、label 標簽(理解)

label 標簽為 input 標簽定義標注/標簽
用來綁定一個表單元素，當點擊 label 標簽的時候，被綁定的表單元素就會獲取焦點
通過 for 屬性，可以綁定 label 和 input ; 或者直接用lable 標簽將input 包裹起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label的使用</title>
</head>
<body>
    <!--label 中直接包裹 input,可以實現綁定-->
    <label>點擊此處文本，用戶名輸入框會獲取焦點 <br> 用戶名：<input type="text"/></label>
    <br/>

    <hr/>
    <!--使用 label 的 for 屬性綁定input-->
    <label for="#two">點擊此處文本，密碼輸入框會獲取焦點</label>
    <br/>
    用戶名：<input type="text"/>
    <br/>
    密　碼：<input type="text" id="#two"/>
</body>
</html>

(3)、textarea 文本域標簽

用來做大量文本的輸入，支持多行
有 cols 、rows 屬性。cols 限制每行中所輸入的文本字數，rows 限制最大行數。（這兩個屬性通常不被使用，更多使用會使用CSS樣式做相關控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea標簽</title>
</head>
<body>
    請輸入評論內容：
    <br/>
    <textarea ></textarea>
</body>
</html>

效果圖如下：

（4）、下拉菜單

用來定義下拉菜單
用來定義下拉菜單選項
中至少包含一對
在 option 中定義了屬性 selected="selected" 之后，表示該項被默認選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select標簽</title>
</head>
<body>
    設置家鄉
    <select >
        <option>選擇省份</option>
        <option>山東</option>
        <option>內蒙古</option>
        <option>黑龍江</option>
        <option>山西</option>
    </select>
    <select>
        <option>濟南</option>
        <option selected="selected">臨沂</option>
        <option>聊城</option>
        <option>萊蕪</option>
        <option>青島</option>
    </select>
</body>
</html>

效果圖如下：

(5)、表單域

該標簽用來定義表單域，以實現用戶信息的收集和傳遞，form 中的內容通常都會被提交到服務器。

基本語法格式：

 <form action="url地址" method="提交方式" name="表單名稱">
     ...各種表單控件...
 </form>

常用屬性有action、method、name
- action : 指定接收並處理表單信息的服務器url地址
- method : 表單數據的提交方式。分為 post / get
- name : 指定表單名稱，用來區分頁面中的多個表單
每個表單都應該有自己的表單域
使用form 包裹之后點擊提交按鈕才有提交的動作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表單域</title>
</head>
<body>
    <!--使用 form 包裹之后，提交按鈕和圖片按鈕點擊時就有效果了-->
    <form action="https://www.baidu.com" method="post" name="userInfo">
        用戶名：<input type="text" maxlength="15"/>
        <br/>

        <!--次數密碼中間的空格使用了是全角輸入法，全角輸入法中，空格占一個漢字的大小-->
        密　碼：<input type="password"/>
        <br/>

        <!--使用name 限定了一組內容，從而實現單選-->
        性　別：
        <input type="radio" name="sex" checked="checked"/> 男
        <input type="radio" name="sex"/> 女
        <br/>

        愛　好：
        <input type="checkbox" name="hobby"/> 看電影
        <input type="checkbox" name="hobby"/> 讀書
        <br/>

        <input type="button" value="普通按鈕"/>
        <br/>
        <input type="submit" value="提交按鈕"/>
        <br/>
        <input type="reset" value="重置按鈕"/>
        <br/>
        <input type="image" src="../image/imgButton.png"/>
        <br/>

        請選擇文件：<input type="file"/>

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

六、HTML5新標簽及新特性

HTML演變

1、文檔類型設定

即 <!Doctype > 對應的屬性值。

HTML , 對應早期的 HTML4.0.1, 其基本結構如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Document</title>
     </head>
     <body>
     </body>
 </html>

XHTML ，其基本結構如下：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
  </head>
  <body>
  
  </body>
  </html>

HTML5 ，其基本格式如下

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
  
  </body>
  </html>

在webStorm 中，如果想查看上述三種類型的基本格式，可以按如下步驟：new > file > 輸入文件名為 xxx.html > 分別輸入 html:4s / html:xt / html:5 然后回車即可

如果想查看某個頁面使用了兩種 HTML，可以右擊，然后選擇查看網頁源碼 ，然后查看<!Doctype > 中的信息即可

2、字符設定

XHTML、HTML中設置字符集時使用：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5 中設置字符集時使用：
<meta charset="UTF-8">

3、常用新標簽

w3school 中文網站

標簽	作用
header	定義文檔的頁眉
nav	定義導航鏈接部分
footer	定義文檔或者節的頁腳/底部
article	定義文章
section	定義文檔中的節（section/段落）
aside	定義其所處內容之外的內容/側邊
datalist	定義選項列表，與input 配合使用該標簽，兩者通過id關聯
fieldset	可將表單內的相關元素打包/分組, 與legend 搭配使用

(1)、datalist 示例

datalist 中包裹 option
datalist 與 input 關聯后，input 就具備的 select 的效果，同時具有了輸入聯想功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inputlist</title>
</head>
<body>
    <input type="text" value="請輸入姓名" list="names">
    <datalist id="names">
        <option>張三</option>
        <option>李四</option>
        <option>王五</option>
    </datalist>

</body>
</html>

（2）、fieldset 示例

fieldset 默認寬度滿屏

效果圖如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
</head>
<body>
    <fieldset>
        <legend>用戶登錄</legend>
        用戶名:<input type="text"/>
        <br/>
        密　碼:<input type="password"/>
    </fieldset>
</body>
</html>

4、新增的input type屬性值

這些新增的類型，更加細化的限定了輸入內容，如果輸入格式不對，在提交的時候會自動給出相應提示
更多新增type 參考 w3school

類型	示例	含義
email		輸入郵箱格式
tel		輸入手機號
url		輸入url
number		輸入數字
search		搜索框（體現語義化）
range		自由拖動的滑塊
time		輸入小時分鍾
date		輸入年月日
datetime		輸入日期時間
month		輸入月年
week		輸入星期年
color		調出調色板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputType</title>
</head>
<body>
    <form action="http://www.baidu.com">
        email：<input type="email"/>
        <br/>
        tel：<input type="tel"/>
        <br/>
        url：<input type="url"/>
        <br/>
        number：<input type="number"/>
        <br/>
        search：<input type="search"/>
        <br/>
        range：<input type="range"/>
        <br/>
        time：<input type="time"/>
        <br/>
        date：<input type="date"/>
        <br/>
        datetime：<input type="datetime-local"/>
        <br/>
        month：<input type="month"/>
        <br/>
        week：<input type="week"/>
        <br/>
        color：<input type="color"/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

5、新增的input 屬性

屬性	示例	含義
placeholder	`<input type="text" placeholder="請輸入用戶名"/>`	提示文本，參考 android TextView 的 hintText
autofocus	`<input type="text" autofocus>`	自動獲取焦點
multiple	`<input type="file" multiple>`	多文件上傳
autocomplete	`<input type="text">`	自動完成，取值 on、 off。 on表示記錄已經輸入的值供下次自動完成。此外，必須有提交按鈕，必須設置name 屬性，然后該屬性才會生效
required	`<input type="text" required>`	必填項
accesskey	`<input type="text" accesskey="s">`	定義讓控件獲取焦點的快捷鍵，快捷鍵采用`alt + 字母`的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputAttr</title>
</head>
<body>
    <form action="form.html">

        <input type="text" placeholder="請輸入用戶名"/>
        <br/>
        <br/>
        <!--可以簡化為 <input type="text" autofocus/>  -->
        <input type="text" autofocus="autofocus" placeholder="自動獲取焦點"/>
        <br/>
        <br/>
        <input type="file" multiple/>
        <br/>
        <br/>
        <input type="text" autocomplete name="identify" placeholder="下次自動補足輸入內容"/>
        <br/>
        <br/>
        <!--在火狐瀏覽器中，如果沒有輸入內容，點擊輸入框外部區域，邊框會變紅-->
        <input type="text" required placeholder="這是必填項"/>
        <br/>
        <br/>
        <input type="text" accesskey="s" placeholder="獲取焦點的快捷鍵為 alt+s"/>
        <br/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

MAC 中，使用 WebStorm 編輯完上述代碼然后部署到瀏覽器之后，不知道為什么 accesskey 一直不生效！！暫時沒找到原因。

6、綜合案例

效果圖

實現代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>學生檔案</legend>
            <label>姓　　名：<input type="text" placeholder="請輸入學生姓名"/></label> <br/>
            <label>手 機 號：<input type="tel" placeholder="請輸入學生手機號"/></label><br/>
            <label>郵　　箱：<input type="email"/></label><br/>
            <label>所屬學院：<input type="text" list="academy"/></label>
            <datalist id="academy">
                <option >JAVA學院</option>
                <option >前端學院</option>
                <option >PHP學院</option>
            </datalist><br/>
            <label>出生日期：<input type="date"/></label><br/>
            <label>語文成績：<input type="number" max="100" min="0" value="0"/></label><br/>
            <label>數學成績: <meter max="100" min="0" low="59" value="10"></meter></label><br/>
            <label>英語成績: <meter max="100" min="0" low="59" value="90"></meter></label><br/>
            <input type="submit"><br/>
            <input type="reset">

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

7、多媒體標簽

embed : 定義嵌入的內容
audio : 播放音頻
video : 播放視頻

（1）、embed

用來插入各種多媒體，格式可以是 Midi、Wav、 AIFF 、AU 、Mp3等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>embed</title>
</head>
<body>
<embed src="http://player.video.iqiyi.com/44cb2ab93ef163fea5a206e52da7c390/0/0/v_19rqyv6lfo.swf-albumId=1268727400-tvId=1268727400-isPurchase=0-cnId=3"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

上面示例代碼中，embed 節點中的內容是直接從愛奇藝網站下復制的。做法是：找到一個視頻 > 分享 > 點擊向下的箭頭（即更多）> 復制 html 代碼 即可

(2)、audio

html5 通過標簽實現音頻播放
audio 開始和結束標簽之間可以嵌入文本，當瀏覽器不支持該標簽時，該文本可以作為提示語。
audio 在不同瀏覽器中的兼容情況如下：

常用屬性如下：

屬性	含義
src	定義音頻文件的路徑
autoplay	自動播放
controls	顯示默認播放控件
loop	循環播放
preload	頁面初始化時就加載音頻，autoplay會覆蓋該屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!--使用方式1-->
    <audio src="../assets/audio/皇后大道東.mp3" autoplay="autoplay" controls="controls" loop="loop">
        提示語：您的瀏覽器不支持audio標簽
    </audio>

    <br/>

    <!--使用方式2: 通過 source 定義三種音頻格式，從而達到不同瀏覽器上都能播放的情況-->
    <audio loop controls preload="auto">
        <source src="../assets/audio/皇后大道東.mp3">
        <source src="../assets/audio/皇后大道東.ogg">
        <source src="../assets/audio/皇后大道東.wav">
        提示語：您的瀏覽器不支持audio標簽
    </audio>
</body>
</html>

注意，如果歌曲比較大，那么加載的過程會比較長！！！但是，只要設置了 autoplay ，加載完成后必然會自動播放

(3)、video

html5中使用來實現視頻的播放
video 目前支持三種視頻格式：ogg、mp4、webM
video 在各瀏覽器上的兼容情況如下：

常用屬性如下：

屬性	含義
autoplay	自動播放
controls	顯示默認播放控制
loop	循環播放
width	設置播放器寬度
height	設置播放器高度

作者：CnPeng
鏈接：https://www.jianshu.com/p/da18c2fd033a
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

3. Thymeleaf 簡書

4. Thymeleaf CSDN

5. 筆記

HTML 屬性
HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

屬性實例
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 requests-html快速入門 HTML+CSS+JS快速入門筆記 webpack快速入門——處理HTML中的圖片 14 微服務電商【黑馬樂優商城】：day01-springboot（Thymeleaf快速入門） thymeleaf contextPath html javascript thymeleaf 引入外部html Thymeleaf入門到吃灰 JAVA入門[22]—thymeleaf thymeleaf模板引擎入門 jmeter5.0生成html報告快速入門

HTML-Thymeleaf 快速入門

1. HTML 博客園筆記

2. HTML 簡書

在線測試HTML

一、瀏覽器內核分類

二、Web標准構成

三、HTML開發工具

四、html基本骨架

1、<!DOCTYPE>

2、charset（字符編碼集）

五、HTML標簽

1、排版標簽

（1）、標題標簽

、

、

、

、

、

6種，從左到右字號依次變小。

（2）、段落標簽

（3）、水平線標簽

（4）、容器標簽 <div></div> 和 <span></span>

2、文本格式化標簽

3、標簽的屬性

4、圖像標簽

5、超鏈接標簽

(1)超鏈接標簽

（2）錨點

6、 標簽

7、轉義字符

8、注釋標簽

9、路徑

（1）、相對路徑

(2）、絕對路徑

10、列表標簽

（1）、無序列表

（2）、有序列表

（3）、自定義列表

11、表格標簽 table

12、表頭標簽

13、表格結構(了解)

14、網頁元素檢查（開發者模式）

15、表格標題標簽 caption

16、單元格合並

17、表單標簽

（1）、imput 輸入標簽

(2)、label 標簽(理解)

(3)、textarea 文本域標簽

（4）、下拉菜單

(5)、表單域

六、HTML5新標簽及新特性

1、文檔類型設定

2、字符設定

3、常用新標簽

(1)、datalist 示例

（2）、fieldset 示例

4、新增的input type屬性值

5、新增的input 屬性

6、綜合案例

7、多媒體標簽

（1）、embed

(2)、audio

(3)、video

3. Thymeleaf 簡書

4. Thymeleaf CSDN

5. 筆記

免責聲明！

（4）、`容器標簽 <div></div> 和 <span></span>`

6、標簽