一文解读JavaScript中的文档对象(DOM)

大家好,我是IT共享者,人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.文档对象(DOM)

1).Document对象

这是我们用的最普遍的一个文档对象了,专门用来操作DOM节点时用。

1)).获取元素

document.getElementById()           #通过id查找HTML元素
document.getElementsByName()        #通过name查找HTML元素
document.getElementsByTagName()     #通过标签名查找HTML元素
document.getElementsByClassName()   #通过类名查找HTML元素 
document.querySelector(".h")        #第一个类名为 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素
document.body          #获取body标签
document.documentElement   #获取html标签

2)).获取网页内容

document.cookie        #网页cookie
document.domain        #文档的域名
document.lastModified  #文档被最后修改的日期和时间
document.referrer      #载入当前文档的文档的URL
document.title         #当前文档的标题
document.URL           #当前文档的URL
document.doctype       #当前文档的doctype
document.baseURI       #当前文档的绝对URI
document.documentMode   #浏览器使用的模式
document.documentURI    #文档的URI
document.implementation #DOM实现
document.inputEncoding  #文档的编码(字符集)
document.readyState     #文档的(加载)状态
document.strictErrorChecking    #是否强制执行错误检查

3)).文档写入

document.write('hello world')   向文档写入文本
document.writeln('hello world') 向文档写入文本并换行

4)).获取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表单引用
document.images     #所有的图片引用
document.links      #所有的超链接引用
document.scripts    #所有的脚本引用
document.embeds     #所有的流媒体引用

5)).获取节点

childNodes          #获取子节点的集合 ,返回数组 ,并把换行和空格也当成是节点信息。
children            #获取子节点的集合 ,返回数组   
firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息
firstElementChild   #获取第一个子节点
lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息
lastElementChild    #获取最后一个子节点
parentNode          #获取父节点
parentElement       #获取父节点(IE)
offsetParent        #获取所有父节点  对应的值是body下的所有节点信息
previousSibling         #获取上一个兄弟节点  匹配字符,包括换行和空格,而不是节点
previousElementSibling  #获取上一个兄弟节点  直接匹配节点
nextSibling             #获取下一个兄弟节点  匹配字符,包括换行和空格,而不是节点
nextElementSibling      #获取下一个兄弟节点  直接匹配节点
ownerDocument           #元素的根节点

这里我们获取到了所有的Div元素,我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父,子元素,如下:

6)).创建节点

我们可以自定义节点并添加值,不过要将它添加到文档中去,所以必须添加节点,一般和下方的增加节点配套使用。

document.createElement(标签)  #创建HTML元素
document.createTextNode(文本) #给文档添加文本
document.createComment(文本)  #创建一个注释节点
document.createDocumentFragment() #创建文档粉碎节点

7)).增加节点

appendChild(节点) #节点被添加到元素的末尾
insertBefore(a,b) #a节点会插入b节点的前面

8)).删除节点

removeChild(节点名)  #被移除的节点仍在文档中,只是文档中已没有其位置了

9)).替换节点

replaceChild(插入的节点,被替换的节点)

10)).复制节点

a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时,则a元素后代也一并复制。否则,仅复制a元素本身

11)).节点属性

#节点类型 nodeType 有三种情况
#1.元素节点  2.属性节点  3.文本节点


#节点名称 nodeName 


#节点值 nodeValue 
#元素节点没节点值,为null 
#文本节点的节点值就是文本
#属性节点的节点值就是该属性值


#节点属性获取
a.width
a['width']
a.gerAttribute(属性名)  返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点


#节点属性删除
a.removeChild(子节点)    从元素中移除子节点
a.removeAttribute(属性)  从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点


a.id 获取当前元素的id
a.className  获取当前元素的class
a.classList  获取当前元素的class列表


