整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們可以使用 HTML 編輯器來編輯 HTML：比如 Dreamweaver（DW）和editplus（小紅本 ）編輯器雖然好用但還是建議一開始使用文本編輯器來學習 HTML，簡稱記事本（就是創建 一個txt文本文件）如下圖：
文本文件
通過記事本，依照以下五步來創建您的第一張網頁。
3.在body標簽里邊輸入內容
4.然后把寫完的代碼保存之后找到文件把txt的后綴名改成.html
上面的頁面就是代碼的效果圖
下個文章講解用editplus開發網頁
以上就是文章的全部內容了，有什么不懂的可以評論或者私信告訴我，喜歡的話可以點個贊和關注，每天持續更新。
昨天了解計算機基礎知識后，小編今天帶大家學習前端三大腳手架之一的HTML，從常用程度上，HTML可以簡單的分為：基礎HTML、核心HTML。今天將學習基礎HTML（一），因為只有把地基打扎實了，才能建高樓。
首先，什么是HTML？書本上稱為HTML(Hyper Text Markup Language),超級文本標記語言，說白了就是編寫一個網頁的語言；可以想象因為要講話，所以我們學會了文字，同理，因為要編輯網頁，所以我們要學習HTML；HTML是有一系列標記組成，同時也具有自己獨特的語法。通過標記和語法組成后，最終會由瀏覽器負責解釋，瀏覽器中有兩大解析器，html渲染解析器，js解析器（這塊后續會提到）。
HTML的發展進程，從最開始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5；目前HTML已經更新到了HTML5了，HTML5給我們帶來了很多新玩意兒，后面會陸續把好東西分享給大家。
HTML5 質的發展
在今日學習之前，先分析一些開發工具，作為新手，不建議使用具有代碼提示補全的工具，建議使用EditPlus，記事本之類的工具，只有把代碼寫扎實了，再進階到高級工具。
下面進入HTML標簽的學習，也有叫標記的。
一、標簽語法
1、所有的標簽都必須使用尖括號擴起來，例如 <a>,<div> ... <A>,<a>
2、有封閉類型的標簽，也有非封閉類型的標簽
2.1、封閉類型，也稱作雙標記，則必須成對出現；語法規則： <標記>文本內容</標記>； 不同的標記，決定 了"文本內容"的不同表現形式；常見的封閉類型標記有:<a></a>,<p></p>,<div></div>
2.2、非封閉類型，也稱作單標記、空標記；語法規則： <標記>或者<標記/> 常見的非封閉類型標記有: <hr>,<br>,<img>
區別封閉類型和非封閉類型標簽，就看這標簽是一對出現的，還是單個出現的。
3、標簽嵌套
標簽之間可以相互嵌套，形成復雜的語法結構，簡單的例子如下：
<body>
<p>
<a></a>
</p>
</body>
4、標簽屬性，標簽屬性是指出現在開始標記中的內容，作用是修飾元素，如 <div 屬性名="屬性值"></div>
標準屬性：就是每個元素與生俱來就具備的通用屬性，常見的標準屬性有：
id ：定義每個標簽的唯一標識
title：提示文本
class：樣式相關，類樣式
style：樣式相關，行內樣式
現在可以和小編一個編寫一個簡單的標簽，同時設置這個標簽的id屬性為myDIv。（屬性命名方式：駝峰命名，后續會分享給大家）
實戰：第一步：先定義一個標簽div，即<div></div>
第二步：添加id屬性，即<div id="myDIv"></div>
疑問：如果存在多個屬性值怎么辦？怎么添加屬性值是編碼規范的？
答：如果是多屬性的，那么直接在前一個屬性值后繼續編寫，不需要用“，”或者“；”分開，直接寫就對了！而且，多個屬性排名不分先后的，舉個栗子： <div id="myDiv" title="myTitle"></p>
二、文檔結構
1、文檔類型聲明：即聲明使用的HTML版本和風格，HTML5中使用聲明為： <!doctype html>
2、html頁面
2.1、文檔根元素，每個文檔有且僅有一對根元素 , html
2.2、在根元素的內部，包含兩對子元素；
2.2.1、head : 頁面的頭部內容，定義頁面全局信息 包含的內容有：
<title></title> ;網頁標題，就是網頁地址上面顯示的名稱；
<meta />:聲明元數據(編碼,關鍵字,描述)，最重要的搜索引擎SEO主要是寫這部分；同時也可以定義一些網頁屬性，比如說，中文顯示 <meta charset="utf-8" />；
<style></style>:聲明內部樣式表，聲明當前網頁所用到的樣式，這種方式的樣式定義只能運用在當前頁面，其他頁面不能使用這里定義的樣式；
<link />:引入外部樣式表，引入外部定義好的樣式，只要是這個頁面想要用到某一個外部樣式表，就直接引入就可以用了，這種樣式表定義運用彌補上面<style></style>不能共享的缺陷，是的代碼達到了重用的優勢；
<script></script>:定義或引入腳本文件，主要是引入一些js腳本語言，完成這個頁面所需要的交互；
2.2.2、body : 頁面的主體內容，任何一個標簽，都可能會出現在body中；<body>也是標簽，它也可以定義自己的屬性，比如網頁背景有綠色，那么就是<body bgcolor="green"></body>；
3、文本標記
3.1、特殊的文本，除了正常文字外，在一些特定的情況下會需要有特別的標點符號等，小編舉例幾個常見的特殊符號的標記，如 空格對應的是“ ”、 <對應的是 “<” 可以理解為less than 、> 對應的是 “> ”理解為greater than、 版權標識對應的是 “©”，這里需要特別特別注意的一點是 每個特殊字符有需要“；”
3.2、文本標記
3.2.1、文本樣式
<b>...</b>： 加粗文本；
<i>...</i>：斜體文本；
<u>...</u>：下劃線；
<s>...</s>：刪除線；
<sup>...</sup>：上標；
<sub>...</sub>：下標；
3.2.2、標題元素， 1-6級6個標題 <hn></hn> n：1-6 其中一級是最大的， 六級是最小的；
3.2.3、段落元素，提供了結構化文本的表現方式， 語法：<p></p>， 注意：每對p標簽單獨成一個段落，常用屬性:
align：水平對齊方式 取值：left center right；
4、換行元素，在代碼的任何位置處，實現回車的效果 <br />，是非封閉類型標記；
5、水平線， 又叫分割線， <hr /> 也是非封閉類型標記，常用屬性；
5.1、size ：水平線的粗細，通常以像素(px)為單位；
5.2、width：寬度；
5.3、align：水平線的水平對齊方式；
5.4、color：顏色；
6、分區元素目的：為元素進行分組，多數用在布局中；
塊分區元素：<div></div> ；
行內分區元素：<span></span>；
注意：
div ：主要用在布局上；
span：修改其內部內容的樣式；
7、預格式化，保留源文檔中的空格和回車 <pre>文本內容 </pre>；
8、注釋
可以寫在html源碼中，但不被瀏覽器解釋的文本；
語法： <!-- 注釋內容 -->
！！！特別注意：行內元素與塊級元素
塊級元素：默認情況下，塊級元素獨占一行，元素的前后都會自動換行 div、hn、hr、p等 主要用于布局。
行內元素:默認情況，多個元素位于同一行，不會換行，span、文本標記... .主要行內元素作用:修改內部內容的樣式。
最后，小編建議多多打代碼！
預告：下一篇 前端教程之HTML（二）
有一個好的編輯器我們可以方便地的開發項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫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小時內與您取得聯系。
