java 书签替换添加换行

转载

mob6454cc6f4a4e 2024-09-10 11:33:32

文章标签 java 书签替换添加换行 java html 字体颜色选择器 文章分类 Java 后端开发

网页组成：内容（结构），表现，行为
HTML（hyper Text markup language）超文本标记语言：通过标签来标记要现实的网页中各个部分。

html编写规范：标签格式，大小写不敏感，标签有自己的属性，单标签双标签

java 书签替换添加换行_java

标签属性分为：基本属性bgcolor=“red”，事件属性οnclick=“alert(‘你好’);”

事件属性可以设置事件响应后的代码。

br换行

hr横线

idea添加文件：复制过后在选中想要添加的位置粘贴

标签：1标签的语法，2font标签，3特殊字符，4内联框架，5标题标签，6超链接，7img标签，8表格标签，9表格跨行跨列，10iframe标签

java 书签替换添加换行_java_02

java 书签替换添加换行_html_03

<小于号lessthan

》大鱼号greaterthan

空格:

标题

![在这里插入图片描述]() ![在这里插入图片描述]() ![在这里插入图片描述]() order list有序列表 unorder list:ol无序列表

java 书签替换添加换行_字体颜色_04

<table align="center" border="1" width="300" height="300" cellspacing="0">
	<tr>
		<td align="center"><b>1.1</b></td>
		<th>1.2</th>
		<td>1.3</td>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>

colspan属性设置跨列
rowspan属性设置跨行

java 书签替换添加换行_选择器_05

案例：表单

<body>
  <form align="center">
    用户名称：<input type="text" value="默认值"><br>
    用户密码：<input type="password" value="请输入密码" ><br>
    确认密码：<input type="password" value="请输入密码" ><br>
    性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br>
    兴趣爱好：<input type="checkbox" checked="checked">Java<input type="checkbox">前端<input type="checkbox">运维<br>
    国家：<select>
        <option>--请选择国籍--</option>
        <option >中国</option>
        <option>美国</option>
        <option>俄罗斯</option>
        </select><br>
    自我评价：<textarea rows="10" cols="20"></textarea>
    <br>
    <input type="reset" value="重置按钮按一下">
    <input type="submit" value="提交按钮">
    <input type="button" value="abc">
      <input type="submit" value="上传文件">
      <input type="hidden" value="">

  </form>


</body>

CSS

Cascading Style sheet 层叠样式表单，用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

<!DOCTYPE html>
 <html lang="en">
  <head> <meta charset="UTF-8"> 
  <title>Title</title>
   </head> <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> 
     </body> </html>

html和css结合方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border:1px solid red;
		}
		span{
			border:1px solid red;
		}
	</style>
</head>
<body>		
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div >div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>		
	
	<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border:1px solid yellow;
			color:blue;
			font-size:30px;
		}
		span{
			border:5px dashed blue;
			color:blue;
			font-size:30px;
		}
	</style>
</head>
<body>
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	
</body>
</html>

id选择器格式：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style>
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		#id002{
			color:red;
			font-size: 20px;
			border:5px blue dotted;
		}
	</style>

</head>
<body>		
	
	<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
	
</body>
</html>

class类型选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<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>
</head>
<body>

	<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

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

</body>
</html>

组合选择器；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style>
        .class01,#id01{
            color:blue;
            font-size: 20px;
            border:1px yellow solid;
        }
    </style>
