html 基础学习笔记

爱被打了一巴掌 2022-08-23 00:41 153阅读 0赞

<head>  
关键字搜索：<meta name="keywords" content="关键字" />  
           <meta name="description" content="文章描述内容" />  
   跳转    <meta http-equiv="refresh" content="3;URL='http://www.baidu.com'" />  
            
          <meta http-equiv="pragna" content="no-cache" />  
             
          1. <base href="http://www.baidu.com" />       
          2. <base target="\_blank" />  
            
          3. <base target="mainFrame" />  
           
          12.<script type="text/javascript">  
                function msover(obj)\{  
                   obj.className="tdh";  
                 \* cursor: pointer  
                  \}  
                function.msout(obj)\{  
                     obj.className="tdd";  
                  \}  
              </script>  
           13.<script>  
                ul li\{list-style-image:url(images/lfv.gif)\}  
              </script>  
<title></title>  
</head>  
<body>  
   1.   
      target="\_parent"  
       target="\_self"本身窗口打开  
      target="\_top" 顶部打开  
     >测试</a>-->  
   2.<a href="test.html" target="mainFrame">测试1</a>  
     <a href="test.html">测试2</a>  
     <a href="test.html">测试3</a> <br />  
     <iframe frameborder="0" width="100%" height="400" name="mainFrame"></iframe>  
   3.<a href="test.html">测试1</a>  
     <a href="test.html">测试2</a>  
     <a href="test.html">测试3</a> <br />  
     <iframe frameborder="0" width="100%" height="400" name="mainFrame"></iframe><br />  
   
   4. <a href="\#">首页</a>   <a href="\#">产品</a>    <a href="\#">联系我们</a>  
      
   5.<body link="\#ff0000"  
           vlink="0000ff"  
           alink="999999"  
             
     >  
    <a href="\#">首页</a>   <a href="\#">产品</a>    <a href="\#">联系我们</a>  
       
      测试（body体内文本的颜色）  
   6.样式：</head><style type="text/css" >  
             a:link\{color:\#oocc33;\}  
             a:vlink\{color:\#oocc33;\}  
             a:active\{color:\#999999;\}  
             a:hover\{color:\#00ffff;\}  
            </style>  
     <body>  
   7.<body bgcolor="\#ffffcc"  
          background="images/lfv.jpg"  
          style="background-repeat:inerit       
                                   no-repeat  选着这个  
                                    repeat       
                                    repeat-x      
                                    repeat-y"     
             style="background-attachment:fixed;固定的"     
    >  
    8.边距属性<body leftmargin="0" topmargin="0">  
    9.设置缩略图<body>  
                   <img src="images/lfv.jpg" width="200" height="200" alt="这里风景真美"/>  
  
      \*图片加上链接<a href="\#"><img src="images/lfv.jpg" width="200" height="200" alt="这里风景真美"  
                      border="0"  
                    /></a>  
      另一种显示图片的方式:  
             <input type="image" src="images/lfv.jpg" width="200" height="200" />  
  
      文字和图片的排布：  
              <a href="\#"><img src="images/lfv.jpg" width="200" height="200" alt="这里风景真美"  
                      border="0" style="float:left;"  
                    /></a>  
     10.div(是层)+css  
        <center>  
           <div style="width:1000px; height:100px;">  
                  <div style="width:100px; height:100px; background-color:\#ff0000" float:left;> </div>  
                    <div style="width:200px; height:100px; background-color:\#00ff00" float:left;> </div>  
            </div>  
       </center>  
     11.colspan列和并  rowspan行合并  
     表格 <table broder="1" width="600" align="center" cellpadding="0"  
          cellspacing="1"  
         >  
       </table>  
     12.<tr background-color="" οnmοuseοver="msover(this)"  
          οnmοuseοut="msout(this)">  
         <td></td>  
        </tr>  
     13.<hr width="100%" />  
        <ul type="square">  
            <li>html</li>  
            <li>jsp</li>  
        </ul>  
     14.表单  
         用户名：<input type="text" name="username" id="user" readonly="true"  
             value="admin" />  
         密码：<input type="passworld" name="password" /><br/>  
         性别：<input type="radio" value="男" checked="checked"  
                  name="sex"/>男  
                 <input type="radio" value="女" name="sex" />女  
                 <input type="radio" value="保密" name="sex"/>保密<br/>  
  
        复选按钮：  
             爱好：<input type="checkbox" value="打球" name="hobby" />打球  
                    <input type="checkbox" value="听音乐" name="hobby" />听音乐<br/>  
          上传头像：<input type="file" />    
          显示图片：<input type="image" src="images/lfv.jpg" width="" height="" />  
      15.form表单post 把参数隐藏起来   get显示出来  
          <input type="rest" value="重置" />  
          <input type="button" value="测试" οnclick="alert("你好")；" />  
          <input type="hidden" />  
     16.框架(不用body体)  
            a.  
           <frameset cols="50%,\*" >  
                <frame name="top" src="a.html">  
                 <frame name="bottom" src="b.html">  
           </frameset>  
            b.  
              <frameset rows="80,\*,80">  
                 <frame name="top" src="a.html">  
                 <frame name="middle" src="b.html">  
                 <frame name="bottom" src="c.html">  
              </frameset>  
            c.  
            <frameset cols="150,\*">  
                <frameset rows="80,\*">  
                 <frame name="upper\_left" src="a.html">  
                 <frame name="lower\_left" src="b.html">  
             </frameset>  
                 <frame name="right" src="c.html">  
              </frameset>  
           d.  
                <frameset rows="80,\*">  
                       <frame name="top" src="a.html">  
               <frameset cols="150,\*">  
                 <frame name="lower\_left" src="b.html">  
                 <frame name="lower\_right" src="c.html">  
             </frameset>  
              </frameset>  
           e.  
               <frameset cols="150,\*">  
                     <frame name="left" src="a.html">  
               <frameset rows="80,\*">  
                 <frame name="upper\_left" src="b.html">  
                 <frame name="lower\_right" src="c.html">  
             </frameset>      
              </frameset>  
           \*<frameset rows="100,\*">  
                <frame src="img.html" frameborder="0" scrolling="no" />  
                 <frameset cols="100,\*" >  
                    <frame scroling="no" src="left.html"/>  
                    <frame frameborder="0" src="table.html" name="mainFrame" />  
               </frameset>     
             </frameset>  
           在left页面增加 <base target="mainFrame" />是链接内容显示在right页面  
           f.  
         <iframe frameborder="0" width="100%" height="400" name="mainFrame"></iframe>  
             
  
         <iframe frameborder="0" width="100%" height="400" name="mainFrame"></iframe>eq  
          <form action="table.html" method="post" target="mianFrame">  
          j.宝马灯效果  
             (1)<marquee width=150>I'm a small</marquee>  
             (2)<marquee behavior=slide>This is a slide</marque>  
             (3)<marquee behavior=alternate>撞来撞去，我晕了</marquee>  
             (4)<marquee behavior=5 scrolamount=50>太快了，我又晕了</marquee>  
     17.CSS样式  
         a.行内样式<p style="font-size:18px; color:\#ff0000"></p>  
         b.内部样式（定义在文档的内部）  
            <head>  
              <style type="text/css">  
                  span\{  
                         color:\#0000ff;  
                       \}  
              </style>  
            </head>  
             <body>  
                <span>这是内部样式</span>  
             </body>  
         c.外部样式  
            <link rel="stylesheet" type="text/css" href="commom.css" />  
          d.类选择符（border是边框）  
           <style type="text/css">  
            .td\_border\_left\{border-style:none  
                           border-bottom:1px  
                                         dotted \#9d9d9d9d;  
                           border-right:1px,dotted \#9d9d9d;  
                         \}  
            .td\_border\_right\{border-style:none  
                             border-bottom:1px  
                                         dotted \#9d9d9d9d;  
                             \}  
           </style>  
          <body>  
           <table width="1000" border="0" align="center">  
            <tr>  
                <td class="td\_border\_left"></td>  
                <td class="td\_border\_right"></td>  
            </tr>  
          </body>  
        e.鼠标属性  
         <body>  
              <input type="button" value="测试"  style="cursor:help;  
                                                               move;    
                                                               pointer  
  
               "/>  
         </body>  
    18.CSS定位  
       a. <img src="../images/lfv.jpg" style="position:absolute; left:0px;top:0px;" />  
          <img src="../images/lfv1.jpg" style="position:absolute; left:50px;top:50px;" />  
       b.层定位<div>  
        <body>  
        <div style="width:150px; height:150px; background-color:\#ff0000" position:absolute;  
                                     left:0px;top:0px; z-index:3;  
                                     overflow:hidden;  
                                              scrool;  
                                              visible;                              
                                     visibility:  
                                                 hidden;  
                                                 visible;可见  
                                                ></div>  
        <div style="width:150px; height:150px; background-color:\#00ff00" position:absolute;  left:75px;top:75px; z-index:2;></div>  
        <div style="width:150px; height:150px; background-color:\#0000ff" position:absolute;  left:150px;top:150px; z-index:1;></div>  
        </body>  
  
        \*<script type="text/javascript">  
             function msover(obj)\{  
                obj.style.visibility="hidden";  
              \}  
             function msout(obj)\{  
              obj.style.visibility="visible";  
             \}  
         </script>  
          <div style="width:150px; height:150px; background-color:\#ff0000; position:absolute; left:0px; top:0px; z-index:3; οnmοuseοver=""msover(this)" οnmοuseοut="msout(this)"></div>  
       
  
      c.ID选择符  
         <style type="text/css">  
              div div.d\{\}  
            \#test\{width:150px; height:150px; background-color:\#0000ff; position:absulote;  left:150px; top:150px; z-index:1;\}  
         </style>  
         <div id="test"></div>  
   19.边框（border）  
      <style type="text/css">  
         input\{border-bottom-color:\#717171;  
            border-bottom-style:solid;  
            border-bottom-width:1px;  
            
            border-left-style:none;  
            border-top-style:none;  
            border-right-style:none;  
         \}  
      </style>  
     <input type="test" />  
  20.JS  
       
<body>  
21.正则表达式（输入电话号码）  
   <script type=”text/javascript”>  
      function test()\{  
  var obj=document.getElementById(“phone”);  
  var p=obj.value;  
   var reg=/^13\[4-8\]\\d\{8\}$/;  
   
if(!reg.test(p))\{  
    alert("号码格式不正确")；  
     obj.value="";  
     obj.focus();  
      return;  
  
    \}else\{  
      alert("正确");  
   \}  
\}  
  
</script>  
<input type="text" id="phone" /><input type="button" value="测试" onClick="test()" />  
b.邮箱验证  
  <script type="text/javascript">  
      function test()\{  
    var obj=document.getElementById("email");  
    var email=obj.value;  
if(email=="")\{  
   alert("邮箱不能为空");  
   obj.focus();  
   return;  
\}else\{  
   var pos=email.lastIndexof("@");  
if(pos>0&&pos<email.length=1)\{  
var p=email.lastIndexOf(".");  
if(p>(pos+1)&&p<email.length-1)\{  
     alert("邮箱格式正确");  
         \}else\{  
            alert("邮箱格式不正确");  
       obj.value="";  
       obj.focus();  
        return;  
             \}  
      \}else\{  
      alert("邮箱格式不正确");  
       obj.value="";  
       obj.focus();  
        return;  
     \}  
   \}  
  
function check()\{  
      var obj=document.getElementById("emali");  
        var email=obj.value;  
     var reg=/^\\w+@\\w\{2,3\}.\\w\{2,3\}/;  
if(!reg.test(email))\{  
        alert("邮箱格式不正确");  
       obj.value="";  
       obj.focus();  
        return;  
     \}else\{  
           alert("邮箱格式不正确");  
      \}  
   \}  
\}  
</script>  
 <body>  
   <input type="text" id="email" /><input type="button" value="检查" οnclick="test()" />  
 <input type="text" id="email" /><input type="button" value="检查" οnclick="check()" />  
</body>  
22. 数组  
<script type="text/javascript">  
     function init()\{  
        var myarray=new Array(23,,"hello world!",new Date());  
        document.write(myarray\[0\]);  
      \}  
</script>  
23.自定义函数function  
   对象是属性和。。的组合  
     function test()\{  
      (1) var obj=document.all.username;//获得的是对象input//获取表单值  
       alert(obj.type);//input.type;  
      var v=document.all.username.value();//获得的是input内的属性  
      (3) var obj=document.form1.username;  
    <form1>  
        <input type="text" name="username" id="user" value="admin" />  
        <input type="button" value="测试" onClick="test()" />  
   
   </form1>  
       
    \}  
<body>  
   <input type="text" name="username" id="user" value="admin" />  
   <input type="button" value="测试" onClick="test()" />  
24.聚焦失焦事件 a b  
   function focuss()\{  
     document.getElementById("good").value="";  
   \}  
  
   function blurs()\{  
       var good=document.getElementById("good").value;  
        alert(good);  
    \}  
  <input type="text" value="请输入你要查询的商品" id="good" style:"\#ADADAD" οnfοcus="focuss()" οnblur="blurs()" />  
  
  
  
    c.登陆页面：用户名为空不能提交  
       <script type="text/javascript">  
         function check()\{  
          var obj=document.all.username;  
          var name=obj.value;  
           if(name=="")\{  
             alert("用户名不能为空");  
             obj.focus();  
              return false;      
            \}  
              return true;  
        \}  
<form action="add.html" οnsubmit="return check();">  
    用户名：<input type="text" name="username" /><br />  
            <input type="submit" value="登陆" />  
</form>  
  d.连接当中调用JS方法  
       <script type="text/javascript">  
           function del()\{  
         if(confirm("确定要删除吗？"))\{  
         alert("删除成功");  
            \}else\{  
                alert("取消删除");  
                \}  
          \}  
   </script>  
<body>  
     <a href="javascript:del()">删除</ br>  
</body>  
     e.打开一个新窗口  
           
     <input type="button" value="打开" οnclick="window.open('add.html',null,'width=400,height=300')" />  
      
  
  
  
  
  
  
  
  
  
  
  
function qq()  
\{  
  var obj=document.getElementById("qq");  
  var q=obj.value;  
   var reg=/^\\d\{6,11\}$/;  
   
if(!reg.qq(q))  
\{  
   alert("号码格式不正确")；  
   obj.value="";  
   obj.focus();  
   return;  
  
      \}else  
         \{  
          alert("正确");  
           \}  
  
    \}