整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果想開發一個網站，除了要精通后端開發語言（如：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出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
作為一個前端，經常寫html文檔，但是卻很少去在意頭部的標簽有哪些，也很少在意每個標簽的作用，下面我們來詳細了解下。
頭部的標簽，也就是寫在<head><head/>里。通常會有6個標簽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head>
<body> 文檔內容...... </body>
</html>一、<title>元素。
1.title 標簽定義了文檔的標題，在HTML文檔中是必須的。它會展示在瀏覽器的工具欄上。
2.如果要展示一個圖標，可以再加一個<link>標簽，<link>標簽的 rel屬性為“icon”,后面的
href跟上圖片的地址。
<link rel="icon" href="圖片url">二、<base>元素。
base標簽描述了基本的鏈接地址，該標簽作為HTML文檔中所有的鏈接的默認鏈接
<head>
<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
<body>
<img src="banner7.jpg"/>
</body>
上面的img標簽的src鏈接的地址就是base里的地址加上img里的地址。
三、<link>元素。
link標簽定義了文檔與外部資源之間的關系，它通常用于鏈接到樣式表。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>四、<style>元素。
style標簽定義了HTML文檔的樣式，這個我們經常會使用到，都不會陌生。
五、<meta>元素。
meta標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。它常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
// 編碼格式定義
<meta charset="utf-8">
// 為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 為網頁定義描述內容:
<meta name="description" content="頭部標簽 & 使用">
// 定義網頁作者:
<meta name="author" content="Runoob">
// 每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">
// 視圖層的參數定義
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
// content屬性值 :
// width:可視區域的寬度，值可為數字或關鍵詞device-width
// height:同width
// intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
// maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
// maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
// user-scalable:是否可對頁面進行縮放，no 禁止縮放六、<script>元素。
script標簽用于加載腳本文件，比如說javascript,可以直接書寫js,也能用于鏈接外部的js文件。
<script>
document.write("Hello World!")
</script><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>作為一個零基礎入門的小白，應該先從基本的html標簽開始認起。熟悉后再進行下一步學習。
HTML 標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。
<h1>www.861lll.com</h1>HTML 段落是通過 <p> 標簽進行定義的。
<p>www.861lll.com</p>HTML 鏈接是通過 <a> 標簽進行定義的。
<a href="http://www.861lll.com">www.861lll.com</a>HTML 圖像是通過 <img> 標簽進行定義的。
<img src="http://www.861lll.com" width="104" height="142" />*請認真填寫需求信息，我們會在24小時內與您取得聯系。
