前端基礎-HTML標記語言

來源:互聯網
上載者:User

標籤:href   瀏覽器   文本   技術   不能   目錄   檔案中   程式   input   

閱讀目錄

  • 一、 HTML標籤與文檔結構
  • 二、 HTML標籤詳細文法與注意點
  • 三、 HTML中標籤分類
  • 四、 HTML注釋
一、 HTML標籤與文檔結構

HTML作為一門標記語言,是通過各種各樣的標籤來標記網頁內容的。我們學習HTML主要就是學習的HTML標籤。

那什麼是標籤呢?

#1、在HTML中規定標籤使用英文的的角括弧即`<`和`>`包起來,如`<html>`、`<head>`、`<body>`都是標籤,#2. HTML中標籤通常情況下是成對出現的,分為開始標籤和結束標籤,結束標籤比開始標籤多了一個`/`,開始標籤和結束標籤之間的就是標籤的內容。#3、有些標籤功能比較簡單,使用一個標籤即可,這種標籤叫做自閉和標籤,例如:<br/> <hr/> <input/> <img/>

HTML中的標籤存放於文字檔中,需要按照下述固定的文檔結構組織:

<!DOCTYPE HTML><html>    <head>...</head>    <body>...</body></html>

各部分解釋

#1、<!DOCTYPE HTML>是文檔聲明,必須寫在HTML文檔的第一行,位於<html>標籤之前,表明該文檔是HTML5文檔。#2、<html></html> 稱為根標籤,所有的網頁標籤都在<html></html>中。#3、<head></head> 標籤用於定義文檔的頭部,它是所有頭部元素的容器。
常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤,頭部標籤在下一節中會有詳細介紹,
<head>與</head>之間的內容不會在瀏覽器的文件視窗顯示,但是其間的元素有特殊重要的意義。#4、在<body>和</body>標籤之間的內容是網頁的主要內容,最終會在瀏覽器中顯示出來。

標籤間關係

#1、並列(兄弟/平級)    head與body#2、嵌套(父子/上下級)    html內有body
二、 HTML標籤詳細文法與注意點

標籤的文法:

<標籤名 屬性1=“值1” 屬性2=“值2” ......>內容部分</標籤名><標籤名 屬性1=“值1” 屬性2=“值2” ....../>

注意:

#1. HTML標籤不區分大小寫,`<h1>`和`<H1>`是一樣的,但是我們通常建議使用小寫,大部分程式員都以小寫為準。#2. 標籤之間是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>#3、不是所有標籤都支援互相嵌套。 
三、 HTML中標籤分類

單從是否可以嵌套子標籤的角度去分,標籤分為兩類

#1、容器類標籤    容器類標籤可以簡單的理解為能嵌套其它所有標籤的標籤。    常見容器級的標籤:     h系列     ul>li    ol>li    dl>dt+dd    div#2、文本類標籤    文本級的標籤對應容器級標籤,只能嵌套文字/圖片/超連結的標籤。    常見文本級的標籤:    p    span    strong    em    ins    del
四、 HTML注釋

無論我們學習什麼程式設計語言,一定要重視的就是注釋,我個人一直把注釋看成是代碼之母。 HTML中注釋的格式:

<!--這裡是注釋的內容-->

注意: 注釋中可以直接使用斷行符號換行。

並且我們習慣用注釋的標籤把HTML程式碼封裝裹起來。如:

<!-- xx部分 開始 -->    這裡放你xx部分的HTML代碼<!-- xx部分 結束 -->

HTML注釋的注意事項:

#1、HTML注釋不支援嵌套。#2、HTML注釋不能寫在HTML標籤中。

前端基礎-HTML標記語言

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.