html的標(biāo)簽的介紹和使用

這篇文章主要為大家詳細(xì)介紹了html的標(biāo)簽的介紹和使用，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門，感興趣的小伙伴們可以參考一下。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供河源企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都做網(wǎng)站、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為河源眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

html標(biāo)簽

第一個(gè)html標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西部開(kāi)源中心</title>
</head>
<body>
    <h2 >標(biāo)題 </h2 >
    <h3 >標(biāo)題 </h3 >
    <h4 >標(biāo)題 </h4 >
    <h5 >標(biāo)題 </h5 >
    <h6 >標(biāo)題 </h6 >
    <h7 >標(biāo)題 </h7 >
    <!沒(méi)有h7>
    <h7 >標(biāo)題 </h7 >
</body>
</html>

文本標(biāo)簽

html的標(biāo)簽的介紹和使用

常用的文本標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<i>斜體</i><br/>
<em>斜體</em><br/><hr>
<b>加粗字體</b>
<strong>加粗字體</strong>
<cite>引用</cite>
x<sub>1</sub> = pi*r<sup>2</sup>
原價(jià)：<del>￥100</del>
現(xiàn)價(jià)：<b >￥10</b>
<br/>

<p>這種東西只有在并發(fā)不高的項(xiàng)目，管理系統(tǒng)中用。

<p>如果是面向用戶的高并發(fā)應(yīng)用，都不要使用。

觸發(fā)器和存儲(chǔ)過(guò)程本身難以開(kāi)發(fā)和維護(hù)，不能高效移植。

觸發(fā)器完全可以用事務(wù)替代。
存儲(chǔ)過(guò)程可以用后端腳本替代。

</body>
</html>

換行標(biāo)簽

html的標(biāo)簽的介紹和使用

文本標(biāo)簽

html的標(biāo)簽的介紹和使用

列表標(biāo)簽

html的標(biāo)簽的介紹和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>無(wú)序列表：四大名著</h2>
<ul>
    <li>西游記</li>
    <li>三國(guó)演義</li>
    <li>水滸傳</li>
    <li>紅樓夢(mèng)</li>
</ul>
<h2>有序標(biāo)簽：四大名著</h2>
<ol type="a">
    <li>西游記</li>
    <li>三國(guó)演義</li>
    <li>水滸傳</li>
    <li>紅樓夢(mèng)</li>
</ol>

<h2>自定義列表：</h2>
<dl>
    <dt>四大名著</dt>
    <dd>西游記</dd>
    <dd>三國(guó)演藝</dd>
    <dd>水滸傳</dd>
    <dd>紅樓夢(mèng)</dd>
    <dt>前端開(kāi)發(fā)</dt>
    <dd>html</dd>
    <dd>css</dd>
    <dd>js</dd>
</dl>
</body>
</html>

div與span標(biāo)簽

html的標(biāo)簽的介紹和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<! 塊級(jí)元素：一個(gè)元素占一整行>
<div >
    div 標(biāo)簽
</div>

<! 行內(nèi)元素，一個(gè)元素站得位置取決標(biāo)簽內(nèi)容>
<div >
<span>
    span 標(biāo)簽
</span>

</body>
</html>

圖片標(biāo)簽img

<img> 標(biāo)簽定義 HTML 頁(yè)面中的圖像。有兩個(gè)必需的屬性:src 和 alt。
title:文字提示屬性
屬性:src: 圖片名及url地址
alt: 圖片加載失敗時(shí)的提示信息
width/height: 圖片寬度/高度
<a href=" ">...</a> 超級(jí)鏈接標(biāo)簽
屬性:
href: 必須,指的是鏈接跳轉(zhuǎn)地址;
target: 表示鏈接的打開(kāi)方式。
_blank 新窗口 ,
_self 本窗口(默認(rèn))
title:文字提示屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! src:指定的時(shí)間圖片的位置，可以通過(guò)絕對(duì)路徑和相對(duì)路徑表示，但大多數(shù)情況使用相對(duì)路徑
   alt：當(dāng)圖片不能被加載出來(lái)時(shí)，顯示的文字信息 >
