TML是一種用來描述網頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況,整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集,如果字符集不對,可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽,title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習,PHP開發與編程,Web前端開發,MySQL學習和教程,NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分,所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節(division/section),可以把文檔分割為獨立的、不同的部分,主要用于布局。
aside標簽的內容可用作文章的側欄,<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等,<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容,比如:標題、內容、評論,<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本,斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本,保持原有格式的一種標簽。
sub標簽下標,
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接,指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點,可以在當前頁面打開,新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設置,否則圖像會變形。
<img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽,可以使用type屬性規定有序列表符號的類型。1 按數字有序排列,為默認值,(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標簽定義了定義列表(definition list),dl標簽用于結合 dt(定義列表中的項目)和 dd(描述列表中的項目)。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽,th標簽和td標簽,合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</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、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼,需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼,輸入的字符會被掩碼(顯示為星號或原點)
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單,上傳文件時,form表單一定要設置為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" />數據庫
<span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注,如果您點擊label元素文本,就會觸發此input控件。
textarea標簽,設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框,shift加鼠標單擊,可以連續選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。
<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標簽和屬性是不區分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始,以結束標簽終止。大部分HTML標簽都是成對出現的,稱為雙標簽,比如:p標簽、div標簽,也有的HTML標簽在開始標簽中結束的標簽,稱為單標簽,比如:hr標簽、br標簽。大多數 HTML 元素可擁有屬性,文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽,p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器。
來源:PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽(http://www.leixuesong.cn/2045)
多數PHP程序都使用HTML表單從用戶那里獲取數據并計算結果。
首先創造一個基本的HTML大綱,包含表單控件;然后將控件進行合并(HTML表單必須包括一個提交按鈕,用戶單擊它可以將表單數據發送到服務器。)一個單獨的HTML頁面可以包含多個表單。
包含表單的HTML結構和和普通的HTML結構一樣。
<HTML>
<HEAD>
<TITLE>標題放在這</TITLE>
</HEAD>
<BODY>
表單頁面放在這
</BODY>
</HTML>
在包含表單的HTML頁面中可以使用任何HTML標簽。基本的表單使用FROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url,該腳本可以收集通過表單收集的數據,可以是絕對路徑或者相對路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>
兩個常用的基本控件:文本框和提交按鈕。
文本框:允許用戶鍵入信息以發送給PHP腳本。NAME屬性為文本提供名稱,PHP腳本可以通過名稱準確訪問其內容,因此它應該是唯一的且符合PHP變量命名規則(但不需要$符號),單標簽。VALUE屬性指明出現在提交按鈕上面的標題。創建方式如下:
<INPUT TYPE = "TEXT" NAME="text">
提交按鈕:允許用戶將一個表單的內容發送到服務器,一個HTML表單對應應該有一個提交按鈕。
示例:一個完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標題</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>
可以在一個HTML頁面中包含多個表單,注意下一個表單的FORM開始之前需要結束前一個FORM表單。
<HTML>
<HEAD>
<TITLE>標題</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屬性用于設置文本框的可視大小;MAXLENGTH指明用戶鍵入字符的最大長度;VALUE給出了一個最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">
文本區域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區域內可以看到的文本行數,充滿時會滾動。COLS屬性指明可見文本列數與行數類似。WRAP屬性指明文本區域內單詞換行的方式,可以指定如下值。該標簽為雙標簽。
值 | 說明 |
off | 禁止單詞換行但用戶可以輸入換行符強制換行 |
virtual/soft | 各行顯示為換行,但是換行并沒有被發送到服務器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">
創建密碼框的語法與文本框相同,但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">
取兩個值中的一個,即二選一。TYPE屬性是必須的,checked屬性出現,該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發送到服務器的值,默認發送on值。法如下:
<input type="checkbox" name="" checked value="">
語法與復選框屬性含義相同,但是TYPE屬性的值必須是RADIO,NAME屬性是必須的。
<input type="radio" name="" checked value="">
用戶可以選擇一個或者多個選項,它是一個滾動菜單。
<select name="" multipile size="">options go here</select>
name屬性是必須的,multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options>
<input type="hidden" name="text"value="">
<input type="FILE" name="name" accept="time" value="text">
其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下:
超文本標記語言文本 .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">
常扒別人網站文章的坑們;我是指那種批量式采集的壓根不看內容的;少不了都會用到刪除html標簽的函數;這里介紹3種不同用途上的方法;
$str='<div><p>這里是p標簽</p><img src="" alt="這里是img標簽"><a href="">這里是a標簽</a><br></div>';
1:刪除全部或者保留指定html標簽php自帶的函數strip_tags即可滿足要求,使用方法:strip_tags(string,allow);string:需要處理的字符串;allow:需要保留的指定標簽,可以寫多個;
echo strip_tags($str,'<p><a>');//輸出:<p>這里是p標簽</p><a href="">這里是a標簽</a>
此函數的優點是簡單粗暴;但是缺點也很明顯;如果有一大堆標簽;而我只是想刪除指定的某一個;那要寫很多需要保留的標簽;所以有了第二個方法;
2:刪除指定的html標簽使用方法:strip_html_tags($tags,$str);$tags:需要刪除的標簽(數組格式)$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標簽<a href="">這里是a標簽</a><br></div>;
3:刪除標簽和標簽的內容使用方法:strip_html_tags($tags,$str);$tags:需要刪除的標簽(數組格式)$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標簽</p><br></div>
很多網站文章里面會帶上網站名和鏈接;這個函數就是專治這種;別拿這個函數采集本站啊;不然保證不打死你;4:終極函數,刪除指定標簽;刪除或者保留標簽內的內容;使用方法:strip_html_tags($tags,$str,$content);$tags:需要刪除的標簽(數組格式)$str:需要處理的字符串;$ontent:是否刪除標簽內的內容 0保留內容 1不保留內容
*請認真填寫需求信息,我們會在24小時內與您取得聯系。