JavaWeb总结--HTML/CSS/JavaScript

  • JavaWeb总结
  • HTML
  • 字体标签
  • 标题标签
  • 超链接标签
  • 表格标签
  • ifarme内联标签
  • form表单标签
  • form表单提交细节
  • CSS
  • CSS样式
  • CSS 选择器
  • 标签名选择器
  • id 选择器
  • class 选择器(类选择器)
  • 组合选择器
  • JavaScript
  • 关系(比较)运算
  • 逻辑运算
  • 函数
  • 事件
  • onload 加载完成事件
  • onclick 单击事件
  • onblur 失去焦点事件
  • onchange 内容发生改变事件
  • onsubmit 表单提交事件
  • DOM 模型
  • Document 对象的理解:
  • Document 对象中的方法
  • DOM查询练习


申明: 未经许可,禁止以任何形式转载,若要引用,请标注链接地址 全文共计14677字,阅读大概需要5分钟
欢迎关注我的个人公众号:不懂开发的程序猿

JavaWeb总结

HTML

字体标签

<!-- 字体标签
需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color 属性修改颜色
face 属性修改字体
size 属性修改文本大小
-->
<font color="blue">早安,jerry</font><br>
<font color="red" face="宋体" size="7">我是字体标签</font> <br>

标题标签

<!-- 标题标签
需求 1:演示标题 1 到 标题 6 的
h1 - h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 剧中
right 右对齐
-->
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<h7>标题 7</h7>

超链接标签

<!-- a 标签是 超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转
-->
<br>
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>

表格标签

<!--需求 1:做一个 带表头的 ,三行,三列的表格,并显示边框
需求 2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
    colspan 属性设置跨列
    rowspan 属性设置跨行
-->
    <table width="500" height="500" cellspacing="0" border="1">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>

ifarme内联标签

<!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和 a 标签组合使用的步骤:
1 在 iframe 标签中使用 name 属性定义一个名称
2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
-->
<iframe src="1_hellohtml.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
    <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
    <li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li>
    <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>

form表单标签

<!--需求 1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交。-->
<!--
form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的
时候同时发送给服务器)
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<form>
    用户名称:<input type="text" value="默认值"/><br/>
    用户密码:<input type="password" value="abc"/><br/>
    确认密码:<input type="password" value="abc"/><br/>
    性别:<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
    兴趣爱好:<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
        type="checkbox" />C++<br/>
    国籍:<select>
    <option>--请选择国籍--</option>
    <option selected="selected">中国</option>
    <option>美国</option>
    <option>小日本</option>
</select><br/>
    自我评价:<textarea rows="10" cols="20">我才是默认值</textarea><br/>
    <input type="reset" value="abc" />
    <input type="submit"/>
</form>

form表单提交细节

<!--
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候,数据没有发送给服务器的三种情况:
1、表单项没有 name 属性值
2、单选、复选(下拉列表中的 option 标签)都需要添加 value 属性,以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是:
1、浏览器地址栏中的地址是:action 属性[+?+请求参数]
请求参数的格式是:name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是:
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称:</td>
            <td>
                <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码:</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好:</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" value="js"/>JavaScript
                <input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select name="country">
                    <option value="none">--请选择国籍--</option>
                    <option value="cn" selected="selected">中国</option>
                    <option value="usa">美国</option>
                    <option value="jp">小日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

CSS

CSS样式

