HTML基本元素標簽介紹

  發布時間:2022-02-26 14:52:30   作者:.NET開發菜鳥   我要評論
這篇文章介紹了HTML的基本元素標簽,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、什么是HTML

HTML(Hypertext Markup Language):即超文本標記語言,是一種用來設計網頁的標記語言,用該語言編寫的文件,以.html或.htm為后綴,并且由瀏覽器解釋執行,生成相應的界面。網頁文件本身只是一種文本文件,我們通過在文本文件中添加標記符號,可以告訴瀏覽器如何顯示其中的內容(如:文字如何處理,畫面如何安排,圖片如何顯示等),這些標記符號就是html,我們學習html就是學習這些標記符號,html標記符號也稱為html元素。

二、HTML相關術語

標記

標記是用尖括號<>包圍的單詞,很多標記是成對的,一個是開始標記,一個是結束標記(單詞前加/)

元素

每一對尖括號包圍的部分:例如<body></body>包圍的部分就叫做body元素

元素通常由三個部分組成:

  • 開始標記
  • 內容
  • 結束標記

屬性

用來修飾元素

每個屬性都有值

屬性放置開始標記中

示例:

三、HTML文檔的基本結構

1、一個HTML文檔可以看成由以下兩個部分構成:

文件頭
由<HEAD></HEAD>標記標識
文檔主體部分
由<BODY></BODY>標記標識

語法:<head>內容</head>
HEAD元素包含了與當前文檔相關的信息,如文檔的標題,關鍵字以及一些和文檔內容無關僅對文檔本身進行說明的數據信息。

2、head元素

1)、標題元素

<title></title>:標題元素
標題元素的內容出現在瀏覽器頂部。
沒有屬性。
必須出現在head元素中且只能有一個標題元素。

2)、元數據元素

<meta>元數據元素:設置消息頭
meta的意思是“關于”,是關于某個網頁的基本信息。
搜索引擎對meta元素中數據進行搜索可以幫助訪問者找到該網頁
屬性

  • name:指定特性名
  • content:指定特性的值
  • http-equiv:使得HTTP服務器根據http-equiv屬性的值獲取http響應信息頭,以便讓瀏覽器按照指定的方式顯示頁面。

META作用舉例
給網頁添加說明(比如網頁的作者,關鍵字等)
<meta name="Author" content="Dave Raggett">
給網頁增加關鍵字,提高網頁被瀏覽的機會
<meta name="Keywords" content="這里寫關鍵字">
定期刷新網頁,以秒為單位
<meta http-equiv="refresh" content="1">
<meta http-equiv="refresh" content="5;url='http://www.baidu.com'">
解決網頁亂碼問題
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
讓網頁始終保持最新
瀏覽器為了節約時間,在本地硬盤上保存一個網上問卷的臨時版本。當反復瀏覽該網頁時,瀏覽器直接調用硬盤上的文件,使用meta強制性調用網上的最新版本
<meta http-equiv="Pragma" content="no-cache">

3、Body元素

<a>:超鏈接標記

基本語法
開始標記:<a>必需
內容:
內聯元素(不能嵌套a元素)
結束標記:</a>必需

主要屬性
Href:用來說明鏈接資源的URL
Target:打開鏈接的窗口,有四個值:

  • <a href=url target="_self"> 顯示在本窗口 默認在本窗口打開,
  • <a href=url target="_blank"> 顯示在新窗口
  • <a href=url target="_parent"> 顯示在父窗口
  • <a href=url target="_top"> 顯示在整個瀏覽器窗口

Title:提示信息:鼠標放上去的提示
Name:錨點名稱

超鏈接標記共有3種使用方式:

1、鏈接到其他頁面

語法:<A href="register.html">[免費注冊]</A>
在同一個文件夾下有兩個HTML文件,從一個文件超鏈接到另一個文件的路徑有兩種方式:相對路徑和絕對路徑
相對路徑:指相對于當前文件的文件位置, 相對路徑常使用../表示回到上一級目錄。
絕對路徑:指從根目錄到文件的完整路徑。

示例:

2、錨鏈接

從A頁面的甲位置跳轉到本頁中的乙位置(同一頁面)。

從A頁面的甲位置跳轉到B頁面的乙位置(兩個頁面)。
步驟:

  • 1、創建錨點

在HTML的NAME屬性用于創建錨標記,例如:

<a name="marker">乙位置</>
  • 2、創建跳轉鏈接

使用錨點,在HREF參數中使用該標記,在錨點名前加上#,例如:

<a href="#marker">甲位置</a>

示例:

注意:

如果是鏈接在B頁面,只需要在href屬性里面加上B頁面的地址即可,例如:

