文章目录

  • 一、IDEA创建HTML
  • 1、创建HTML文件
  • 2、iframe标签
  • 3、iframe和a标签组合使用
  • 4、target标签
  • 5、创建JS文件
  • 二、JS
  • 1、数组
  • 2、函数定义的两种方式
  • 3、JS函数不允许重载
  • 4、隐形参数arguments
  • 5、参数求和
  • 6、自定义对象
  • 7、事件
  • 8、两种事件注册的介绍
  • 9、onload事件
  • 10、onclick事件
  • 11、onblur事件
  • 12、onchange事件
  • 13、onsubmit事件
  • 14、DOM对象介绍
  • 15、验证用户名是否有效
  • 16、正则表达式
  • 17、两种常见的验证效果
  • 【1】显示是否合法的文字
  • 【2】√或×表示是否合法
  • 18、getElementsByName方法
  • 19、getElementsByTagName方法
  • 20、createElement方法
  • 21、节点的常用属性和方法


一、IDEA创建HTML

1、创建HTML文件

1、创建一个web工程(静态的)

java target文件可以删吗 target在java_动态注册


java target文件可以删吗 target在java_HTML_02

2、在工程下创建HTML文件

java target文件可以删吗 target在java_HTML_03


java target文件可以删吗 target在java_javascript_04

右键运行HTML文件:

java target文件可以删吗 target在java_java target文件可以删吗_05

<!DOCTYPE html><!-- 约束,声明 -->
<html lang="en"><!-- html标签表示HTML的开始,lang="en"表示英语 -->
<head><!-- 表示头部信息,一般包含title标签,css样式,js代码 -->
    <meta charset="UTF-8"><!-- 表示当前界面使用UTF-8字符集 -->
    <title>Title</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
  hello
</body>
</html>

java target文件可以删吗 target在java_静态注册_06

2、iframe标签

iframe标签可以在页面上开辟一个小区域来显示单独的一个页面

<iframe src="3.html" width="500" height="400"/>

java target文件可以删吗 target在java_HTML_07

3、iframe和a标签组合使用

<iframe src="http://www.baidu.com"></iframe>
<a href="http://qq.com">QQ</a>
<a href="http://github.com">github</a>

需求:点击下面的两个链接让该链接的页面在上面的iframe标签页面显示。
做法:可将代码改成如下形式,即a标签要在name为xxx的页面打开。

<iframe src="#" name="xxx"></iframe>
<a href="http://qq.com" target="xxx">QQ</a>
<a href="http://github.com" target="xxx">github</a>

4、target标签

在HTML中target(目标)的四个参数的用法:

  • 1、target="_self"表示:将链接的画面内容,显示在目前的视窗中。(内定值) 。 即:同窗口打开。
  • 2、target="_parent"表示:将链接的画面内容,当成文件的上一个画面。即:当前窗口打开。
  • 3、target="_top"表示:将框架中链接的画面内容,显示在没有框架的视窗中(即除去了框架)。即:顶端打开窗口。
  • 4、target="_blank"表示:将链接的画面内容,在新的浏览视窗中打开。即:打开新窗口。

当网页没有框架时,target=“_self"和target=”_parent"以及target="_top"三种方式的显示方式几乎相同。

5、创建JS文件

java target文件可以删吗 target在java_HTML_08

二、JS

1、数组

  • 在JS当中,所有的变量都可以当成是一个boolean类型的变量来去使用。
  • 0,null,undifined,“”(空串)都认为是false
<script>
      var arr=[];//定义一个数组
      arr[0]=12;
      arr[2]="abc";
      //JS语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动给数组扩容
      alert(arr.length);
      alert(arr[1]);//结果为undefined,因为JS当中只要未赋值默认就是undefined
    </script>

2、函数定义的两种方式

- 第一种定义方式:

//1、定义无参函数
      function fun(){
          alert("无参函数被调用");
      }
      
      //2、定义有参函数
      function fun1(a,b){
          alert("有参函数被调用");
      }
      
      //3、定义带有返回值的函数
      function fun2(a,b) {
          return a+b;
      }
      
      alert(fun2(10,30));

- 第二种定义方式:

//1、定义无参函数
      var fun=function (){
          alert("无参函数");
      }
      //2、定义有参函数
      var fun2=function (){
          alert("有参函数a="+a+",b="+b);
      }
      //3、定义带有返回值的函数
      var fun3=function (num1,num2) {
          return num1+num2;
      }

3、JS函数不允许重载

虽然在Java当中允许函数重载,但是在JS当中函数的重载会直接覆盖掉上一次的定义:

