HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤詳解

2020-12-12 標標編程

本次主要給大家介紹下HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤的用法,用一種相對通俗一點的語言,容易懂的文字讓大家快速掌握html。儘量不用或少用專業術語。以下所寫的內容希望能幫助到大家,供大家在學習HTML中進行參考:

HTML標籤

一、HTML基本結構:

一個HTML文檔結構基本由以下幾部分組成,一般分為四部分,如下圖:

HTML基本結構

1)、文檔聲明,標誌是:<!DOCTYPE HTML>

<!DOCTYPE HTML>聲明這是一個HTML文檔。

2)、html標籤對,標誌是:<html></html>

<html>標籤的作用相當於程序在告訴網頁瀏覽器,整個網頁是從<html>這裡開始的,然後到</html>結束

3)、head標籤對,標誌是:<head></head>

head標籤是頁面的頭部。

4)、body標籤對,標誌是:<body></body>

body標籤是頁面的身體,一般網頁絕大多數的標籤代碼都是在這裡進行編寫。

對於HTML的基本結構,這些都要死記硬背的,只要打不死,都要牢牢記住的。其實HTML標籤是很好記憶的,大部分標籤都是英語單詞。比如<head>表示「頁頭」,<body>表示「頁身」,<title>表示"標題"。

二、段落標籤

段落標籤

HTML的段落標籤標誌是:<p></p>。

在HTML編寫的過程中,我們手動的敲換行是沒有任何用的,也就是說無論我們敲多少空格,在顯示時只顯示一個空格。

每個P標籤就是一個段落,HTML會忽略在文本編輯器中輸入的回車,想要在網頁中開始一個新的段落,應該使用p元素來表示一個新段塔。

比如:有一段文字,是一個段落,那麼可以這樣表示:

<p>今朝有酒今朝醉,</p>

<p>莫使金樽空對月。</p>

如果不用P標籤,直接將

今朝有酒今朝醉,

莫使金樽空對月。

這樣放到代碼中,它就不會換行。

段落之間是有間隔的,使用段落標籤,則預示著它與其他的文字是有間隔分開的。效果相當於換行,但不是換行,因為它表述的意思是:段落。如下圖所示:

段落標籤

三、空格標籤

在HTML中代表空格的標誌是: 【&.nbsp】

在html代碼中每輸入一個【&.nbsp】這樣的符號,就表示一個空格,輸入十個這樣的【&.nbsp】符號 ,頁面中就顯示10個空格位置。而在html代碼中輸入「 」這樣的空格,不管輸入多少個空格,最終在頁面中顯示的空格位置只有一個。注意一下:【&.nbsp】我故意在&後面加了個點,不然保存不了。

空格標籤

四、標題標籤

在HTML中可定義標題的標誌是:<h1>: <h6>

<h1> 定義最大的標題。<h6> 定義最小的標題。

在一個網頁中可以適當的使用H標籤,有利於網頁的重點部分文字突出,但切忌不要多用濫用這個標籤,適當使用即可,一切從用戶體驗出發來使用。

標題標籤

五、圖片標籤

在HTML中定義圖片標籤的標誌是:<img src=「…」 />

圖片標籤,用來顯示圖片。

在html網頁中,我們經常會看到一些很漂亮、很酷的圖片。

這些圖片是到底是怎樣引入到網頁中顯示的呢?看起來有點不可思議,其實並沒有我們想像中的那麼複雜,只需要使用html中的<img>標籤就能實現。

img 元素向網頁中嵌入一幅圖像。「img」是英文單詞「image」的縮寫,就是「圖像」的意思。

但是我們要注意,從技術上講,<img> 標籤並不會在網頁中插入圖像,而是從網頁上連結圖像。

示例代碼如下:

圖片標籤

示例代碼中的使用到元素解釋:

src:表示要顯示的圖片的路徑。

heigth:圖片的高度 px表示像素。

width:圖片寬度 px表示像素。

alt:當圖片由於某些原因顯示失敗的時候所顯示的文本。

title:當光標移動到圖片上的時候顯示的文本。

六、注釋標籤

注釋標籤

一套完整的代碼可以讓人眼花繚亂,當程式設計師想要對某些部分進行修改的時候,可能要花很多的時間去找出那部分的代碼。

就像我們在文章中給重要的部分進行標記、做記號一樣,在代碼裡可以使用到「注釋標籤」來對一些代碼進行註解。

注釋標籤不會在可視化界面當中顯示,因為它只是程式設計師們用來標註說明的一個小玩意,用來對一些代碼程序進行解釋,也方便後來者能夠快速地接手並且理解其用處。

在我們寫 html 代碼的時候,往往需要進行說明該行代碼或該段代碼是用來做什麼的。這個時候我們就需要用到 html 注釋標籤了,html 注釋標籤和其它語言的注釋不太一樣。比如:JavaScript、php、java等語言都有單行注釋和多行注釋,但是 html 注釋標籤只有一個,單行和多行都是使用同一個標籤來注釋的。

