Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
例
以下代碼標記了一個段落:
<p>這是一個段落。</p>
瀏覽器支持
目前大多數瀏覽器支持 <p>標簽。
標簽定義及使用說明
<p> 標簽定義段落。
<p>元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。
在HTML 4.01 與 HTML5中的差異
HTML 4.01中標簽的 align 屬性已經廢棄,HTML5不支持該屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
align | leftrightcenterjustify | HTML5不支持。 HTML 4.01已廢棄。 不贊成使用。請使用樣式取代它。 規定段落中文本的對齊方式。 |
全局屬性
<p> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。
事件屬性
<p> 標簽支持所有 HTML事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
lt;hr>水平線
<hr size="9" /> 水平線(設定大小,單位:像素)
<hr width="80%" /> 水平線(設定寬度,單位:像素或百分比)
<hr color="#ff0000" /> 水平線對齊方式
<hr align="left" /> 水平線水平位置
<hr noshade /> 去掉水平線的陰影
align屬性值:center(默認值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 換行
<p></p> 標簽定義段落
<p align=""></p>將段落按左、中、右對齊;
align屬性值:left(默認值) right center justify
注意:
<h1>...<h6>標題標記與<p>段落標記都只有一個屬性align
<pre></pre> 定義預格式化的文本
<blockquote></blockquote> 設置段落縮進(可以縮進5個字符)
手冊上沒有的標記
<xmp></xmp> 忽略HTML標記
<nobr>…</nobr> 禁止換行
<wbr> 指定軟換行(或單詞換行),用在nobr標記中,即使用 <nobr> 禁止了換行,使用 <wbr> 仍然可以換行
<nobr>中華人民共和國上海市<wbr>黃浦區</wbr></nobr>
天我們來聊一聊CSS文本兩端對齊。
事情的起因是這樣的,在Review一位同事做的頁面時,發現好幾處字符之間寫了很多空格,于是問他為什么這么做,他說設計要求這幾個文本的呈現寬度必須一致,但它們的字符個數又不同,所以就在字符數少的文本中添加空格從而達到文本兩端對齊(字符均勻分布)的效果,于是我對他表示了侮辱性的贊美。
用添加空格符的方式實現文本兩端對齊,除了不夠優雅,容易被羞辱之外,還有其他三個問題:
1. 不同的瀏覽器,不同的移動設備,對空格符的展示寬度是有細微差別的,一個空格看不出影響,但是多個空格就無法保證一致了,很有可能出現沒對齊或者折行的情況。
2. 任何頁面都避免不了修改,如果文本需要更換,并且更換后字數發生變化,這將意味著之前的空格數量需要重新調整,非常不利于維護。
3. 某些頁面上的文本,用戶可能會去復制,但復制下來后發現含有很多空格符,仍需要二次編輯。
因此在日常開發中要避免使用空格符來實現兩端對齊,而應該使用標準的CSS文本對齊屬性來解決。
這個屬性大家經常用到的值有三個:
left:左對齊
right:右對齊
center:居中對齊
它還有一個屬性值:justify,表示文本兩端對齊,也就是讓文本在固定寬度內平均分布,使兩邊不會出現空白。那么用這個屬性是否就能很好的實現文本兩端對齊呢?
通過測試發現,單行文本通過text-align:justify; 并不能實現兩端對齊,為什么會出現這個情況?我們需要先了解一點點排版知識。
傳統書刊的排版印刷對于整個自然段通常采用兩端對齊的方式,這樣就保證了排版的美觀和良好的閱讀體驗。但是自然段的最后一行文字是左對齊的,因為最后一行文本意味著段落的結束,沒有必要繼續兩端對齊了。
細心的朋友應該已經猜到了,在我們測試中,文本只有一行,意味著它也是最后一行,而CSS的文本對齊方式也遵循最后一行文本默認左對齊的原則,因此不能實現兩端對齊。
好在CSS為我們提供了另外一個屬性:text-align-last,這個屬性用來額外設置段落最后一行文本的對齊方式,因此對于單行文本,我們只需要設置:text-align-last: justify;就可以了,親測有效。
TIPS:單行文本要想實現文本兩端對齊,除了上面說的方式,一定別忘了這個文本需要一個確定的寬度,不設置寬度,文本也就不存在兩端。因此這個單行文本不能是行內布局,而應該是塊級或者是行內塊級布局。
好景不長,用上面的方式實現了文本兩端對齊后,發現它只是在PC上有效,但是在IOS的系統瀏覽器里毫無效果,最后發現在IOS上不支持text-align-last這個屬性,因此這個方式并不穩妥。
那么如何解決IOS的兼容問題呢?
著手點只有一個,那就是如何保證單行文本對于CSS來說并不是最后一行?這句話看似很奇怪,其實解決辦法很簡單,只需要給這個單行文本添加一個偽元素after即可。
someClass: after { content: “”}
由于添加了偽元素,單行文本不再是最后一行,偽元素才是, 同時偽元素的內容為空字符串,并不會對顯示造成影響,因此完美解決了這個問題。
注意:偽元素after不僅要設置content,還要添加 width:100%; 和 display:inline-block; 這是因為:如果不設置寬度,偽元素內容并不會成為第二行,如果display設置成block,又造成了偽元素變成了另一個塊級元素,所以要設置為inline-block。
最終的代碼:
someClass {text-align:justify; width:300px;}
someClass: after { content: “”; width:100%; display:inline-block;}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。