<img src="./img/baidu.gif" alt="百度圖片" width="500px"height="500px">

</body>
</html>

超鏈接標(biāo)簽

錨點(diǎn)鏈接:

定義一個(gè)錨點(diǎn):
<a id="a1"></a> 百度一下 <a name="a1"></a>
使用錨點(diǎn):
<a href="#a1">跳到a1處</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>文字標(biāo)簽</h2>
<a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.baidu.com" target="_blank" title="text"> 百度一下</a>

<h2>圖片搜索</h2><br/>
<hr>
<a href="http://www/baidu.com">
    <img src="baidu.gif" alt="baidu" title="baidu">
</a>

</body>
</html>

錨點(diǎn)的實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>錨點(diǎn)</h2>
<a href="#a1">跳到a處</a>
<a href="#a2">跳到a2處</a>

<h3 id="a1">標(biāo)題一</h3>
<p>
一、存儲(chǔ)過(guò)程優(yōu)點(diǎn)

存儲(chǔ)過(guò)程是一組預(yù)先創(chuàng)建并用指定的名稱存儲(chǔ)在數(shù)據(jù)庫(kù)服務(wù)器上的 SQL 語(yǔ)句，將使用比較頻繁或者比較復(fù)雜的操作，預(yù)先用 SQL 語(yǔ)句寫好并存儲(chǔ)起來(lái)，以后當(dāng)需要數(shù)據(jù)庫(kù)提供相同的服務(wù)時(shí)，只需再次執(zhí)行該存儲(chǔ)過(guò)程。

1.具有更好的性能

存儲(chǔ)過(guò)程是預(yù)編譯的，只在創(chuàng)建時(shí)進(jìn)行編譯，以后每次執(zhí)行存儲(chǔ)過(guò)程都不需再重新編譯，而一般 SQL 語(yǔ)句每執(zhí)行一次就編譯一次，因此使用存儲(chǔ)過(guò)程可以提高數(shù)據(jù)庫(kù)執(zhí)行速度。

2.功能實(shí)現(xiàn)更加靈活

存儲(chǔ)過(guò)程中可以應(yīng)用條件判斷和游標(biāo)等語(yǔ)句，有很強(qiáng)的靈活性，可以直接調(diào)用數(shù)據(jù)庫(kù)的一些內(nèi)置函數(shù)，完成復(fù)雜的判斷和較復(fù)雜的運(yùn)算。

3.減少網(wǎng)絡(luò)傳輸

復(fù)雜的業(yè)務(wù)邏輯需要多條 SQL 語(yǔ)句，當(dāng)客戶機(jī)和服務(wù)器之間的操作很多時(shí)，將產(chǎn)生大量的網(wǎng)絡(luò)傳輸。如果將這些操作放在一個(gè)存儲(chǔ)過(guò)程中，那么客戶機(jī)和服務(wù)器之間的網(wǎng)絡(luò)傳輸就會(huì)減少，降低了網(wǎng)絡(luò)負(fù)載。



<h3 id="a2">標(biāo)題二</h3>
<p>
一、存儲(chǔ)過(guò)程優(yōu)點(diǎn)

存儲(chǔ)過(guò)程是一組預(yù)先創(chuàng)建并用指定的名稱存儲(chǔ)在數(shù)據(jù)庫(kù)服務(wù)器上的 SQL 語(yǔ)句，將使用比較頻繁或者比較復(fù)雜的操作，預(yù)先用 SQL 語(yǔ)句寫好并存儲(chǔ)起來(lái)，以后當(dāng)需要數(shù)據(jù)庫(kù)提供相同的服務(wù)時(shí)，只需再次執(zhí)行該存儲(chǔ)過(guò)程。

1.具有更好的性能

