HTML-頁面的文本組織

1;段落

p元素的具體功能是作為段落的一個容器,在段落開始處使用p元素的開始標(biāo)記<p>,在段落的結(jié)尾處使用</p>。在默認(rèn)情況下p標(biāo)記會在段落前和后各強制產(chǎn)生一個空行,以提高可讀性,因此沒有進(jìn)行縮進(jìn)的必要。瀏覽器忽略使用鍵盤輸入的任何制表符和多個空格字符。

2;換行符

使用br標(biāo)記來添加換行符,br標(biāo)記會導(dǎo)致瀏覽器在該行上停止輸出文本,并換到頁面上的下一行繼續(xù)輸出。只簡單的在HTML文件中重復(fù)添加多個br標(biāo)記即可進(jìn)行多次換行。

pre是preformat (預(yù)格式化)的簡寫,pre標(biāo)記通常以等寬字體來顯示文本。

3;引用快

blockquote元素用于分隔從其他源引用的內(nèi)容,默認(rèn)情況,該元素將對整個引用的文本的左右兩側(cè)同時進(jìn)行縮進(jìn),在文本的前后分別添加一個空行。不同的瀏覽器,引用文本的左右兩側(cè)的縮進(jìn)不同?!驹赽lockquote元素的內(nèi)容中,可包含br元素或p元素,也可根據(jù)需要添加blockquote元素】

4;Box屬性

Web頁面上的每一個元素都包含在一個框模型中,通過調(diào)整框的維度可格式化頁面上的內(nèi)容,或指定該內(nèi)容與瀏覽器邊界的間距應(yīng)該是多少。

box-sizing屬性設(shè)置為border-box時,整個框的高度和寬度包含內(nèi)容框和內(nèi)邊距值。
box-sizing屬性設(shè)置為content-box時,整個框的高度和寬度不包含邊框和內(nèi)邊距值。
  • 內(nèi)邊距值用padding屬性來設(shè)置(可以分別按top,right,bottom,left來設(shè)置)也可寫為
    blockquote {padding:25px 15px 20px 35px;}
    如果在4條邊上都使用相同的內(nèi)邊距值,代碼可簡寫為p {padding : 25px;}
  • 外邊距值用margin屬性來設(shè)置邊框
    Eg: border-bottom-width:6px border-radius:25px

**5;對齊**
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,190評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,226評論 1 4
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,200評論 0 1
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,391評論 0 8
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,914評論 32 459

友情鏈接更多精彩內(nèi)容