function fun(a,b){
        alert("有参函数fun(a,b)");
      }
      function fun(){
        alert("无参函数fun()");
      }
        fun(1,"ad");

上面的代码当中尽管fun有传参,但是结果依然是无参的fun函数。

java target文件可以删吗 target在java_动态注册_09

4、隐形参数arguments

  • arguments:在function函数当中不需要定义,却可以直接用来获取所有参数的变量,即为隐形参数。
  • JS的隐形参数也和java的可变长参数一样,操作类似。
<script>
    function fun(){
      alert(arguments);
    }

    fun(1,"ad");
  </script>

java target文件可以删吗 target在java_动态注册_10

  • arguments.length:查看参数个数
alert(arguments.length);
  • 查看参数的值:
alert(arguments[0]);
      alert(arguments[1]);
      alert(arguments[2]);
  • 遍历参数:
for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
      }

5、参数求和

  • 需求:编写函数,用于计算所有参数相加的和并返回:
<script>
    function sum(num1,num2){
      var result=0;
      for(var i=0;i<arguments.length;i++){
        result+=arguments[i];
      }
      return result;
    }
    alert(sum(1,2,3,4,5,6,7));

  </script>

java target文件可以删吗 target在java_静态注册_11

如果有传入,字符串,则字符串之后的数字都变成字符串拼接的形式:

alert(sum(1,2,3,4,5,"ac6f",7));

java target文件可以删吗 target在java_HTML_12

6、自定义对象

- 1、Object形式的自定义对象

//对象的定义:
    var a=new Object();  //对象实例(空对象)
    a.name="susie-wen";    //定义一个属性
    a.age=21;
    a.fun=function (){
      alert("姓名:"+this.name+",年龄:"+this.age);
    }; //定义一个函数
    a.fun();//调用函数

java target文件可以删吗 target在java_动态注册_13

- 2、花括号形式的自定义对象

var obj={
      name:"susie-wen",
      age:21,
      fun:function (){
        alert("姓名:"+this.name+",年龄:"+this.age);
      }
    };//定义一个对象

    obj.fun();

java target文件可以删吗 target在java_动态注册_13

7、事件

  • 事件是是电脑输入设备与页面进行交互的响应。
  • 常用的事件:
  • onload:加载完成时间——常用于做页面JS代码初始化操作
  • onclick:单击事件——常用于按钮点击响应操作
  • onblur:失去焦点事件——常用于输入框失去焦点后验证其输入内容是否合法
  • onchange:内容发生改变事件——常用于下拉列表和输入框内容发生改变后的操作
  • onsubmit:表单提交事件——常用于表单提交之前,验证所有表单项是否合法

8、两种事件注册的介绍

  • 事件的注册又分为:静态注册和动态注册
  • 事件的注册:指的是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

1、静态注册事件:通过HTML标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册。

2、动态注册事件:通过JS代码得到标签的dom对象,然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码。

  • 动态注册基本步骤:
  • 1、获取标签对象
  • 2、标签对象.事件名=function( ){ }

9、onload事件

onload:浏览器解析完页面之后自动触发

onload:加载完成时间——常用于做页面JS代码初始化操作
1、静态写法

<body onload="alert('静态注册onload事件')">
</body>

java target文件可以删吗 target在java_静态注册_15

  • 一般以上的代码只能在标签当中写一句代码,如果有很多代码要执行,则可以单独在JS当中写一个函数,然后在标签当中引用函数即可。如下:
<script>
  function onloadFun(){
    alert("静态注册onload事件,所有代码");
  }
</script>
  <body onload="onloadFun();">
</body>

2、动态事件

  • 只有一种固定的写法:
<script>
  window.onload=function (){
    alert("动态注册onload事件")
  }
</script>

java target文件可以删吗 target在java_java target文件可以删吗_16

10、onclick事件

onclick:单击事件——常用于按钮点击响应操作

下面代码当中,按钮1是静态写法,按钮2是动态写法:

<script>
      function onclickFun(){
          alert("静态注册onclick事件");
      }
      window.onload=function(){
          //1.获取标签对象
          /**
           * document是JS语言提供的一个对象(文档)
           * getElementById:通过ID属性获取标签对象
           */
          var btnobj=document.getElementById("btn01");
          //2.通过标签对象.事件名=function(){}
          btnobj.onclick=function(){
              alert("动态注册onclick事件")
          }
      }
  </script>
<body>
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
</body>

java target文件可以删吗 target在java_静态注册_17


java target文件可以删吗 target在java_javascript_18

11、onblur事件

  • onblur:失去焦点事件——常用于输入框失去焦点后验证其输入内容是否合法
  • console:是控制台对象,由JS语言提供,专门向浏览器的控制器打印输出,用于测试
  • log:是打印方法
    1、静态事件
