新手入門前端穴豫,應該知道HTML框架排版標記標簽大全

排版標簽:

  • <h1>
  • <p>
  • <hr />
  • <br />
  • <div>
  • <span>
  • <center>
  • <pre>

下面來詳細介紹一下排版標簽。

標題標簽

標題使用<h1>至<h6>標簽進行定義秤涩。<h1>定義最大的標題筐眷,<h6>定義最小的標題。具有align屬性照棋,屬性值可以是:left武翎、center、right符隙。

代碼舉例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>H1:千古壹號垫毙,永不止步</h1>
    <h2>H3:千古壹號,永不止步</h2>
    <h3>H3:千古壹號丽蝎,永不止步</h3>
    <h4>H4:千古壹號征峦,永不止步</h4>
    <h5>H5:千古壹號消请,永不止步</h5>
    <h6>H6:千古壹號,永不止步</h6>
</body>
</html>

效果演示:

image

HTML 注釋

HTML 注釋的格式如下:

<!-- 我是 html 注釋  -->

段落標簽<p>

段落蛉加,是英語“paragraph“縮寫针饥。

作用:可以把 HTML 文檔分割為若干段落需频。在網(wǎng)頁中如果要把文字有條理地顯示出來,離不開段落標簽苞七。就如同我們平常寫文章一樣,整個網(wǎng)頁也可以分為若干個段落蹂风。

代碼舉例:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

屬性:

  • align="屬性值":對齊方式卢厂。屬性值包括left center right。
image

HTML標簽是分等級的惠啄,HTML將所有的標簽分為兩種:

  • 文本級標簽:p慎恒、span、a撵渡、b融柬、i、u趋距、em丹鸿。文本級標簽里只能放文字、圖片、表單元素廊敌。(a標簽里不能放a和input)
  • 容器級標簽:div铜跑、h系列、li骡澈、dt锅纺、dd。容器級標簽里可以放置任何東西肋殴。

從學習p的第一天開始囤锉,就要牢牢記住:p標簽是一個文本級標簽护锤,p里面只能放文字官地、圖片、表單元素烙懦。其他的一律不能放驱入。

錯誤寫法:(嘗試把 h 放到 p 里)

<p>
        我是一個小段落
        <h1>我是一級標題</h1>
    </p>

網(wǎng)頁效果如下:

image

上圖顯示,瀏覽器不允許你這么做氯析,我們使用Chrome的F12審查元素發(fā)現(xiàn)亏较,瀏覽器自己把p封閉掉了,不讓你去包裹h1掩缓。

PS:Chrome瀏覽器是HTML5支持度最好的瀏覽器雪情。提供了非常好的開發(fā)工具,非常適合我們開發(fā)人員使用你辣。審查元素功能的快捷鍵是F12巡通。

水平線標簽<hr />

horizontal 單詞的發(fā)音:[?h?r??z?ntl]尘执。

水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。在網(wǎng)頁中常潮獯铮看到一些水平線將段落與段落之間隔開正卧,使得文檔結(jié)構(gòu)清晰,層次分明跪解。

代碼舉例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>自古情深留不住</p>
    <hr />
    <p>總是套路得人心</p>
</body>
</html>

運行效果:

image

屬性介紹:

  • align="屬性值":設(shè)定線條置放位置炉旷。屬性值可選擇:left right center。
  • size="2" :設(shè)定線條粗細叉讥。以像素為單位窘行,內(nèi)定為2。
  • width="500"或width="70%":設(shè)定線條長度图仓」蘅可以是絕對值(單位是像素)或相對值。如果設(shè)置為相對值的話救崔,內(nèi)定為100%惶看。
  • color="#0000FF":設(shè)置線條顏色。
  • noshade:不要陰影六孵,即設(shè)定線條為平面顯示纬黎。若沒有這個屬性則表明線條具陰影或立體。

屬性效果演示:

[圖片上傳失敗...(image-3bc03a-1604587691798)]

換行標簽<br />

如果希望某段文本強制換行顯示劫窒,就需要使用換行標簽本今。

This <br/> is a para<br/>graph with line breaks

效果如下:

image

<div>和<span>標簽

div和span是非常重要的標簽,div的語義是division“分割”主巍; span的語義就是span“范圍冠息、跨度”。想必你應該聽說過“div + css”布局孕索。

