整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難，主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時(shí)常用的HTML標(biāo)簽。
HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標(biāo)簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內(nèi)容不會(huì)顯示在瀏覽器的。 -->
<head>
<!-- 設(shè)置字符集，如果字符集不對(duì)，可能導(dǎo)致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關(guān)標(biāo)簽，title定義文檔的標(biāo)題,百度建議一般不要超過32位,meta定義頁面關(guān)鍵詞和頁面的描述-->
<title>網(wǎng)頁標(biāo)題</title>
<meta name="keywords" content="PHP程序員,技術(shù)博客,個(gè)人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個(gè)優(yōu)秀的個(gè)人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學(xué)習(xí)，PHP開發(fā)與編程，Web前端開發(fā)，MySQL學(xué)習(xí)和教程，NoSQL數(shù)據(jù)庫教程以及個(gè)人的人生經(jīng)歷和觀點(diǎn)。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->
<body>
</body>
</html>
a、布局標(biāo)簽
div標(biāo)簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨(dú)立的、不同的部分，主要用于布局。
aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
header標(biāo)簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
footer 標(biāo)簽定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
article標(biāo)簽規(guī)定文章獨(dú)立的其他內(nèi)容，比如：標(biāo)題、內(nèi)容、評(píng)論，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
b、文本標(biāo)簽
h1-h6標(biāo)簽可定義標(biāo)題
p標(biāo)簽定義段落
b/strong標(biāo)簽加粗
em標(biāo)簽來表示強(qiáng)調(diào)的文本，斜體
strong標(biāo)簽表示重要文本
u標(biāo)簽下劃線
s標(biāo)簽刪除線
br標(biāo)簽表示回車換行
hr標(biāo)簽表示水平線
span標(biāo)簽被用來組合文檔中的行內(nèi)元素。
blockquote標(biāo)簽表示塊引用
pre標(biāo)簽可定義預(yù)格式化的文本，保持原有格式的一種標(biāo)簽。
sub標(biāo)簽下標(biāo)，
sup>標(biāo)簽上標(biāo)
表示一個(gè)空格
©表示版權(quán)符
<表示<
>表示>
c、a標(biāo)簽定義超鏈接，指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點(diǎn)，可以在當(dāng)前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標(biāo)簽
img標(biāo)簽主要在網(wǎng)頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會(huì)變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時(shí)候顯示" width="圖片寬度" height="高度" border="0" />
audio標(biāo)簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>
video標(biāo)簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>
e、序列化標(biāo)簽
ul和li無序列表標(biāo)簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標(biāo)簽，可以使用type屬性規(guī)定有序列表符號(hào)的類型。1 按數(shù)字有序排列，為默認(rèn)值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標(biāo)簽定義了定義列表（definition list），dl標(biāo)簽用于結(jié)合 dt（定義列表中的項(xiàng)目）和 dd（描述列表中的項(xiàng)目）。
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器 ... ...</dd>
</dl>
f、表格標(biāo)簽
table標(biāo)簽和tr標(biāo)簽，th標(biāo)簽和td標(biāo)簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標(biāo)題</th>
<th>標(biāo)題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標(biāo)簽
form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對(duì)其進(jìn)行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標(biāo)簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會(huì)被掩碼（顯示為星號(hào)或原點(diǎn)）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時(shí)，form表單一定要設(shè)置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標(biāo)簽為input元素定義標(biāo)注，如果您點(diǎn)擊label元素文本，就會(huì)觸發(fā)此input控件。
textarea標(biāo)簽，設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標(biāo)簽定義一個(gè)按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標(biāo)簽和option標(biāo)簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標(biāo)單擊，可以連續(xù)選擇多個(gè)選擇，CTRL+鼠標(biāo)點(diǎn)擊，可以點(diǎn)擊多個(gè)。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的，建議HTML標(biāo)簽和屬性都小寫，屬性值必須用雙引號(hào)包圍。
b、HTML標(biāo)簽都是以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽，比如：p標(biāo)簽、div標(biāo)簽，也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽，稱為單標(biāo)簽，比如：hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性，文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。
c、HTML標(biāo)簽之間盡量縮進(jìn)與換行，每行代碼不要過長，方便閱讀和維護(hù)。
d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽，p標(biāo)簽嵌套div標(biāo)簽。
e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽（http://www.leixuesong.cn/2045）
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁面可以包含多個(gè)表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁面放在這
</BODY>
</HTML>在包含表單的HTML頁面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來說明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個(gè)常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準(zhǔn)確訪問其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE = "TEXT" NAME="text">提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。
示例：一個(gè)完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>可以在一個(gè)HTML頁面中包含多個(gè)表單，注意下一個(gè)表單的FORM開始之前需要結(jié)束前一個(gè)FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說明 |
off | 禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。
<select name="" multipile size="">options go here</select>name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個(gè)選項(xiàng)來選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options><input type="hidden" name="text"value=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語言文本 .html,.html text/html
普通文本 ：txt text/plain
word文檔：application/msword
RTF文本 ：rtf application/rtf
GIF圖形 ：gif image/gif
JPEG圖形 ：jpeg,
jpg： image/jpeg
au聲音文件：au audio/basic
MIDI音樂文件 ：mid,.midi audio/midi,audio/x-midi
RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">常扒別人網(wǎng)站文章的坑們；我是指那種批量式采集的壓根不看內(nèi)容的；少不了都會(huì)用到刪除html標(biāo)簽的函數(shù)；這里介紹3種不同用途上的方法；
$str='<div><p>這里是p標(biāo)簽</p><img src="" alt="這里是img標(biāo)簽"><a href="">這里是a標(biāo)簽</a><br></div>';1：刪除全部或者保留指定html標(biāo)簽php自帶的函數(shù)strip_tags即可滿足要求，使用方法：strip_tags(string,allow)；string：需要處理的字符串；allow：需要保留的指定標(biāo)簽，可以寫多個(gè)；
echo strip_tags($str,'<p><a>');//輸出：<p>這里是p標(biāo)簽</p><a href="">這里是a標(biāo)簽</a>此函數(shù)的優(yōu)點(diǎn)是簡單粗暴；但是缺點(diǎn)也很明顯；如果有一大堆標(biāo)簽；而我只是想刪除指定的某一個(gè)；那要寫很多需要保留的標(biāo)簽；所以有了第二個(gè)方法；
2：刪除指定的html標(biāo)簽使用方法：strip_html_tags($tags,$str)；$tags：需要?jiǎng)h除的標(biāo)簽(數(shù)組格式)$str：需要處理的字符串；
function strip_html_tags($tags,$str){
$html=array();
foreach ($tags as $tag) {
$html[]="/(<(?:\/".$tag."|".$tag.")[^>]*>)/i";
}
$data=preg_replace($html, '', $str);
return $data;
}
echo strip_html_tags(array('p','img'),$str);
//輸出：<div>這里是p標(biāo)簽<a href="">這里是a標(biāo)簽</a><br></div>;3：刪除標(biāo)簽和標(biāo)簽的內(nèi)容使用方法：strip_html_tags($tags,$str)；$tags：需要?jiǎng)h除的標(biāo)簽(數(shù)組格式)$str：需要處理的字符串；
function strip_html_tags($tags,$str){
$html=array();
foreach ($tags as $tag) {
$html[]='/<'.$tag.'.*?>[\s|\S]*?<\/'.$tag.'>/';
$html[]='/<'.$tag.'.*?>/';
}
$data=preg_replace($html,'',$str);
return $data;
}
echo strip_html_tags(array('a','img'),$str);
//輸出<div><p>這里是p標(biāo)簽</p><br></div>很多網(wǎng)站文章里面會(huì)帶上網(wǎng)站名和鏈接；這個(gè)函數(shù)就是專治這種；別拿這個(gè)函數(shù)采集本站啊；不然保證不打死你；4：終極函數(shù)，刪除指定標(biāo)簽；刪除或者保留標(biāo)簽內(nèi)的內(nèi)容；使用方法：strip_html_tags($tags,$str,$content)；$tags：需要?jiǎng)h除的標(biāo)簽(數(shù)組格式)$str：需要處理的字符串；$ontent：是否刪除標(biāo)簽內(nèi)的內(nèi)容 0保留內(nèi)容 1不保留內(nèi)容
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