<script>
    function onblurFun(){
      console.log("静态注册失去焦点事件");
    }
  </script>
<body>
  用户名:<input type="text" onblur="onblurFun();"><br/>
  密码:<input type="text"><br/>
</body>

java target文件可以删吗 target在java_javascript_19


2、动态事件

下面的代码当中,用户名使用的是静态注册事件,密码是动态注册事件。

<script>
    function onblurFun(){
      console.log("静态注册失去焦点事件");
    }

    window.onload=function (){
      var passwordobj=document.getElementById("password");
      passwordobj.onblur=function (){
          console.log("动态注册失去焦点事件");
      }
    }
  </script>
</head>
<body>
  用户名:<input type="text" onblur="onblurFun();"><br/>
  密码:<input type="text" id="password"><br/>
</body>

java target文件可以删吗 target在java_java target文件可以删吗_20

12、onchange事件

onchange:内容发生改变事件——常用于下拉列表和输入框内容发生改变后的操作
1、静态事件

<script>
    function onchangeFun(){
      alert("女神已经改变了");
    }
  </script>
<body>
  <select onchange="onchangeFun();">
    <option>--女神--</option>
    <option>--小美--</option>
    <option>--小花--</option>
    <option>--小兰--</option>
  </select>
</body>

java target文件可以删吗 target在java_静态注册_21

2、动态事件

下面的代码当中男神是动态注册事件:

<script>
    function onchangeFun(){
      alert("女神已经改变了");
    }
  </script>

  <script>
    window.onload=function (){
      var selObj=document.getElementById("sel01");//这是一个对象
      selObj.onchange=function (){
        alert("男神已经改变了");
      }
    }
  </script>
<body>
  请选择你心中的女神:
  <select onchange="onchangeFun();">
    <option>--女神--</option>
    <option>--小美--</option>
    <option>--小花--</option>
    <option>--小兰--</option>
  </select>
  请选择你心中的男神:
  <select id="sel01">
    <option>--男神--</option>
    <option>--张三--</option>
    <option>--李四--</option>
    <option>--王五--</option>
  </select>
</body>

java target文件可以删吗 target在java_动态注册_22

13、onsubmit事件

  • onsubmit:表单提交事件——常用于表单提交之前,验证所有表单项是否合法
  • form标签的action属性:是一个表单当中必须的属性,action属性规定当提交表单时,向何处发送表单数据。
  • Get:将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接。

1、静态事件

<script>
    function onsubmitFun(){
      //要验证所有表单项是否合法,如果有一个不合法则阻止表单提交
      alert("静态注册表单提交事件——发现不合法");
      return false;
    }
  </script>
<body>
  <form action="http://locolhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="submit" value="静态注册"/>
  </form>
</body>

onsubmit="return onsubmitFun();":注意这里要写成return,不能单单只写一个函数,如果只写一个函数,则当发现表单不合法之后,仍然会跳转到action所写的页面。如果加return,则当表单不合法的时候,不会进行页面的跳转。

  • 如果不想阻止的话,则只要不是return false即可。

java target文件可以删吗 target在java_静态注册_23

2、动态事件

<script>
    function onsubmitFun(){
      //要验证所有表单项是否合法,如果有一个不合法则阻止表单提交
      alert("静态注册表单提交事件——发现不合法");
      return false;
    }
  </script>

    <script>
        window.onload=function (){
           var formObj= document.getElementById("form01");

        formObj.onsubmit=function(){
            alert("动态注册表单提交事件——发现不合法");
            return false;
         }
        }
    </script>
<form action="http://locolhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="submit" value="静态注册"/>
  </form>
  <form action="http://locolhost:8080" id="form01">
    <input type="submit" value="动态注册"/>
  </form>

14、DOM对象介绍

  • DOM:全称是Document Object Model 文档对象模型。可以把文档中的标签,属性,文本转换成对象来管理。
  • Document对象的理解:
  • 1、Document管理了所有的HTML文档的内容。
  • 2、Document是一种树结构的文档,有层级关系。
  • 3、它让我们把所有的标签都对象化。
  • 4、我们可以通过Document访问所有的标签对象。

java target文件可以删吗 target在java_javascript_24

  • 标签的对象化:就是用类去记录标签的所有信息。

Document中重要且常用的几个查询方法:

1.document.getElementById(elementId):通过标签的id属性查找标签dom对象,elementId是标签的id属性。

2.document.getElementsByName(elementName):通过标签的name属性查找标签dom对象,elementName是标签的name属性值。

3.document.getElementsByTagName(tagname):通过标签名查找标签dom对象,tagname是标签名。