div和span的介紹

  • div標簽:可以把標簽中的內(nèi)容分割為獨立的區(qū)塊逛艰。必須單獨占據(jù)一行。
  • span標簽:和div的作用一致搞旭,但不換行瓮孙。

代碼舉例:

[圖片上傳失敗...(image-283dc2-1604587691798)]

div標簽的屬性:

  • align="屬性值":設(shè)置塊兒的位置。屬性值可選擇:left选脊、right杭抠、 center。

div和span的區(qū)別

<span>和<div>唯一的區(qū)別在于:<span>是不換行的恳啥,而<div>是換行的偏灿。

如果單獨在網(wǎng)頁中插入這兩個元素,不會對頁面產(chǎn)生任何的影響钝的。這兩個元素是專門為定義CSS樣式而生的翁垂∶猓或者說,DIV+CSS來實現(xiàn)各種樣式沿猜。

div在瀏覽器中枚荣,默認是不會增加任何的效果的,但是語義變了啼肩,div中的所有元素是一個小區(qū)域橄妆。 div標簽是一個容器級標簽,里面什么都能放祈坠,甚至可以放div自己害碾。

span也是表達“小區(qū)域、小跨度”的標簽赦拘,但只是一個文本級的標簽慌随。 就是說,span里面只能放置文字躺同、圖片阁猜、表單元素。 span里面不能放p蹋艺、h剃袍、ul、dl车海、ol、div隘击。

span舉例:

<p>
    簡介簡介簡介簡介簡介簡介簡介簡介
    <span>
        <a href="">詳細信息</a>
        <a href="">購買</a>
    </span>
</p>

div舉例:

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="guanggao"></div>
    <div class="dongxi"></div>
</div>
<div class="footer"></div>

我們親切地稱這種模式叫做“div+css”:div標簽負責布局侍芝、結(jié)構(gòu)、分塊埋同,css負責樣式州叠。

內(nèi)容居中標簽 <center>

此時center代表是一個標簽,而不是一個屬性值了凶赁。只要是在這個標簽里面的內(nèi)容咧栗,都會居于瀏覽器的中間。 效果演示:

[圖片上傳失敗...(image-2cd931-1604587691798)]

到了HTML5里面虱肄,center標簽不建議使用致板,建議使用css布局來實現(xiàn)。

預定義(預格式化)標簽<pre>

含義:將保留標簽內(nèi)部所有的空白字符(空格咏窿、換行符)斟或,原封不動地輸出結(jié)果(告訴瀏覽器不要忽略空格和空行)。

說明:真正排網(wǎng)頁過程中集嵌,<pre>標簽幾乎用不著萝挤。 效果演示:

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末御毅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子怜珍,更是在濱河造成了極大的恐慌端蛆,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酥泛,死亡現(xiàn)場離奇詭異今豆,居然都是意外死亡,警方通過查閱死者的電腦和手機揭璃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門晚凿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瘦馍,你說我怎么就攤上這事歼秽。” “怎么了情组?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵燥筷,是天一觀的道長。 經(jīng)常有香客問我院崇,道長肆氓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任底瓣,我火速辦了婚禮谢揪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘捐凭。我一直安慰自己拨扶,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布茁肠。 她就那樣靜靜地躺著患民,像睡著了一般。 火紅的嫁衣襯著肌膚如雪垦梆。 梳的紋絲不亂的頭發(fā)上匹颤,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音托猩,去河邊找鬼印蓖。 笑死,一個胖子當著我的面吹牛京腥,可吹牛的內(nèi)容都是我干的另伍。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摆尝!你這毒婦竟也來了温艇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤堕汞,失蹤者是張志新(化名)和其女友劉穎勺爱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讯检,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡琐鲁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了人灼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片围段。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖投放,靈堂內(nèi)的尸體忽然破棺而出奈泪,到底是詐尸還是另有隱情,我是刑警寧澤灸芳,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布涝桅,位于F島的核電站,受9級特大地震影響烙样,放射性物質(zhì)發(fā)生泄漏冯遂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一谒获、第九天 我趴在偏房一處隱蔽的房頂上張望蛤肌。 院中可真熱鬧,春花似錦批狱、人聲如沸裸准。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狼速。三九已至琅锻,卻和暖如春卦停,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背恼蓬。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工惊完, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人处硬。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓小槐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凿跳,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348