學習網頁制作并不難，HTML菜鳥教程，從這里開始第一課學習

多朋友想學一下網頁制作，上網一看，只要涉及到網頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內容可以作為學習HTML的菜鳥教程第一課。

HTML是什么？

一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯網上應用最廣泛的語言。

如何查看HTML？

拿最常見的網頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網頁上點右鍵，選擇“查看源”即可查看當前網頁的HTML源碼；如果是其他瀏覽器的話，多數情況下點擊右鍵，選擇“查看源碼”或者類似“查看網頁源代碼”這樣的選項即可查看。

當然也可以通過專業的網頁制作軟件以及各種文本編輯器來查看。

HTML有什么用？

HTML語言可以方便地將網絡上存儲于不同位置的文字、圖片、聲音、視頻等內容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎。

HTML如何入門？

要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內容。一邊學習，一邊查看網頁代碼對照來學，提升入門速度。

HTML案例

下面就是最基本的HTML案例，在這個案例中，用的是HTML5，

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
<title> 描述了網頁的標題
<body> 元素包含了可見的頁面內容，因為下面是最簡單的案例，所以只有幾行，實際網頁一般都有很多行。
<h1> 定義一個大標題
<p> 元素定義一個段落，也就是大家常說的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

如何編輯HTML?

這個就很多了，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統上常見的記事本，總之只要自己覺得方便就好。

總結

以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態來學習，有好的心態，知識方面只要循序漸進，學會就是水到渠成的事情了。

天我就將我珍藏已久的寶貝網站分享給大家，希望大家能在學習編程的道路上越走越遠！

視頻學習篇

1.B站

B站用的好，就像獲得寶

從前，我以為B站只是個看番，追劇，看鬼畜的網站，直到我發現了它上面的學習資料，B站上面真的有好多好多學習的視頻資料，比如

想入門，又不想看文檔，B站絕對是你的第一選擇，推薦關閉彈幕使用，畢竟B站彈幕鬼才太多了

2. 菜鳥教程

實不相瞞，這個教程的名稱還是挺適合我的

菜鳥教程上涵蓋了很多很多的編程的基礎教程，比如：

菜鳥教程上面包括了主流的編程語言和很多的相關技術，假設一下你能夠把它統統學完，不知道可以裝多少逼

3. W3school

一個專注于網站建設的教程網站

如果你想要搭建網站，那么就選它吧，畢竟人家專注Web技術

4. W3cschool

我沒有重復哦，這個網站就是這樣的

上面有很多教程了，不妨在上面進行參考

5. Web開發技術

一個由Mozilla 貢獻者負責的前端開發手冊

5. 中國大學Mooc

慕課上面有很多精品課程，畢竟是很多一流老師教授的，值得一聽

類似的課程網站還有網易公開課 , 網易云課堂，慕課網，我要自學網，簡單教程， Coursera ， TED。

資源獲取篇

1. 鳩摩搜索

想要電子資源，不妨到上面搜一搜，說不定有你想要的電子書

2. 冰點文庫下載器

看到百度文庫上面有自己想要的文件？不妨使用該軟件進行下載，輸入網站地址，然后開始等待吧

文檔閱讀篇

當然很多知識還是閱讀官方文檔好一點，畢竟不是其他的資源能夠跟上文檔的更新步伐

1. Spring

搭建企業級Web網頁，看看這里吧，雖然是英文版，但是界面好看啊

2. Django

想要快速開發網站，試試django吧

3. Flask

當然開發小型網站，你也可以看看Flask

4. Vue

嘗試前后端分離，來來來，看看Vue，現在生態已經很完整了，而且學起來還是挺有趣的

另外推薦幾個相關文檔

Vue CLi 一個基于 Vue.js 進行快速開發的完整系統

Vuex 專為 Vue.js 應用程序開發的狀態管理模式

Vue Router Vue.js官方的路由管理器

想要美化，那就試試相關UI組件

Element 基于 Vue 2.0 的桌面端組件庫

Ant Design of Vue Ant Design 的 Vue 實現，開發和服務于企業級后臺產品

分享交流篇

1. Stackoverflow

什么，你還有問題不會的，趕快到StackOverflow上提交你的問題！

2. CSDN

作為中國最大的技術交流社區，也不會蓋的，在這里，你可以閱讀優秀的博文，當然也可以分享你的技術

2.掘金

一個幫助開發者成長的社區，功能類似于CSDN

3. 簡書

