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>中。
    HTML的lang屬性可用於網頁或部分網頁的語言。通常用於搜索引擎和瀏覽器     
    的統計分析,不定義也沒什么影響
    根據 W3C 推薦標准,您應該通過 <html> 標簽中的 lang 屬性對每張頁面    
    中的主要語言進行聲明,比如:
    <html lang="en"></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、記號/標簽是不會顯示出來的。

#2、標簽只是用來做記號而不負責控制樣式:雖然用<h1>標記的文本在顯示時會被加大加粗,但請務必記住,HTML的作用只有一個它是專門用來對文件做記號來標識其語義的(語義指的是該文本是做什么用的),加大和加粗這種為文本添加樣式的操作並不是HTML擅長的,雖然早期的時候確實也用HTML來制作樣式,但以后我們專門用CSS來做這件事,這也是一種解耦合的思想

#3. HTML標簽不區分大小寫,`<h1>`和`<H1>`是一樣的,但是我們通常建議使用小寫,大部分程序員都以小寫為准。

#4. HTML中有部分標簽是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>

三 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標簽中。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM