html基础

来源：互联网发布：mac 跨版本升级编辑：程序博客网时间：2024/05/17 02:51

1html 2javascritp 3css
1html
<font size="6" color="red">hello world</font>
<meta http-equiv="contentType" content="text/html;charset=gbk">
让某个元素在文档加载时获取焦点：
<body onload="document.forms['f1']['username'].focus();">
 空格;
<img src="t1.jpg" width="200" height="200" border="1"/>
<a name="top">import info...</a><a href="#top">to top</a>
<a href="html03.html"><img src="img/dl.gif" border="0"/></a>
<a href="javascript:;" onclick="viewInfo();">viewInfo</a>

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%<frameset cols="50%,*" border="1">
  <frame src="left.html" name="f1" noresize="true" />
  <frame src="right.html" name="f2" marginwidth="50" marginheight="60" />
</frameset>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%input:
<input type="text" name="username" value="zhangshan" maxlength="8" readonly="true"/>
<input type="password" name="pwd" />
<input type="button" value="去另一个页面" onclick="location.href='html02.html'"/>
male:<input type="radio" name="sex" value="m"checked="checked"/>
female:<input type="radio" name="sex" value="f"/>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
checkbox的项被选择：checked="checked"或者checked="true"
<script src="js/prototype1.6.js">
  </script>
  <script>function selectAll(){
    var arr = $('c1','c2','c3');
    for(i=0;i<arr.length;i++){ //数组的
     arr[i].checked=true;
    }
   }
  </script>
<
  
  
  
fish:<input type="checkbox" id="c1" name="c1" value="fishing"/>
football:<input type="checkbox" id="c2" name="c1" value="football"/>
sleep:<input type="checkbox" id="c3" name="c1" value="sleep"/><br/>
<input type="button" value="全选" onclick="selectAll();"/>
结果是：
fishing:<input type="checkbox" name="interest" value="c1" checked="checked"/>
football:<input type="checkbox" name="interest" value="c2"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%select:
<select name="city" multiple="true" style="width:120px;height:60px;">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="cs">长沙</option>
</select>
------------------------------------------------------------------------------------------
function test1(){
      //options：option数组，代表select的所有选项
      var sObj = document.getElementById('s1');
      var arr = sObj.options;
      //alert(arr.length);
      for(i=0;i<arr.length;i++){
       var curr = arr[i];
       //每一个选项 Option对象
       document.write(curr.text + ' ' + curr.value + '<br/>');
      }
     }

     //动态增加option
     function test2(){
      var sObj = document.getElementById('s1');
      var opt = new Option('s100','100');
      sObj.options[sObj.length] = opt;
     }

     //删除option
     function test3(){
      var sObj = document.getElementById('s1');
      //sObj.options[1]=null;
      sObj.innerHTML='';
     }

     //获得用户的选项
     function test4(index){
      var sObj = document.getElementById('s1');
      alert(index);
     }
<select name="s1" id="s1" multiple="true"onchange="test4(this.selectedIndex);">
------------------------------------------------------------------------------------------
<script>
   function change(index){
    var subjects = new Array();
    subjects[0] = [new Option('--方向--','-1')];
    subjects[1] = [new Option('图形计算','1'),new Option('软件工程','2'),new Option('计算机应用','3')];
    subjects[2] = [new Option('商务英语','1'),new Option('专业英语','2')];
    var s2Obj = document.getElementById('s2');
    //s2Obj.options.length=subjects[index].length;
    s2Obj.innerHTML='';
    for(i=0;i<subjects[index].length;i++){
     s2Obj.options[i] = subjects[index][i];
    }
   }
  </script>
</head>
<body>
  <div id="d1">
   <div id="d1_head">关联下拉列表</div>
   <div id="d1_body">
    <form action="" method="get">
    <select id="s1" name="s1" style="width:100px;" onchange="change(this.selectedIndex);">
     <option value="-1">--专业--</option>
     <option value="jsj">计算机</option>
     <option value="eng">英语</option>
    </select>
    <select id="s2" name="s2" style="width:100px;">
     <option value="-1">--方向--</option>
    </select>