在這里，也有活躍的技術人員，但是似乎它的中心似乎不是技術，而是生活，所以截圖并沒有給出詳細的文章 :)

開源篇

1. Github

世界上最大的開源社區，上面有很多優秀的開源項目，建議食用

2. Gitee

OSCHINA.NET 推出的代碼托管平臺 , 國人自己的開源社區

實用篇

1. Gitbook

如何優美的在線記錄自己的技術文章呢，gitbook是你的不二選擇，支持markdown等語言哦，況且界面這么漂亮美觀

2. Mdnice

每個人都有一個技術夢，萬一你要發公眾號文章呢，不想要浪費時間排版？想要一鍵markdown語言轉化成文章？還想要自定義主題？順便導出個PDF？好了，那么就選擇mdnice吧

3. Postwoman

想要測試后端接口，來試試這個

4. Postman

什么，你說你是man，不想要用woman的東西？好，那用postman吧

5. Ghelper

什么，你說你想要訪問Google，但是沒有VPN，那我就推薦一個不要VPN也可以訪問Google的擴展！

6. SwitchyOmega

你說你有很多的代理，不知道怎么方便的進行設置，并且切換？好，那么SwitchyOmega很適合你哦

7. GitZip for github

什么，你說在github上下載別人項目的時候不想全部下載，只想下載其中的某一部分？那么好吧，試試推薦的這款插件，雙擊需要下載的文件夾或者文件commit信息后的空白處，點擊右下角的箭頭即可輕松下載，包你滿意，不滿意也不支持退款

網頁想進行長截圖，但是不知道怎么辦？試試這款推薦的插件

10. Microsoft To do

想要給自己制定計劃？而且還要好看的軟件，好了，試試這款軟件吧，個人體驗還是挺棒的

11. Terminal

應用商店搜索即可下載

Windows下的終端，Mac用戶可忽略，支持定制

12. Xmind

制作美觀的思維導圖？那你不能沒有它

13. Everything

Windows 自帶的搜索太慢了？讓Everything來做吧

14. ScreenToGif

想要制作一個gif動圖？墻裂推薦這個軟件！！輕便又強大

15. Typora

輕巧美觀的markdown編輯器，而且支持Latex公式！

刷題篇

1. 力扣

想要刷題的童鞋可以到這里刷刷，題目后面還有官方解答和社區的解答哦

2. 牛客網

一看就知道是很多牛人在一起的地方，這里有豐富的面試題，筆試題，要找工作了，快去看看

軟件篇

1. pycharm

想要用python進行大型的項目編程，那么pycharm當然是最好的IDE了，不接受反駁

2. IDEA

如果要使用Java進行編程，那么我還是推薦IDEA

3. Vscode

這么好看好用的軟件，當然要狠狠的推薦一波，支持多種語言, 比如c++，c，python，html，css，js等等等，但需要自己進行配置

4. Visual Studio

如果使用C語言或者C++，這款軟件還是挺棒的，當然你還可以用jet brain的 CLion。

這些是我的一些學習編程的網站分享，想要在大學好好學習編程的小伙伴可以收藏一下~

另外如果你想更好的提升你的編程能力，學好C語言C++編程！彎道超車，快人一步！（因為自學需要很多很多時間和很大的毅力）

分享（源碼、項目實戰視頻、項目筆記，基礎入門教程）

歡迎轉行和學習編程的伙伴，利用更多的資料學習成長比自己琢磨更快哦！

編程電子書

編程學習視頻

文地址：https://dwz.cn/2UR4feq8
作者：yizhiwazi

學習目標

快速掌握Thymeleaf的基本使用（五大基礎語法+常用內置對象）

使用教程

溫馨提示：Thymeleaf 最為顯著的特征是增強屬性，任何屬性都可以通過th:xx 來完成交互，例如th:value最終會覆蓋value屬性。

一、基礎語法

變量表達式 ${}

使用方法：直接使用th:xx = "${}" 獲取對象屬性。例如：

<form id="userForm">
 <input id="id" name="id" th:value="${user.id}"/>
 <input id="username" name="username" th:value="${user.username}"/>
 <input id="password" name="password" th:value="${user.password}"/>
</form>
<div th:text="hello"></div>
<div th:text="${user.username}"></div>

選擇變量表達式 *{}

使用方法：首先通過th:object 獲取對象，然后使用th:xx = "*{}"獲取對象屬性。

這種簡寫風格極為清爽，推薦大家在實際項目中使用。例如：