4.document.createElement(tagname):通过给定的标签名,创建一个标签对象,这个对象创建完成后还是在内存里面,我们需要把它放在指定的标签里面所有我们一般要配合appendChild() 或 insertBefore()方法使用,tagname是标签名。

15、验证用户名是否有效

  • 需求:当用户点击了校验按钮,要获取输出框的内容,然后验证其是否合法
  • 验证的规则:必须由字母,数字,下划线组成,并且长度是5到12位。
<script>
    function onclickFun(){
      //当我们要操作一个标签的时候,一定要先获取这个标签对象
      var usernameObj=document.getElementById("username");
      // alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
      var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
      //验证字符串符合某个规则,需要使用正则表达式
      var patt=/^\w{5,12}$/;
      /**
       * test()方法:用于测试某个字符串是否匹配我的规则
       * 匹配就返回true,不匹配就返回false
       */
      if(patt.test(usernameText)){
        alert("用户名合法!");
      }else{
        alert("用户名不合法!");
      }
    }
  </script>
<body>
    用户名:<input type="text" id="username" value="susie"/>
    <button onclick="onclickFun()">校验</button>
</body>

16、正则表达式

1、判断字符串当中是否包含字母e:

//方法一:
        var patt=new RegExp("e");
        var str="abcd";
        alert(patt.test(str));

        //方法二:
        var patt1=/e/;
        var str="abcd";
        alert(patt1.test(str));

java target文件可以删吗 target在java_javascript_25


注:方法二也是正则表达式对象,只不过写法不同。

2、表示要求字符串中是否包含字母a或b或c

var patt1=/[abc]/;
        var str="1234d";
        alert(patt1.test(str));
  • 方括号:

java target文件可以删吗 target在java_javascript_26

  • 元字符:

java target文件可以删吗 target在java_动态注册_27

  • 量词:

java target文件可以删吗 target在java_java target文件可以删吗_28

//表示要求字符串从头到尾都匹配,即从头到尾至少包含三个到五个连续的a
        var patt=/^a{3,5}$/;
        var str="aaaaaaaa";
        alert(patt.test(str));

        //表示要求字符串包含至少包含三个到五个连续的a,由于此处是包含,因此只要有三个连续的a就会返回true
        var patt1=/a{3,5}/;
        var str="aaaaaaaa";
        alert(patt1.test(str));

上面两种代码的结果对于字符串“aaaaaaa”来说结果不同。第一个结果为false,第二个结果为true。

17、两种常见的验证效果

【1】显示是否合法的文字

java target文件可以删吗 target在java_动态注册_29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function onclickFun(){
      //当我们要操作一个标签的时候,一定要先获取这个标签对象
      var usernameObj=document.getElementById("username");
      // alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
      var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
      //验证字符串符合某个规则,需要使用正则表达式
      var patt=/^\w{5,12}$/;

      var usernameSpanObj=document.getElementById("usernameSpan");
      //innerHTML:表示起始标签和结束标签里面的内容
      //innerHTML:这个属性可读可写
      // alert(usernameSpanObj.innerHTML);
      usernameSpanObj.innerHTML="你dbcwiwb";

      /**
       * test()方法:用于测试某个字符串是否匹配我的规则
       * 匹配就返回true,不匹配就返回false
       */
      if(patt.test(usernameText)){
          usernameSpanObj.innerHTML="用户名合法!";
      }else{
          usernameSpanObj.innerHTML="用户名不合法!";
      }
    }
  </script>
</head>
<body>
    用户名:<input type="text" id="username" value="susie"/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

【2】√或×表示是否合法

将打钩与打叉的图片直接粘贴到项目底下

java target文件可以删吗 target在java_java target文件可以删吗_30

java target文件可以删吗 target在java_javascript_31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function onclickFun(){
      //当我们要操作一个标签的时候,一定要先获取这个标签对象
      var usernameObj=document.getElementById("username");
      // alert( usernameObj);得到的结果:[object HTMLInputElement],就是一个dom对象
      var usernameText=usernameObj.value;//这里得到的值是随着输入框里的值变化而变化的
      //验证字符串符合某个规则,需要使用正则表达式
      var patt=/^\w{5,12}$/;

      var usernameSpanObj=document.getElementById("usernameSpan");
      //innerHTML:表示起始标签和结束标签里面的内容
      //innerHTML:这个属性可读可写
      // alert(usernameSpanObj.innerHTML);
      usernameSpanObj.innerHTML="你dbcwiwb";

      /**
       * test()方法:用于测试某个字符串是否匹配我的规则
       * 匹配就返回true,不匹配就返回false
       */
      if(patt.test(usernameText)){
          usernameSpanObj.innerHTML="用户名合法!";
          usernameSpanObj.innerHTML="<img src=\"right.jpg\" width=\"18\" height=\"18\">";
      }else{
          usernameSpanObj.innerHTML="用户名不合法!";
          usernameSpanObj.innerHTML="<img src=\"wrong.jpg\" width=\"18\" height=\"18\">";
      }
    }
  </script>
