1. 程式人生 > >HTML基本結構及基本標籤

HTML基本結構及基本標籤

什麼是HTML: HTML是Hyper Text Markup Language的縮寫,即超文字標記語言(所謂超文字可以理解為具有超能力的文字),是一種解釋性語言,用於製作網頁介面,使用該語言編寫的網頁最終被瀏覽器解釋執行

HTML基本結構:

<html>//用來標記HTML文件的開始
    <head>    //用來標記HTML文件頭部的開始

    </head>   //用來標記HTML文件頭部的結束
    <body>    //用來標記HTML文件主體的開始

    </body>   //用來標記HTML文件主體的結束
</html>       //用來標記HTML文件的結束

HTML標籤:
HTML標籤指使用尖括號括起來的關鍵字,分為單標籤和雙標籤
單標籤:標籤單獨出現,語法:<標籤名 / >
雙標籤:標籤成對出現,語法:<標籤名>內容< / 標籤名>
注意:HTML標籤中的標籤名不區分大小寫,但為了符合W3C規範,推薦使用小寫。

head之間的子標籤:
title標籤:用於設定頁面的標題
meta標籤:用於提供關於頁面的元資訊

<head>
    <title>head的子標籤</title>
    <meta chartset="UFT-8"/>//設定字符集,以防出現亂碼
    <meta
name="keywords" content="keywords1,keywords2,...keywordsn"/>
//設定關鍵字 <meta name="description" content="value"/>//設定描述 <meta http-equiv="refresh" content="秒數;url=跳轉目標地址"/>設定自動重新整理或跳轉 </head>

HTML標籤屬性:
HTML標籤屬性放在起始標籤的尖括號內,如果有多個屬性則使用空格分開,語法結構:
單標籤:< 標籤名 屬性名1=”屬性值1” 屬性名2=”屬性值2” … 屬性名N=”屬性值N”/>
雙標籤:<標籤名 屬性名1=”屬性值1” 屬性名2=”屬性值2” … 屬性名N=”屬性值N”>內容< / 標籤名>
注意:1.屬性之間使用空格間隔;
2.屬性出現的先後順序沒有要求;
3.為了符合W3C標準,要求所有的屬性值都使用雙引號引起來

註釋: 語法結構< !–註釋內容– >
注意:註釋內容不會在瀏覽器渲染後的介面上顯示出來,作用是便於程式設計師對程式的維護

特殊符號:
& nbsp ; 表示空格
& amp ; 表示&
& lt ; 表示<
& rt ; 表示>
& copy ; 表示版權符號

HTML基本標籤:
b標籤: 粗體,雙標籤
i標籤: 斜體,雙標籤
del標籤:刪除線,雙標籤
p標籤:段落標籤,雙標籤,p標籤只有一個align屬性,其屬性有left,right,center,justif四個值,方式文字的對齊
注意:不建議使用align屬性,推薦使用text-align樣式代替,CSS語法:< p style=”text-align:center;”>內容< /p>
hr標籤:水平線標籤,單標籤,其屬性有color(水平線顏色),noshade(設定水平線的顏色為純色而不是有陰影的顏色),size(水平線高度,單位:畫素),width(水平線寬度,單位:畫素或%)以及align,其屬性值有left,right,center三個
hn標籤:標題標籤,雙標籤,n的值為1~6,其中< h1>< /h1>定義最大的標題;只有一個align屬性,其值和p標籤align屬性一樣,但不建議使用該align屬性,推薦使用text-align樣式代替,其使用方法參見p標籤
img標籤:影象標籤,單標籤,該標籤有src屬性(圖片URL)和alt屬性(圖片不存在時的代替文字)兩個必需的屬性,還有一些其它屬性,常用的有:
1.height和width:設定圖片的高度和寬度,單位為畫素或%(注意:兩者只要其一便可實現等比縮放,同時使用可能會使圖片變形)
2.title:設定滑鼠移到元素上時顯示的資訊,(注意:任何標籤都有title屬性,它不是img標籤特有的)
a標籤:屬性有href用於指定開啟的頁面,target用於指定在哪個視窗中開啟頁面
ol標籤:有序列表標籤,雙標籤,有type和start兩個屬性,type用於指定ol子標籤li的編號型別,預設為數字,還可以是字母,阿拉伯數字或羅馬數字;start用於指定ol子標籤li序號起始點,預設為1,必需為整形數字。
ul標籤:無序列表標籤,雙標籤,有type屬性,該屬性用於指定ul 子標籤li的編號型別,預設為實心圓,其值可以為disc(實心圓),circle(空心圓),square(實心方塊兒)