html 基础学习笔记

最新推荐文章于 2021-10-24 14:57:27 发布
最新推荐文章于 2021-10-24 14:57:27 发布
阅读量786 收藏
点赞数
分类专栏： Other
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiyijianxian/article/details/51576797
版权
<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" /><!--打开新窗口在整个页面里所有的HTML连接都打开新窗口-->
          <!--是这目的框架名target="mainFram"-->
          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. <!--HTML的链接使用<a href="test.html" target="_blank"<!--在新窗口打开-->
      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"<!--link：设计窗口连接的颜色-->
           vlink="0000ff"<!--vlink：页面访问时（过，参观过）的颜色-->
           alink="999999"<!---alink:页面点击（连接被）激活时的颜色->
           text="#ff00ff"<!--设置body体内文本的颜色-->
           <!--将连接时的颜色和访问时的颜色最好设施成一样的-->
     >
    <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    <!--在X轴上重复-->
                                    repeat-y"   <!--在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"<!--name值相同表示的是同一组-->/>男
                 <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("你好")；" /><!--button必须和js结合才可用-->
          <input type="hidden" /><!--隐藏表单-->
     16.框架(不用body体)
            a.<!--一个窗口分隔成两行的-->
           <frameset cols="50%,*" ><!--将窗口分割成两列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,*"><!--页面分割成两列，再把一列left分成两行-->
                <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,*"><!--页面分割成两列，再把一列right分成两行-->
                     <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"<!--框架边框为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{<!--本页面所有span的都引用该样式，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{}<!--div 下得div class=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<!--(2)var obj=document.getElementById("user")//根据
            ID获取队对象-->//获取表单值
       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("正确");
           }

    }
我是1只猫
关注
专栏目录
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2528
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
html中<a href> </a>的用法
weixin_30467087的博客
06-17 2971
一、绝对跳转 <a href="http://www.baidu.com/">百度</a> 二、相对跳转有如下方式，需要了解（以下的例子中，分别以你的例子和带.html尾缀进行演示）： 转载:http://www.cnblogs.com/theWayToAce/; 1. 本目录的使用（与本文件在相同的文件夹下）： <a h...
html超链接
聪明的编译器
07-03 1930
一. 文件之间的链接超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：　　　　　　资源地址">链接文字　　·标签表示一个链接的开始，表示链接的结束；　　·属性“HREF”定义了这个链接所指的地方；　　·通过点击“链接文字”可以到达指定的文件。二.链接之间的分类(1).本地链接对同一台机器上的不同文件进行的连
<A href="javascript:void(0)">点我啊</a> 与<A href="#“>点击</A>区别
wlbbswl的博客
07-14 481
点我啊 点击链接后不会回到网页顶部 点我啊 点击后会回到网面顶部
【Linux】远程连接服务
嚴 帅的博客
12-09 4159
1、什么是远程连接服务器 远程连接服务器通过文字或图形接口方式来远程登录系统，让你在远程终端前登录linux主机以取得可操作主机接口（shell），而 登录后的操作感觉就像是坐在系统前面一样。 2、远程连接服务器的功能 分享主机的运算能力 服务器类型：有限度开放连接 工作站类型：只对内网开放 3、远程连接服务器的类型（以登录的连接界面来分类） 文字接口 明文传输：Telnet、RS...
关于a标签的onclick与href的执行顺序
confused9090的专栏
08-06 1万+
onclick的事件被先执行，其次是href中定义的（页面跳转或者javascript）同时存在两个定义的时候（onclick与href都定义了），如果想阻止href的动作，在onclick必须加上return false; 一般是这样写onclick="xxx();return false;".在href中定义的函数如果有返回值的话，当前页面的内容将被返回值代替 如果页面过长有滚动条，
HTML基础学习笔记
08-07
在“HTML基础学习笔记”中，我们可以深入理解HTML的基本结构、样式控制、超链接、图像和表格的使用，以及列表的创建。 首先，HTML的基本结构由`<html>`、`<head>`和`<body>`三个主要部分组成。`<html>`是整个文档的...
01-javaweb基础之html基础学习笔记
05-03
html基础知识，比如常用的标签、表格标签、表单标签、freamset框架、ifream内置框架标签
html标签基础学习笔记
05-24
html标签基础学习笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
『HTML系列』链接标签 a
老__L的博客
10-24 6565
本文主要介绍a标签。 a>元素（或称锚元素）可以通过它的href属性创建通向其他网页文件同一页面内的位置电子邮件地址或任何其他 URL 的超链接。中的内容应该指明链接的意图。如果存在href属性，当元素聚焦时按下回车键就会激活它。a 标签的开始标签和结束标签都不能省略；外部链接：需要添加；内部链接：直接链接内部页面名称即可，比如< a href="index.html">首页；如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为。
<a href='www.baidu.com'>点击</a>
beat98的博客
08-22 2993
&lt;a href='www.baidu.com'&gt;点击&lt;/a&gt;
a标签中href=""的几种用法
热门推荐
博客
03-02 1万+
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法，所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法（参考总结的）1、a href=”javascript:js_method();” 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href
html学习-05（链接及图像）
染指流年的博客
04-29 307
background：背景；&lt;a&gt;：文字链接、图片链接、邮件链接等；&lt;img&gt;：width、height、align等属性。&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body background="../images/demo_005_b
html中 <a href> 和<img src>的用法
txp1993的专栏
08-28 7460
用法： 一、绝对跳转    百度
web前端基础知识-（一）html基本操作
weixin_30648963的博客
11-11 70
1. HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。 浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎) 总结：HTML其实就是一套规则，一套浏览器能够识别的...
Amazon S3：S3静态网站托管教程.docx
最新发布
11-12
Amazon S3：S3静态网站托管教程.docx
基于支持向量机SVM-Adaboost的风电场预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
HTML基础学习笔记：超链接、字体样式和基本标签
HTML基础学习笔记 HTML基础学习笔记是学习HTML语言的基础知识笔记，涵盖了各种HTML标签的认识和使用。通过本笔记，读者可以了解HTML的基本结构、标签的使用、超链接的创建等基础知识。 一、HTML基本结构 HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值