整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
天給學編程的你們推薦六款好用的IDE工具，快來看看吧！
Cloud Toolkit 是一款 IDE 插件，可以幫助開發者更高效地開發、測試、診斷并部署應用。通過 Cloud Toolkit，開發者能夠方便地將本地應用一鍵部署到任意機器（本地或云端），并內置 Arthas 診斷、高效執行終端命令和 SQL 等，提供 IntelliJ IDEA 版，Eclipse 版，PyCharm 版和 Maven 版。
工具的使用場景：
每次修改完代碼后，是否正在經歷反復地打包？
在 Maven 、Git 以及其他運維腳本和工具的之間頻繁切換？
采用 SCP 工具上傳？使用 XShell 或 SecureCRT 登錄服務器？替換部署包？重啟？
文件上傳到服務器指定目錄，在各種 FTP、SCP 工具之間頻繁切換 ？
工具地址：https://link.segmentfault.com/?enc=5YvdJW5UrcWb%2Fmp4Fe4sFw%3D%3D.qPsV2br9lhB4FZ1hrFRuqPwcBDBj4W1vokmF48SCI86bC9DMcy0r9QnB%2BUQq6a9l
說起Jetbrains這家公司，大家一定不陌生，如果陌生那你也一定用過他家的IDE工具集，比如，以下的產品。
最有名氣的就是IDEA這個萬能IDE了，當然一般也就是學習編寫Java程序時使用，jetbrains的IDE工具最具有的特色便是智慧了，代碼提示，代碼補全，以及數以萬計的插件、主題等。
不管是什么語言，目前常用的語言IDE都有它的一席之地。
Jetbrains各類工具的作用范圍
RM->RubyMine是一款針對于Ruby語言的IDE工具
PC->PyCharm是一款面向專業的Python開發者的IDE工具
IJ->IntelliJ IDEA是一款功能強大，符合人體工程學的 JVM IDE，一般用于Java語言的開發
PS->PhpStorm是一款高效智能的PHP開發工具
GO->GoLand 使讀取、寫入和更改 Go 代碼變得非常容易
RD->JetBrains Rider 是一款基于 IntelliJ 平臺和 ReSharper 的跨平臺 .NET IDE
AC->AppCode適用于 iOS/macOS 開發的智能 IDE
WS->WebStorm 是一個適用于 JavaScript 和相關技術的集成開發環境
CL->CLion是一款智能的 C 和 C++ 編輯器，也是一款跨平臺的 IDE工具
DG->DataGrip是一個數據庫管理工具，基本上支持市面上所以數據庫環境的連接
R#->ReSharper是一款適用于.NET開發者的Visual Studio擴展 同時Jetbrains的工具與擴展還遠遠不止這些，甚至還有自我開發的新型語言->kotlin，可以說是濃縮版的Java
具體地址：https://www.jetbrains.com.cn/products/#type=ide-vs
OpenSumi 是一款面向垂直領域，低門檻、高性能、高定制性的雙端（Web 及 Electron）IDE 研發的框架。
框架早期由阿里集團淘系工程團隊及螞蟻集團體驗技術部、研發效能團隊聯合發起，共同研發的 IDE 標準化研發框架。它基于 TypeScript + React 進行編碼，實現了包含資源管理器、編輯器、調試、Git 面板、搜索面板等核心功能模塊，開發者只要基于我們的起步項目進行簡單配置，便可以快速地搭建屬于自己的本地或云端 IDE 產品，框架自身兼容 VS Code 插件生態，主流 VS Code 插件均可無縫在基于 OpenSumi 研發的產品中運行，同時，框架也為開發者提供多種低成本，高定制的視圖定制能力，能滿足 IDE 場景下絕大多數的視圖定制場景。
針對小程序研發場景， 支付寶小程序開發者工具 以及 淘寶小程序開發者工具 便是使用了 OpenSumi 作為核心框架進行實現。
具體地址：https://opensumi.com/zh
Atom 是由 GitHub 的程序員們打造的稱為“屬于21世紀”的代碼編輯器。它開源免費跨平臺（支持 Windows、Mac、Linux 三大桌面平臺），并且整合 GIT 并提供類似 SublimeText 的包管理功能，作為一個現代的代碼編輯器，Atom 支持各種編程語言的代碼高亮(HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown 等等)、 與大多數其他編輯器相比，Atom 的語言支持已經算是覆蓋非常全面了。
另外，它的代碼補全功能（也叫Snippets） 也非常好用，你只需輸入幾個字符即可展開成各種常用代碼，可以極大提高編程效率。
官方地址：https://atom.io/
FinClip 推出的小程序 IDE 工具，界面與微信小程序的開發工具類似，發現功能挺強大的，界面非常的簡潔，上手門檻比較低，簡單易上手，這款 IDE 工具的實際名稱是 FIDE （ FinClip Integrated Development Environment ）是 FinClip 為便于開發者更簡單、高效地調試小程序的小程序開發調試工具。
FIDE的亮點是，它支持 「「小程序一鍵轉換成 APP」」 ，可以將已有小程序代碼導出為 IOS 與 Android 中可用的工程文件，由于導出的工程文件已經集成了 FinClip SDK ，所以所生成的APP直接擁有小程序的運行能力，后續可在這個 APP 上繼續上架更多小程序，自建自己的小程序生態。
工具地址： https://www.finclip.com/downloads/
NetBeans 是 Java 的集成開發環境。這是一個了不起的IDE，用戶評分為4.1分（滿分5分），用戶滿意度高達82%。它可以在Windows，Linux，macOS和Solaris上運行。它具有內置工具，可為從產品設計到部署的整個軟件開發生命周期增加價值。NetBeans 的一些主要功能包括：
它可以檢測錯誤并為您提供智能代碼編譯功能。
通過 NetBeans，您可以直接創建、調試、部署和測試應用程序。
它具有非常簡單易用的管理功能。
它具有驚人的代碼比較功能，可幫助您同時編寫類似的代碼 。
具體地址：https://netbeans.apache.org/
-----------------------------------
為了幫助大家，輕松，高效學習C語言/C++,給大家分享我收集的資源，從最零基礎開始的,幫助大家在學習C語言的道路上披荊斬棘！
編程學習書籍分享：
編程學習視頻分享：
整理分享（多年學習的源碼、項目實戰視頻、項目筆記，基礎入門教程）
對于C/C++感興趣可以關注小編在后臺私信我：【編程交流】一起來學習哦！可以領取一些C/C++的項目學習視頻資料哦！已經設置好了關鍵詞自動回復，自動領取就好了！
.標簽語義化
提到標簽，很多剛入門前端開發的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應該根據什么依據去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然后不斷的積累，不斷的總結，發現要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：
第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。
第二點：根據內容選擇使用HTML標簽，什么意思呢？見下文分解。
第三點：遵循W3C的規范。
首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那么幾個而已。
其次，第二點根據內容選擇使用HTML標簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。
最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果，那么必須遵循W3C的規范。
說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。
我們在使用標簽的過程中，大家會發現類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。
那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。
標簽語義化的作用：
如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。
普通的文本和使用語義化標簽后的效果對比圖
那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結構依然組織有序，并且有良好的可讀性，那么它就是非常良好的。
如何去使用這些標簽呢？首先根據內容確定語義化的標簽，其次再根據呈現需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。
使用語義化的普通文本，變得更為結構清晰
2.常用標簽分類匯總
通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統稱為排版標簽。
在開發中，排版標簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的標簽。下面我一一了解一下。
排版標簽：
【1】標題標簽（h1-h6）
標題標簽的使用
呈現的效果如下：
呈現的效果
一句話總結：使用了標題標簽的文字會加粗，會根據級別顯示文字的大小，并且一行只能放一個標題。
【2】段落標簽（p）
p標簽語法格式
【3】水平線標簽（hr）
【4】換行標簽（br）
文本
呈現效果：
使用br標簽后的效果
【5】div和span標簽
最后給大家來一個完美的總結：
排版標簽的匯總
難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。
文本格式化標簽
文本格式化標簽的作用：通常文本格式化標簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現，會更加完美。
常見的文本格式化標簽如下：
文本格式化標簽
它們分別的區別：
我么網頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。
圖片標簽（img）
img標簽屬性
標簽屬性的特點：
圖片標簽屬性使用
鏈接標簽
a標簽的常見屬性
提示：
內部鏈接地址
注釋標簽
注釋標簽
好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結的內容，能幫到正在瀏覽我這篇內容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的內容。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