<form id="userForm" th:object="${user}">
 <input id="id" name="id" th:value="*{id}"/>
 <input id="username" name="username" th:value="*{username}"/>
 <input id="password" name="password" th:value="*{password}"/>
</form>

鏈接表達式 @{}

使用方法：通過鏈接表達式@{}直接拿到應用路徑，然后拼接靜態資源路徑。例如：

<script th:src="@{/webjars/jquery/jquery.js}"></script>
<link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">

片段表達式 ~{}

片段表達式是Thymeleaf的特色之一，細粒度可以達到標簽級別，這是JSP無法做到的。

片段表達式擁有三種語法：

~{ viewName } 表示引入完整頁面
~{ viewName ::selector} 表示在指定頁面尋找片段其中selector可為片段名、jquery選擇器等
~{ ::selector} 表示在當前頁尋找

使用方法：首先通過th:fragment定制片段，然后通過th:replace 填寫片段路徑和片段名。例如：

<!-- /views/common/head.html-->
<head th:fragment="static">
 <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>
<!-- /views/your.html -->
<div th:replace="~{common/head::static}"></div>

在實際使用中，我們往往使用更簡潔的表達，去掉表達式外殼直接填寫片段名。例如：

<!-- your.html -->
<div th:replace="common/head::static"></div>

值得注意的是，使用替換路徑th:replace 開頭請勿添加斜杠，避免部署運行的時候出現路徑報錯。（因為默認拼接的路徑為spring.thymeleaf.prefix = classpath:/templates/）

消息表達式

即通常的國際化屬性：#{msg} 用于獲取國際化語言翻譯值。例如：

 <title th:text="#{user.title}"></title>

其它表達式

在基礎語法中，默認支持字符串連接、數學運算、布爾邏輯和三目運算等。例如：

<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>

二、內置對象

官方文檔：附錄A： Thymeleaf 3.0 基礎對象
官方文檔：附錄B： Thymeleaf 3.0 工具類

七大基礎對象：

