重拾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 : 相邻边被合并
本文来自博客园,作者:西瓜皮不甜,转载请注明原文链接:https://www.cnblogs.com/Jieth/p/14812281.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!