整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML是一種用來(lái)描述網(wǎng)頁(yè)的標(biāo)記性語(yǔ)言。學(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)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁(yè)面的元信息等等。以下標(biāo)簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內(nèi)容不會(huì)顯示在瀏覽器的。 -->
<head>
<!-- 設(shè)置字符集，如果字符集不對(duì)，可能導(dǎo)致亂碼。一般建議utf-8國(guó)際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關(guān)標(biāo)簽，title定義文檔的標(biāo)題,百度建議一般不要超過(guò)32位,meta定義頁(yè)面關(guān)鍵詞和頁(yè)面的描述-->
<title>網(wǎng)頁(yè)標(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ù)庫(kù)教程以及個(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)簽定義頁(yè)面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
footer 標(biāo)簽定義文檔或節(jié)的頁(yè)腳，通常包含文檔的作者、版權(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)簽來(lái)表示強(qiáng)調(diào)的文本，斜體
strong標(biāo)簽表示重要文本
u標(biāo)簽下劃線
s標(biāo)簽刪除線
br標(biāo)簽表示回車換行
hr標(biāo)簽表示水平線
span標(biāo)簽被用來(lái)組合文檔中的行內(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)簽定義超鏈接，指定頁(yè)面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁(yè)面內(nèi)部id錨點(diǎn)，可以在當(dāng)前頁(yè)面打開，新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標(biāo)簽
img標(biāo)簽主要在網(wǎng)頁(yè)中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會(huì)變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時(shí)候顯示" width="圖片寬度" height="高度" border="0" />
audio標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。<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無(wú)序列表標(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>用來(lái)計(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ù)庫(kù)
<span style="color: #ff0000;">注：checked="checked"可以簡(jiǎn)寫成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"可簡(jiǎn)寫成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)與換行，每行代碼不要過(guò)長(zhǎng)，方便閱讀和維護(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播放器。
來(lái)源：PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽（http://www.leixuesong.cn/2045）
段落是通過(guò) <p> 標(biāo)簽定義的。
實(shí)際例子
<p>This is a paragraph</p> <p>This is another paragraph</p>
注釋：瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。（<p> 是塊級(jí)元素）
提示：使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它！（但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。）
不要忘記結(jié)束標(biāo)簽
即使忘了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地將 HTML 顯示出來(lái)：
實(shí)際例子
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多數(shù)瀏覽器中都沒(méi)問(wèn)題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生意想不到的結(jié)果和錯(cuò)誤。
注釋：在未來(lái)的 HTML 版本中，不允許省略結(jié)束標(biāo)簽。（現(xiàn)在開發(fā)已經(jīng)不允許了）
提示：通過(guò)結(jié)束標(biāo)簽來(lái)關(guān)閉 HTML 是一種經(jīng)得起未來(lái)考驗(yàn)的 HTML 編寫方法。清楚地標(biāo)記某個(gè)元素在何處開始，并在何處結(jié)束，不論對(duì)您還是對(duì)瀏覽器來(lái)說(shuō)，都會(huì)使代碼更容易理解。
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br /> 標(biāo)簽：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義，因此它沒(méi)有結(jié)束標(biāo)簽。
<br> 還是 <br />
你會(huì)發(fā)現(xiàn) <br> 與 <br /> 很相似。
在 XHTML、XML 以及未來(lái)的 HTML 版本中，不允許使用沒(méi)有結(jié)束標(biāo)簽（閉合標(biāo)簽）的 HTML 元素。
即使 <br> 在所有瀏覽器中的顯示都沒(méi)有問(wèn)題，使用 <br /> 也是更長(zhǎng)遠(yuǎn)的保障。
我們無(wú)法確定 HTML 被顯示的確切效果。屏幕的大小，以及對(duì)窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對(duì)于 HTML，您無(wú)法通過(guò)在 HTML 代碼中添加額外的空格或換行來(lái)改變輸出的效果。
當(dāng)顯示頁(yè)面時(shí)，瀏覽器會(huì)移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格。
標(biāo)簽 描述
<p> 定義段落。
<br /> 插入單個(gè)折行（換行）。
如果您覺得有用，麻煩點(diǎn)個(gè)贊，支持一下！！
歡迎提問(wèn)與建議。
標(biāo)簽是默認(rèn)是自動(dòng)換行的，因此設(shè)置好寬度之后，能夠較好的實(shí)現(xiàn)效果，但是最近的項(xiàng)目中發(fā)現(xiàn)，使用ajax加載數(shù)據(jù)之后，p標(biāo)簽內(nèi)的內(nèi)容沒(méi)有換行，導(dǎo)致布局錯(cuò)亂，于是嘗試著使用換行樣式，雖然解決了問(wèn)題，但是并沒(méi)有發(fā)現(xiàn)本質(zhì)原因，本質(zhì)在于，我當(dāng)時(shí)獲取的數(shù)據(jù)是一長(zhǎng)串的數(shù)字，瀏覽器應(yīng)該是對(duì)數(shù)字和英文單詞處理方式相近，不會(huì)截?cái)唷?
先給出各種方式，再具體介紹每一個(gè)屬性。
強(qiáng)制不換行
p { white-space:nowrap; }
自動(dòng)換行
p { word-wrap:break-word; }
強(qiáng)制英文單詞斷行
p { word-break:break-all; }
*注意：設(shè)置強(qiáng)制將英文單詞斷行，需要將行內(nèi)元素設(shè)置為塊級(jí)元素。
超出顯示省略號(hào)
p{text-overflow:ellipsis;overflow:hidden;}
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 屬性設(shè)置如何處理元素內(nèi)的空白
normal 默認(rèn)。空白會(huì)被瀏覽器忽略。
pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。
nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止。
pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
word-wrap: normal|break-word;
word-wrap 屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。
normal: 只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理)
break-word:在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行
word-break: normal|break-all|keep-all;
word-break 屬性用來(lái)標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句。
normal：使用瀏覽器默認(rèn)的換行規(guī)則。
break-all:允許再單詞內(nèi)換行
keep-all:只能在半角空格或連字符處換行
舉例看起區(qū)別：
<!doctype html>
<html lang="en">
<head>
<!--網(wǎng)站編碼格式，UTF-8 國(guó)際編碼，GBK或 gb2312 中文編碼-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二">
<meta name="Description" content="網(wǎng)站描述內(nèi)容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<style>
.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}
/* 強(qiáng)制不換行 */
.nowrap{white-space:nowrap;}
/* 允許單詞內(nèi)斷句，首先會(huì)嘗試挪到下一行，看看下一行的寬度夠不夠，
不夠的話就進(jìn)行單詞內(nèi)的斷句 */
.breakword{word-wrap: break-word;}
/* 斷句時(shí)，不會(huì)把長(zhǎng)單詞挪到下一行，而是直接進(jìn)行單詞內(nèi)的斷句 */
.breakAll{word-break:break-all;}
/* 超出部分顯示省略號(hào) */
.ellipsis{text-overflow:ellipsis;overflow:hidden;}
</style>
</head>
<body>
<div class = "word">
<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>
<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
</body>
</html>
效果如下：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
