整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
多朋友想學(xué)一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個(gè)詞語，HTML是HyperText Markup Language的簡稱，想學(xué)習(xí)HTML語言，先得了解一些基本知識，今天這邊內(nèi)容可以作為學(xué)習(xí)HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標(biāo)記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯(lián)網(wǎng)上應(yīng)用最廣泛的語言。
如何查看HTML？
拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點(diǎn)右鍵，選擇“查看源”即可查看當(dāng)前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點(diǎn)擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項(xiàng)即可查看。
當(dāng)然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網(wǎng)絡(luò)上存儲(chǔ)于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對于我們來說，HTML是學(xué)習(xí)網(wǎng)頁制作的基本功，熟練掌握HTML這項(xiàng)基本功，可以為以后的學(xué)習(xí)和工作打下良好的基礎(chǔ)。
HTML如何入門？
要學(xué)習(xí)任何編程語言，都不好好高騖遠(yuǎn)，HTML的入門很簡單，但是也要遵循學(xué)習(xí)的基本步驟，選擇一本入門書籍，循序漸進(jìn)地去學(xué)習(xí)每一張的內(nèi)容。一邊學(xué)習(xí)，一邊查看網(wǎng)頁代碼對照來學(xué)，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個(gè)案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>如何編輯HTML?
這個(gè)就很多了 ，比如最出名的Dreamweaver，當(dāng)然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動(dòng)或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。
總結(jié)
以上是學(xué)習(xí)HTML菜鳥教程的第一課，首先保持一個(gè)良好的心態(tài)來學(xué)習(xí)，有好的心態(tài)，知識方面只要循序漸進(jìn)，學(xué)會(huì)就是水到渠成的事情了 。
天我就將我珍藏已久的寶貝網(wǎng)站分享給大家，希望大家能在學(xué)習(xí)編程的道路上越走越遠(yuǎn)！
1.B站
B站用的好，就像獲得寶
從前，我以為B站只是個(gè)看番，追劇，看鬼畜的網(wǎng)站，直到我發(fā)現(xiàn)了它上面的學(xué)習(xí)資料，B站上面真的有好多好多學(xué)習(xí)的視頻資料，比如
想入門，又不想看文檔，B站絕對是你的第一選擇， 推薦關(guān)閉彈幕使用，畢竟B站彈幕鬼才太多了
2. 菜鳥教程
實(shí)不相瞞，這個(gè)教程的名稱還是挺適合我的
菜鳥教程上涵蓋了很多很多的編程的 基礎(chǔ)教程 ， 比如：
菜鳥教程上面包括了主流的編程語言和很多的相關(guān)技術(shù)， 假設(shè)一下你能夠把它統(tǒng)統(tǒng)學(xué)完， 不知道可以裝多少逼
3. W3school
一個(gè)專注于網(wǎng)站建設(shè)的教程網(wǎng)站
如果你想要搭建網(wǎng)站，那么就選它吧，畢竟人家專注Web技術(shù)
4. W3cschool
我沒有重復(fù)哦，這個(gè)網(wǎng)站就是這樣的
上面有很多教程了，不妨在上面進(jìn)行參考
5. Web開發(fā)技術(shù)
一個(gè) 由Mozilla 貢獻(xiàn)者 負(fù)責(zé)的前端開發(fā)手冊
5. 中國大學(xué)Mooc
慕課上面有很多精品課程，畢竟是很多一流老師教授的，值得一聽
類似的課程網(wǎng)站還有 網(wǎng)易公開課 , 網(wǎng)易云課堂 ， 慕課網(wǎng) ， 我要自學(xué)網(wǎng) ， 簡單教程 ， Coursera ， TED。
1. 鳩摩搜索
想要電子資源，不妨到上面搜一搜，說不定有你想要的電子書
2. 冰點(diǎn)文庫下載器
看到百度文庫上面有自己想要的文件？不妨使用該軟件進(jìn)行下載，輸入網(wǎng)站地址，然后開始等待吧
當(dāng)然很多知識還是閱讀官方文檔好一點(diǎn)，畢竟不是其他的資源能夠跟上文檔的更新步伐
1. Spring
搭建企業(yè)級Web網(wǎng)頁，看看這里吧，雖然是英文版， 但是界面好看啊
2. Django
想要快速開發(fā)網(wǎng)站，試試django吧
3. Flask
當(dāng)然開發(fā)小型網(wǎng)站，你也可以看看Flask
4. Vue
嘗試前后端分離，來來來，看看Vue，現(xiàn)在生態(tài)已經(jīng)很完整了，而且學(xué)起來還是挺有趣的
另外推薦幾個(gè)相關(guān)文檔
Vue CLi 一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)
Vuex 專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
Vue Router Vue.js官方的路由管理器
想要美化，那就試試相關(guān)UI組件
Element 基于 Vue 2.0 的桌面端組件庫
Ant Design of Vue Ant Design 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品
1. Stackoverflow
什么，你還有問題不會(huì)的，趕快到StackOverflow上提交你的問題！
2. CSDN
作為中國最大的技術(shù)交流社區(qū)，也不會(huì)蓋的，在這里，你可以閱讀優(yōu)秀的博文，當(dāng)然也可以分享你的技術(shù)
2.掘金
一個(gè)幫助開發(fā)者成長的社區(qū) ， 功能類似于CSDN
3. 簡書
在這里，也有活躍的技術(shù)人員，但是似乎它的中心似乎不是技術(shù)，而是生活，所以截圖并沒有給出詳細(xì)的文章 :)
1. Github
世界上最大的開源社區(qū)，上面有很多優(yōu)秀的開源項(xiàng)目，建議食用
2. Gitee
OSCHINA.NET 推出的代碼托管平臺 , 國人自己的開源社區(qū)
1. Gitbook
如何優(yōu)美的在線記錄自己的技術(shù)文章呢，gitbook是你的不二選擇，支持markdown等語言哦， 況且界面這么漂亮美觀
2. Mdnice
每個(gè)人都有一個(gè)技術(shù)夢，萬一你要發(fā)公眾號文章呢，不想要浪費(fèi)時(shí)間排版？想要一鍵markdown語言轉(zhuǎn)化成文章？還想要自定義主題？順便導(dǎo)出個(gè)PDF？好了，那么就選擇mdnice吧
3. Postwoman
想要測試后端接口，來試試這個(gè)
4. Postman
什么，你說你是man，不想要用woman的東西？好，那用postman吧
5. Ghelper
什么，你說你想要訪問Google，但是沒有VPN，那我就推薦一個(gè)不要VPN也可以訪問Google的擴(kuò)展！
6. SwitchyOmega
你說你有很多的代理，不知道怎么方便的進(jìn)行設(shè)置，并且切換？ 好，那么SwitchyOmega很適合你哦
7. GitZip for github
什么，你說在github上下載別人項(xiàng)目的時(shí)候不想全部下載，只想下載其中的某一部分？那么好吧，試試推薦的這款插件， 雙擊需要下載的文件夾或者文件commit信息后的空白處，點(diǎn)擊右下角的箭頭即可輕松下載 ，包你滿意， 不滿意也不支持退款
網(wǎng)頁想進(jìn)行長截圖，但是不知道怎么辦？ 試試這款推薦的插件
10. Microsoft To do
想要給自己制定計(jì)劃？而且還要好看的軟件，好了，試試這款軟件吧，個(gè)人體驗(yàn)還是挺棒的
11. Terminal
應(yīng)用商店搜索即可下載
Windows下的終端，Mac用戶可忽略，支持定制
12. Xmind
制作美觀的思維導(dǎo)圖？那你不能沒有它
13. Everything
Windows 自帶的搜索太慢了？讓Everything來做吧
14. ScreenToGif
想要制作一個(gè)gif動(dòng)圖？ 墻裂推薦這個(gè)軟件！！ 輕便又強(qiáng)大
15. Typora
輕巧美觀的markdown編輯器，而且支持Latex公式！
1. 力扣
想要刷題的童鞋可以到這里刷刷，題目后面還有官方解答和社區(qū)的解答哦
2. 牛客網(wǎng)
一看就知道是很多牛人在一起的地方，這里有豐富的面試題，筆試題，要找工作了，快去看看
1. pycharm
想要用python進(jìn)行大型的項(xiàng)目編程，那么pycharm當(dāng)然是最好的IDE了，不接受反駁
2. IDEA
如果要使用Java進(jìn)行編程，那么我還是推薦IDEA
3. Vscode
這么好看好用的軟件，當(dāng)然要狠狠的推薦一波，支持多種語言, 比如c++，c，python，html，css，js等等等，但需要自己進(jìn)行配置
4. Visual Studio
如果使用C語言或者C++，這款軟件還是挺棒的，當(dāng)然你還可以用jet brain的 CLion。
這些是我的一些學(xué)習(xí)編程的網(wǎng)站分享，想要在大學(xué)好好學(xué)習(xí)編程的小伙伴可以收藏一下~
另外如果你想更好的提升你的編程能力，學(xué)好C語言C++編程！彎道超車，快人一步！（因?yàn)樽詫W(xué)需要很多很多時(shí)間和很大的毅力）
分享（源碼、項(xiàng)目實(shí)戰(zhàn)視頻、項(xiàng)目筆記，基礎(chǔ)入門教程）
歡迎轉(zhuǎn)行和學(xué)習(xí)編程的伙伴，利用更多的資料學(xué)習(xí)成長比自己琢磨更快哦！
編程電子書
編程學(xué)習(xí)視頻
文地址：https://dwz.cn/2UR4feq8
作者：yizhiwazi
溫馨提示：Thymeleaf 最為顯著的特征是增強(qiáng)屬性，任何屬性都可以通過th:xx 來完成交互，例如th:value最終會(huì)覆蓋value屬性。
一、基礎(chǔ)語法
變量表達(dá)式 ${}
使用方法：直接使用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>
選擇變量表達(dá)式 *{}
使用方法：首先通過th:object 獲取對象，然后使用th:xx = "*{}"獲取對象屬性。
這種簡寫風(fēng)格極為清爽，推薦大家在實(shí)際項(xiàng)目中使用。 例如：
<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>
鏈接表達(dá)式 @{}
使用方法：通過鏈接表達(dá)式@{}直接拿到應(yīng)用路徑，然后拼接靜態(tài)資源路徑。例如：
<script th:src="@{/webjars/jquery/jquery.js}"></script>
<link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
片段表達(dá)式 ~{}
片段表達(dá)式是Thymeleaf的特色之一，細(xì)粒度可以達(dá)到標(biāo)簽級別，這是JSP無法做到的。
片段表達(dá)式擁有三種語法：
使用方法：首先通過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>
在實(shí)際使用中，我們往往使用更簡潔的表達(dá)，去掉表達(dá)式外殼直接填寫片段名。例如：
<!-- your.html --> <div th:replace="common/head::static"></div>
值得注意的是，使用替換路徑th:replace 開頭請勿添加斜杠，避免部署運(yùn)行的時(shí)候出現(xiàn)路徑報(bào)錯(cuò)。（因?yàn)槟J(rèn)拼接的路徑為spring.thymeleaf.prefix = classpath:/templates/）
消息表達(dá)式
即通常的國際化屬性：#{msg} 用于獲取國際化語言翻譯值。例如：
<title th:text="#{user.title}"></title>
其它表達(dá)式
在基礎(chǔ)語法中，默認(rèn)支持字符串連接、數(shù)學(xué)運(yùn)算、布爾邏輯和三目運(yùn)算等。例如：
<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>
二、內(nèi)置對象
官方文檔： 附錄A： Thymeleaf 3.0 基礎(chǔ)對象
官方文檔： 附錄B： Thymeleaf 3.0 工具類
七大基礎(chǔ)對象：
常用的工具類：
三、迭代循環(huán)
想要遍歷List集合很簡單，配合th:each 即可快速完成迭代。例如遍歷用戶列表：
<div th:each="user:${userList}">
賬號：<input th:value="${user.username}"/>
密碼：<input th:value="${user.password}"/>
</div>
在集合的迭代過程還可以獲取狀態(tài)變量，只需在變量后面指定狀態(tài)變量名即可，狀態(tài)變量可用于獲取集合的下標(biāo)/序號、總數(shù)、是否為單數(shù)/偶數(shù)行、是否為第一個(gè)/最后一個(gè)。例如：
<div th:each="user,stat:${userList}" th:class="${stat.even}?'even':'odd'">
下標(biāo)：<input th:value="${stat.index}"/>
序號：<input th:value="${stat.count}"/>
賬號：<input th:value="${user.username}"/>
密碼：<input th:value="${user.password}"/>
</div>
如果缺省狀態(tài)變量名，則迭代器會(huì)默認(rèn)幫我們生成以變量名開頭的狀態(tài)變量 xxStat， 例如：
<div th:each="user:${userList}" th:class="${userStat.even}?'even':'odd'">
下標(biāo)：<input th:value="${userStat.index}"/>
序號：<input th:value="${userStat.count}"/>
賬號：<input th:value="${user.username}"/>
密碼：<input th:value="${user.password}"/>
</div>
四、條件判斷
條件判斷通常用于動(dòng)態(tài)頁面的初始化，例如：
<div th:if="${userList}">
<div>的確存在..</div>
</div>
如果想取反則使用unless 例如：
<div th:unless="${userList}">
<div>不存在..</div>
</div>
五、日期格式化
使用默認(rèn)的日期格式(toString方法) 并不是我們預(yù)期的格式：Mon Dec 03 23:16:50 CST 2018
<input type="text" th:value="${user.createTime}"/>
此時(shí)可以通過時(shí)間工具類#dates來對日期進(jìn)行格式化：2018-12-03 23:16:50
<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
六、內(nèi)聯(lián)寫法
<script th:inline="javascript">
var user = [[${user}]];`
var APP_PATH = [[${#request.getContextPath()}]];
var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
</script>
七、國際化
需要了解更多關(guān)于國際化的精彩描述請前往 SpringBoot 快速實(shí)現(xiàn)國際化i18n 。
例如在國際化文件中編寫了user.title這個(gè)鍵值，然后使用#{}讀取這個(gè)KEY即可獲取翻譯。
<title th:text="#{user.title}">用戶登陸</title>
八、詳細(xì)教程
======== 有了上述基礎(chǔ)后 下面正式開始Thymeleaf 的詳細(xì)教程 ==============
首先通過Spring Initializr創(chuàng)建項(xiàng)目，如圖所示：
然后在POM文件引入web 、thymeleaf等依賴：
<dependencies> <dependency><!--Web相關(guān)依賴--> <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 #關(guān)閉緩存 prefix: classpath:/views/ #調(diào)整頁面路徑
接著在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;
//請讀者自行補(bǔ)充 構(gòu)造器和 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頁面片段，值得注意的是由于替換路徑默認(rèn)會(huì)拼接前綴路徑，所以開頭切勿在添加斜杠，否則在打包成JAR部署運(yùn)行時(shí)將提示報(bào)Templates not found... 。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title th:text="用戶信息">User</title>
<!--默認(rèn)拼接前綴路徑,開頭請勿再添加斜杠,防止部署運(yùn)行報(bào)錯(cuò)！-->
<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}"/>
時(shí)間：<input type="text" th:value="${user.createTime}"/>
時(shí)間：<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
</div>
<script th:inline="javascript">
//通過內(nèi)聯(lián)表達(dá)式獲取用戶信息
var userList = [[${userList}]];
console.log(userList)
</script>
</body>
</html>
然后編寫單個(gè)用戶頁面：
至此大功告成，然后快速啟動(dòng)項(xiàng)目，如圖所示：
快速啟動(dòng)項(xiàng)目
然后訪問用戶列表： http://localhost:8080 ，如圖所示：
然后訪問單個(gè)用戶： http://localhost:8080/user/1 ，如圖所示：
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