a.accessKey='w'    设置或返回元素的快捷键
a.namespaceURI     返回指定节点的命名空间的 URI
a.dir              设置或返回元素的内容是否可编辑
a.normalize()      合并元素中相邻的文本节点,并移除空的文本节点
a.tabIndex='3'     设置或返回元素的tab键控制次序
a.tagName          返回元素的标签名
a.textContent      设置或返回节点及其子代的文本内容
a.title            设置或返回元素的标题属性
a.item(num)        返回节点列表中位于指定下标的节点
a.length           返回节点列表中的节点数

12)).获取元素文本

a.innerHTML  获取或者设置对象内的HTML
a.innerText  获取或者设置对象内的文本
a.outerHTML  获取或者设置对象外的HTML
a.outerText  获取或者设置对象外的文本
a.value      获取或者设置表单元素的值

总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

一文解读JavaScript事件对象和表单对象

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.事件对象(Event)

1).事件对象常量

bubbles         事件是否是起泡事件类型 
cancelable      事件是否可确定可取消的默认动作
currentTarget   事件监听器触发该事件的元素 
eventPhase      事件传播的当前阶段 
target          触发此事件的元素(事件的目标节点),srcElement(IE)
timeStamp       事件生成的日期和时间
type            当前Event对象表示的事件的名称 
initEvent()     初始化新创建的 Event 对象的属性
preventDefault() 不执行默认动作
stopPropagation()   停止冒泡 cancelBubble
x,y             元素的 x 坐标和 y 坐标
returnValue     设置或获取事件的返回值
fromElement  在IE中用于mouseover和mouseout 事件,可以引用移出鼠标的元素。
toElement  在IE中用于mouseover和mouseout 事件,该属性引用移入鼠标的元素。
returnValue 设置或获取事件的返回值
keyCode(IE) 键盘码 which()  charCode
offsetX,offsetY 事件在源元素的中的x坐标和y坐标。

这在后面的其它操作中我都有举例子,大家可以仔细看看。

2).键盘鼠标事件

altKey          判断"ALT" 是否被按下 
button          判断哪个鼠标按钮被点击 
clientX         判断鼠标指针的水平坐标
clientY         判断鼠标指针的垂直坐标
ctrlKey         判断"CTRL" 键是否被按下
keyIdentifier   按键的标识符  
keyLocation     按键在设备上的位置 
metaKey         判断"meta" 键是否被按下
relatedTarget   与事件的目标节点相关的节点
screenX         判断鼠标指针的水平坐标
screenY         判断鼠标指针的垂直坐标
shiftKey        判断"SHIFT" 键是否被按下

这个在后面也会提到,比如获取鼠标坐标:

2.表单对象

1).Form对象

document.forms['表单名']['text'].value #获取表单中的文本框的值
acceptCharset       服务器字符集 
action              设置或返回表单的action
enctype             设置或返回表单用来编码内容的MIME类型 
length              返回表单中的元素数目
method              设置或返回将数据发送到服务器的 HTTP 方法
name                设置或返回表单的名称
target              设置或返回表单提交结果的Frame或Window

2).Button对象(submit,hidden与它方法差不多)

b.accessKey                 设置或返回访问按钮的快捷键
b.alt                       设置或返回当浏览器无法显示按钮时供显示的替代文本 
b.disabled=true|false       设置或返回是否禁用按钮
b.form                      返回对包含该按钮的表单对象的引用
b.id                        设置或返回按钮的 id
b.name                      设置或返回按钮的名称 
b.tabIndex='3'              设置或返回按钮的 tab 键控制次序 
b.type                      返回按钮的表单元素类型 
b.value                     设置或返回在按钮上显示的文本

3).Checkbox 对象(Radio与它方法差不多)

和上面的对象差不多,唯一不同的便是多了一个默认值选中值:“defaultChecked”。

4).Select 对象

s.options  返回下拉列表数组
s.selectedIndex=num    设置或返回下拉列表中被选选项的索引号
s.multiple=true|false  设置或返回是否可有多个选项被选中
s.size                 设置或返回下拉列表中一次显示显示的选项数
s.add()       向下拉列表添加一个选项
s.remove()    从下拉列表中删除一个选项

