HTML &lt;span&gt; 标签

例

使用 <span> 元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

浏览器支持

所有主流浏览器都支持 <span> 标签。

标签定义及使用说明

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示和注释

提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

HTML 4.01 与 HTML5之间的差异

NONE.

全局属性

<span> 标签支持 HTML 的全局属性。

事件属性

<span> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

lt;title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接的URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文档标题</title></head><body>文档内容......</body></html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

在<style> 元素中你需要指定样式文件来渲染HTML文档:

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

HTML <script> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</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; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            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; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

在线咨询

上一篇：必知HTML基础
下一篇：使用SVG动画来制作爆款游戏-HTML5开发手游有多简单？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML &amp;lt;span&amp;gt; 标签

您的项目需求

HTML <span> 标签