<!--方式一:直接写在body里-->
<!--需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。-->
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span style="border: 1px solid red;">span 标签 1</span>
<span style="border: 1px solid red;">span 标签 2</span>
<!--    方式二:写在style里-->
    <!--style 标签专门用来定义 css 样式代码-->
    <style type="text/css">
        /* 需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
<!--方式三:外部引用-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

CSS 选择器

标签名选择器

标签名选择器的格式是: 标签名{ 属性:值; }

<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>

id 选择器

id 选择器的格式是: #id 属性值{ 属性:值; }

<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>

<div id="id002">div 标签 1</div>
<div id="id001">div 标签 2</div>

class 选择器(类选择器)

class 类型选择器的格式是: .class 属性值{ 属性:值; }

<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>

<div class="class01">div 标签 class01</div>
<div class="class02">div 标签</div>
<span class="class01">span 标签 class01</span>

组合选择器

组合选择器的格式是: 选择器 1,选择器 2,选择器 n{ 属性:值; }

<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>

JavaScript

特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)

只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码

<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数,这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>

使用 script 标签引入 单独的 JavaScript 代码文件

<!--现在需要使用 script 引入外部的 js 文件来执行
src 属性专门用来引入 js 文件路径(可以是相对路径,也可以是绝对路径)
script 标签可以用来定义 js 代码,也可以用来引入 js 文件
但是,两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>

关系(比较)运算

等于: == 等于是简单的做字面值的比较

全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

逻辑运算

在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用

0 、null、 undefined、””(空串) 都认为是 false;

/*
&& 且运算。
有两种情况:
第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说,当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/

函数

function 关键字

使用的格式如下:

function 函数名(形参列表){
函数体
}

在 JavaScript 语言中,如何定义带有返回值的函数?

只需要在函数体内直接使用 return 语句返回值即可

函数的第二种定义方式,格式如下:

var 函数名 = function(形参列表) { 函数体 }

Object 形式的自定义对象

<script type="text/javascript">
// 对象的定义:
// var 变量名 = new Object(); // 对象实例(空对象)
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名:" + this.name + " , 年龄:" + this.age);
}
// 对象的访问:
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>

{}花括号形式的自定义对象

对象的定义:
var 变量名 = { // 空对象
属性名:值, // 定义一个属性
属性名:值, // 定义一个属性
函数名:function(){} // 定义一个函数
};
        var obj = {
            name:"华仔",
            age:18,
            fun : function () {
                alert("姓名:" + this.name + " , 年龄:" + this.age);
            }
        };

对象的访问:
变量名.属性 / 函数名();
alert(obj.name);
obj.fun();

事件

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件:

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

事件的注册又分为静态注册和动态注册两种

什么是事件的注册(绑定)?

其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定

静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。

动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码,叫动态注册。

onload 加载完成事件

<script type="text/javascript">

        // 静态注册 onload 事件
        // onload 事件是浏览器解析完页面之后就会自动触发的事件
        // <body οnlοad="onloadFun();">

        // onload 事件的方法
        function onloadFun() {
            alert('静态注册 onload 事件,所有代码');
        }
        // onload 事件动态注册。是固定写法
        window.onload = function () {
            alert("动态注册的 onload 事件");
        }
    </script>

onclick 单击事件

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

    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册 onclick 事件");
        }
        // 动态注册 onclick 事件
        window.onload = function () {
// 1 获取标签对象
            /*
            * document 是 JavaScript 语言提供的一个对象(文档)<br/>
            * get 获取
            * Element 元素(就是标签)
            * By 通过。。 由。。经。。。
            * Id id 属性
            *
            * getElementById 通过 id 属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的 onclick 事件");
            }
        }
    </script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html>

onblur 失去焦点事件

<script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
// console 是控制台对象,是由 JavaScript 语言提供,专门用来向浏览器的控制器打印输出, 用于测试使用
// log() 是打印的方法
            console.log("静态注册失去焦点事件");
        }
        // 动态注册 onblur 事件
        window.onload = function () {
//1 获取标签对象
            var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" οnblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>

onchange 内容发生改变事件

<script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了");
        }
        window.onload = function () {
//1 获取标签对象
            var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已经改变了");
            }
        }
    </script>

onsubmit 表单提交事件

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

    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");
            return flase;
        }
        window.onload = function () {
//1 获取标签对象
            var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
    <input type="submit" value="动态注册"/>
</form>
</body>
</html>

DOM 模型

DOM 全称是 Document Object Model 文档对象模型

Document 对象的理解:

第一点:Document 它管理了所有的 HTML 文档内容。

第二点:document 它是一种树结构的文档。有层级关系。

第三点:它让我们把所有的标签 都 对象化

第四点:我们可以通过 document 访问所有的标签对象。

Document 对象中的方法

document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值

document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值

<script type="text/javascript">
        // 全选
        function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名

<script type="text/javascript">
        // 全选
        function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>

document.createElement( tagName) 方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

<script type="text/javascript">
        window.onload = function () {
// 现在需要我们使用 js 代码来创建 html 标签,并显示在页面上
// 标签的内容就是:<div>我爱你</div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>
            var textNodeObj = document.createTextNode("我爱你"); // 有一个文本节点对象 #我爱你
            divObj.appendChild(textNodeObj); // <div>我爱你</div>
// divObj.innerHTML = "我爱你";//不会显示在浏览器上
// <div>我爱你</div>,但,还只是在内存中
// 添加子元素
            document.body.appendChild(divObj);
        }
    </script>

注:

document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询

如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

DOM查询练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dom 查询</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        window.onload = function () {
            //1.查找#bj 节
            document.getElementById("btn01").onclick = function (){
                var bjObj = document.getElementById("bj")
                alert(bjObj.innerText);
            }

            //2.查找所有 li 节
            document.getElementById("btn02").onclick = function (){
               var liTag= document.getElementsByTagName("li")
                alert(liTag.length)
            }

            //3.查找 name=gender 的所有节
            document.getElementById("btn03").onclick = function (){
              var genderLen =  document.getElementsByName("gender")
                alert(genderLen.length)
            }

            //4.查找#city 下所有 li 节点
            document.getElementById("btn04").onclick = function (){
               var liChild = document.getElementById("city").getElementsByTagName("li");
               alert(liChild.length)
            }

            //5.返回#city 的所有子节
            document.getElementById("btn05").onclick = function (){
                alert(document.getElementById("city").childNodes.length)
            }

            //6.返回#phone 的第一个子节
            document.getElementById("btn06").onclick = function (){
                alert(document.getElementById("phone").firstChild.innerHTML)
            }

            //7.返回#bj 的父节点
            document.getElementById("btn07").onclick = function (){
                alert(document.getElementById("bj").parentNode.innerHTML)
            }

            //8.返回#android 的前一个兄弟节点
            document.getElementById("btn08").onclick = function (){
                alert(document.getElementById("android").previousSibling.innerHTML)
            }

            //9.读取#username 的 value 属性值
            document.getElementById("btn09").onclick = function (){
                alert(document.getElementById("username").value)
            }

            //10.设置#username 的 value 属性值
            document.getElementById("btn10").onclick = function (){
               alert( document.getElementById("username").value="hello")
            }

            //11.返回#bj 的文本值
            document.getElementById("btn11").onclick = function (){
                alert(document.getElementById("bj").innerText)
            }

        }

    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br>
        <br>
        <p>
            你喜欢哪款单机游戏?
        </p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br/>
        <br/>
        <p>
            你手机的操作系统是?
        </p>
        <ul id="phone">
            <li>IOS</li>
            <li id="android">Android</li>
            <li>Windows Phone</li>
        </ul>
    </div>
    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">查找#bj 节点</button>
    </div>
    <div>
        <button id="btn02">查找所有 li 节点</button>
    </div>
    <div>
        <button id="btn03">查找 name=gender 的所有节点</button>
    </div>
    <div>
        <button id="btn04">查找#city 下所有 li 节点</button>
    </div>
    <div>
        <button id="btn05">返回#city 的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回#phone 的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回#bj 的父节点</button>
    </div>
    <div>
        <button id="btn08">返回#android 的前一个兄弟节点</button>
    </div>
    <div>
        <button id="btn09">返回#username 的 value 属性值</button>
    </div>
    <div>
        <button id="btn10">设置#username 的 value 属性值</button>
    </div>
    <div>
        <button id="btn11">返回#bj 的文本值</button>
    </div>
</div>
</body>
</html>

–end–