HTML &lt;span&gt; 標(biāo)簽

例

使用 <span> 元素對(duì)文本中的一部分進(jìn)行著色：

<p>我的母親有 <span style="color:blue">藍(lán)色</span> 的眼睛。</p>

瀏覽器支持

所有主流瀏覽器都支持 <span> 標(biāo)簽。

標(biāo)簽定義及使用說(shuō)明

<span> 用于對(duì)文檔中的行內(nèi)元素進(jìn)行組合。

<span> 標(biāo)簽沒(méi)有固定的格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺(jué)上的變化。如果不對(duì) <span> 應(yīng)用樣式，那么 <span> 元素中的文本與其他文本不會(huì)任何視覺(jué)上的差異。

<span> 標(biāo)簽提供了一種將文本的一部分或者文檔的一部分獨(dú)立出來(lái)的方式。

提示和注釋

提示：被 <span> 元素包含的文本，您可以使用 CSS 對(duì)它定義樣式，或者使用 JavaScript 對(duì)它進(jìn)行操作。

HTML 4.01 與 HTML5之間的差異

NONE.

全局屬性

<span> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<span> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

lt;title> - 定義了HTML文檔的標(biāo)題

使用 <title> 標(biāo)簽定義HTML文檔的標(biāo)題

<base> - 定義了所有鏈接的URL

使用 <base> 定義頁(yè)面中所有鏈接默認(rèn)的鏈接目標(biāo)地址。

使用 <meta> 元素來(lái)描述HTML文檔的描述，關(guān)鍵詞，作者，字符集等。

HTML <head> 元素

<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 標(biāo)簽定義了不同文檔的標(biāo)題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標(biāo)題
當(dāng)網(wǎng)頁(yè)添加到收藏夾時(shí)，顯示在收藏夾中的標(biāo)題
顯示在搜索引擎結(jié)果頁(yè)面的標(biāo)題

一個(gè)簡(jiǎn)單的 HTML 文檔:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標(biāo)題</title></head><body>文檔內(nèi)容......</body></html>

HTML <base> 元素

<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

在<style> 元素中你需要指定樣式文件來(lái)渲染HTML文檔:

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。

META元素通常用于指定網(wǎng)頁(yè)的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者，和其他元數(shù)據(jù)。

元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。

為搜索引擎定義關(guān)鍵詞:

為網(wǎng)頁(yè)定義描述內(nèi)容:

定義網(wǎng)頁(yè)作者:

每30秒中刷新當(dāng)前頁(yè)面:

HTML <script> 元素

HTML head 元素

標(biāo)簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標(biāo)題
<base>	定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link>	定義了一個(gè)文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

在線咨詢

上一篇：必知HTML基礎(chǔ)
下一篇：使用SVG動(dòng)畫來(lái)制作爆款游戲-HTML5開(kāi)發(fā)手游有多簡(jiǎn)單？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML &amp;lt;span&amp;gt; 標(biāo)簽

您的項(xiàng)目需求

HTML <span> 標(biāo)簽