整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果想開發(fā)一個(gè)網(wǎng)站，除了要精通后端開發(fā)語(yǔ)言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語(yǔ)言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁(yè)。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。
<html>
<head></head>
<body></body>
</html>
在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。
head頭部有以下幾種常用標(biāo)簽：
meta：主要提供有關(guān)頁(yè)面的元信息。
link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。
title：頁(yè)面標(biāo)題的標(biāo)簽。
script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。
1、塊級(jí)標(biāo)簽。
塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：
<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>
前端頁(yè)面顯示的效果如下圖：
常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內(nèi)聯(lián)標(biāo)簽。
內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<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樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。
3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。
內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<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樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：
常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。
4、區(qū)域標(biāo)簽。
所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁(yè)面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁(yè)面布局更加清晰明了。
常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。
5、表單標(biāo)簽。
這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：
?表單常用的標(biāo)簽有：form、input、select、option、textarea 。
以上就是我們開發(fā)網(wǎng)頁(yè)時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。
家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個(gè) HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項(xiàng)目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進(jìn)度條等...，簡(jiǎn)單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。
在項(xiàng)目中，你可能希望通過調(diào)色板組件動(dòng)態(tài)調(diào)整顏色，這時(shí)你可以使用 <input type="color"> 就可以輕松調(diào)用一個(gè)調(diào)色板組件，省去你在找第三方組件，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版時(shí)，有時(shí)候我們需要引用一些信息，這時(shí)我們需要用特殊的樣式進(jìn)行強(qiáng)調(diào)，這時(shí)你可以使用<blockquote> 標(biāo)簽來強(qiáng)調(diào)你用的內(nèi)容，示例效果如下所示
示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd
如果從頭寫個(gè)音頻播放器是一個(gè)費(fèi)時(shí)費(fèi)力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用<audio>標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/oNevrEb
我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用<video> 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
折疊列表的需求也是比較常見的，點(diǎn)擊標(biāo)題展開對(duì)應(yīng)的信息內(nèi)容，這時(shí) <details> 標(biāo)簽就派上用場(chǎng)了，示例效果如下所示：
gif
項(xiàng)目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
日期選擇組件可以說是項(xiàng)目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用<input type="date"> 這個(gè)標(biāo)簽就能輕松的勝任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
滑塊組件也是一個(gè)比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進(jìn)行選擇，這時(shí)我們可以使用 <input type="range"> ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：
示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB
有時(shí)候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標(biāo)簽的話，你需要做的工作就會(huì)許多，但是使用<picture> 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會(huì)根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/abybomY
十、進(jìn)度條（Progress Bar）
進(jìn)度條組件也是個(gè)很常見的組件，你可以使用<progress> 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉組件選項(xiàng)比較多，用戶選擇就會(huì)比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時(shí)候你可以使用 <datalist> 標(biāo)簽就能滿足上述需求，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要對(duì)頁(yè)面某部分進(jìn)行詳細(xì)介紹時(shí)，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細(xì)的提示框效果，這時(shí)我們可以使用 title 屬性就能輕松實(shí)現(xiàn)，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE
今天的文章就分享到這里，希望在日后的項(xiàng)目中你能想起今天分享的這12個(gè)標(biāo)簽（組件），感謝你的閱讀。
參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza
著互聯(lián)網(wǎng)的不斷發(fā)展與前端開發(fā)技術(shù)的不斷進(jìn)步，越來越多的人想在前端開發(fā)市場(chǎng)中分一杯羹，而HTML語(yǔ)言憑著它簡(jiǎn)單易懂的特性成為了不少計(jì)算機(jī)萌新的入門語(yǔ)言。那么什么是HTML呢？
HTML，即超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽，通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。
使用HTML語(yǔ)言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識(shí)別，并將這些HTML文件“翻譯”成可以識(shí)別的信息，即現(xiàn)在所見到的網(wǎng)頁(yè)。而HTML標(biāo)簽是HTML語(yǔ)言中最基本的單位，是HTML最重要的組成部分。
標(biāo)簽一般分為兩種：
1. 塊級(jí)標(biāo)簽
占一整行的標(biāo)簽。如<h>、<p>、<div>、<form>等
2. 行內(nèi)標(biāo)簽
可以多個(gè)標(biāo)簽共同占用一行的標(biāo)簽。比如：<span>,<a>,<input>,<img>,<label>等
3. 塊級(jí)標(biāo)簽特點(diǎn)
4. 行內(nèi)標(biāo)簽特點(diǎn)
平時(shí)寫代碼很少用到HTML的特殊字符，最常用的可能是 （空格）了，但有時(shí)在移動(dòng)端為了節(jié)省時(shí)間，可能會(huì)用這些字符實(shí)現(xiàn)某種特殊效果。
使用方法：
常用HTML特殊字符
作用：聲明文檔的解析類型(document .compatMode)，避免瀏覽器的怪異模式。
瀏覽器有怪異模式（BackCompat）和標(biāo)準(zhǔn)模式（CSS1Compat）兩種模式，那么何為怪異模式和標(biāo)準(zhǔn)模式呢？
如果你的頁(yè)面沒有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat,，如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁(yè)面，即在不同的瀏覽器顯示不同的樣式。
但是如果你的頁(yè)面添加了<!DOCTYPE html>，那么就等同于開啟了標(biāo)準(zhǔn)模式，瀏覽器就得老老實(shí)實(shí)的按照W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面，這樣一來，你的頁(yè)面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。
這就是<!DOCTYPE html>的作用。
<meta>標(biāo)簽用于提供關(guān)于 HTML 文檔的元數(shù)據(jù)（元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息），元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。例如meta被用于設(shè)置關(guān)鍵字、設(shè)置頁(yè)面描述、設(shè)置作者、設(shè)置字符集、設(shè)置頁(yè)面定時(shí)跳轉(zhuǎn)等等。meta標(biāo)簽放置在head標(biāo)簽中，對(duì)meta的設(shè)置對(duì)搜索引擎注冊(cè)、搜索引擎優(yōu)化排名等有至關(guān)重要的作用。
<meta>有兩個(gè)屬性，分別是http-equiv屬性和name屬性，不同屬性有不同的參數(shù)，這些不同的參數(shù)使得名，meta標(biāo)簽有不同的功能：
http-equiv屬性
顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
name屬性
name屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<title>開云見日</title>
link標(biāo)簽有兩個(gè)作用：
1.設(shè)置標(biāo)簽頁(yè)圖標(biāo)：
2.外聯(lián)CSS文件：
用于存放或編寫css文件：
<style type="text/css"></style>
1.引進(jìn)文件
<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>
2.寫js代碼
<script type="text/javascript">...</script>
屬性如下：
HTML還有很多標(biāo)簽，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動(dòng)應(yīng)用開發(fā)大潮下，使用web技術(shù)進(jìn)行移動(dòng)應(yīng)用開發(fā)正變得越來越流行，慢慢會(huì)變成以HTML為核心的技術(shù)棧配合數(shù)據(jù)庫(kù)的天下。讓我們找準(zhǔn)時(shí)代發(fā)展方向，努力學(xué)習(xí)，成為時(shí)代的弄潮兒吧!
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
