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

2020-12-23 標標編程

本次主要給大家介紹下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沒有特別的好辦法,多記,多寫,多練習是唯一的,也是最有效的途徑,只有把這些標籤熟練的掌握了,才能更好的駕馭代碼,才能寫出優秀的代碼,才能成為一個優秀的程式設計師。

相關焦點

  • 防偽標籤怎麼查詢真假,如何識別真假防偽標籤?
    一、產品防偽標籤怎麼查電話查詢:消費者撥、通電話查詢,按照語、音提示輸入防偽標誌,系統會自動式新聞發布會工程項目申請進度查詢記錄的哦,如數次沒有聽清楚,可以再度不斷新聞發布會施工進度哦。315防偽標籤2.簡訊查詢:這類方法就比較簡單了,發短、信方式 把防偽標籤上的,防偽標誌315fangwei.com數字以短、信方式 發過去就就可以了,謹記在發短、信的那時要依次輸入防偽標誌哦
  • 三分鐘時間:給你講解html中的各種標籤
    話不多說,繼續html的學習:昨天學習了最基礎的文本標籤及屬性,除此之外還有很多其它標籤,今天逐一學習。 一、連結標籤(a標籤)a標籤有一個必不可少的屬性:href。href也就是超連結的意思。⑦title="劉小愛的博客"title,又是標題,這裡的作用是:當我們將滑鼠放在當前連結上的時候會出現一個標題提示。
  • Instagram可以通過隱藏標籤來整理標題 標籤數量沒有限制
    Instagram似乎在測試一種向帖子添加#標籤的方法,而不必將它們包含在標題本身中。應用研究人員Jane Manchun Wong發現了這個功能,並在Twitter上發布了一個更新界面的屏幕截圖。在圖片中,你可以看到一個新的"添加#標籤"部分和一個你可以在其中搜索並選擇要添加到帖子的#標籤界面。Wong補充說,從現在開始,新功能可以添加多少#標籤是沒有限制的。Instagram正在測試在帖子中添加#標籤的能力,而又不把標籤包括在其中。Wong還發現Instagram正在測試地理圍欄選項,允許用戶選擇他們想要發布文章或故事的區域。
  • 什麼是YouTube標籤,它們很重要嗎?
    什麼是YouTube標籤?YouTube視頻標籤是創建者添加到其視頻中的關鍵字,以幫助YouTube了解其視頻的背景。 將內容上傳到平臺時,應注意兩種類型的標籤:影片標籤頻道標籤影片標籤上載YouTube視頻時,您可能會發現一個空格,最多可以添加500個字符。
  • 標籤製作軟體如何製作圓形標籤中的弧形文字
    在標籤設計製作的過程中,可以有很多種設計方法,目前市面上見到的最多的就是長方形或者正方形的矩形標籤,那麼對於下圖中的圓形標籤以及其中的弧形文字改如何製作呢,本文我們就中琅標籤製作軟體來為大家詳解一下其具體製作方法:首先,打開中琅標籤製作軟體,
  • 微信朋友圈怎麼添加標籤 微信朋友圈添加標籤方法
    微信朋友圈新增了標籤功能,據悉該功能將會陸續向所有用戶推出,只要 iOS 用戶更新到微信 7.017 版本後就可以使用此功能。那麼微信朋友圈怎麼添加標籤呢?下面就讓小編給大家介紹一下。  1、發朋友圈時長按編輯區,出現「#」符號,點擊選中,然後加上想要設置的標籤內容即可。
  • shopee產品標籤怎麼寫?如何書寫Shopee標籤?
    對shopee賣家來說,產品發布時,除了強調對產品標題、描述和圖片的優化之外,還有一個重要因素——標籤,它也是產品的重要組成部分。為何shopee產品標籤如此重要?如何正確設置產品標籤?展示產品標籤的重要性:標籤是shopee搜索展示的一部分,賣家可以在熱搜上看到;二是標籤權重值高,有利於產品曝光,為店鋪引流;Shopee平臺的優化算法就是根據標籤來推薦產品。1.添加Shopee產品標籤:打開想要添加標籤的商品,在商品說明頁上,在關鍵字「#」後添加「#」,構成標籤,每個商品最多使用18個標籤。2.如何書寫Shopee標籤?
  • Google為什麼不使用我的標題標籤?
    有時,Google可能會顯示與您的標題標籤不匹配的標題。這就會讓人感覺有點奇怪了,谷歌為啥沒有顯示我的標題標籤?您可以通過以下這幾個因素來判斷。1.您的標題已被關鍵字填充如果您嘗試用關鍵字填充標題(有時稱為「過度優化」),則Google可能會選擇簡單地重寫它。由於許多原因,請考慮重寫標題對搜索用戶更有用。
  • 什麼是拼多多人群標籤,如何布局人群標籤?
    今天,我們要講的是關於拼多多人群標籤內容。人群標籤的重要性對於拼多多運營來說非常的重要,而人群標籤的精度與流量精準度直接相關,流量精準度又於轉化率直接相關,所以想要自己的連結轉化能力比對手強,從而積累更高的權重,進而拿到更高的排名,分配到更多地流量,就必須要從人群標籤入手,掌握人群標籤的布局。
  • 13 無序列表標籤
    其中,ul標籤是父標籤,li標籤是子標籤,li標籤是嵌套在ul標籤裡面的。ul標籤和li標籤是嵌套組合在一起使用的,不能單獨使用。也就是說要實現一個無序列表,ul和li標籤是同時成組出現的。之前我們了解的div標籤,它作為一個盒子、容器,裡面可以很自由的嵌套各種其他標籤。
  • Vue標籤
    <script> var vm=new Vue({ el:"#app", data:{ "str1":"aa", "str2":"bb", "str3":"cc" } });</script>在vue中,對前端標籤的賦值有三種形式
  • 什麼是nofollow標籤 nofollow標籤有什麼作用
    站長們在做外鏈的時候,首先會查看該網站時候帶有nofollow標籤,這是為什麼呢?什麼是nofollow標籤,nofollow標籤有什麼作用?下面菜頭網絡推廣就給大家講解一下。什麼是nofollow標籤 nofollow標籤有什麼作用什麼是nofollow標籤nofollow標籤是一個可以集中權重的,也可以是不傳遞權重的HTML代碼,它的意義就是告訴搜尋引擎不要給予權重或不抓取,說通俗點就是告訴搜尋引擎蜘蛛不要轉遞某個URL或者整個頁面的權重,比如A網站上有一個連結指向B網站,但A網站給這個連結加上了
  • 條碼標籤列印軟體如何批量製作訂單標籤
    在生活中我們定外賣,商家收到訂單,列印出來訂單標籤,方便配貨,也有工廠收到訂單後列印出訂單標籤,工人根據訂單標籤的內容進行配貨發貨,那麼如何批量製作訂單標籤呢?今天用中琅條碼標籤列印軟體給大家演示批量製作訂單標籤方法。
  • 標籤印表機如何換不乾膠標籤紙呢?
    有的用戶,在使用標籤印表機過程中難免會遇到標籤紙安裝不來?那麼不乾膠標籤紙如何安裝到標籤印表機裡面而又順利的列印出來呢?安裝不好就會導致列印標籤提示錯誤,列印亮點等情況。對於標籤印表機還需要與電腦相連接,這樣才能在電腦上面進行對你需要列印的內容進行編輯進行輸出,列印數量、標籤模板格式等操作,然後直接列印輸出的印表機。
  • 合肥標籤列印公司帶您了解什麼是不乾膠標籤_安徽弘金泰
    不乾膠標籤同傳統的標籤具有不用刷膠、不用漿糊、不用蘸水、無汙染、節省貼標時間等優點,應用範圍廣,方便快捷。不乾膠是一種材料,也叫自粘標籤材料以紙張、薄膜或其它特種材料為面料,背面塗有膠粘劑,以塗矽保護紙為底紙的一種複合材料。並經印刷、模切等加工後成為成品標籤。
  • 電商淘寶運營怎麼給產品打標籤?
    做電商運營淘寶賣家都想把手淘首頁和店鋪做起來,這其中關鍵的一點就是人群標籤。淘寶千人千面,人群標籤對店鋪來說是非常重要的,所以賣家必須要做好商品的標籤,買家通過標籤才能搜索到店鋪,找到自己需求的商品下單。
  • 威海耐高溫不乾膠標籤這家品質好
    威海耐高溫不乾膠標籤這家品質好河北省石家莊宏達印刷有限公司是一家有多年從事捲筒不乾膠商標及包裝裝璜印刷品印刷的企業,印刷各種捲筒不乾膠標籤、紙盒包裝、塑料類包裝、產品標籤及防偽標識、熱轉印碳帶、條碼印表機專用標籤、吊牌、快運物流籤、航空貨籤、宅急送標籤等。
  • 裝飾聖誕氛圍,少了兄弟糖果趣印標籤印表機可不行!
    糖果趣印標籤印表機上下機身都可以打開,頂部打開後可以放置標籤色帶,內部結構非常地一目了然,即使是不太使用複雜的數碼產品的女性消費者來說,都能輕鬆上手安裝色帶,完全不用付出學習成本,操作極其簡單又方便。兄弟糖果趣印標籤印表機還設計了超多種標籤色帶,印有豐富的色彩與精緻圖案的熱敏色帶可用於化妝品收納、手帳、物品歸類等場景,可以讓我們去自由探索,隨心所欲進行標籤粘貼。
  • 中國電影「標籤」變遷史
    內地電影市場愈發複雜並有如此樂觀前景的今日,中國電影標籤的變化到底將意味著什麼呢? 黑馬頻繁,頭部天花板增長十倍,觀眾需求和水平都在極速增加 事物的一個基本發展規律是波浪前進和螺旋上升,但隨著市場的變化,我們會發現要給一部分影片打上一個「準確」的標籤已經變得非常困難。
  • 艾利丹尼森推標籤材料解決方案
    原標題:艾利丹尼森推標籤材料解決方案   10月15日,艾利丹尼森