总结

这篇文章主要介绍了JavaScript的事件对象和表单对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

手把手教你利用JavaScript 获取任意网站图片链接

前言

大家好,我是IT共享者,人称皮皮。

妹纸图这个网站想必大家都非常熟悉了,老司机的天堂。小编第一次进表示身体逐渐变得空虚,表示一定要克制自己,远离这种正能量的网站。话不多说,今天带大家获取妹纸图上的图片链接。然后大家都懂得。

一、项目准备

360浏览器,仅此而已

二、项目目的

获取页面所有美女图片

三、项目步骤

1.打开浏览器,搜索图片,我们以美女图片为例:

画面太美,不忍直视。

2.打开浏览器控制台

F12,即可打开浏览器控制台,我们今天要做的是获取所有的图片链接,顺便查看下图片。如下图:

今天我们就是要在这里面获取到所有的图片链接,相信没接触过前端的人肯定对此一无所知,但是小编接下来讲过了之后你还是一无所知,那就是你的不对了。

3.控制台功能大揭秘

大家可能觉得这个地方没啥用处,啥都没有,还不如Element Network用处大;诚然前两者的确用处很大,可以用来分析网页结构和网页请求,但是我想说的是控制台的功能你永远不要小瞧了,因为它可以使你在开发过程中能快速的见到效果图,比如,你写个代码,但是你想看看它现在能否运行,一般的做法就是写个HTML+CSS然后将JavaScript嵌入到里面去,这样做显然太麻烦,而且你修改后还得在刷新才能浏览器中运行看到效果,到最后就是浏览器和编辑器频繁切换,影响开发速度和效率甚至占用多余的系统资源。于是,控制台应运而生,它使得我们可以轻松的使用JavaScript代码而无需再搭配HTML和CSS才能运行,一个Console统统搞定,这就是我们刚刚说的控制台。我们可以先来看看它的功能:

可以看到,它是有自动提示功能的,而且比任何三方IDE的都要全面,因为它是和浏览器配套使用的,而其它IDE则无法做到这么齐全,所以你可以看到有时候如果你想用某种方法它不会提示,那就只有一个原因,就是你用错了。

1).改变它的编辑状态

控制台输入:

![4](4.jpgdocument.body.contentEditable=true

在编辑状态下,我们的点击操作是没有任何作用的,也就是说只能修改,如果想还原,刷新一下浏览器即可。

2).定位特定元素

这里我们可以先看看我们要看的浏览器图片元素的信息,可以先打印出所有的图片 ,这里使用一个特殊符号:

我们可以看到,通过这个语法糖可以打印当前页面所有的图片信息,显示70,说明这个页面有70张图片,当小编再次滚动鼠标时发现图片数量就变多了,变成了136张图片,这说明它是Ajax加载的。

除了这种获取图片的方式外,还可以这样:

document.images

得到的结果和上面的一模一样,有了这几样的知识点积累,我们现在就可以轻松获取所有的图片链接了。

4.获取图片链接和图片名

这里我们要把获取到的图片添加到数组中,然后在遍历即可打印出所有的图片。

1).建立数组存放所有的图片

ab=document.images #获取当前页面所有图片
var aa=[]           #建立数组
for(const y of ab){    #建立const变量使得无法修改
    aa.push(y); #把图片装进数组
}

2).遍历数组打印图片链接

这里可以使用多种方法,小编一 一介绍。

1)).For …in

for(const a in aa){
    console.log(aa[a])
}

2)).For…of

for(const a of aa){
    console.log(a)
}

3)).ForEach

aa.forEach(function(val,item,array){
  console.log(val)
});

4)).Map

