多朋友想學(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)系。