------------------------------------------------------------------------------------------
function moveTo(s1Id,s2Id){
    var s1Obj = document.getElementById(s1Id);
    var s2Obj = document.getElementById(s2Id);
    //对于长度可变的对象，要注意删除方式，应该是
    //从尾到头的方式来删除。
    //for(i=0;i<s1Obj.options.length;i++){
    for(i=s1Obj.options.length-1;i>=0;i--){
     var curr = s1Obj.options[i];
     if(curr.selected){
      var txt = curr.text;
      var val = curr.value;
      var opt = new Option(txt,val);
      s2Obj.options[s2Obj.options.length] = opt;
      s1Obj.options[i] = null;
     }
    }
   }
  </script>
<select id="s1" name="s1" style="width:150px;height:200px;" multiple="true">
  <option value="zs">张三</option>
  <option value="ls">李四</option>
  <option value="ww">王五</option>
</select>
<input type="button" value="-->" style="width:120px;" onclick="moveTo('s1','s2');"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%表格：
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
align属性用于指明横向对齐方式：left center right
valign属性纵向对齐方式：top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
<body style="font-size:30pt;">
<table width="60%" border="1" bgcolor="#cccccc" cellpadding="3" cellspacing="0">
<td align="center" rowspan="2" colspan="2" align="center" valign="top">单元格4</td>
<table width="60%" border="1">
----------------------------------------------------------------------------------------------
   <caption>这是一个表格</caption>
   
   <thead>
    <tr><th>姓名</th><th>工资</th></tr>
   </thead>
   
   <tfoot>
    <tr><td>小计</td><td>10000</td></tr>
   </tfoot>
   
   <tbody>
    <tr><td>张三</td><td>2000</td></tr>
   </tbody>
</table>

------------------------------------------------------------------------------------------
function addRow(){
    var tb1Obj = document.getElementById('tb1');
    //TableRow
    //rows属性(Table,Tbody)
    //insertRow会返回一个新的行:相当于创建了一个tr
    var row1 = tb1Obj.insertRow(tb1Obj.rows.length);
    //insertCell会创建一个新的单元格：相当于td
    //cells属性(TableRow)
    var col1 = row1.insertCell(row1.cells.length);
    var col2 = row1.insertCell(row1.cells.length);
    //cell.innerHTML
    var txt1Val = document.getElementById('txt1').value;
    var txt2Val = document.getElementById('txt2').value;
    col1.innerHTML=txt1Val;
    col2.innerHTML=txt2Val;
    //style属性代表该元素的样式，该值可以修改
    //css中的background-color在对应的对象当中，
    //会变成backgroundColor
    //style只得修改内联样式
    // <tr style="background-color:red;"></tr>
    //row1.style.backgroundColor='red';
    tb1Obj.rows[1].cells[1].style.backgroundColor='blue';
   }
<tbody id="tb1">
<tr><td>zs</td><td>1000</td></tr>
</tbody>
--------------------------------------------------------------------------------------------
addRow:
function addRow(){
    var tb = $('tb1');
    var row1 = document.createElement("tr");
    var cell1 = document.createElement("td");
    var cell2 = document.createElement("td");
    var txt1 = document.createTextNode($F('txt1'));
    var txt2 = document.createTextNode($F('txt2'));

    cell1.appendChild(txt1);
    cell2.appendChild(txt2);
    row1.appendChild(cell1);
    row1.appendChild(cell2);
    tb.appendChild(row1);
   }
<tbody id="tb1">
    <tr><td>12</td><td>zs</td></tr>
    <tr><td>3</td><td>ww</td></tr>
    <tr><td>5</td><td>ls</td></tr>
</tbody>
<input type="button" onclick="addRow();" value="addRow"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%列表：
<body style="font-size:30pt;">
   
   <ul>
    <li>选项一</li>
    <li>选项二</li>
   </ul>
   <ol>
    <li>选项一</li>
    <li>选项二</li>
   </ol>
   <ul>
    <li>菜单一</li>
    <ul>
     <li>子菜单1</li>
     <li>子菜单2</li>
    </ul>
   </ul>
  </body>