而且大家一定要注意,HTML中的注釋標籤在開始標籤中有一個驚嘆號,但是結束標籤中沒有一個驚嘆號的。

注釋標籤

七、練習:

用以上學到的標籤做一個練習,示例代碼如下:

示例練習

以上是本人對HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤的用法理解,大家在學習中,一定要多記,多寫,多練習。學習HTML沒有特別的好辦法,多記,多寫,多練習是唯一的,也是最有效的途徑,只有把這些標籤熟練的掌握了,才能更好的駕馭代碼,才能寫出優秀的代碼,才能成為一個優秀的程式設計師。

相關焦點

  • html中figure標籤和figcaption標籤的詳細介紹
    本篇將介紹的是html中figure標籤和figcaption標籤的用法,有興趣的朋友可以學習一下!學習html就是學習標籤的用法,今天將為大家介紹的是html中的figure標籤和figcaption標籤的用法,為什麼要同時介紹這兩個標籤呢?原因很簡單,這兩個標籤有一定的聯繫,我們一起來看看這兩個標籤的具體用法吧!
  • html中label標籤的詳細介紹
    本篇將介紹的是html中的<label>標籤的用法,由興趣的朋友可以了解一下!在網頁開發中,表單是經常用到的,而今天要介紹的這個標籤也是經常出現在表單中的,即<label>標籤,我們一起來看看它有什麼用途吧!「label」作為英文單詞有「標記」的意思,那它作為html中的標籤又有什麼意思呢?下面我們就一起來看看吧!
  • SEO教程:詳解HTML與SEO交集之標籤的秘密
    前言HTML與SEO在基礎標籤中是有多交集的,這些交集標籤都是SEO的重中之中,今天巴郎帶大家一篇SEO教程,來認徹底識一下HTML與SEO交集之<title>標籤的秘密。文章目錄(共 3460 字)01.<title>標籤是什麼02.
  • html中select標籤(下拉列表)的詳細介紹
    本篇將介紹html中select標籤(下拉列表)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表很常見,那你知道在html原始碼中是怎麼實現的嗎?今天小編要分享的就是html中實現下拉列表的標籤,即select標籤。
  • 這些廢棄的 HTML 標籤不要用
    這裡為大家列出那些已經被廢棄 HTML 標籤,看看你是不是還在使用它們。<acronym>首字母縮寫,例如 WWW類似的有<abbr>標籤,表示單詞縮寫,例如 <abbr>inc.</abbr>。
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • Instagram可以通過隱藏標籤來整理標題 標籤數量沒有限制
    Instagram似乎在測試一種向帖子添加#標籤的方法,而不必將它們包含在標題本身中。應用研究人員Jane Manchun Wong發現了這個功能,並在Twitter上發布了一個更新界面的屏幕截圖。在圖片中,你可以看到一個新的"添加#標籤"部分和一個你可以在其中搜索並選擇要添加到帖子的#標籤界面。Wong補充說,從現在開始,新功能可以添加多少#標籤是沒有限制的。Instagram正在測試在帖子中添加#標籤的能力,而又不把標籤包括在其中。Wong還發現Instagram正在測試地理圍欄選項,允許用戶選擇他們想要發布文章或故事的區域。
  • 標籤製作軟體如何製作圓形標籤中的弧形文字
    在標籤設計製作的過程中,可以有很多種設計方法,目前市面上見到的最多的就是長方形或者正方形的矩形標籤,那麼對於下圖中的圓形標籤以及其中的弧形文字改如何製作呢,本文我們就中琅標籤製作軟體來為大家詳解一下其具體製作方法:首先,打開中琅標籤製作軟體,
  • HTML表單標籤基礎
    2、表單組件介紹:01.文本(欄位)02.選擇03.單選按鈕(組)04.文本域05.複選框06.密碼(欄位)07.文件域08.提交按鈕09.重置按鈕3、form 標籤 (表單範圍)...id 屬性—— 指的是它唯一的標識4、input 標籤的 type 屬性Password:01.type 屬性值type= "radio" --- 單選按鈕type= "checkbox" --- 複選框type= "text" --- 文本type= "password" --- 密碼欄位
  • HTML 5標籤、屬性、事件及瀏覽器兼容性速查表
    為了方便大家學習HTML 5 ,本文與大家分享幾份 HTML 5 標籤、屬性、事件及瀏覽器兼容性速查表。HTML 5 Cheat Sheet非常完整的一份HTML 5速查表,包括HTML 5 標籤、屬性、事件及其瀏覽器兼容性,圖片格式。
  • 標籤製作軟體怎麼插入圖片
    在標籤製作軟體中完成一個完整的標籤製作,可能需要在標籤中插入所需的圖片,其實在標籤製作軟體中插入圖片很簡單,接下來就一起來看下插入圖片的操作方法吧:打開標籤製作軟體,新建標籤之後,點擊軟體左側的「插入位圖」按鈕,在畫布上繪製一個位圖對象,雙擊位圖,在圖形屬性-數據源中,點擊「+」號按鈕,數據對象類型選擇「手動輸入」,點擊「瀏覽」,選中要插入的圖片,點擊打開-添加-確定。
  • 廣州防偽標籤_防偽標籤定製_各行業防偽標籤方案_專業防偽公司
    防偽企業依據客戶對防偽標籤的防偽技術標準,商品外包裝盒狀況,設計方案轉讓公司令人滿意的幾款防偽標籤供客戶挑選。客戶挑選和設計方案的防偽標籤,籤名明確設計圖。第三步:籤署防偽協議書。公司與防偽企業籤署防偽標籤製作委託協議和入網許可證合同書,入網許可證合同書註明彼此的支配權和義務。籤署防偽協議書必須彼此籤名並蓋上公司章。
  • 315防偽生產製造的產品防偽標籤有什麼特點?防偽標籤圖片
    產品防偽標籤是一個具有衝擊性仿貨運轉的一個標誌,貼產品防偽標籤,是公司防止自身的知名品牌的權益損傷,呈現自身的產品靠譜,防止失竊用而做的一種技巧。廠家專業 印刷 通用防偽標籤 電話查詢一、315防偽生產製造的產品防偽標籤315fangwei.com有什麼特點?
  • 中琅標籤列印軟體如何設計空調價格標籤模板
    一般的空調專賣店都會有空調價格標籤,這些空調價格標籤有的是直接購買的模板,然後列印上自己的空調價格信息,有的是自己設計,那麼自己如何設計空調價格標籤模板呢?下面用中琅標籤列印軟體演示一下設計空調價格標籤模板的詳細步驟。運行中琅標籤列印軟體,新建一個空白標籤,自定義設置空調價格標籤模板的尺寸大小,然後下一步根據提示設置行列為1行1列,確定保存。
  • 標籤列印軟體如何製作珠寶標籤
    目前各行各業的產品都會帶有自己的一個標籤,珠寶行業也不會例外,今天本文所介紹的就是珠寶標籤的製作,它可應用於:珠寶行業、金銀飾品、玉器行業、眼鏡行業等等。接下面我們來看一下在條碼列印軟體中製作珠寶標籤的詳細步驟。
  • 標籤製作軟體中如何導入圖片
    使用過標籤列印軟體的小夥伴們都知道,標籤製作軟體不僅支持JPG、PNG、TIFF、BMP、GIF格式的位圖圖片導入,還支持PDF矢量圖導入。具體是怎麼導入的呢?今天我給大家講一下標籤列印軟體中導入位圖和矢量圖的具體方法。
  • 標籤列印軟體如何批量列印五金標籤
    任何廠家在生產產品時都需要批量列印相關的產品標籤,如服裝廠的服裝吊牌標籤,五金廠的五金標籤,包括超市裡都有商品價籤,那麼這些產品標籤是如何批量列印的呢?批量列印標籤就需要用到標籤列印軟體,以五金標籤為例,下面看一下在標籤列印軟體中是如何批量列印的。運行標籤列印軟體,新建一個標籤,選擇列印五金標籤的印表機,以及設置標籤紙張大小行列等信息。
  • 中琅標籤列印軟體如何批量列印空調價格標籤
    之前和大家介紹了用中琅標籤列印軟體設計空調價格標籤模板的操作步驟,今天就給大家介紹一下如何用中琅標籤列印軟體批量列印空調價格標籤,需要用到中琅標籤列印軟體中的資料庫導入功能。先添加空調價格標籤的模板,有兩種方法,一是把之前做好的空調價格標籤模板標籤直接在中琅標籤列印軟體中打開使用。另一種就是自己保存的有模板圖片(PDF格式,或者jpg、png、gif都支持)當做畫布背景使用。
  • 微軟Edge新標籤頁標籤預覽動畫出現前瀏覽器會檢測系統動畫設置
    原標題:微軟 Edge 新標籤頁預覽功能將遵從 Win10 動畫效果   1 月 9 日消息 早在 2020 年 7 月,微軟就開始實驗一項名為 「標籤預覽」的 Microsoft Edge 功能,用戶將滑鼠懸停在一個標籤上,可查看頁面的縮略圖和標題 / URL。
  • 烘培、生鮮標籤標識製作,你選對標籤印表機了嗎?
    食品標籤對於大眾都不陌生,食品標籤也稱為生產日期標籤貼紙,它的作用就是標明食品的名稱、規格、淨含量、生產日期、食用方法等內容,以幫助消費者了解食品相關信息,保證食品的正確食用。