头部 
      
    
      
       导航栏
      
    
      
      
       
        左边
       
      
       
        右边
       
    
      
    
      
       页脚
      
 

      
        
      
   
       
     
        
学生档案
     
        姓名:     
             
        手机号码:     
             
        邮箱地址:     
             
        所属学院     
             
             
        入学成绩:     
             
        基础水平:     
             
        入学时间:     
             
        毕业时间:     
             
           
       
  
      

/*$(function(){$('input#score').on('input propertychange', function() {    $("meter#level").val($(this).val());});});*/window.onload=function(){    document.getElementById("score").οninput=function(){        document.getElementById("level").value=this.value;    }}

 

*{
        padding:0;    margin:0;}form{
        width:600px;    margin:20px auto;}form>fieldset{
        padding:10px;}form>fieldset>meter,form>fieldset>input{
        width:100%;    height:40px;    line-height:40px;    margin:10px 0;    border:none;    border:1px solid #ccc;    border-radius:4px;    font-size:16px;    padding-left:5px;    box-sizing:border-box;}form>fieldset>meter{
        padding-left:1px;}

 示例效果如下：

 

多媒体标签：

 <audio>

 <video>

 

autoplay

controls

height

width

辅助 <source src="xxx" type="video/mp4"/>  type="audio/mp3"

 

 

 

 

 

表单中新增的 标签有意义

 

 

 

 

 

 

 

 

 

DOM 操作：

querySelector();  传入 li 标签 或者 .green ， #id  返回单个标签对象

querySelectorAll(); 传入 xxx   返回 一组标签对象

 

 

添加移除样式 class="red"  移除 red  class 仍然在的

 

 

 

 

 自定义属性：