存儲(chǔ)過(guò)程是預(yù)編譯的，只在創(chuàng)建時(shí)進(jìn)行編譯，以后每次執(zhí)行存儲(chǔ)過(guò)程都不需再重新編譯，而一般 SQL 語(yǔ)句每執(zhí)行一次就編譯一次，因此使用存儲(chǔ)過(guò)程可以提高數(shù)據(jù)庫(kù)執(zhí)行速度。

2.功能實(shí)現(xiàn)更加靈活
</p>

</body>
</html>

表格標(biāo)簽

html的標(biāo)簽的介紹和使用

標(biāo)簽:
?表格標(biāo)簽:table
?行標(biāo)簽:tr
?單元格(表示列的概念):td
?表頭:th :加粗并且居中
?表格標(biāo)題:caption
html的標(biāo)簽的介紹和使用
?標(biāo)簽合并:
行合并:rowspan
列合并:colspan
?標(biāo)簽常用屬性:
border:邊框
width:寬度
height:高度
algin:對(duì)齊方式
center,left,right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px"align="center" width="500px" >
    <caption>表格標(biāo)題</caption>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

</table>

</body>
</html>

from表格標(biāo)簽

常用屬性:
? action屬性:提交的目標(biāo)地址(URL)
? method屬性:提交方式:get(默認(rèn))和post
get方式:
URL地址欄可見(jiàn)
長(zhǎng)度受限制
相對(duì)不安全.
post方式:
URL地址不可見(jiàn)
長(zhǎng)度不受限制
相對(duì)安全.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<hr/>
<form action="sucess.html" method="get">

    <!--創(chuàng)建三行兩列的表格-->
    <table width="20%" align="center" >
        <tr>
            <td colspan="2" ><h4>用戶登錄</h4></td>
        </tr>
        <tr>
            <td >用戶名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td >密碼</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td colspan="2" > <input type="submit" value="登錄"></td>
        </tr>
    </table>

</form>

</body>
</html>

表單項(xiàng)標(biāo)簽

<input> 表單項(xiàng)標(biāo)簽input定義輸入字段,用戶可在其中輸入數(shù)據(jù)。
在 HTML 5 中,type 屬性有很多新的值。
html的標(biāo)簽的介紹和使用

下拉列表標(biāo)簽

<select>...</select> 標(biāo)簽創(chuàng)建下拉列表。
? name屬性:定義名稱,用于存儲(chǔ)下拉值的
? size:定義菜單中可見(jiàn)項(xiàng)目的數(shù)目,html5不支持
? disabled 當(dāng)該屬性為 true 時(shí),會(huì)禁用該菜單。
? multiple 多選
<option>... </option> 下拉選擇項(xiàng)標(biāo)簽,用于嵌入到<select>標(biāo)簽中使用的;
? value屬性:下拉項(xiàng)的值
? selected屬性:默認(rèn)下拉指定項(xiàng).

文本域標(biāo)簽

<textarea>...</textarea> 多行的文本輸入?yún)^(qū)域
? name :定義名稱,用于存儲(chǔ)文本區(qū)域中的值。
? cols :規(guī)定文本區(qū)內(nèi)可見(jiàn)的列數(shù)。
? rows :規(guī)定文本區(qū)內(nèi)可見(jiàn)的行數(shù)。
? disabled: 是否禁用
? readonly: 只讀

按鈕標(biāo)簽

<button>...</button> 標(biāo)簽定義按鈕。
<fieldset> --fieldset 元素可將表單內(nèi)的相關(guān)元素分組。
html的標(biāo)簽的介紹和使用

html內(nèi)嵌框架

內(nèi)嵌框架與a標(biāo)簽配合使用

a標(biāo)簽的target屬性可以將鏈接到的頁(yè)面直接顯示在當(dāng)前頁(yè)面的iframe中,代碼如下:
html的標(biāo)簽的介紹和使用

關(guān)于html的標(biāo)簽就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。

本文標(biāo)題：html的標(biāo)簽的介紹和使用
當(dāng)前網(wǎng)址：http://bm7419.com/article16/igoogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容