整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今天，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。
可是與此相對(duì)的是，極少大學(xué)的計(jì)算機(jī)專業(yè)愿意開設(shè)前端課程，大部分前端工程師的知識(shí)，也都是在實(shí)踐和工作中不斷學(xué)習(xí)的。
最近收到很多同學(xué)的后臺(tái)留言，說希望多推出一些前端方向的教程。
今天我們就帶來一門適合前端初學(xué)者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創(chuàng)建一個(gè)待辦事項(xiàng)的管理應(yīng)用～
項(xiàng)目效果：
課程從最基礎(chǔ)的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進(jìn)，如果你想快速上手 React 框架，這門課會(huì)是你非常好的選擇。
訪問“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”就能學(xué)習(xí)全部課程內(nèi)容。
以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進(jìn)入前端的大門看看吧：
「HTML 簡介」
本實(shí)驗(yàn)是對(duì) HTML 進(jìn)行學(xué)習(xí)，并且較詳細(xì)的說明了 Web 是如何工作的。主要內(nèi)容有：HTML 常見標(biāo)簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無序列表。通過本節(jié)學(xué)習(xí)，可以構(gòu)建簡單的 HTML 網(wǎng)頁。
HTML（超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，它的解析依賴于瀏覽器的內(nèi)核。它不是一種編程語言，而是一種標(biāo)記語言。
下面我們來演示用戶是如何看到一個(gè)網(wǎng)頁顯示的。
具體來講：
首先我們來看一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>這是一個(gè) HTML 的基本骨架，我們將逐步介紹這些是什么意思。
文檔類型聲明
<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。
html 標(biāo)簽
html 標(biāo)簽即根元素，此處表示文檔的開始，該標(biāo)簽包含兩個(gè)子標(biāo)簽：head 和 body。
head 元素
head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等（后面會(huì)講到）。
title 標(biāo)簽
作用：設(shè)置文檔的標(biāo)題或者名稱。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁上。每個(gè) HTML 文檔只能有一個(gè)，必須有一個(gè) title 標(biāo)簽。
meta 標(biāo)簽
<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。
body 標(biāo)簽
body 標(biāo)簽定義文檔的主體，也就是我們的主要內(nèi)容（比如文本、超鏈接、圖像、表格和列表等）。
1.h 系類標(biāo)簽
h 標(biāo)簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標(biāo)題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五級(jí)標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
</body>
</html>為了大家能更有效的學(xué)習(xí)，請(qǐng)使用實(shí)驗(yàn)樓的環(huán)境。首先我們新建一個(gè)文件，點(diǎn)擊 File，然后 New File，命名為 index.html。
然后輸入上面的代碼。
讓我們來看一下運(yùn)行效果吧。鼠標(biāo)右鍵 index.html 文件，點(diǎn)擊 Open With，然后點(diǎn)擊 Preview。
最終效果為：
2.p 標(biāo)簽
p 標(biāo)簽是我們的文本標(biāo)簽，p 標(biāo)簽會(huì)自動(dòng)在其兩個(gè)標(biāo)簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>我是第一段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>
<p>我是第二段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>3. 圖片標(biāo)簽
HTML 的圖像是通過標(biāo)簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>實(shí)驗(yàn)樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 標(biāo)簽
<a> 標(biāo)簽是超鏈接標(biāo)簽，意思就是我們點(diǎn)擊它可以跳轉(zhuǎn)到一個(gè)網(wǎng)頁。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<a href="https://www.shiyanlou.com/">實(shí)驗(yàn)樓</a>點(diǎn)擊文字：
跳轉(zhuǎn)到指定網(wǎng)頁：
篇幅有限，后續(xù)的課程內(nèi)容，請(qǐng)?jiān)?strong>“實(shí)驗(yàn)樓”邊敲代碼邊學(xué)習(xí)～
訪問“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”，就能找到課程，繼續(xù)學(xué)習(xí)啦！
多人都想有自己的網(wǎng)站，奈何不知道不知道該從何下手，總認(rèn)為必須要懂得計(jì)算機(jī)技術(shù)，會(huì)寫代碼，懂得前端的設(shè)計(jì)。其實(shí)，在如今智能化的大環(huán)境下，不必這么復(fù)雜就可以完成網(wǎng)站搭建，只要選對(duì)建站工具，自己建網(wǎng)站無需基礎(chǔ)，也可以很快搞定。看到這里是不是還是一頭霧水無從下手呢？跟著我看完這篇文章，保證建網(wǎng)站不會(huì)再為難到你。
首先，我們需要選擇一個(gè)強(qiáng)大的工具，喬拓云是非常全面并且好用的建站工具，登錄后即可進(jìn)入后臺(tái)，選擇【企業(yè)網(wǎng)站】模塊，開始網(wǎng)站搭建。
我們可以選擇電腦網(wǎng)站和手機(jī)網(wǎng)站兩種，都有相對(duì)應(yīng)的模板。點(diǎn)擊去設(shè)計(jì)就可以看到不同的行業(yè)劃分的模板，根據(jù)自己的需求挑選喜歡的模板。
選好以后可以點(diǎn)擊使用模板，開始修改一些細(xì)節(jié)的東西。
比如；基礎(chǔ)的文本、圖片，雙擊和拖拽就可以修改，還可以增加和刪除，更換排版，增加標(biāo)題欄等。
網(wǎng)站的主題顏色在主題這一欄中即可改動(dòng)，一些設(shè)置也能取消和添加，不用擔(dān)心該如何布置網(wǎng)站的界面，都是有大量的提示幫助的。
網(wǎng)站頁面搭建好了之后，需要在后臺(tái)的域名管理處綁定域名，沒有域名可以點(diǎn)擊購買域名去注冊(cè)一個(gè)域名。另外還需要做好百度優(yōu)化，完成百度收錄的一些必備的設(shè)置，比如關(guān)鍵詞設(shè)置等等，百度收錄后，網(wǎng)站就可以在搜索引擎里面搜索出來，這樣別人才能看到制作的網(wǎng)站。
以上就是關(guān)于如何使用喬拓云模板建設(shè)網(wǎng)站的科普，如果你沒什么建站經(jīng)驗(yàn)，藝術(shù)設(shè)計(jì)能力不強(qiáng)，那么使用上述建站方法就是你的不二選擇。
有一個(gè)好的編輯器我們可以方便地的開發(fā)項(xiàng)目，編寫代碼，配置和管理我們的項(xiàng)目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。
基于html項(xiàng)目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。
使用記事本編寫html的步驟是首先新建一個(gè)文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運(yùn)行結(jié)果。
雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項(xiàng)目，編寫代碼和管理項(xiàng)目。
常用html代碼編寫的免費(fèi)軟件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官網(wǎng)下載地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官網(wǎng)下載地址：
https://code.visualstudio.com/Sublime Text官網(wǎng)下載地址：
http://www.sublimetext.com/我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。
一，下載
首先訪問HBuilderX的官網(wǎng)網(wǎng)址：
https://www.dcloud.io/hbuilderx.html打開上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁面上download，在彈出的對(duì)話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。
二，安裝
鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。
解壓完成后是一個(gè)名為HBuilderX的文件夾。
解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：
雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：
因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。
小百科：
綠色軟件指一類小型軟件，多數(shù)為免費(fèi)軟件，最大特點(diǎn)是軟件無需安裝便可使用，可存放于閃存中，移除后也不會(huì)將任何記錄留在本機(jī)計(jì)算機(jī)上。通俗點(diǎn)講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會(huì)在注冊(cè)表中留下注冊(cè)表鍵值，所以相對(duì)一般的軟件來說，綠色軟件對(duì)系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。
三，新建項(xiàng)目
HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：
按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：
名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：
接下來在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件
鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：
在彈出的對(duì)話框里填入html文件的名稱：
編寫一段代碼：
運(yùn)行：
在瀏覽器上觀察效果：
好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。
下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。
按照以下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：
雅黑主題：
雅藍(lán)主題：
好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助
你的支持是我的最大動(dòng)力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c(diǎn)贊加關(guān)注！謝謝！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
