精华内容
下载资源
问答
  • 网站静态网页设计入门基础,包括html各个元素的设计
  • 打开浏览器任意一个页面,右键单击页面有两个很相似的选项:“查看网页源代码(CTRL+U)”和"检查(审查元素F12或者CTRL+SHIFT+I)",之前一直认为这两项的代码内容没有区别,最近发现两者是有区别的。 二、网页中...

    一、误区

    打开浏览器任意一个页面,右键单击页面有两个很相似的选项:“查看网页源代码(CTRL+U)”和"检查(审查元素 F12或者CTRL+SHIFT+I)",之前一直认为这两项的代码内容没有区别,最近发现两者是有区别的。

    二、网页中审查元素与查看网页源代码的区别

    1、通过一个简单的页面,对比两者的区别

    <!DOCTYPE html>
    <html>
      <head>
      <script>
    	   window.onload=function(){
    		document.getElementById("second").innerHTML="这是JS动态生成的内容。";
    		}
      </script>
      </head>
    <body>
    <div id='first'>源码内容</div>
    <div id="second"></div>
    </body>
    </html>
    

    2、“查看网页源代码”看到的效果

    3、“审查元素”看到的效果

    4、对比2和3的结果,可直观看到“查看网页源代码”的代码内容是服务器发送到浏览器的原封不动的源代码,不包括页面动态渲染的内容;“审查元素”包括源代码+js动态渲染的内容,即最终展示的html内容。

    展开全文
  • js获取网页元素的宽度、高度

    千次阅读 2015-11-12 10:56:16
    网页可见区域宽:document....网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页
    网页可见区域宽:document.body.clientWidth
    
    网页可见区域高:document.body.clientHeight
    网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽)
    网页可见区域高:document.body.offsetHeight(包括边线的宽)
    网页正文全文宽:document.body.scrollWidth
    网页正文全文高:document.body.scrollHeight
    网页被卷去的高(ff):document.body.scrollTop
    网页被卷去的高(ie):document.documentElement.scrollTop
    网页被卷去的左:document.body.scrollLeft
    网页正文部分上:window.screenTop
    网页正文部分左:window.screenLeft
    屏幕分辨率的高:window.screen.height
    屏幕分辨率的宽:window.screen.width
    屏幕可用工作区高度:window.screen.availHeight
    屏幕可用工作区宽度:window.screen.availWidth
    你的屏幕设置是:window.screen.colorDepth  位彩色
    你的屏幕设置:window.screen.deviceXDPI  像素/英寸
    window的页面可视部分实际高度(ff):window.innerHeight

    某个元素的宽度:obj.offsetWidth
    某个元素的高度:obj.offsetHeight
    某个元素的上边界到body最顶部的距离:obj.offsetTop(在元素的包含元素不含滚动条的情况下)
    某个元素的左边界到body最左边的距离:obj.offsetLeft(在元素的包含元素不含滚动条的情况下)
    返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)
    返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offsetLeft(在元素的包含元素含滚动条的情况下)

    scrollTop, scrollLeft
    设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性



    在我本地测试当中:
    在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">
    如果在页面中添加这行标记的话

    在IE中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    在FireFox中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    ?
    在Opera中:
    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight ==> 可见区域高度
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    而如果没有定义W3C的标准,则
    IE为:
    document.documentElement.clientWidth ==> 0
    document.documentElement.clientHeight ==> 0
    FireFox为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    Opera为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

    有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.

    可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.

    原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

    区别新旧标准的行是:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    前者指明该页面使用旧标准, 后者指明该页面使用新标准.

    总结:
    XHTML中用 document.documentElement.clientHeight 代替

    document.body.clientHeight



    本文由:http://www.blogjava.net/conans/articles/364566.htmlhttp://blog.sina.com.cn/s/blog_51048da70101djp5.html整理得来

    展开全文
  • VC DOM对象枚举当前网页表单元素值,枚举当前最顶层显示的网页中,所有的表单元素包括值信息,以CMD控制台窗口的形式返回枚举结果,如演示截图所示,打开百度置于顶层窗口,程序即可开始枚举百度首页中的表单元素...
  • 每个html标签元素都有其默认的元素类型,主要包括两大类:inline内联元素、block块元素。除默认为以上两种,还有部分标签元素叫可变元素,会根据上下文语境决定该元素为inline元素或是block元素。在css里,有一个...

    每个html标签元素都有其默认的元素类型,主要包括两大类:inline内联元素、block块元素。除默认为以上两种,还有部分标签元素叫可变元素,会根据上下文语境决定该元素为inline元素或是block元素。在css里,有一个display的属性,他规定元素应该生成的框的类型。可能的值有很多,inline、block、inline-block,其中inline-block是在css2.1里新增的值。具有这个值的元素,我们可以把它叫做inline-block元素。

    一.inline元素、block元素、inline-block元素的具体解释

    inline元素

    inline元素全称Inline Elements,英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一个内联元素不会开始新的一行,并且只占有必要的宽度。

    特点:

    • 和其他元素都在一行上;
    • 元素的高度、宽度、行高及顶部和底部边距不可设置;
    • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

    block元素

    block元素全称Block-level Elements,英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

    特点:

    • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);
    • 元素的高度、宽度、行高以及顶和底边距都可设置;
    • 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    inline-block元素

    inline-block元素,英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素,但具有宽度和高度。

    特点:

    • 和其他元素都在一行上;
    • 元素的高度、宽度、行高以及顶和底边距都可设置

    二.常见的inline元素、block元素、inline-block元素

    常见的inline内联元素:

    span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block))

    常见的block块级元素:

    div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

    常见的inline-block内联块元素:

    img、input

    三.的inline元素、block元素、inline-block元素的区别

    • 块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

    • 块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。

    • 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。


    更为清爽的浏览体验,请移步我的个人博客
    天心天地生的个人博客

    展开全文
  • 如何使网页的div元素高度满屏

    千次阅读 2017-11-06 18:47:59
    它相对的不是父节点或者页面的根节点,而是由视窗(Viewport)大小来决定的, 1代表 1%,视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。 vw:视窗...

    CSS3 引入了新单位:vwvhvminvmax

    (1) vwvhvminvmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗( Viewport)大小来决定的,  1代表  1%,视窗( Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

    vw:视窗宽度的百分比( 1vw 代表视窗的宽度为  1%
    vh:视窗高度的百分比
    vmin:当前  vw 和  vh 中较小的一个值
    vmax:当前  vw 和  vh 中较大的一个值

    (2) 浏览器兼容
    桌面PC:
    Chrome:自  26 版起就完美支持(2013年2月)
    Firefox:自  19 版起就完美支持(2013年1月)
    Safari:自  6.1 版起就完美支持(2013年10月)
    Opera:自  15 版起就完美支持(2013年7月)
    IE:自  IE10 起(包括  Edge)到现在还只是部分支持(不支持  vmax,同时  vm 代替  vmin

    移动设备:
    Android:自  4.4 版起就完美支持(2013年12月)
    iOS:自  iOS8 版起就完美支持(2014年9月)


    使网页的div高度满屏的方法:直接给div的高度设成  height:100vh,即可用让div的高度是视窗的高度了

    使网页的div宽度满屏的方法:直接给div的宽度设成width:100vw,即可将div的宽度设成视窗的宽度

    展开全文
  • php网页抓取技术
  • 元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而...
  • vb获取网页的所有元素

    千次阅读 2010-10-29 08:35:00
    vb获取网页的所有元素2008-12-11 22:20vb获取网页的所有元素 原来获取网页的所有元素是这么简单: Dim theHTML As New HTMLDocument Set theHTML = wb.document ' wb = ActiveX WebBrowser ' theHTML.All 就是它了!...
  • 当用户浏览网页的时候,判断某个元素是否在浏览器可视区域内,比如视频在播放,如果用户滚动看评论,应该停止播放 啥也不说了,直接上demo: visibilitychange 应用 #div1,#div2,#d
  • WebView获取当前网页的页面元素

    千次阅读 2016-03-13 01:55:23
    今天简单总结一下,如何通过WebView来获取Html的页面元素。第一步,首先用WebView加载一个Html页面NSString *str=@"http://........."; UIWebView *webView = [[UIWebView alloc] initWithFrame:...
  • 使用钩子记录鼠标点击处网页元素

    千次阅读 2011-02-21 20:53:00
     我们现在能够得到当前浏览器窗口的句柄,因为当鼠标点击网页元素时,WM_LBUTTONDOWN消息的hwnd参数记录的正是该消息发送的目标窗口句柄,即当前操作的浏览器窗口句柄。通过调用"OLEACC.DLL"库来实现。以下代码来自...
  • 设置图片位置与大小根据窗口大小自动调整<!doctype html> 设置网页元素根据窗口比例调整位置与大小 function resizeDog() { //document.body.sty
  • 【常见的表单元素哪些?各有什么属性? 】 大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文...
  • 在上一节中(Python实现网页自动化-初步使用(一))已经部署了Selenium+chromedriver的开发环境,在真正的开发之前,还需要学会利用浏览器来查找网页元素; 因为Selenium是通过程序来自动操控网页的控件元素,比如...
  • 情景:手机浏览器上打开一个网页发现界面出错了,可在电脑浏览器上运行的明明很完美,但是我无法对手机浏览器上的页面进行审核元素;这可怎么调试啊,怎样才能知道它在哪里错了! 解决方案有两个: 一:引入...
  • 网页可视化元素操作——svg.js

    千次阅读 2019-07-03 18:24:33
    最近公司的新需求是做一个可以自己编辑页面元素形状,旋转,拖动以及填充图片的功能,经查觉得svg.js是一个较好的实现方式,配合插件svg.draggable.js可实现元素的拖动。 踩过的坑: 1 项目中需要用到最新的...
  • iOS获取当前网页的页面元素

    千次阅读 2014-08-14 16:44:32
    iOS-获取当前网页的 url 和 title 和 html [编辑].h文件 @property (strong,nonatomic)UIWebView *webView; @property (strong,nonatomic)NSString *currentURL; @property (strong,nonatomic)NSString *...
  • js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度常用:JS 获取浏览器窗口大小 12345678910111213141516// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) &amp...
  • 现在要做一个网页,用于大屏展示,里面所有的东西包括页面本身都应该是成比例的,就是不管你用多大/小的屏幕,把网页拉的多宽/高,页面布局不变,展示的页面永远是16:9 实现方式想的我头秃,感谢网友,感谢百度。。...
  • 解决了浏览器之间的不兼容性问题,目标就是将HTML5网页上的音视频、图像、动画等都带入一个国际标准化HTML5结构清晰,增加了很多主体元素,比如NAV标签表示导航的意思2、HTML5新的网页结构&lt;!DOCTYPE html&...
  • 24种页面元素与iDo网页设计工具箱

    千次阅读 2011-07-01 17:06:00
     视觉效果包括网页的背景、区域的背景、各种装饰,而显示内容则包括各种类型的列表、文本内容、标题、图片、动画和幻灯片等,视觉效果和现实内容构成了整个网页,我们看到的网页的显示效果,其实就是由视觉效果和...
  •  1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。 2.对象:DOM中的“O” ...对象是是一种自足的数据集合,与某个特定...包括
  • <br />  网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 170,756
精华内容 68,302
关键字:

网页元素包括哪些