</head>
<body>
    用户名:<input type="text" id="username" value="susie"/>
    <span id="usernameSpan" style="color:red;">
    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

18、getElementsByName方法

  • getElementsByName方法:根据指定的name属性,返回多个标签对象集合。
  • 这个集合的操作和数组一样,且集合当中的每个元素都是dom对象。
  • 这个集合中的元素顺序是他们在HTML页面中从上到下的顺序。(根据name属性来查)
  • getElementById方法:返回拥有指定ID的第一个对象的引用。(根据ID属性来查)
  • 注意两者的区别:前一个有加s,后一个没有加s,说明getElementsByName返回的是多个值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    //全选
    function checkAll(){
      //让所有复选框都选中,先要查找到所有的复选框
      //getElementsByName是根据name属性来查询返回多个标签对象的集合
      //这个集合的操作和数组一样
      //集合当中的每个元素都是dom对象
      var hobbies=document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
          hobbies[i].checked=true;//将所有的复选框改成选中状态
      }
      // alert(hobbies.length);
    }
    //全不选
    function checkNo(){
        var hobbies=document.getElementsByName("hobby");
        for(var i=0;i<hobbies.length;i++){
            hobbies[i].checked=false;//将所有的复选框改成选中状态
        }
    }
    //反选
    function checkReverse(){
        var hobbies=document.getElementsByName("hobby");
        for(var i=0;i<hobbies.length;i++){
            hobbies[i].checked=!hobbies[i].checked;
/*            if(hobbies[i].checked){
                hobbies[i].checked=false;
            }else{
                hobbies[i].checked=true;
            }*/
        }
    }
  </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="python">python
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>

</body>
</html>
  • checked表示复选框的选中状态,如果选中是true,如果不选中是false。这个属性可读可写。

java target文件可以删吗 target在java_HTML_32

19、getElementsByTagName方法

  • getElementsByTagName() :方法可返回带有指定标签名的对象的集合。
  • 这个集合的操作和数组一样。
  • 并且集合当中都是dom对象。
  • 这个集合中的元素顺序是他们在HTML页面中从上到下的顺序。
  • 提示:如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll(){
            var input=document.getElementsByTagName("input");
            for(var i=0;i<input.length;i++){
                inputs[i].checked=true;
            }
        }
    </script>
</head>
<body>
        兴趣爱好:
        <input type="checkbox" value="cpp" checked="checked">C++
        <input type="checkbox" value="java">java
        <input type="checkbox" value="python">python
        <br/>
        <button onclick="checkAll()">全选</button>

</body>

document对象的三个查询方法:

  • 如果有ID属性,就优先使用getElementById方法来进行查询。
  • 如果没有ID属性,就优先使用getElementsByName方法来进行查询。
  • 如果ID属性和Name属性都没有,则最后使用标签名查询。
  • 以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

20、createElement方法

通过下面的代码可以看出,JS的createElement方法可以创建HTML标签,并显示在页面上

<script>
        window.onload=function (){
            //需求:使用JS来创建HTML标签,并显示在页面上
            //例如,标签的内容是<div>today is today</div>
            var divObj=document.createElement("div");//此时在内存当中创建了<div></div>
            //添加子元素
            divObj.innerHTML="today is today";//此时已经有文字了,但是是显示在内存当中
            document.body.appendChild(divObj);//这是一个语句,当按顺序读取的使用会比body里面的内容先读,因此要将其变成放到页面
        }
    </script>

21、节点的常用属性和方法

  • 节点就是标签对象。

方法:

1、通过具体的元素节点调用getElementsByTagName()方法,获取当前节点的指定标签名

2、appendChild( oChildNode )方法,可以添加一个子节点, oChildNode就是要添加的孩子节点。

属性:

字符

属性

childNodes

获取当前节点的所有子节点

firstChild

获取当前节点的第一个子节点

lastChild

获取当前节点的最后一个子节点

parentNode

获取当前节点的父节点

nextSibling

获取当前节点的下一个节点

previousSibling

获取当前节点的上一个节点

className

获取或设置标签的class属性值

innerHTML

表示获取/设置起始标签和结束标签的内容

innerText

表示获取/设置起始标签和结束标签中的文本