HTML,CSS,JS个别知识点总结

Posted 2020-11-19 lovele-

　　<input>是自闭合标签，没有<input></input>一说，只能写作<input/>。

　　<div>可以是行标签也可以作为块标签，作为块标签一定要设置Width和Height，多个块标签水平排列可以使用css写法float方法，需要配合position:relative定位方法。

　　<ul><li>去掉各个项前面的点或改变其样式使用list-style:none或list-style-type:none方法，修改其样式则只需要修改list-style-type的值即可。

ul li{
　　list-style:none;
}


/*下列是其样式值*/
none  不使用项目符号    
disc  实心圆，默认值    
circle  空心圆    
square  实心方块    
decimal  阿拉伯数字    
lower-roman  小写罗马数字    
upper-roman  大写罗马数字    
lower-alpha  小写英文字母    
upper-alpha  大写英文字母  

　　当我们在li各项之间添加分割线时可以如下设置

li{
  border-right:2px solid #000;   /*设置右边框线为分割线，值依次是分割线的粗细，分割线的样式，分割线的颜色*/  
}
li:last-child{
  border-right:0;   /*设置最后一项右边框线为0，不显示*/  
}


/*下列是border边框线样式的值*/
none    定义无边框。
hidden    与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted    定义点状边框。在大多数浏览器中呈现为实线。
dashed    定义虚线。在大多数浏览器中呈现为实线。
solid    定义实线。
double    定义双线。双线的宽度等于 border-width 的值。
groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。
inset    定义 3D inset 边框。其效果取决于 border-color 的值。
outset    定义 3D outset 边框。其效果取决于 border-color 的值。
inherit    规定应该从父元素继承边框样式。

　　js中控制数据写入指定的标签位置中去有多种方法

//第一种，直接填充
document.getElementById(‘id‘).innerhtml="内容"

//第二种，拼接显示，适合多个内容连续显示
var html = ‘‘;
for(var i=0;i<5;i++){
 if(i==0){
  html +=‘<li class="first"><div class="number">‘;
 }else{
  html += ‘<li class="first active"><div class="number">‘
 }
 html += =‘这个是div中的内容</div></li>‘
}
document.getElementById(‘container‘).innerHTML = html;

//第三种，jquery方法填充
html = "显示内容";
$("#id").append(html);
或
$("#id").html(html);