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