HTML的标签总结_网页中分隔符的标签是什么-CSDN博客

本文链接：https://blog.csdn.net/m0_37897828/article/details/77161713

今天决定学习html,所以来边学边总结:
随笔记录
一，HMTL的常用标签
1.分隔标签
<br> 隔行标签
<p> 隔段标签
<hr color”颜色” size”厚度” width”宽度” align”对齐” noshade”阴影”> 分隔线标签
2 排版标签
<center> 置中标签
<blockquote> 右缩进标签
<pre>保持原始标签，能保持文字原本的排版格式
3 字体标签
标题标签
<h1><h2*>…<h6>：1-6逐步减小字体
设置字体的标签
<font size =+1 或者 size =-1“字体大小” color “字体颜色” face”字体字型”> : 可以设置字体的大小比预设值大一或减一，预设值一般为3 ；
其他字体变换标签
<b>：加粗
<strong> :加强
4 特殊字元标签
&nbsp 空格标签
&lt <
&gt >
5 背景标签
<body test=”设置字体颜色” link=”设置链接颜色” alink=”设置按下链接的颜色” vlink =”链接按下后的颜色” bgcolor=”设置网页背景颜色” background =“背景图片名称和路径”>

6 链接标签
<a href=”链接位置” target =”链接打开的目标位置” > 补充下，target的属性有：_blank 新打开一个视窗； _parent 打开为当前页面的父窗口 ; _self 自身窗口
7 图片标签

8 表格标签
<table border=”边框” width hight bgcolor background>
<tr> 表格行标签
<td align =”设置表格里的物件位置” bgcolor></td> 表格单元格标签
</tr>
<table>
合并单元格：
上下合并：<td rowspan=”设置合并的大小”>
左右合并：<td colspan=”“>
9 序列标签
无序标签
<ul>
<li>
有序标签
<ol>
<li>
定义列表标签
<DL>
<DT>小标题
<DD> 标签内容
10 表单标签
<form>
这个很重要，来写个表单实例来巩固：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 实例</title>
<style>
    .code{
  background:url(1.jpg);
   font-family:Arial;
   font-style:italic;
   color:blue;
   font-size:20px;
   border:0px;
   padding:2px 3px;
   lettr-spacing:2px;
   font-weight:bolder;
   cursor:pointer;
   width:85px;
   height:30px;
   line-height:40px;
   text-align:center;
   vertical-align:middle;
  }
     div {
         algin:center;
         padding:5px;

     }
     form{
        align:center;
     }
     input{
       height:30px;
        width:300px;
     }
     .xieyi{
        width:10px;
     }
     .inputcode{
        width:110px;
     }
     .huoqu{
       width: 100px
      }
     .message{
        width:189px;
     }
     .link{
        font-size:2px;
     }

</style>
<script>
  function createCode(){

      var code="";
      var codes=new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
      var codelen=4;
      for(var i=0;i<codelen;i++){
          var index=Math.floor(Math.random()*34);
          code+=codes[index];
      }

      var checkcode=document.getElementById("code");

      checkcode.className="code";
      checkcode.innerHTML=code; 

  }
  function validateCode(){
      var inputcode=document.getElementById("inputcode").value;
      var code=document.getElementById("code").innerHTML;
      if(inputcode.length<=0||inputcode=="请输入图片验证码"){
          alert("请输入图片验证码");
          return false;

      }else if(inputcode.toUpperCase() != code.toUpperCase()){
          alert("验证码输入错误");
          createCode();
          return false;
      } 
      return true;
  }
  window.onload=function(){

      createCode();
  }

   function me(){
        //判断信息
       var tele=document.getElementById("tele").value;
          if(tele.length<=0 || tele=="请输入手机号码"){
              alert("请输入手机号");
              return false
          }

         if(!validateCode()){
              return false;
          }
      var message=document.getElementById("message").value;
      if(message.length<=0 || message=="请输入短信验证码" ){
          alert("请输入短信验证码");
          return false
      } 


      var pwd=document.getElementById("pwd").value;
      if(pwd.length<=0 || pwd.length>6){
          alert("请重新输入密码");
          return false
      }
      var pwd2=document.getElementById("pwd2").value;
      if(pwd.length<=0 || pwd.length>6 || pwd != pwd2||pwd2=="请再次输入密码"){
          alert("请重新输入密码");
          return false
      }
      var check=document.getElementById("xieyi").checked;
    if(check == false){
        alert("请阅读协议");
        return false;
    }
      return true;

  }   
</script>
</head>
<script type="text/javascript"></script>

<body>
<div name="div1_name"  >
        <form class="class1" name="form_name"  onsubmit=" me()">
            <div id="1" width="500px" border="1px">
                 <input id="tele" name="telephone" type="text" value="请输入手机号码" />
            </div>
            <div id="2" >
                 <table>
                      <tr>
                           <td><input class="inputcode" id="inputcode" name="yanzhengma" type="text" value="请输入图片验证码" /></td>
                           <td><div class="code" id="code"  onclick="createCode()"></div></td>
                           <td> <a href="#" onclick="createCode()">看不清换一张</a></td>
                      </tr>
                 </table>
             </div>
             <div id="3" >
                <span>   <input id="message" class="message" name="message" type="text" value="请输入短信验证码" ></span>
                <span><input class="huoqu" type="button" value="获取验证码"></span>
             </div>
             <div id="4" >
                    <input  id ="pwd" name="password" type="password" value="请输入密码" >
             </div>
             <div id="5" >
                     <input id="pwd2" name="password2" type="password2" value="请再次输入密码">
             </div>
             <div id="6" >
                     <input id ="xieyi" class="xieyi"  name=" xieyi" type="radio"  >我已阅读并同意<a href="#">《用户协议》</a>
             </div>
             <div id="7" >
                    <input  name="subbmit" type="submit" value="注册">
             </div>
             <div id ="8">
                   <a href="#">已有帐号，直接登录</a>
             </div>
        </form>
</div>
</body>
</html>