亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML基本元素標(biāo)簽介紹

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

一、什么是HTML

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

二、HTML相關(guān)術(shù)語

標(biāo)記

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

元素

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

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

  • 開始標(biāo)記
  • 內(nèi)容
  • 結(jié)束標(biāo)記

屬性

用來修飾元素

每個屬性都有值

屬性放置開始標(biāo)記中

示例：

三、HTML文檔的基本結(jié)構(gòu)

1、一個HTML文檔可以看成由以下兩個部分構(gòu)成：

文件頭
由<HEAD></HEAD>標(biāo)記標(biāo)識
文檔主體部分
由<BODY></BODY>標(biāo)記標(biāo)識

語法：<head>內(nèi)容</head>
HEAD元素包含了與當(dāng)前文檔相關(guān)的信息，如文檔的標(biāo)題，關(guān)鍵字以及一些和文檔內(nèi)容無關(guān)僅對文檔本身進行說明的數(shù)據(jù)信息。

2、head元素

1）、標(biāo)題元素

<title></title>:標(biāo)題元素
標(biāo)題元素的內(nèi)容出現(xiàn)在瀏覽器頂部。
沒有屬性。
必須出現(xiàn)在head元素中且只能有一個標(biāo)題元素。

2）、元數(shù)據(jù)元素

<meta>元數(shù)據(jù)元素：設(shè)置消息頭
meta的意思是“關(guān)于”，是關(guān)于某個網(wǎng)頁的基本信息。
搜索引擎對meta元素中數(shù)據(jù)進行搜索可以幫助訪問者找到該網(wǎng)頁
屬性

  • name：指定特性名
  • content：指定特性的值
  • http-equiv：使得HTTP服務(wù)器根據(jù)http-equiv屬性的值獲取http響應(yīng)信息頭，以便讓瀏覽器按照指定的方式顯示頁面。

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

3、Body元素

<a>:超鏈接標(biāo)記

基本語法
開始標(biāo)記:<a>必需
內(nèi)容：
內(nèi)聯(lián)元素（不能嵌套a元素）
結(jié)束標(biāo)記:</a>必需

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

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

Title：提示信息：鼠標(biāo)放上去的提示
Name：錨點名稱

超鏈接標(biāo)記共有3種使用方式：

1、鏈接到其他頁面

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

示例：

2、錨鏈接

從A頁面的甲位置跳轉(zhuǎn)到本頁中的乙位置（同一頁面）。

從A頁面的甲位置跳轉(zhuǎn)到B頁面的乙位置（兩個頁面）。
步驟：

  • 1、創(chuàng)建錨點

在HTML的NAME屬性用于創(chuàng)建錨標(biāo)記，例如：

<a name="marker">乙位置</>
  • 2、創(chuàng)建跳轉(zhuǎn)鏈接

使用錨點,在HREF參數(shù)中使用該標(biāo)記，在錨點名前加上#，例如：

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

示例：

注意：

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

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

要鏈接電子郵件，可在鏈接標(biāo)簽中插入"mailto"

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

四、HTML基本語法

一般來說，HTML的語法有三種表達(dá)方式，如下所示：
<標(biāo)記>內(nèi)容</標(biāo)記>
<標(biāo)記 屬性1=參數(shù)1 屬性2=參數(shù)2>內(nèi)容</標(biāo)記>
<標(biāo)記/>

五、HTML基本標(biāo)簽

1、標(biāo)簽元素

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

2、文本相關(guān)標(biāo)簽

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

注：H1到H6用于指定不同級別的標(biāo)題。

字體標(biāo)簽

設(shè)置字體，size為字體大小，從1到7的整數(shù)，數(shù)字越大，字體越大。

特殊符號

<b></b>

設(shè)置文本粗體顯示。

<i></i>

設(shè)備文本斜體顯示。

3、行的控制相關(guān)標(biāo)簽

段落標(biāo)簽:<p><p>

<p>可以看作是一個空行，用于創(chuàng)建段落

換行標(biāo)簽

<br>作用是換行

<hr color="#"> <hr>標(biāo)簽：作用是插入一條水平線，屬性color用于設(shè)置顏色。

4、圖像標(biāo)簽

常見的圖片格式：

圖像標(biāo)簽的基本語法：

<img src="來源"/>

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

結(jié)果：

  • title：鼠標(biāo)懸停時提示的文字。例如：
<img src="images/bgImage.jpg" title="鼠標(biāo)懸停時提示的文字">

結(jié)果：

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

5、滾動標(biāo)簽

滾動<MARQUEE>標(biāo)簽
語法：<MARQUEE scrolldelay="#" direction="#">

說明：

  • scrolldelay：表示滾動延遲時間（以毫秒為單位，默認(rèn)90）
  • direction：表示滾動對象的方向（默認(rèn)right：從右向左）

示例：

6、列表元素標(biāo)簽

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

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

1、無序列表語法

語法：

<ul>
    <li>列表項內(nèi)容一</li>
    <li>列表項內(nèi)容最后一項</li>
</ul>

開始標(biāo)記：必需
內(nèi)容：列表項 <li>元素
結(jié)束標(biāo)記：必需
主要屬性：
id、class、align、type
Type：列表符號，可取值為disc（實心的圓圈）、square（實心的方形）、circle（空心的圓圈）。

說明：

沒有順序，每個<li>標(biāo)簽獨占一行。

默認(rèn)<li>標(biāo)簽項前面有實心小圓點。

一般用于無序類型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等。

示例：

<!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>
    <!--顯示實心圓點，默認(rèn)樣式-->
    <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>

結(jié)果：

注意：

列表還可以進行嵌套，例如：

<!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>
    <!--顯示實心圓點，默認(rèn)樣式-->
    <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>

結(jié)果：

2、有序列表語法

語法：

<ol>
   <li>列表項內(nèi)容一</li>
   <li>列表項內(nèi)容最后一項</li>
</ol>

開始標(biāo)記：必需
內(nèi)容：列表項 <li>元素
結(jié)束標(biāo)記：必需
主要屬性：id、class、align、type、start
type：列表符號，可取值為1，A，a，i，l
start：起始符號

說明：

有順序，每個<li>標(biāo)簽獨占一行。

默認(rèn)<li>標(biāo)簽項前有順序標(biāo)記。

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

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

例如：

<!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>
    <!--顯示數(shù)字默認(rèn)樣式-->
    <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>

結(jié)果：

注意：

和無序列表一樣，有序列表同樣可以嵌套，例如：

<!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>
    <!--顯示數(shù)字默認(rèn)樣式-->
    <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>

結(jié)果：

3、定義列表

語法：

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

說明：

沒有順序，每個<dt>，<dd>標(biāo)簽獨占一行。

沒有默認(rèn)標(biāo)記，但有層次結(jié)構(gòu)。

例如：

<!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>

結(jié)果：

到此這篇關(guān)于HTML基本元素標(biāo)簽的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論