![10](10.jpgaa.map(function(val,item,array){
  console.log(val)
});

可以看到第四种方法和第三种方法差不多,但是它们还是有差别的,前者是没有返回值的,而后者有并且后者支持修改返回值。虽然我们打印出了图片链接,但是图片名字并没有打印出来,于是小编开始找图片名字:

发现它在Div标签里,于是小编开始找满足条件的Div:

document.querySelectorAll('div.img_tit')#精确找到所有类名为img_tit的Div
document.getElementsByClassName('img_tit')#找到所有类名为img_tit

然后我们先输出图片名再输出图片链接,这样就可以使用循环然后进行判断,如下图:

var a=0;
do{
  a++;
  if(a%2==0){
    console.log(aa[a])
}
    else{
    console.log(ac[a])
  }


}
while(a<ac.length)

可以看到按照顺序打印出了。另外,我们发现当我们打印出了这些结果值后感觉控制台都已经爆满了,我们想清空这些信息那该怎么办了?一行代码就能搞定啦。

当然,这项功能你可别指望它能在你控制台相当干净的时候起作用。看了这么多了我们再来看看图片的查看功能吧。

5.图片查看

希望上面的方法应该不会让读者眼花缭乱才是,因为Js是一门动态语言,所以它的骚操作实在是太多了,你懂的。言归正传,如果我们现在想快速查看某一张图片,那么怎么办呢?有人说单击它,我想告诉你的是,虽然这可以实现查看功能,但这是在被包裹的网页中查看,如果我们在单独的网页中查看了,比如说这样:

那我们要想只看这一张图片而不看其它的内容了,那又该怎么办了?最传统的方法:

点击红色箭头处,可以看到如下图:

感觉是不是就好多了,没有其它的东西干扰我们,专心致志的看图,多爽。但是我们开发者可不能这么做,因为太没技术含量了,我们要时时刻刻挑战自己;所以我决定用JS代码来查看这张图片。

我们可以先看看这个,代码如下:

function view(src,filename) {
                var link = document.createElement('a');#创建a标签
                link.setAttribute("download", filename);#设置download属性
                link.href = src;#设置href属性
                document.body.appendChild(link);#将a标签添加到网页主体中
                link.click();
                document.body.removeChild(link);#删除a标签
            }
view('https://p0.ssl.qhimgs1.com/bdr/326__/t0160c8456511be3c4e.jpg','t0160c8456511be3c4e.jpg')

可以看到我们成功在浏览器中查看了这张图片。

四、总结

突然发现小编还是比较有才的,这都能被小编捕捉到,不过还是不能太得意,以免翻车。另外,如果大家想在自家服务器上添加图片下载功能,超简单的,一行代码搞定。

<a href="http://localhost:8080/12.jpg" download="12.jpg">点我下载</a>

这样就能生成一个下载图片的点击链接了。

一篇文章帮助你理解跑马灯的滚动原理

走马灯效果其实就是利用<marquee>标签进行图片和文字滚动,设置的样式不一样,滚动的效果就不一样,实现“走马观花”的效果。

一、滚动方式

1. 普通滚动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    </body>
  <marquee>这里是您要填的内容</marquee>
</html>
一篇文章帮助你理解跑马灯的滚动原理

1.1 文字碰到左边就会停止

<marquee behavior="slide">这里是您要填的内容</marquee>
一篇文章帮助你理解跑马灯的滚动原理

1.2 文字碰到右边就会停止

<marquee behavior=”slide” direction=”right”>这里是您要填的内容</marquee>

一篇文章帮助你理解跑马灯的滚动原理

2.图片滚动

2.1 预设滚动

图片滚动到右边界,自动再从左边滚动。

<marquee behavior="scroll"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

2.2 来回滚动

<marquee behavior="alternate"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

2.3 滚动的方向

向左滚动

<marquee direction="left"><img src="img/border.png"></marquee>

向右滚动

<marquee direction="right"><img src="img/border.png"></marquee>

向下滚动

<marquee direction="down"><img src="img/border.png"></marquee>

向上滚动

<marquee direction="up"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

二、参数

1. 设定滚动次数(可自行更改参数)

<marquee loop="2">这里是您要填的内容</marquee>

2. 设定背景颜色 (16进位颜色或文字输入)

<marquee bgcolor="#??????">这里是您要填的内容</marquee>

3. 设定滚动宽度

为了方便辨别,这里加上bgcolor属性。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>


        <body>
        <div >
            <p>初始化</p>
            <marquee bgcolor="red"; >这里是您要填的内容</marquee>
        </div>
        <div>
            <p>设置高度</p>
            <marquee bgcolor="aqua";width="380">这里是您要填的内容</marquee>
        </div>


</body>
</html>
一篇文章帮助你理解跑马灯的滚动原理

4. 设定滚动高度

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>


        <body>
        <div >
            <p>初始化</p>
            <marquee bgcolor="red"; >这里是您要填的内容</marquee>
        </div>
        <div>
            <p>设置高度</p>
            <marquee bgcolor="aqua"; height="38">这里是您要填的内容</marquee>
        </div>


</body>
</html>
一篇文章帮助你理解跑马灯的滚动原理

5. 设定滚动速度 (可自行更改参数)

<marquee scrollamount="30">这里是您要填的内容</marquee>
一篇文章帮助你理解跑马灯的滚动原理

三、总结

本文以html为基础,主要介绍了常见的效果(跑马灯)的滚动原理,详细介绍了三种常见的滚动以及其相关属性,以及对设置参数时遇到的难题一一解答,希望能够帮助你学习。

一篇文章带你了解HTML的网页布局结构

大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域


1. 头部区域

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>


2. 菜单导航区域

菜单导航条包含了一些链接,可以引导用户浏览其他页面:

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 内容区域

内容区域一般有三种形式:

  • 1 列:一般用于移动端。
  • 2 列:一般用于平板设备。
  • 3 列:一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。

例:

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方,一般包含版权信息和联系方式等。

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面,页面的布局会根据屏幕的大小来调整:

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯,恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作,两者保持热诚,就是最快乐的人。热诚使平凡的话题变得生动。!</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美,唯有追求尽力而为。这样心无压力,出来的结果反而会更好!</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,
      不得用于任何商业用途,否则后果自负,请支持购买正版软件!如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明:为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构,如何去了解网络的布局,介绍了常见的移动设备的三种网页模式,最后通过一个小项目,总结之前讲解的内容。

代码很简单,希望可以帮助你学习。

一篇文章带你了解CSS 文本样式

大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 – 如”#FF0000″。
  • 一个RGB值 – “RGB(255,0,0)”。
  • 颜色的名称 – 如”红”。

一个网页的文本颜色是指在主体内的选择:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注:对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。

二、属性

1. text-align 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为”justify”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 号</p>
        <p class="main"> 从前有个书生,和未婚妻约好在某年某月某日结婚。到那一天,未婚妻却嫁给了别人。书生受此打击, 一病不起。  这时,路过一游方僧人,从怀里摸出一面镜子叫书生看。书生看到茫茫大海,一名遇害的女子一丝不挂地躺在海滩上。路过一人, 看一眼,摇摇头,走了。又路过一人,将衣服脱下,给女尸盖上,走了。再路过一人,过去,挖个坑,小心翼翼把尸体掩埋了。  僧人解释道, 那具海滩上的女尸,就是你未婚妻的前世。你是第二个路过的人,曾给过他一件衣服。她今生和你相恋,只为还你一个情。但是她最终要报答一生一世的人,是最后那个把她掩埋的人,那人就是他现在的丈夫。书生大悟,病愈。


        </p>
        <p><b>注意:</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原来的样子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下划线</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以这样装饰文字:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注:不建议强调指出不是链接的文本,因为这常常混淆用户。

3. text-transform文本转换

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

  • uppercase:转换为全部大写。
  • lowercase:转换为全部小写。
  • capitalize :每个单词的首字母大写。
<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height设置行高

指定在一个段落中行之间的空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。

盘点HTML中常见的ul ol 列表和常见的列表标记图标

大家好,我是皮皮。

一、概念

CSS列表属性作用如下:设置不同的列表项标记为有序列表。设置不同的列表项标记为无序列表。设置列表项标记为图像。

二、什么是种类型的列表?

种类型的列表:

  • ul无序列表 – 列表项标记用特殊图形(如小黑点、小方框等)
  • ol有序列表 – 列表项的标记有数字或字母。

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

三、常见的ul ol列表项标记

list-style-type属性指定列表项标记的类型是:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
            ul.a {
                list-style-type: circle;
            }


            ul.b {
                list-style-type: square;
            }


            ol.c {
                list-style-type: upper-roman;
            }


            ol.d {
                list-style-type: lower-alpha;
            }
</style>
    </head>


    <body>
        <p>Example of unordered lists:</p>


        <ul class="a">
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>


        <ul class="b">
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>


        <p>Example of ordered lists:</p>


        <ol class="c">
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ol>


        <ol class="d">
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ol>


    </body>


</html>

四、ul ol列表项标记的图像浏览器兼容性解决方案

要指定列表项标记的图像,使用列表样式图像属性list-style-image。

在所有的浏览器,下面的例子会显示图像标记:

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

代码解析

  • ul:
    • 设置列表样式类型为没有删除列表项标记
    • 设置填充和边距0px(浏览器兼容性)
  • ul中所有li:
    • 设置图像的URL,并设置它只显示一次(无重复)
    • 您需要的定位图像位置(左0px和上下5px)
    • 用padding-left属性吧文本置于列表中

五、拓展

ul ol列表缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性,列表样式属性设置如下:

ul
{
list-style: square url("sqpurple.gif");
}

如果使用缩写属性值的顺序是:

①list-style-type 。②list-style-position。 ③list-style-image。

如果上述值丢失一个,其余仍在指定的顺序,就没关系。

六、总结

本文基于HTML基础,本文主要介绍了HTML常见的ul ol 列表、常见的列表标记图标。对于浏览器兼容列表图像的问题,提供了一系列的解决方案,最后扩展相关知识,优化代码,希望能够帮助你学习。

一篇文章带你了解CSS单位相关知识

大家好,我是皮皮,今天给大家分享一些前端的知识。

一、了解 CSS 单位

测量长度的单位可以是绝对的,例如像素,点等,也可以是相对的,例如百分比(%)和 em 单位。

指定 CSS 单位对于非零值是必须的,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值为 0,则可以省略该单位(毕竟,零像素与零英寸是一样的)。

注意: 长度是指距离测量。长度包括数字值,后面加单位,比如 10px、2em、50% 等。数字和单位之间不能出现空白。

二、相对长度单位

相对长度单位指定相对于另一个长度属性的长度。相对单位是 描述 :em当前的字体大小 。

ex :当前字体的 x 高度 。

em 和 ex 单位取决于套用至元素的字体大小。

1. 使用 em 单位

em 的值等于使用它的元素的 font-size 属性的计算值。它可用于垂直或水平测量。

例如,如果 font-size 元素设置为 16px,并且 line-height 设置为 2.5em,则 line-height像素计算值为:2.5 x 16px = 40px。

P {
    font-size: 16px;
    line-height: 2.5em;
}

运行效果

一篇文章带你了解CSS单位相关知识

当在 font-size 属性本身的值中指定 em 时会发生异常,在这种情况下,它引用父元素的字体大小。

因此,当我们用 em 指定字体大小时,1em 继承自 font-size。因此, font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>平安保险</title>
        <link rel="stylesheet" type="text/css" href="css/fy.css" />
    </head>


    <body>
        <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
        <title>项目</title>
        <style>
            body {
                font-size: 62.5%;
                font-family: Arial, Helvetica, sans-serif;
            }


            p {
                font-size: 1.6em;
            }


            p:firt-letter {
                font-size: 3em;
                font-weight: bold;
            }
</style>


        <body style="text-align: center; background-color: aquamarine;">
            <div>ddad</div>
            <p> Hellow world</p>
        </body>


</html>

一篇文章带你了解CSS单位相关知识

代码解析:浏览器中字体的默认大小为 16px。我们的第一步是通过将主体设置 font-size 为 62.5% 来减小整个文档的大小,这会将字体大小重置为 10px(16px 的 62.5%)。

这是默认 font-size的四舍五入,方便 px 到 em的转换。

2. 使用 ex 单位

ex 单位等于当前字体的 x 高度。

所谓的 x 高度是因为它通常等于小写 x 的高度,如下所示。但是, ex 即使对于不包含 x 的字体,也会定义的。

P {
    font-size: 16ex;
    line-height: 2.5em;
}
一篇文章带你了解CSS单位相关知识

三、绝对长度单位

绝对长度单位相对于彼此固定。它们高度依赖于输出介质,因此在输出环境已知时主要有用。绝对单位由物理单位(的 in、cm、mm、pt、pc)和 px 单位。表中j进行属性的详细介绍。

单位

描述

in

英寸 – 1 英寸等于 2.54 厘米。

cm

厘米。

mm

毫米。

pt

points – 在 CSS 中,一个点定义为 1⁄72 英寸(0.353mm)。

pc

picas – 1pc 等于 12pt。

px

像素单位 – 1px 等于 0.75pt。

绝对物理单位,例如 in、cm、mm 等应被用于打印介质和类似的高分辨率的设备。然而,对于桌面和低分辨率设备等屏幕显示,建议使用像素或 em 单位。

例:

   h1 {
                margin: 0.5in;
            }
            /* inches  */


            h2 {
                line-height: 3cm;
            }
            /* centimeters */


            h3 {
                word-spacing: 4mm;
            }
            /* millimeters */


            h4 {
                font-size: 12pt;
            }
            /* points */


            h5 {
                font-size: 1pc;
            }
            /* picas */


            h6 {
                font-size: 12px;
            }
            /* picas */

提示: 使用相对单位(如 em 或百分比 %)的样式表可以更轻松地从一个输出环境扩展到另一个输出环境。

一篇文章带你了解CSS单位相关知识

四、总结

本文主要介绍了css单位的运用,通过两个方面展开,相对长度单位,绝对长度单位,在项目中需要注意的点,需要注意的事项,都进行了详细的讲解和提供了对应的解决方案。代码很简单,希望可以帮助你学习。

如果在操作过程中有任何问题,记得下面留言,我们看到会第一时间解决问题。

Windows环境下轻松搭建NodeJs服务器

大家好,我是皮皮,今天给大家分享一些好玩的~

前言

Nodejs是GoogleV8引擎的一个JavaScript脚本语言,实际上也就是相当于服务器一样,可以解析网页内容并产生效果。它的出现令JavaScript如虎添翼,而且Node比JavaScript执行更为快速,并且支持分布式,因为它使用了事件驱动型的非阻塞式的模型。说太多反而没意思,不如我们自己搭建一个。

一、下载Nodejs

由于小编是Win7的系统,新版Nodejs不支持,不知道为什么?倒是对Win8很友好。于是小编在清华镜像下载了下来,分享给大家。这里有两个版本,一个是安装包版本(后缀是.msi)无需配置环境变量;另一个是压缩包,直接解压然后配置环境变量即可。这里小编建议大家下载安装包,考虑到有些人不懂的怎么设置环境变量,还是安装包好点,小编偷个懒也下安装包。

二、安装Nodejs

首先我们需要同意它的用户协议,然后选择安装路径,没有硬性规定非得放在系统盘,那么就请放在其它盘,如下:

Windows环境下轻松搭建NodeJs服务器

然后点击下一步,会看到环境设置和安装依赖项,不用管,Next继续,如下:

Windows环境下轻松搭建NodeJs服务器

然后我们会看到有一个选项,如图:

Windows环境下轻松搭建NodeJs服务器

这个是让我们是否选择这个工具,选择了它就会下载,建议选上,然后等待片刻,安装立马就好了,如图:

Windows环境下轻松搭建NodeJs服务器

这个时候会出现一个CMD窗口,提示我们要下载工具了,并且需要关掉所有的窗口,如图:

Windows环境下轻松搭建NodeJs服务器

按回车后,完成闪退,进入CMD,输入命令获取Node版本号,若返回则说明安装成功,如下:

Windows环境下轻松搭建NodeJs服务器

三、新建项目

首先创建一个文件夹,名字不要使用中文和大写字母,然后我们在该目录下打开命令提示符,并输入命令“npm init”,如下:

Windows环境下轻松搭建NodeJs服务器

这里我们一步步按回车,最后输入Yes,即可创建一个Node的项目了。上面给出的都是项目的配置。打开文件夹去看看,如图:

Windows环境下轻松搭建NodeJs服务器

会创建一个Json格式的文件。然后我们需要给这个项目建立一个静态的资源库,一般放置图片,HTML什么的,取名为Static好了,然后放一个HTML文件进去,取名“index.html”,至于内容随便写;然后我们需要在Json文件目录建立一个Json文件,用作启动服务器使用,先随便写一个,如图:

Windows环境下轻松搭建NodeJs服务器

然后我们访问它,这个时候这个Js 文件就是服务端的程序,访问就会出结果,如图:

Windows环境下轻松搭建NodeJs服务器

四、建立一个可以在浏览器中访问的服务器

上面我们所建立的只能在Node中访问,浏览器中不行,下面建立个浏览器中能访问的,这样才叫服务器吗?我们先创建一个服务器的Js文件,内容如下:

var http = require('http');
var server = http.createServer(function (req,res) 
{
res.writeHead(200, {'Content-Type': 'text/plain'}); 
res.end('Hello World\n');
});
server.listen(8080,'127.0.0.1');


console.log('Server running on http://127.0.0.1:8080/');

然后我们在CMD中启动服务,如下所示:

Windows环境下轻松搭建NodeJs服务器

Windows环境下轻松搭建NodeJs服务器

成功。

五、总结

看完Nodejs搭建服务器是不是觉得很简单了,不着急,更精彩的还在后面等着你,这才只是个开端而已。

一篇文章带你了解CSS定位知识

大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS定位。

一、Position(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

二、属性

1. Static 定位(默认效果)

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

2. Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
    <head>
        <style>
            p.pos_fixed {
                position: fixed;
                top: 30px;
                right: 5px;
            }
</style>
    </head>


    <body>


        <p class="pos_fixed">Some more text</p>
        <p><b>Note:</b> 代码使人进步!!!.</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>


    </body>


</html>

注意:

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。

3. Relative 定位

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title> 定位</title>


    <head>
        <style>
            h2.pos_left {
                position: relative;
                left: -20px;
            }


            h2.pos_right {
                position: relative;
                left: 20px;
            }
</style>
    </head>


    <body style="background-color:azure;">


        <p>Some more text</p>
        <p><b>Note:</b> 代码使人进步!!!.</p>
        <h2 class="pos_left">This heading is moved left according to its normal position</h2>
        <h2 class="pos_right">This heading is moved right according to its normal position</h2>


    </body>


</html>

可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

h2.pos_top{
    position:relative;
    top:-50px;
}

相对定位元素经常被用来作为绝对定位元素的容器块。

4. Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

h2{
    position:absolute;
    left:100px;
    top:150px;
}

Absolutely定位使元素的位置与文档流无关,因此不占据空间。

Absolutely定位的元素和其他元素重叠。

三、重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z – index,最后定位在HTML代码中的元素将被显示在最前面。

四、总结

本文基于Html基础,主要介绍了CSS中四种定位的方式。对于四种的定位表现形式,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。

最后,希望可以帮助大家更好的学习CSS3。