整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
有一個(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代碼最簡(jiǎn)單的編輯器就是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é)全部?jī)?nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助
你的支持是我的最大動(dòng)力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c(diǎn)贊加關(guān)注！謝謝！
在前面：java作為一門世界級(jí)編程語言金字塔頂尖的語言。需要大量的練習(xí)、練習(xí)、練習(xí)來鞏固自己所獲得的知識(shí)。冰凍三尺非一日之寒，希望大家在學(xué)習(xí)java的日子里一定一定要堅(jiān)持不懈，嚴(yán)格要求。多練，多問，多百度。祝大家早日成為一名優(yōu)秀的軟件工程師！
文章摘要：此篇文章會(huì)帶領(lǐng)大家創(chuàng)建一個(gè)html最簡(jiǎn)單的頁面，以及在頁面中增加一些簡(jiǎn)單的內(nèi)容。
我先給大家放2張我以前教學(xué)的時(shí)候，開課前給學(xué)生畫的圖：
這2張圖應(yīng)該已經(jīng)比較清晰明了的告訴你，學(xué)習(xí)java前端需要具備的一些主觀和客觀方面的東西，我就不多做解釋了，以后我的文章中，會(huì)以代碼圖片及展現(xiàn)效果居多，盡量減少文字的占比。讓大家對(duì)所學(xué)的知識(shí)有一個(gè)更直觀的感受。
言歸正傳，想要編寫html代碼，首先需要一個(gè)后綴為.html的文件，這個(gè)文件怎么創(chuàng)建呢？最簡(jiǎn)單的方式，建一個(gè)txt，然后把后綴改為.html，用編輯器打開，就可以編寫代碼了。
當(dāng)然，txt界面太丑，筆者這里選用sublime,該編輯器也可以直接加載一個(gè)html模板，選擇菜單→新建文件(模板)→html,當(dāng)然，前提要先設(shè)置好這個(gè)模板，具體設(shè)置方法這里就不做詳細(xì)介紹了，百度上一大堆。新建完成后，產(chǎn)生一個(gè)代碼如下的頁面：
然后在<body></body>標(biāo)簽體之間打入一行代碼
用瀏覽器打開該文件，顯示如下圖，說明這個(gè)html文件已經(jīng)創(chuàng)建成功了，能夠正常的編寫代碼。
零基礎(chǔ)的同學(xué)一定對(duì)剛才的代碼比較疑惑，雖然照著寫能實(shí)現(xiàn)功能，但是這些代碼各自又都是什么意義呢？ 我用注釋的方式上圖來告訴大家：
首先，html 的標(biāo)簽分為自閉和標(biāo)簽和閉合標(biāo)簽
自閉和標(biāo)簽：就是沒有結(jié)束標(biāo)簽，比如上圖的<meta>標(biāo)簽，該標(biāo)簽是沒有結(jié)束標(biāo)簽相呼應(yīng)的。
閉合標(biāo)簽：有開始和結(jié)束標(biāo)簽，比如上圖的<html><body><h1>標(biāo)簽，他們都有一個(gè)</html></body></h1>相呼應(yīng)
在上圖中，我用過了比較多的 < !-- -- >標(biāo)簽，這是html里的注釋標(biāo)簽，在編寫代碼的過程中，勤加注釋是一個(gè)非常非常好的習(xí)慣，不僅方便了他人也方便了以后自己代碼的維護(hù)。所以說，不加注釋的代碼都是在耍流氓。
我們80%的頁面標(biāo)簽代碼都會(huì)寫在<body></body>標(biāo)簽里面,什么是標(biāo)簽，至少包含< > 和標(biāo)簽元素，比如<div><a><p><input>等，標(biāo)簽還有標(biāo)簽屬性和屬性值，標(biāo)簽屬性和屬性值在第一個(gè)標(biāo)簽內(nèi)容中，如果是多個(gè)標(biāo)簽則以空格符號(hào)分割 ，如圖：
Div 是整個(gè)html中最常用的一個(gè)標(biāo)簽元素，<div></div>類似于一個(gè)盒子，里面可以承載各種各樣的元素標(biāo)簽，大家看到的所有的網(wǎng)站都是靠著div一個(gè)個(gè)的盒子規(guī)劃開來，最后拼接在一起的，形成了一個(gè)完整的頁面。
那么如何去建立一個(gè)div呢？首先，我們?cè)趆tml的<body></body>標(biāo)簽中加入一個(gè)<div></div>標(biāo)簽 ，但是單純的加入標(biāo)簽并不會(huì)在頁面中產(chǎn)生肉眼可見的東西，因?yàn)槲覀冞€要定義這個(gè)div的寬，高，背景色，邊框等等，詳見如下代碼：
這樣的一行代碼，最后展現(xiàn)出來的效果是：
我們來一點(diǎn)點(diǎn)的剖析這一行代碼：
Style:style 是元素標(biāo)簽里的一個(gè)標(biāo)簽屬性，他的作用是可以定義該標(biāo)簽的樣式。里面的樣式格式是xxx:xxx; 每一組樣式都是這樣的定義，冒號(hào)用來隔開樣式屬性和樣式屬性值，最后以分號(hào)結(jié)尾.
width:定義該元素的寬
height:定義該元素的高
background:定義該元素的背景顏色(也可使用red,yellow等顏色定義)
border:定義該元素的邊框
4px 代表邊框粗細(xì)，
solid 代表邊框樣式, 邊框樣式又分為solid(實(shí)框)、dotted(虛框)
red代表邊框顏色,邊框顏色也可用#ccc,#112233這種形式表現(xiàn)
Div里可以放入文字、圖片、標(biāo)簽元素等各式各樣的東西。下面我演示一下如何放入照片：
首先，放入照片要使用到<img>標(biāo)簽，這是一個(gè)自閉和標(biāo)簽，所有沒有結(jié)束標(biāo)簽。
Src代表圖片的路徑，width,height 代表圖片的寬度和高度 ,alt是圖片的描述
這個(gè)路徑可以是相對(duì)路徑，也可以是絕對(duì)路徑。
相對(duì)路徑：就是相對(duì)于這個(gè)網(wǎng)頁的路徑，比如圖片和網(wǎng)頁在同一個(gè)文件夾下，那么src處就直接填圖片的文件名字就可以，若建了一個(gè)文件夾images，圖片放在該文件夾中，同時(shí)這個(gè)文件夾和網(wǎng)頁在同一個(gè)位置，那么src所填的就是images/圖片名字.jpg
絕對(duì)路徑：即從頭開始寫路徑，如src = “C:/xxx/xxx/xxx/xxx.jpg”
假設(shè)我現(xiàn)在的圖片位置和網(wǎng)頁位置同處一處
最后的效果：
我這里改大了DIV的寬度和高度，若圖片所設(shè)的寬高大于DIV的寬度高度，那么將會(huì)發(fā)生溢出的情況，同學(xué)們可以自己去試一下，這種溢出的情況也有對(duì)應(yīng)的標(biāo)簽可以做調(diào)整，這個(gè)我們后面再講。
這邊特別提醒一點(diǎn)，如果div沒有設(shè)定寬度width,則默認(rèn)為等同瀏覽器寬度的寬度，若div沒有設(shè)定高度，則該div根據(jù)div中內(nèi)容進(jìn)行高度的伸縮，div中的內(nèi)容有多高，div就有多高，如圖，我把width和height全部去掉：
上圖width和height全部去掉，所以，width默認(rèn)跟瀏覽器寬度等寬，高度為圖片的高度。
文字的話就比較簡(jiǎn)單了，代碼貼上：
最后結(jié)果：
第二句文字才是div創(chuàng)建出來的文字，我解釋一下style里面的樣式：
Font-size:文字大小，px為單位(像素)
Font-family:文字樣式，分為很多，這個(gè)可以去word文檔里找找
Font-weight：文字加粗，bold是一種默認(rèn)加粗的大小。
End.
來源：公眾號(hào)“java編程”
運(yùn)行人員：中國(guó)統(tǒng)計(jì)網(wǎng)小編（微信號(hào)：itongjilove）
微博ID：中國(guó)統(tǒng)計(jì)網(wǎng)
中國(guó)統(tǒng)計(jì)網(wǎng)，是國(guó)內(nèi)最早的大數(shù)據(jù)學(xué)習(xí)網(wǎng)站，公眾號(hào)：中國(guó)統(tǒng)計(jì)網(wǎng)
http://www.itongji.cn
論在WebStorm 中做什么，都是在項(xiàng)目的上下文中執(zhí)行的。WebStorm 中的項(xiàng)目是一個(gè)文件夾，其中包含您編輯的源代碼、您使用的庫和工具（例如，在node_modules子文件夾中）以及各種應(yīng)用程序配置文件（例如，package.json或.eslintrc）。
WebStorm已更新至V2022.1，歡迎下載WebStorm最新版本試用：
點(diǎn)擊獲WebStorm官方正式版
在 WebStorm 中打開一個(gè)文件夾后，.idea子文件夾將添加到其中 WebStorm 存儲(chǔ)其內(nèi)部配置設(shè)置，例如項(xiàng)目代碼樣式或版本控制系統(tǒng)。
.idea目錄中的所有設(shè)置文件都應(yīng)置于版本控制之下，除了workspace.xml，它存儲(chǔ)您的本地首選項(xiàng)。workspace.xml文件應(yīng)被VCS標(biāo)記為忽略。
WebStorm 不支持直接編輯遠(yuǎn)程主機(jī)上的文件。因此，要在 WebStorm 中使用遠(yuǎn)程源，需要下載它們，打開存儲(chǔ)它們的文件夾，并將它們安排在 WebStorm 項(xiàng)目中，如從現(xiàn)有本地源創(chuàng)建項(xiàng)目中所述。要使本地和遠(yuǎn)程源保持同步，請(qǐng)使用“部署選項(xiàng)”對(duì)話框中的“將更改的文件自動(dòng)上載到默認(rèn)服務(wù)器”列表配置自動(dòng)上載。
如果您同時(shí)打開了多個(gè)項(xiàng)目，您可以使用以下選項(xiàng)在它們之間切換：
在 WebStorm 中，您可以為項(xiàng)目指定默認(rèn)父文件夾。當(dāng)您打開項(xiàng)目時(shí)，WebStorm 將從該文件夾開始。每次創(chuàng)建新項(xiàng)目時(shí)也會(huì)建議使用此默認(rèn)位置。
根據(jù)您的選擇處理配置文件。修改項(xiàng)目設(shè)置并創(chuàng)建新的配置文件后，IDE 會(huì)在屏幕底部顯示一條通知，提示您選擇如何處理此項(xiàng)目中的配置文件：
如果您在未選擇任何選項(xiàng)的情況下關(guān)閉通知，則在創(chuàng)建新配置文件后它將再次出現(xiàn)。即使您重新啟動(dòng) IDE，新文件也將進(jìn)入該列表，直到您選擇其中一個(gè)選項(xiàng)。
不可共享的配置文件列表
前端開發(fā)工具WebStorm 識(shí)別配置文件并將它們自動(dòng)添加到忽略文件列表中。但是，如果您手動(dòng)共享項(xiàng)目，我們建議您避免將這些文件和文件夾置于版本控制之下：
將全局設(shè)置復(fù)制到項(xiàng)目級(jí)別
全局 (IDE) 設(shè)置與項(xiàng)目分開存儲(chǔ)。這就是為什么這些設(shè)置不會(huì)通過版本控制與項(xiàng)目一起共享。
但是，可以將某些設(shè)置復(fù)制到項(xiàng)目級(jí)別。例如，您可以創(chuàng)建檢查配置文件的副本，從代碼完成和自動(dòng)導(dǎo)入中排除的類和包的列表。如果這樣做，IDE 會(huì)在.idea目錄中創(chuàng)建相應(yīng)的配置文件，您可以通過 VCS 與項(xiàng)目一起共享這些配置文件。
以上就是有關(guān)WebStorm項(xiàng)目的介紹，更多關(guān)于WebStorm價(jià)格信息可進(jìn)入慧都官網(wǎng)查看。
WebStorm是一個(gè)針對(duì)JavaScript和相關(guān)技術(shù)的集成開發(fā)環(huán)境。像其他JetBrains IDE一樣，它使你的開發(fā)體驗(yàn)更加愉快，使日常工作自動(dòng)化，并幫助你輕松處理復(fù)雜的任務(wù)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
