Web前端學習第七課 學會使用html段落標籤和換行標籤

2020-12-23 程式設計師李小牛

1.段落標籤

在瀏覽網頁閱讀文章時,你會發現一篇文章不僅有標題,還有段落,並且一篇文章還不止一個段落。

段落標籤也很簡單,即<p>…</p>。只要把你的文字放在這個標籤之間,就會在網頁上顯示一個段落。你可以多次使用這個標籤將一篇文章分為多個段落。

例如:

<body>

<p>這是第一段文字</p>

<p>這是第二段文字</p>

……..

</body>

顯示網頁的時候,瀏覽器會默認在每個段落前後各添加一個空白行。

2.段落內換行標籤

當你在段落標籤內不使用換行標籤時,你的屏幕有多寬,在瀏覽器中一行文字就顯示多寬。這樣的頁面非常不美觀。所以,你需要將段落分為幾行來顯示。

換行標籤是個空元素,只是為了控制將一段文字分行顯示,換行標記就是<br />,你可以多次使用這個標籤來將段落文字分為多行顯示。

如果你在某行文字後面使用了<br />之後,再次使用該標記,就會產生一個空行。

例如,下面一個段落會分為兩行,第一個<br />用於換行,第二個<br />用於產生一個空行。

<p>

這是第一行文字

<br />

<br />

這是第二行文字

</p>

3.總結

(1)如果你想標記一篇文章的標題,請使用<h1>---<h6>標籤

(2)如果你想標記一個段落,請使用<p>標籤,它是單詞paragraph(段落)的縮寫。瀏覽器會在每段文字前後添加一個空白行。

(3)如果你想將一段文字分文多行,請使用<br />標籤,它是單詞break(中斷)的縮寫。瀏覽器遇到此標籤,就會理解為本行到此結束,段落內剩下的文字會在下一行開始顯示。

4.現在來展示一篇純文字格式的文章所用的標記。

<html> 這是網頁開始標籤

<head>

這是網頁頭部標籤,這裡面的內容,不顯示。

</head>

<body>這是網頁主體開始標記

<h1>這是文章標題,使用了一號標題</h1>

<hr />這是水平線,用於分割標題和下面的段落

<p>

這是第一段文字的第一行<br/>

這是第一段文字的第二行<br/>

………..

<p>

<p>這是文章的第二段文字</p>

</body>這是網頁主體結束標籤

</html> 這是網頁結束標記

上一篇文章:Web前端學習第六課,HTML標題標籤和水平線標籤

