整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1. HTML的代碼文件
（1）打開Hbuilder開發(fā)工具，新建項(xiàng)目，點(diǎn)擊右鍵新建一個(gè)HTML文檔。
（2）在文檔中寫HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>產(chǎn)品列表</title>
</head>
<body>
這是產(chǎn)品頁面
<b>好好學(xué)習(xí)，天天向上</b>
<h1>好好學(xué)習(xí)，天天向上</h1>
</body>
</html>
溫馨提示：
常用的快捷鍵：
Ctrl+s:保存
ctrl+c:復(fù)制
ctrl+x：剪切
ctrl+v：粘貼
2. HTML的基本結(jié)構(gòu)
對(duì)于HTML文件的后綴名一般為“html”或“htm”
2.1HTML的標(biāo)簽格式
（1）什么是HTML標(biāo)簽？
HTML標(biāo)簽是有開始標(biāo)簽和結(jié)束標(biāo)簽組成
開始標(biāo)簽：是被尖括號(hào)包圍的元素名。
結(jié)束標(biāo)簽：是被尖括號(hào)包圍的斜杠和元素名
<元素>內(nèi)容 </元素>
例如：<b>好好學(xué)習(xí)天天向上</b>
注意：有些HTML標(biāo)簽是沒有結(jié)束標(biāo)簽的, <hr/>
(2)單標(biāo)簽和雙標(biāo)簽
雙標(biāo)簽：例如：<b></b>
單標(biāo)簽：<hr/> <br/>
(3) 標(biāo)簽的屬性
<font size="1">好好學(xué)習(xí)</font>
<font size="7">好好學(xué)習(xí)</font>
<h1 title="h1" style="color: red;">
我是一個(gè)標(biāo)題標(biāo)簽
</h1>
3. HTML基本結(jié)構(gòu)的認(rèn)識(shí)
<!--<!DOCTYPE html>:文檔聲明，告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范，讓瀏覽器通過正確的方式解析我們的網(wǎng)頁，讓網(wǎng)頁能夠正確的顯示。-->
<!DOCTYPE html>
<!-- <html>標(biāo)簽：是網(wǎng)頁的跟標(biāo)簽-->
<html>
<!--head是網(wǎng)頁頭，一般表示網(wǎng)頁中描述信息-->
<head>
<!--
meta：提供網(wǎng)頁的相關(guān)信息，有利于搜索引擎收錄
charset="UTF-8"： 設(shè)置網(wǎng)頁編碼方式為utf-8
name="Keywords" ：設(shè)置網(wǎng)頁關(guān)鍵字
name="viewport": 設(shè)置網(wǎng)頁視窗大小
-->
<meta name="Keywords" content="HTML5前端開發(fā)工程師入門到精通課程"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title></title>：表示網(wǎng)頁的標(biāo)題 -->
<title></title>
</head>
<body>
<!--
<body></body>：網(wǎng)頁的主體內(nèi)容，用戶呈現(xiàn)的內(nèi)容，比如文字，圖片，鏈接，視頻……
-->
</body>
</html>
4. HTML的注釋
<!--這里是注釋的內(nèi)容-->
5. HTML的編碼問題
常見編碼個(gè)格式：
UTF-8:國(guó)際通用的編碼格式
GBK/GB2312:中文編碼字符
HTML的編碼：<meta charset="UTF-8">
6. HTML規(guī)范
（1）html標(biāo)簽都是有尖括號(hào)包圍的標(biāo)簽，比如<b>
（2）標(biāo)簽通常是成對(duì)存在，<b></b>,<h1></h1>
（3）HTML不區(qū)分大小寫，我們建議小寫。
（4）HTML可以嵌套，但是允許交叉嵌套
正確寫法：<b> <h1>我很粗</h1> </b>
錯(cuò)誤寫法：
<b> <h1>我很粗 </b></h1>
慶假期很適合學(xué)習(xí)點(diǎn)新知識(shí)。前幾天有粉絲在后臺(tái)問我關(guān)于使用 js 開發(fā)后端服務(wù)的建議，我給推薦了這一個(gè)面向小白的走向全棧開發(fā)工程師的教程。
這是一個(gè)面向零基礎(chǔ)的基于 JavaScript 語言的全棧開發(fā)教程，教程基于目前流行的前后端分離開發(fā)模式，使用 Vue.js + Node.js 并且通過從實(shí)際需求的角度來完成基礎(chǔ)的業(yè)務(wù)代碼，沒有過多功能封裝，幾乎都是底層的代碼，通俗易懂，上手容易。
教程截圖
這套 JavaScript 全棧教程的作者是廖雪峰，是一位有著超過十年軟件開發(fā)經(jīng)驗(yàn)的大神，精通 Java / Python / Ruby / Visual Basic / Objective C 等，對(duì)開源框架有很深入的研究，著有《Spring 2.0核心技術(shù)與最佳實(shí)踐》一書，是很多后端開發(fā)工程師非常熟知的業(yè)內(nèi)大神。
因?yàn)獒槍?duì)的是對(duì) javascript 零基礎(chǔ)的小白用戶，因此這個(gè)教程有很大篇幅是 javascript 語言入門。
這是我毫無后端開發(fā)經(jīng)驗(yàn)時(shí)學(xué)習(xí)后端開發(fā)的入門的教程，這套教程讓我學(xué)會(huì)了如何使用 javascript 來開發(fā)后端 api 接口。而且前面的基礎(chǔ)語法教程，也看得津津有味，復(fù)習(xí)了很多不會(huì)用、不常用但很巧妙的代碼實(shí)現(xiàn)。這是我推薦這個(gè)教程的最大原因。
教程截圖
這個(gè)教程除了適合零基礎(chǔ)的小白，我認(rèn)為這更像一個(gè)寫給后端開發(fā)者的、從其他后端語言轉(zhuǎn) javascript 的教程，如果像我之前學(xué)習(xí)的那樣沒有過后端開發(fā)經(jīng)驗(yàn)，就需要注意幾個(gè)問題：
入門靠老師，修行靠自己。總的來說，這只是一套非常基礎(chǔ)的入門教程，學(xué)完后能夠了解前端開發(fā)和后端開發(fā)，可以實(shí)現(xiàn)簡(jiǎn)單的 demo，可以幫助我們學(xué)習(xí) koa / egg.js 這類基于 Node.js 的后端開發(fā)框架，但后端開發(fā)需要學(xué)習(xí)的知識(shí)很多，數(shù)據(jù)庫(kù)設(shè)計(jì)、查詢優(yōu)化、架構(gòu)設(shè)計(jì)等等，成為一個(gè)合格的全棧工程師，路還有很遠(yuǎn)。
這是一個(gè)完全免費(fèi)的 JavaScript 全棧入門教程，就算完全不懂 js 也能快速入門，在線免費(fèi)學(xué)習(xí)。如果想學(xué) js 語法，也可以看看之前推薦過的阮一峰寫的免費(fèi) javascript 系統(tǒng)學(xué)習(xí)入門教程。
最后祝各位有所收獲，邁進(jìn)全棧開發(fā)工程師行列。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)擊查看本次分享的網(wǎng)址。
JavaScript 全棧開發(fā)入門 - 由廖雪峰提供的面向小白的免費(fèi)在線教程｜那些免費(fèi)的磚
例演示視頻點(diǎn)擊進(jìn)入：《2小時(shí)學(xué)會(huì)完美建站教程》
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