<a href="b.html#marker">甲位置</a>
3、電子郵件鏈接

要鏈接電子郵件,可在鏈接標簽中插入"mailto"

<A href="mailto:taobaoWebMaster@taobao.com">站長信箱</A>

四、HTML基本語法

一般來說,HTML的語法有三種表達方式,如下所示:
<標記>內容</標記>
<標記 屬性1=參數1 屬性2=參數2>內容</標記>
<標記/>

五、HTML基本標簽

1、標簽元素

標簽介紹
html元素包括一個或一對標簽定義的包含范圍。而標簽就是由兩個字符串“<”和“>”號組成,標簽包括開始標簽“<>”和結束標簽“</>”。
html標簽元素有四種形式分別是:
空元素:<br>
帶有屬性的空元素:<hr color="red">
帶有內容的元素:<titile>這是內容</titile>
帶有內容和屬性的元素:<font color="red">這是內容</font>
這里有一點要說的是在html文檔中,標簽和屬性的名字是和大小無關的。

2、文本相關標簽

標題標簽
<H#>......</H#> #=1,2,3,4,5,6
說明:從<H1>到<H6>字體大小依次遞減。align為設置標題對齊方式:包括Left、Center、Right。

注:H1到H6用于指定不同級別的標題。

字體標簽

設置字體,size為字體大小,從1到7的整數,數字越大,字體越大。

特殊符號

<b></b>

設置文本粗體顯示。

<i></i>

設備文本斜體顯示。

3、行的控制相關標簽

段落標簽:<p><p>

<p>可以看作是一個空行,用于創建段落

換行標簽

<br>作用是換行

<hr color="#"> <hr>標簽:作用是插入一條水平線,屬性color用于設置顏色。

4、圖像標簽

常見的圖片格式:

圖像標簽的基本語法:

<img src="來源"/>

  • src:圖像的路徑(包括相對路徑或絕對路徑)。
  • alt:表示圖像的替代文字,即圖像不能顯示時顯示的文字。例如:
<!--找不到圖片,顯示alt屬性的值-->
<img src="images/bgImage333.jpg" alt="圖像不能顯示時替代的文字">

結果:

  • title:鼠標懸停時提示的文字。例如:
<img src="images/bgImage.jpg" title="鼠標懸停時提示的文字">

結果:

align:設置圖像與文本的對齊方式,取值:middle、top、bottom
例如
<img src="images/adv.jpg"/>

5、滾動標簽

滾動<MARQUEE>標簽
語法:<MARQUEE scrolldelay="#" direction="#">

說明:

  • scrolldelay:表示滾動延遲時間(以毫秒為單位,默認90)
  • direction:表示滾動對象的方向(默認right:從右向左)

示例:

6、列表元素標簽

列表是指將具有相似特征或者是具有先后順序的幾行文字進行對齊。

列表分為有序列表<ol>和無序列表<ul>兩種。
<li>列表項元素用來包含兩種列表的列表項,也就是列表內容。

1、無序列表語法

語法:

<ul>
    <li>列表項內容一</li>
    <li>列表項內容最后一項</li>
</ul>

開始標記:必需
內容:列表項 <li>元素
結束標記:必需
主要屬性:
id、class、align、type
Type:列表符號,可取值為disc(實心的圓圈)、square(實心的方形)、circle(空心的圓圈)。

說明:

沒有順序,每個<li>標簽獨占一行。

默認<li>標簽項前面有實心小圓點。

一般用于無序類型的列表,如導航,側邊欄新聞列表等。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>無序列表</title>
</head>
<body>
    <!--顯示實心圓點,默認樣式-->
    <ul type="disc">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
     <!--顯示實心矩形-->
     <ul type="square">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ul>
    <!--顯示空心圓點-->
    <ul type="circle">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ul>
</body>
</html>

結果:

注意:

列表還可以進行嵌套,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>無序列表</title>
</head>
<body>
    <!--顯示實心圓點,默認樣式-->
    <ul type="disc">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
     <!--顯示實心矩形-->
     <ul type="square">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ul>
    <!--顯示空心圓點-->
    <ul type="circle">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ul>
    <!--列表嵌套-->
    <ul>
            <li>列表1</li>
                <ul type="circle">
                    <li>嵌套列表1</li>
                    <li>嵌套列表2</li>
                    <li>嵌套列表3</li>
                </ul>
            <li>列表2</li>
            <li>列表3</li>
    </ul>
</body>
</html>

結果:

2、有序列表語法

語法:

<ol>
   <li>列表項內容一</li>
   <li>列表項內容最后一項</li>
</ol>

開始標記:必需
內容:列表項 <li>元素
結束標記:必需
主要屬性:id、class、align、type、start
type:列表符號,可取值為1,A,a,i,l
start:起始符號