相關焦點

  • Web前端零基礎之常用標籤
    點擊上方「web前端網頁設計」一鍵關注,更多網頁設計 UI設計 Html div css HTML5+CSS3、JavaScript、JQuery
  • HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤詳解
    本次主要給大家介紹下HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤的用法,用一種相對通俗一點的語言,容易懂的文字讓大家快速掌握html。儘量不用或少用專業術語。以下所寫的內容希望能幫助到大家,供大家在學習HTML中進行參考:
  • 8 HTML標題和段落標籤
    比如百度和搜狗,都有這樣的規則,如果它發現你的頁面上h1標籤對有多個,就不會抓取。當然你在一個頁面中放多個h1也可以,但是不推薦這麼做。段落標籤段落標籤使用<p></p>。p就是paragraph(段落)的首字母。p標籤對默認具備換行的作用,所有的段落都要寫在p標籤對中。
  • Web前端學習第20課,如何為HTML元素編寫CSS樣式表
    例如,下面這行代碼的作用是將 段落元素內的文字顏色設置為綠色,同時將字體大小設置為18 像素。例如,p{color:green; font-size:18px;}。在這個例子中,p 是選擇器,color 和 font-size 是屬性,green 和 18px 是屬性值。說明:請使用花括號{}來包圍聲明。
  • Web前端學習第15課 網頁中的關於顯示內容的其他標標籤
    大家知道,HTML的基本結構有三個標籤:html,head和body。並且大家知道,放在<head>和</head>之間的其他標籤在網頁中不顯示。放在<body>和</body>之間的標籤,在瀏覽器中顯示。
  • Web前端學習第19課,簡單了解CSS層疊樣式表
    在前面的課程中大家已經學習了,HTML和XHTML中的許多常用標籤,從這節課開始學習CSS樣式表。1.為什麼使用樣式表大家通過前面的學習,已經了解了設置一個元素的樣式可以使用如下三種形式:(1) 通過標籤的屬性來設置。例如,設置下面段落字體的顏色屬性樣式為紅色。<p fontcolor=」red」>這是一個段落</p>。
  • HTML標籤分類
    html標籤顯示格式雙標籤和單標籤雙標籤:p段落標籤
  • html的標籤
    html是超文本標記語言,不是一種程式語言.本來瀏覽器讀取的只是文本,通過添加html標記,賦予文檔以一些特定的含義,這些標籤不會像文檔一樣被展示,當瀏覽器讀取到這些標籤的時候,會給文本添加一些特定的樣式.
  • ​前端入門—快速學習HTML
    •HTML 標籤是由尖括號包圍的關鍵詞,比如 < html >•HTML 標籤通常是成對出現的,比如 < b > 和 < /b >•標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤•開始和結束標籤也被稱為開放標籤和閉合標籤 <標籤>內容</標籤>HTML標題•HTML 標題(Heading)是通過< h1 > - &
  • 第二篇:網頁製作基礎教程----HTML標籤
    段落標籤:<p>這裡是一篇關於碼小趣文章</p>換行標籤:<br/>,<hr/>註:<hr/>換行是在其下方會有一條分割線>的區別:行內標籤:內容撐開寬度,不可以通過樣式控制寬和高,它的寬和高隨標籤裡的內容而改變:1、行級標籤的寬度和高度是由標籤內的內容來控制的。
  • 筆記 | 01-html基礎知識
    -  單標籤四、標題字體學習標題字體的使用 官方推薦使用h標籤標籤名稱:h1~h6默認樣式- 文字的字體大小越來越小- 加粗效果越來越弱作用- h1通常用來存放網頁中最為重要的部分 logo seo搜尋引擎優化 唯一性的
  • html基礎入門(二)
    明年的這個時間段或許也會非常忙,所以趁著現在有空,我要把一些前端資料分享出來,也希望能傳輸有用的知識,讓更多的朋友學習編程,學習前端技術。更新計劃大概是每周不少於一篇吧,話不多講,承接上一篇的內容,繼續HTML基礎二八、HTML標籤的語義化* 所謂標籤語義化,就是指標籤的含義。
  • SEO優化之strong標籤和em標籤的使用
    對於strong標籤和em標籤可能部分人會有點陌生,那麼這兩個標籤在seo優化中又可以起到什麼作用呢?<strong>加粗文本</strong>提到strong標籤有的人可能會問strong標籤和b標籤顯示的效果都一樣?那麼他和b標籤有什麼區別呢?根據 HTML 5 的規範,<b> 標籤應該作為最後的選擇,只有在沒有其他標記比較合適時才使用它。
  • HTML的元素、文檔格式標籤、HTML連結示例詳解
    本次主要給大家介紹下HTML的元素、文檔格式標籤、HTML連結的用法,用一種相對通俗一點的語言,容易懂的文字讓大家快速掌握html。儘量不用或少用專業術語。以下所寫的內容希望能幫助到大家,供大家在學習HTML中進行參考:
  • Web前端入門新人必看,怎樣使用CSS修改HTML的樣式
    一、CSS的起源當web開發還是一項新技術的時候,無論定義網頁內容還是定義網頁樣式,都是使用的HTML語言,HTML的內容和樣式沒有區分開,如古老的HTML樣式:類型選擇器使用選擇器的時候我們必須要遵守選擇器的特殊語法規則:選擇器名字後面是一個開始的大括號,屬性和屬性值中間是冒號,屬性值後面是分號,這裡面任何一部分都不能丟掉,否則CSS無法正常工作,並且要注意標點符號全部是英文半角的
  • 超文本標記語言HTML之快速入門HTML簡介、HTML入門
    首先第一步就要學習HTML與CSS,這並不需要去學一大堆的諸如Dreamweaver,Firework之類的各種網頁設計工具,關鍵是學會和理解HTML網頁嵌套的block結構與CSS的box模型。許多ASP.NET控制項最後都必須轉化為HTML。而且,div+CSS是當前主流的網頁布局模型。
  • 【轉行測試開發-HTML】(六)---div和span、圖像標籤的使用
    今天我們說下HTML標籤中的div、span和圖像標籤。其實div和span是上一節就要講的標籤內容,但是當時時間比較晚了,就沒有說。
  • 北大青鳥整理:一名web前端工程師需要必備哪些技術和工具?
    最近,有小夥伴私信留言讓我總結一下:「一個合格的web前端需要會什麼技術?」我想了半天,合格的web前端當然符合企業的用人要求啊!那麼一名web前端工程師需要必備哪些技術和工具?想要成為一個高薪高職的Web前端工程師並不容易,你不僅需要掌握專業的技能點,還要具備較多的項目經驗。優秀的Web前端工程師需要掌握哪些技術工具嗎?接下來就給大家一一介紹。
  • web前端學習什麼是css盒子模型
    web前端學習什麼是css盒子模型? 在網頁中,一個元素佔有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。
  • 小白三天入門前端HTML肝貨筆記
    ) (後面要加分號)1.什麼是標題標籤2.標題標籤的使用1.使用方法2.target3.注意1.img標籤作用2.標籤使用方法1.table標籤的作用2.表格標籤的使用3.align的配合使用1.表格跨行跨列效果2.使用步驟