</head>
<body>

	<!-- 
	需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
	 -->

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
    <style type="text/css">
        div{
            color:red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 50px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        table{
            border:1px red solid;
        }
        td{

        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
<a href="http://www.baidu.com">百度</a>
    <div>biaoqian</div>
</body>
</html>

JavaScript

第一种使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello");
    </script>
</head>
<body>

</body>
</html>

第二种使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="1.js"></script>
    //src专门用来引入文件
    <script type="text/javascript" >
        alert("国哥好帅");
    </script>
</head>
<body>

</body>
</html>

变量：
javascript:数据类型
JavaScript 的变量类型：数值类型： number 字符串类型： string 对象类型： object 布尔类型： boolean 函数类型： function JavaScript 里特殊的值： undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. null 空值 NaN 全称是：Not a Number。非数字。非数值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javascript">
        var i;
        alert(i);//undefined
        i=12;
        //typeof是一个函数，可以取变量数据类型返回
        alert(i);
        alert(typeof(i));
        i='abc';
        alert(typeof(i));

        var a=12;
        var b="abc";
        alert(a*b);
    </script>
</head>
<body>


</body>
</html>

关系运算：
等于：==简单做字面值比较
全等于：===字面比较，然后比较数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算</title>
    <script type="text/javascript">
        var a="12";
        var b=12;
        alert(a==b);
        alert(a===b);
    </script>
</head>
<body>

</body>
</html>

0.null.undefined ""空串.都是false

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

数组：
var 数组名=[];
var 数组名=[1,‘abc’,true];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
        var arr=[];
       // alert(arr.length);

        arr[0]=12;
        //alert(arr[0]);
        alert(arr.length);
        //js语言中数组，可以自动扩容，

        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }

    </script>
</head>
<body>


</body>
</html>

函数
函数的定义：两种方式
第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      function fun(){
        alert("无参函数fun()被调用了")
      }
      fun();

      function fun2(a,b){
        alert("有参函数fun2()被调用了 a=>"+a+",b=>"+b);
      }
      fun2(123,456);

      function sum(num1,num2){
        var result=num1+num2;
        return result;
      }
      alert(sum(20,30));
    </script>
</head>
<body>

</body>
</html>

函数第二种定义方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <script type="text/javascript">
        var fun = function(){
            alert("无参函数");
        }
        fun();
        var fun2=function (a,b){
            alert("有参函数a="+a+",b="+b);
        }
        fun2(1,2);

        var fun3=function (num1,num2){
            return num1+num2;
        }
        alert(fun3(1,2));
    </script>
</head>
<body>



</body>
</html>

不允许函数重载：

自定义对象：
var 变量名 = new Object(); //对象实例
变量名.属性名= 值; //定义一个属性
变量名.函数名 = function(){} //定义一个函数

对象的访问：
变量名.属性
变量名.函数名();

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

        var obj = new Object();
        //alert(typeof(obj));
        obj.name="华子";
        obj.age=18;
        obj.fun=function (){
            alert("姓名："+this.name+"年龄；"+this.age);
        }
        obj.fun();
    </script>
</head>
<body>


</body>
</html>

{}形式的自定义对象
var 变量名 = {
属性名:值，
属性名:值，
函数名：function(){}
}; //空对象

对象的访问：
变量名.属性；
变量名.函数名；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var obj={
          name:"国哥",
          age:18,
          fun:function (){
              alert("姓名"+this.name+"年龄"+this.age);
          }
        };

        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>


</body>
</html>

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

事件的注册又分为静态注册和动态注册两种：什么是事件的注册（绑定）？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload</title>
    //静态注册onload事件，onload事件是浏览器解析完之后自动运行的事件
    <script type="text/javascript">
        function onloadFun(){
            alert('静态注册onload事件');
        }
        //动态注册onload事件
        window.onload=function(){
            alert("动态注册的onload事件")
        }


    </script>
</head>
<!--<body οnlοad="onloadFun();">-->
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click</title>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态注册onclick事件");
        }

        window.onclick=function(){
            //获取标签对象
            var btnobj=document.getElementById("btn01")
            //通过标签对象.事件名=functrion(）
            btnobj.onclick=function(){
                alert("动态注册的onclick事件")
            }
        }
    </script>
</head>
<body>
    //静态注册
    <button onclick="onclickFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("女生已经改变了");
        }
        window.onload=function (){
            var selobj=document.getElementById("sel01");
            selobj.onchange=function (){
                alert("男生已经发生改变");
            }
        }
    </script>
</head>
<body>
    <!--静态注册-->
<!--    <select οnchange="onchangeFun()">-->
<!--        <option>女生</option>-->
<!--        <option>防范</option>-->
<!--        <option>你啊你姑娘</option>-->
<!--        <option>小李</option>-->
<!--    </select>-->


    <!--动态注册-->
    <select id="sel01">
        <option>男生</option>
        <option>防范</option>
        <option>你啊你姑娘</option>
        <option>小李</option>
    </select>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit</title>
    <script type="text/javascript">
        function onsubmitFun(){
            alert("静态注册提交事件----发现不合法");
            return false;
        }

        window.onload=function (){
            //获取标签对象
           var formobj= document.getElementById("form01");
           formobj.onsubmit=function (){
               alert("动态注册表单提交事件");
               return true;
           }
        }
    </script>
</head>
<body>

<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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //验证规则：字母数字下划线  5-12位
        function onclickFun(){
            //1
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            var patt=/^\w{5,12}$/;
            if(patt.test(usernameText)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>


用户名：<input type="text" id="username" value="wzg">
<button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        //var patt = new RegExp("e");//要求字符串是否包含字符e
        //var patt =/e/;
        //var patt =/[abcd]/;//要求字符串中是否包含a or b or c 任意一个
        //var patt =/[a-z]/;//要求字符串中是否包含a or b or c 任意一个
        //var patt =/[0-9]/;//要求字符串中是否包含a or b or c 任意一个
        var patt =/a+/;//要求字符串中是否包含a or b or c 任意一个
        alert(patt);
        var str ="abc";
        alert(patt.test(str));
    </script>
</head>
<body>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            var hobbies = document.getElementsByName("hobby");
            //alert(hobbies.length);
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked=true;
            }
        }
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            //alert(hobbies.length);
            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++) {
                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="js">JavaScript
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.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="js">JavaScript
<br>
<button onclick="checkAll()">全选</button>

</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。