排版標簽:
- <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>
效果演示:
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。
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)頁效果如下:
上圖顯示,瀏覽器不允許你這么做氯析,我們使用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>
運行效果:
屬性介紹:
- 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
效果如下:
<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>標簽幾乎用不著萝挤。 效果演示: