整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果想開發一個網站，除了要精通后端開發語言（如：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出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標簽（組件），通過這些標簽避免你在項目中集成復雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標簽就能很方便的調用系統組件。
在項目中，你可能希望通過調色板組件動態調整顏色，這時你可以使用 <input type="color"> 就可以輕松調用一個調色板組件，省去你在找第三方組件，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調，這時你可以使用<blockquote> 標簽來強調你用的內容，示例效果如下所示
示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd
如果從頭寫個音頻播放器是一個費時費力又有挑戰性的工作，但是你現在可以使用<audio>標簽就能很輕松的調用。系統的音頻播放器，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/oNevrEb
我們不僅能很方便的調用系統的音頻組件，我們還可以使用<video> 標簽調用視頻組件，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
折疊列表的需求也是比較常見的，點擊標題展開對應的信息內容，這時 <details> 標簽就派上用場了，示例效果如下所示：
gif
項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復雜的樣式和交互需求，使用<input type="date"> 這個標簽就能輕松的勝任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
滑塊組件也是一個比較常見的組件，主要應用在數值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設置最小值、最大值以及當前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
為了讓內容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當前容器及所見即所得的編輯，示例如下所示：
示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB
有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標簽的話，你需要做的工作就會許多，但是使用<picture> 標簽就能很輕松的完成在不同分辨率下顯示不同圖片的設置，調整瀏覽器的大小，就會根據窗口的大小顯示不同大小的圖片，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/abybomY
十、進度條（Progress Bar）
進度條組件也是個很常見的組件，你可以使用<progress> 標簽就能輕松完成相關外觀的設置，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結合輸入，能很方便的定位到下拉組件的內容，這時候你可以使用 <datalist> 標簽就能滿足上述需求，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標經過此區域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE
今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標簽（組件），感謝你的閱讀。
參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza
著互聯網的不斷發展與前端開發技術的不斷進步，越來越多的人想在前端開發市場中分一杯羹，而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢？
HTML，即超文本標記語言，是一種標識性的語言。它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現在所見到的網頁。而HTML標簽是HTML語言中最基本的單位，是HTML最重要的組成部分。
標簽一般分為兩種：
1. 塊級標簽
占一整行的標簽。如<h>、<p>、<div>、<form>等
2. 行內標簽
可以多個標簽共同占用一行的標簽。比如：<span>,<a>,<input>,<img>,<label>等
3. 塊級標簽特點
4. 行內標簽特點
平時寫代碼很少用到HTML的特殊字符，最常用的可能是 （空格）了，但有時在移動端為了節省時間，可能會用這些字符實現某種特殊效果。
使用方法：
常用HTML特殊字符
作用：聲明文檔的解析類型(document .compatMode)，避免瀏覽器的怪異模式。
瀏覽器有怪異模式（BackCompat）和標準模式（CSS1Compat）兩種模式，那么何為怪異模式和標準模式呢？
如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,，如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面，即在不同的瀏覽器顯示不同的樣式。
但是如果你的頁面添加了<!DOCTYPE html>，那么就等同于開啟了標準模式，瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
<meta>標簽用于提供關于 HTML 文檔的元數據（元數據是關于數據的信息），元數據不會顯示在頁面上，但是對于機器是可讀的。例如meta被用于設置關鍵字、設置頁面描述、設置作者、設置字符集、設置頁面定時跳轉等等。meta標簽放置在head標簽中，對meta的設置對搜索引擎注冊、搜索引擎優化排名等有至關重要的作用。
<meta>有兩個屬性，分別是http-equiv屬性和name屬性，不同屬性有不同的參數，這些不同的參數使得名，meta標簽有不同的功能：
http-equiv屬性
顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
name屬性
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
<title>開云見日</title>
link標簽有兩個作用：
1.設置標簽頁圖標：
2.外聯CSS文件：
用于存放或編寫css文件：
<style type="text/css"></style>
1.引進文件
<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>
2.寫js代碼
<script type="text/javascript">...</script>
屬性如下：
HTML還有很多標簽，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應用開發大潮下，使用web技術進行移動應用開發正變得越來越流行，慢慢會變成以HTML為核心的技術棧配合數據庫的天下。讓我們找準時代發展方向，努力學習，成為時代的弄潮兒吧!
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