${#ctx} 上下文對象，可用于獲取其它內置對象。
${#vars}: 上下文變量。
${#locale}：上下文區域設置。
${#request}: HttpServletRequest對象。
${#response}: HttpServletResponse對象。
${#session}: HttpSession對象。
${#servletContext}: ServletContext對象。

常用的工具類：

#strings：字符串工具類
#lists：List 工具類
#arrays：數組工具類
#sets：Set 工具類
#maps：常用Map方法。
#objects：一般對象類，通常用來判斷非空
#bools：常用的布爾方法。
#execInfo：獲取頁面模板的處理信息。
#messages：在變量表達式中獲取外部消息的方法，與使用＃{...}語法獲取的方法相同。
#uris：轉義部分URL / URI的方法。
#conversions：用于執行已配置的轉換服務的方法。
#dates：時間操作和時間格式化等。
#calendars：用于更復雜時間的格式化。
#numbers：格式化數字對象的方法。
#aggregates：在數組或集合上創建聚合的方法。
#ids：處理可能重復的id屬性的方法。

三、迭代循環

想要遍歷List集合很簡單，配合th:each 即可快速完成迭代。例如遍歷用戶列表：

<div th:each="user:${userList}">
 賬號：<input th:value="${user.username}"/>
 密碼：<input th:value="${user.password}"/>
</div>

在集合的迭代過程還可以獲取狀態變量，只需在變量后面指定狀態變量名即可，狀態變量可用于獲取集合的下標/序號、總數、是否為單數/偶數行、是否為第一個/最后一個。例如：

<div th:each="user,stat:${userList}" th:class="${stat.even}?'even':'odd'">
 下標：<input th:value="${stat.index}"/>
 序號：<input th:value="${stat.count}"/>
 賬號：<input th:value="${user.username}"/>
 密碼：<input th:value="${user.password}"/>
</div>

如果缺省狀態變量名，則迭代器會默認幫我們生成以變量名開頭的狀態變量 xxStat，例如：

<div th:each="user:${userList}" th:class="${userStat.even}?'even':'odd'">
 下標：<input th:value="${userStat.index}"/>
 序號：<input th:value="${userStat.count}"/>
 賬號：<input th:value="${user.username}"/>
 密碼：<input th:value="${user.password}"/>
</div>

四、條件判斷

條件判斷通常用于動態頁面的初始化，例如：

<div th:if="${userList}">
 <div>的確存在..</div>
</div>

如果想取反則使用unless 例如：

<div th:unless="${userList}">
 <div>不存在..</div>
</div>

五、日期格式化

使用默認的日期格式(toString方法) 并不是我們預期的格式：Mon Dec 03 23:16:50 CST 2018

<input type="text" th:value="${user.createTime}"/>

此時可以通過時間工具類#dates來對日期進行格式化：2018-12-03 23:16:50

<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>

六、內聯寫法

（1）為什么要使用內聯寫法？·答：因為 JS無法獲取服務端返回的變量。
（2）如何使用內聯表達式？答：標準格式為：[[${xx}]] ，可以讀取服務端變量，也可以調用內置對象的方法。例如獲取用戶變量和應用路徑：

 <script th:inline="javascript">
 var user = [[${user}]];`
 var APP_PATH = [[${#request.getContextPath()}]];
 var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
 </script>

（3）標簽引入的JS里面能使用內聯表達式嗎？答：不能！內聯表達式僅在頁面生效，因為Thymeleaf只負責解析一級視圖，不能識別外部標簽JS里面的表達式。

七、國際化

需要了解更多關于國際化的精彩描述請前往 SpringBoot 快速實現國際化i18n 。

例如在國際化文件中編寫了user.title這個鍵值，然后使用#{}讀取這個KEY即可獲取翻譯。

 <title th:text="#{user.title}">用戶登陸</title>

八、詳細教程

======== 有了上述基礎后下面正式開始Thymeleaf 的詳細教程 ==============

首先通過Spring Initializr創建項目，如圖所示：

然后在POM文件引入web 、thymeleaf等依賴：

<dependencies>
 <dependency><!--Web相關依賴-->
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency><!--頁面模板依賴-->
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency><!--熱部署依賴-->
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 <scope>runtime</scope>
 </dependency>
 </dependencies>

然后在src/main/resources/application.yml 配置頁面路徑：

spring:
 thymeleaf:
 cache: false #關閉緩存
 prefix: classpath:/views/ #調整頁面路徑

接著在src/main/java/com/hehe/web/UserController 獲取用戶信息:

@RestController
public class UserController {
 private List<User> userList = new ArrayList<>();
 {
 userList.add(new User("1", "socks", "123456", new Date()));
 userList.add(new User("2", "admin", "111111", new Date()));
 userList.add(new User("3", "jacks", "222222", null));
 }
 @GetMapping("/")
 public ModelAndView index() {
 return new ModelAndView("user/user", "userList", userList);
 }
}
public class User {
 private String id;
 private String username;
 private String password;
 private Date createTime;
 //請讀者自行補充 構造器和 get/set方法..
}

開始編寫公共頁面：src/main/resources/views/common/head.html ，其中static為頁面片段：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--聲明static為頁面片段名稱-->
<head th:fragment="static">
 <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
 <script th:src="@{/webjars/jquery/jquery.js}"></script>
</head>
</html>

接著編寫用戶列表頁：src/main/resources/views/user/user.html 配合th:each顯示用戶列表信息。

使用說明：這里 th:replace="common/head::static" 表示將引用${spring.thymeleaf.prefix}/common/head.html的static頁面片段，值得注意的是由于替換路徑默認會拼接前綴路徑，所以開頭切勿在添加斜杠，否則在打包成JAR部署運行時將提示報Templates not found... 。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8"/>
 <title th:text="用戶信息">User</title>
 <!--默認拼接前綴路徑,開頭請勿再添加斜杠,防止部署運行報錯！-->
 <script th:replace="common/head::static"></script>
</head>
<body>
<div th:each="user,userStat:${userList}" th:class="${userStat.even}?'even':'odd'">
 序號：<input type="text" th:value="${userStat.count}"/>
 賬號：<input type="text" th:value="${user.username}"/>
 密碼：<input type="password" th:value="${user.password}"/>
 時間：<input type="text" th:value="${user.createTime}"/>
 時間：<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
</div>
<script th:inline="javascript">
 //通過內聯表達式獲取用戶信息
 var userList = [[${userList}]];
 console.log(userList)
</script>
</body>
</html>

然后編寫單個用戶頁面：

至此大功告成，然后快速啟動項目，如圖所示：

快速啟動項目

然后訪問用戶列表： http://localhost:8080 ，如圖所示：

然后訪問單個用戶： http://localhost:8080/user/1 ，如圖所示：

在線咨詢

上一篇：html常用代碼大全
下一篇：HTML 文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商