說明:

有順序,每個<li>標簽獨占一行。

默認<li>標簽項前有順序標記。

可以通過修改<ol>標簽的type屬性更改顯示的順序標記。

一般用于排序類型的列表,如試卷、問卷選項等。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表</title>
</head>
<body>
    <!--顯示數字默認樣式-->
    <ol >
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
     <!--顯示大寫A-->
     <ol type="A">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示小寫a-->
    <ol type="a">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示大寫I-->
    <ol type="I">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示小寫i-->
    <ol type="i">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
</body>
</html>

結果:

注意:

和無序列表一樣,有序列表同樣可以嵌套,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表</title>
</head>
<body>
    <!--顯示數字默認樣式-->
    <ol >
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
     <!--顯示大寫A-->
     <ol type="A">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示小寫a-->
    <ol type="a">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示大寫I-->
    <ol type="I">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
    <!--顯示小寫i-->
    <ol type="i">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
      <!--有序列表嵌套-->
      <ol>
            <li>列表1</li>
               <!--顯示小寫i-->
                 <ol type="i">
                    <li>嵌套列表1</li>
                    <li>嵌套列表2</li>
                    <li>嵌套列表3</li>
                    </ol>
            <li>列表2</li>
            <li>列表3</li>
    </ol>
</body>
</html>

結果:

3、定義列表

語法:

<dl>
        <dt>咖啡</dt>
        <dd>黑色的熱飲料</dd>
        <dt>Milk</dt>
        <dd>白色的冷飲料</dd>
</dl>

說明:

沒有順序,每個<dt>,<dd>標簽獨占一行。

沒有默認標記,但有層次結構。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定義列表</title>
</head>
<body>
    <dl>
        <dt>水果</dt>
        <dd>蘋果</dd>
        <dd>香蕉</dd>
        <dd>橘子</dd>
        <dt>鏈接</dt>
        <dd><a href="https://www.baidu.com">打開百度</a></dd>
    </dl>
</body>
</html>

結果:

到此這篇關于HTML基本元素標簽的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 詳解HTML常用的標簽中行內元素和塊級元素

    本文給大家詳細介紹了HTML常用的標簽中行內元素和塊級元素,需要的朋友參考下吧
    2018-01-03
  • HTML中的標簽和元素的區別詳解

    很多人可能都沒有把哪個叫標簽,哪個叫元素這個概念搞清楚,包括之前的我也是,一直都是混淆著,特意搜索查閱了一些資料,現將我得出的結論寫出來,與大家分享下
    2013-04-22
  • HTML元素(標簽)大全及使用介紹

    HTML元素(標簽)大全及使用說明
    2010-07-04
  • HTML基本標簽及結構詳解

    這篇文章主要介紹了HTML基本標簽及結構詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-23
  • 詳解HTML/XHTML中img圖像標簽的基本用法

    這篇文章主要介紹了HTML/XHTML中img圖像標簽的基本用法,文中列出了img標簽的一些常用屬性,需要的朋友可以參考下
    2016-03-06
  • 入門:HTML的基本標簽和屬性簡單介紹

    HTML是由標志和屬性構成的,它們一起被用來告訴瀏覽器應該如何顯示一頁文檔。標志用來引用一段文字或是一幅圖片等文檔部件,屬性是標志的選項,在標志中修飾,如顏色,對齊
    2009-04-02
  • HTML基礎:HTML的基本結構

    HTML的基本結構   超文本文檔分文檔頭和文檔體兩部分,在文檔頭里,對這個文檔進行了一些必要的定義,文檔體中才是要顯示的各種文檔信息。 <HTML>    
    2008-10-17
  • 入門:HTML的基本標簽和屬性簡單介紹

    HTML是由標志和屬性構成的,它們一起被用來告訴瀏覽器應該如何顯示一頁文檔。標志用來引用一段文字或是一幅圖片等文檔部件,屬性是標志的選項,在標志中修飾,如顏色,對齊
    2008-10-17
  • 常用html元素總結包括基本結構、文檔類型、頭部、主體等等

    常用html元素包括基本結構、文檔類型、頭部、主體、文本域、上傳文件、下拉菜單、有序列表、無序列表、多媒體、框架等等,本文羅列了一些示例,大家可以學習下
    2014-04-06
  • html內聯元素和塊級元素的基本概念及使用示例

    html標簽分為兩種,內聯元素和塊級元素,塊級元素:一般是其它元素的容器;內聯元素:只能容納文本或者其他內聯元素;首先我們先了解一下內聯元素和塊級元素的概念
    2013-11-18

最新評論

免费人成视频在线观看