整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果想開發(fā)一個(gè)網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，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)頁面的元信息。
link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。
title：頁面標(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>
前端頁面顯示的效果如下圖：
常用的塊級(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)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區(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)頁時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。
dd 表示奇數(shù)
<from action＝"_"></from> （表單)
text-indent: 2em （首行縮進(jìn))
float:
left；（向左浮動(dòng)）（通常用于使列表有豎排變?yōu)闄M排）
right；（向右浮動(dòng)）
clear:
none；（默認(rèn)值，兩邊都準(zhǔn)予有浮動(dòng)對(duì)象）
left；（不準(zhǔn)許左邊有浮動(dòng)對(duì)象）
right；（不準(zhǔn)右邊有浮動(dòng)對(duì)象）
both；（不準(zhǔn)予有浮動(dòng)對(duì)象）
list–style:none； （列表項(xiàng)前無符號(hào)）
padding: __px __px （內(nèi)邊距）
整體內(nèi)容（下移動(dòng)）（右移動(dòng)）
<h數(shù)字></h數(shù)字> （指標(biāo)題）
<p>內(nèi)容</p> （段落）
<a href＝"#">鏈接</a> （鏈接)
<cite>內(nèi)容</cite> （字體傾斜）
<del>內(nèi)容</del> （在內(nèi)容上加橫線）
<br/> （換行）
border : px （邊框)
solid （邊框?yàn)閷?shí)線）
dashed （邊框?yàn)樘摼€）
dotted （圓點(diǎn)邊框）
顏色直接添加
border-radius :__px （圓角邊框）
半徑
solid （固體）
font-size : px （文字大小）
font–family:name （文字字體）
font–weight: （文字粗細(xì)）
100–900
normal（400）
bold（700）等同于<b></b>
bolder與lighter表示相對(duì)粗細(xì)
font–style: （斜體）
normal 默認(rèn)效果
italic 斜體字
oblique 傾斜的字體
text-decoration: （劃線）
none （默認(rèn)效果）
underline 下劃線
overline 上劃線
line–through 貫穿線
display: （顯示）
inline–block （在一條直線上）
height: px （高）
line–height: px （邊界的高）
width: px （寬度）
margin: （元素外邊距）
border radius: px （邊界半徑）
margin–left:__px （元素外左邊距）
margin–right:__px （元素外右邊距）
text-align: 水平對(duì)齊
left 向左對(duì)齊
right 右
center 中
justify 應(yīng)用兩端對(duì)齊
background/*背景*/: 顏色名;
color/*顏色*/:■#fff；
margin-top/*頂部邊緣*/:1px；
margin-right/*向右的間距*/:5px；
text-decoration/*文體裝飾*/:none;
這些標(biāo)記用于將頁面分成多個(gè)部分。熟練地掌握這些標(biāo)記將意味著構(gòu)建出具有良好的結(jié)構(gòu)和布局的頁面，使其更加友好和易于閱讀。
div標(biāo)記定義了HTML文件中的一個(gè)部分或分區(qū)。它通常包含需要組合在一起的標(biāo)題、段落、表格或其他元素。通過設(shè)置<div class="">與css一起使用來設(shè)置網(wǎng)頁某個(gè)部分的顯示。
p標(biāo)記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達(dá)到屏幕邊緣就會(huì)自動(dòng)折到下一行。當(dāng)另一個(gè)<p>標(biāo)記用于開始下一個(gè)段落時(shí)，瀏覽器將在段落之間添加一些空白。p標(biāo)記具有以下屬性：
span標(biāo)記用于將內(nèi)聯(lián)元素組合在一起，例如句子中的幾個(gè)單詞，以便僅對(duì)這些單詞應(yīng)用css樣式。span標(biāo)記可以在div和p標(biāo)記中使用，因?yàn)樗粫?huì)創(chuàng)建新的塊。
br標(biāo)記相當(dāng)于一個(gè)回車符，用于在新行開始文本。一行中的多個(gè)<br>標(biāo)記將在網(wǎng)頁上創(chuàng)建一個(gè)很大的垂直空間。
hr標(biāo)記通常被稱為HTML行分隔符標(biāo)記，創(chuàng)建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：
出于某種原因，你希望文本在一條直線上繼續(xù)，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動(dòng)以查看行的其余部分，這是一種糟糕的設(shè)計(jì)。
下面是以上標(biāo)記的示例：
瀏覽器顯示內(nèi)容如下所示：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