2javascritp
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%掌握javascript脚本引入方式：
  （1）页面内部
  <script type="text/JavaScript">
   alert('hello');
  </script>
  （2）单独放在文件里
  <script type="text/JavaScript" src="js01.js"></script>
  （3）嵌入html元素内部
  <a href="javascript:alert('hello’);">sayHello</a>
掌握常见的数据类型及操作
（1）基本类型
  JS有5种基本数据类型
  number, string, boolean,null,undefined
  var i = 100; var str = "abc"; var flag = true;
  var j = null;
  几个需要注意的问题：
   var a = null; alert(a == undefined);
   typeof 用于返回类型
   Infinity和NaN
    对于number类型Infinity表示无穷, NaN表示非数字
   isNaN("aaa")
   将字符串转换为数值
    parseInt(…)。如何转换为double? 小技巧。
   将数值转换为字符串
    toString(…)
  （2）字符串的基本属性和方法
    length属性返回字符串的长度
    charAt(index) 返回指定位置的字符
    substring(from, to) 返回子字符串
    indexOf(str) 指定字符串在原字符串中第一次出现的位置
    lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置
    match(regexp) 返回匹配指定正则表达式的字符串，返回的结果是一个数组
     var str2 = 'asd212abc345';
     var reg2 = /[0-9]+/g;
     var arr = str2.match(reg2);
    search(regexp) 返回按照正则表达式检索到的字符串位置
     str2.search(reg2)
    toLowerCase/toUpperCase 返回小写/大写形式
    replace(regexp,'abc'); 替换符合reg正则表达式规定的字符串
     str2 = str2.replace(reg2,'888');
5、掌握数组的使用
   创建数组, 长度由后期赋值决定
    var a = [1,2,3,4,5];
    var b = [];
    var c = new Array();
   length属性返回数组的长度
   toString()方法, 返回数组的字符串表示
   concat方法, 用于连接两个数组
   join方法，用于将数组中的各个元素连接成字符串。
   reverse方法，将数组反转
   slice用于截取数组的一部分并以数组的形式返回
   sort()排序，可通过如下形式来重新定义排序方式：
    var arr4 = arr3.sort(function(a1,a2){
    return -a1.length + a2.length;
    });
6、掌握常见事件
  onclick 鼠标单击
  onchange 内容改变
  onfocus 获得焦点
  onblur 失去焦点
  onload 元素加载显示
  onunload 页面关闭
  onmouseout 鼠标移出
  onDblClick 鼠标双击
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%--------------------------------------------------------------------------------------------
document.getElementById('id')
<script>
   function test1(){
    //document.getElementById('id');可以访问到所有的html对象
    var txtObj1 = document.getElementById('username');
    var txtObj2= document.forms['f1']['username'];
    alert(txtObj2.value);
   }
  </script>
</head>
<body>
  <form action="" method="get" name="f1">
   username:<input type="text" name="username" id="username"/><br/>
  </form>
<input type="button" onclick="test1();" value="click"/>
--------------------------------------------------------------------------------------------
函数的使用:可以调用同意script中的函数,不同script中的函数需要先定义后使用，使用：do();
<script>
  
  sayHello3();//可以调用同一个script当中定义的函数
  function sayHello3(){
   alert('hello3!');
  }
  </script>

  <script>
                    sayHello3();//;
   function sayHell2(){
    alert('hello2!');
   }

  </script>
</head>
<body style="font-size:30pt;">
  <a href="javascript:;" onclick="sayHello2();">testFunction1</a>
--------------------------------------------------------------------------------------------
函数： arguments隐含对象    匿名函数执行函数，调用函数

3css
---------------------------------------------------------------------------------------------
diplay属性
    display：none 不显示
    display：block 块级元素
    display: inline 行内元素
   position属性
    static 默认的选项, 按照浏览器默认的方式摆放。
    absolute 相对于父元素, 按top和left值指定的值摆放。
    relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
---------------------------------------------------------------------------------------------
<style>
#d3{
  left:30px;
  top:30px;
  width:300px;
  height:200px;
  background-color:green;
  position:relative;//position:absolute;
              color:white;
        font-size:30pt;
}
</style>
<div id="d3"></div>