重拾html笔记

1.公共模块使用

　　a.代码放在新html文件，使用iframe

<div>
    <iframe src="footer.html" frameborder="0"  scrolling="no" height="auto" width="100%"></iframe>
</div>

　　b.使用js的document.writeln()。使用script引用　　html生成js　　http://tool.chinaz.com/Tools/Html_Js.aspx

<script type="text/javascript" src="footer.js"></script>

　　c.其他：angular js。JQuery。php

2.样式

//左对齐
align="left"

//首行缩进2
text-indent:2em

//定位：static-默认；relative-相对于自己原来位置；absolute-绝对定位，相对于当前父元素；fixed-固定，浏览器窗体位置
//top，bottom,left,right
position:absolute

//黑色半透明颜色
background-color:rgba(0,0,0,0.3)

//隐藏标签
visibility：为""(空)时是显示状态。为"hidden"时是隐藏状态，"hidden"时，标签不占位置
display：为""(空)时是显示状态，为"none"时是隐藏状态，"none"时，标签占据位置

//设置层级
z-index:3

3.css class同时设置多个值。每个值空格离隔。确凿代表class引入3个CSS抉择器

<div class=”aaa bbb ccc”>class运用多个值</div>
.aaa{}
.bbb{}
.ccc{}

4.js获取html拼接的参数xxx.html?tag=111

只能单个value

var ss= window.location.search.split("=");  
var tag= ss[1]  
console.log("assetId-------",tag)

多个value ex: xxxx?aaa=a&bbb=b&ccc=c

function initValue(){
            //var idArray = window.location.search.split("=");  
            var url = window.location.href;
            var aaa= url.getValue("aaa");
            var bbb= url.getValue("bbb);
            var ccc= url.getValue("ccc");
            console.log("aaa-------",aaa+ "  bbb="+bbb+ "  ccc="+ccc);
            myinit(serverIP,width,height);
        }  
        //获取get传值的方法
        String.prototype.getValue = function(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");    
            var r = this.substr(this.indexOf("\?")+1).match(reg);    
            if (r!=null) return unescape(r[2]); return null; 
        }

5.js里锚点跳转

通过js事件中通过window.location.hash="#top"或者window.location.href="#top"跳转，但地址也会发生变化

$("html, body").animate({
            scrollTop: $("#b").offset().top }, {duration: 500,easing: "swing"});

<div id="a">div1</div>  
<div id="b">div2</div>  
<div id="c">div3</div>

如果图片未加载完，会跳转位置不对，建议

window.onload =function()
{
    //your code  
}

　　或者　　判断网页是否加载完毕----包括图片，再执行滑动

//: 判断网页是否加载完成     
document.onreadystatechange = function () {      
       if(document.readyState=="complete") {            
            document.getElementById('divprogressbar').style.display='none';      
          }     
      }

6.js获取宽高 (Android webview加载网页时适应屏幕全屏)

网页里添加

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

其他

参考 https://www.cnblogs.com/mengshenshenchu/p/6666300.html

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth 

在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7.table边框

基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮边框颜色）、 bordercolordark（表格的暗边框颜色）、bgcolor（表格的背景色）、background（表格的背景图片）、 bordercolor（表格边框的颜色）
.表格中边框的显示

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

.表格的分隔线可以隐藏
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线
<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

collapse :　相邻边被合并

posted @ 2021-05-26 10:29 西瓜皮不甜阅读(32) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

重拾html笔记

公告