整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

爬虫学习:HTML知识简介

爬虫学习:HTML知识简介

、 HTML语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language),它不是一种编程语言,而是一种使用一套标记标签(markup tag)来标记元素作用的标记语言,标记语言使用标记标签来描述网页的内容。标记标签不会出现在页面中,只有标签中的内容才会显示在页面上。

二、 HTML标签和HTML元素
HTML 标记标签通常被称为 HTML 标签 (HTML tag),是由一对尖括号括起来的关键词,称为标签名,如 <html>、<a>、<h1>。标签不区分大小写,但是推荐使用小写,(X)HTML 版本中强制使用小写,这样更加严谨。
标签的标记分为起始标签和结束标签。HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有内容。
起始标签用于标记对应HTML元素的开始位置,结束标签用于标记HTML元素的结束位置。
标签分为单标签和双标签,都需要起始标签和结束标签,不同的是单标签起始、结束标签都写在一个尖括号里而双标签则分别写在两个尖括号里。单标签又称为空标签,双标签又称为闭合标签。单标签的结束标签就是在标签的右尖括号前面一个反斜杠,如<br />就是一个单标签,双标签的结束标签就是在左尖括号后比开始标签多了一个反斜杠,如<html>和</html>就是一对开始标签和结束标签。

三、 HTML元素的分类
不同的HTML标签对应的HTML元素可以根据位置特征等分为两类:

  1. 块元素(block)
    块元素主要用来搭建网站架构、页面布局、承载内容,常见块元素对应的标签有: address、blockquote、center、dd、dl、dt、div、dir、fieldset、form、h1-h6、hr、isindex、li、menu、noframes、noscript、ol、table、p、pre、table、u、ul,即这些标签对应的HTML元素为块元素。块元素可设置宽高以及内外边距、在新行上开始,块级元素如果不设置宽度和高度,则宽度默认为父级元素(容器)的宽度。高度则根据内容大小自动填充。
  2. 行元素(inline)
    行元素用于加强内容显示、控制细节,例如:加粗、斜体等等,常见行元素对应的标签有: a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var …等,行元素和其他元素都在一行上,高、行高及顶和底边距不可改变,宽度就是它的文字或图片的宽度,不可改变,可以设置左右内、外边距,行元素与其他行元素可共处一行

四、 标签嵌套
双标签的开始标签和结束标签之间可以嵌套其他标签,不过需要遵循以下规则:
1、两个标签嵌套时必须确保开始标签和结束标签的层级是一致的,即开始标签在外层的结束标签必须在外层;
2、建议书写HTML文本时嵌套标签的内层标签相对外层标签进行缩进以体现嵌套关系;
3、块元素标签可以包含行元素标签,但行元素标签不能包含块元素标签,它们只能包含其它的行元素标签;
4、a标签想要用hover必须把它的路径写全;
5、伪类(hover/link/visited/active)只能加给a标签,在支持 CSS 的浏览器中,伪类表示链接的不同状态,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态:
1)link用在为访问的连接上;
2)visited用在已经访问过的连接上;
3)hover用于鼠标光标置于其上的连接;
4)active用于获得焦点(比如,被点击)的连接上。
6、块元素标签之间:
1)h1、h2、h3、h4、h5、h6、p、dt标签内不能再嵌套块标签;
2)li元素可以嵌入ul, ol, div;
3)div内可以再嵌套其他块元素;
4)块元素嵌套其他标签时,同一层级必须都是块元素,或必须都是行元素,不能一部分是块元素,一部分是行元素。如<div><span></span><p></p></div>这种模式是错误的,因为span是行元素,p是块元素,所以这个是错误的嵌套。

虽然标签可以嵌套,但为了提高浏览器的渲染效率,应该尽量少使用标签嵌套。

五、 标签的属性
HTML 标签可以拥有属性,属性为HTML元素提供的更多的附加信息, 属性只能在开始标签中使用,总是以名称/值对的形式出现,属性与属性之间需要用空格隔开,属性使用小写。常用的属性有class(样式类)、id(属性名)、style(显示风格)、title(标题)、align(对齐方式)、bgcolor(背景色)、color(颜色)。
如:

何计算机语言都会包含大量的内置函数,当然也可以自定义函数。

JS函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。相对来说,JS的函数比较复杂。

目录

1 常规函数

2 JS嵌套函数

3 JSt函数字面值

4 函数对象Function

5 匿名函数,也叫内联函数

6 闭包

7 内联函数作为对象的方法

8 常规函数做为对象的方法

9 对象字面量

1 常规函数

JS函数是先定义后调用。(C语言还要先声明)

function myFunction(a,b)

{

return a*b;

}

document.getElementById("demo").innerHTML=myFunction(4,3);

JS可以在<script>标签中直接调用函数,也可以在链接或事件中调用。

<a href="JavaScript:myFuncion(a,b)">myf</a>

<input type="button" value="click" onClick="myFuncion(a,b);" />

2 JS嵌套函数

JavaScript允许函数用作数据,也允许在函数中嵌入函数。

function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}

hypotenuse(1, 2); // This will produce 2.2360

3 JSt函数字面值

字面值函数的语法很类似的函数声明,不同之处在于它被用作表达,它不是作为一个声明,函数名是必需的。

var func=function(x,y){ return x*y };

你可以在上面函数中调用如下:

func(10,20); // This will produce 200

4 函数对象Function

Function也是一个对象,可以使用new运算符创建一个实例。

<script type="text/javascript">

var variablename=new Function(Arg1, Arg2..., "Function Body");

</script>

下面是创建一个函数的例子:

<script type="text/javascript">

var func=new Function("x", "y", "return x*y;");

</script>

Function()函数构造预期任意数量的字符串参数。最后一个参数是函数体,它可以包含任意JavaScript语句,用分号彼此分开。

请注意,Function()构造不通过任何参数,指定一个名字为它创建函数。使用Function()构造函数创建的未命名的函数称为匿名函数。

5 匿名函数,也叫内联函数

函数(没有名字)定义可以被赋值给一个变量,该变量被用作函数的引用。

匿名函数是指那些无需定义函数名的函数。匿名函数与 Lambda 表达式(拉姆达表达式)是一回事。唯一的不同——语法形式不同。Lambda 表达式更进一步。本质上,它们的作用都是:产生方法——内联方法,也就是说,省去函数定义,直接写函数体。

var abc=function(x,y){

return x+y;

}

alert(abc(2,3)); // "5"

匿名函数也可以作为事件方法:

window.onload=function(){

alert("Welcome");

}

var baz1=function() {

var foo=10;

var bar=2;

return foo * bar;

};

function mutil() {

var foo=10;

var bar=2;

return foo * bar;

};

alert(baz1());

var baz2=mutil();

alert(baz2);

baz1 与 baz2 完全一样,但 baz1 与 baz2 相比,省去了函数定义,直接函数体——看上去多简约。

6 闭

闭包是定义在另一个函数中的匿名函数。当外部函数退出时,它会返回内部匿名函数的引用,使得通过引用调用内部函数成为可能。闭包意味着局部变量对内部函数仍然可用,即使它已经超出其作用域。闭包可以让变量一直存活到不再需要它们的时候。闭包,其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。js中某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量,这称为闭包(Closure) 。

闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

请看下面的代码。

function f1(){

    var n=999;

    nAdd=function(){n+=1}

    function f2(){

alert(n);

}

    return f2;

  }

  var result=f1();

  result(); // 999

  nAdd();

  result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个

匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

function foo() {

var a=10;

function bar() {

a *=2;

return a;

}

return bar;

}

var baz=foo();

document.write(baz(),"<br>");

document.write(baz(),"<br>");

document.write(baz(),"<br>");

var blat=foo();

document.write(blat(),"<br>");

//20,40,80,20

7 内联函数作为对象的方法

function Distance(r,t){

this.rate=r;

this.time=t;

this.calculate=function() { return r * t;}

}

<body>

var trip1=new Distance(50, 1.5);

var trip2=new Distance(75, 3.2);

document.write("trip 1 distance: "+trip1.calculate(),"<br />");

document.write("trip 2 distance: "+trip2.calculate(),"<br />");

//75,240

</body>

8 常规函数做为对象的方法

var toy=new Object();

toy.name="Lego";

toy.color="red";

toy.shape="rectangle";

toy.display=printObject;

function printObject(){

document.write("<b>The toy is a " + toy.name + ".<br>");

document.write("It is a " + toy.color + " " + toy.shape + ".<br />");

}

<body>

<script>

toy.display();

toy.color="blue";

toy.display();

</script>

</body>

运行结果:

The toy is a Lego.

It is a red rectangle.

The toy is a Lego.

It is a blue rectangle.

9 对象字面量,也用匿名函数做为对象方法

<script>

var soldier={

name: undefined,

rank: "captain",

picture: "keeweeboy.jpg",

fallIn: function(){

document.write("At attention……<br>");

},

fallOut: function(){

document.write("Drop out of ……<br>");

}

};

</script>

<body>

<script>

soldier.name="Tian";

document.write("The soldier's name is ", soldier.name,".<br />");

document.write(soldier.name+"'s name is ", soldier.rank,".<br />");

soldier.fallIn();

soldier.fallOut();

</script>

</body>

-End-

TML 元素

HTML 文档由 HTML 元素定义,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容(empty content)

空元素在开始标签中进行关闭(以开始标签的结束而结束)

大多数 HTML 元素可拥有属性

注释: 您将在本教程的 HTML 属性一章中学习更多有关属性的详细内容。

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素(可以包含其他 HTML 元素)构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

上述的实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。

元素内容是: 这是第一个段落。

<body> 元素:

<body>

<p>这是第一个段落。</p>

</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.

元素内容是另一个 HTML 元素(body 元素)。

不要忘记结束标签

如果您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>这是一个段落

<p>这是一个段落

上述实例在浏览器中也能正常显示,因为关闭标签是可选的。

但您不能对此产生依赖性,因为忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠,比如 <br />,HTML、XHTML 和 XML 都接受这种方式。

注意:在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭,即使是空元素。

HTML 提示:使用小写标签

由于 HTML 标签对英文字母的大小写不敏感,所以 <P> 和 <p> 表达的意思相同,不过大部分网站喜欢使用大写的 HTML 标签。因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

本文为 HTML 基础教程第七章,下一章:HTML属性

【小提示】tips:本文由数据微学院作者原创,转载请注明来源或联系作者。更多优秀参考好文请关注【数据微学院】个人图书馆。

前端开发 HTML教程 数据微学院 网站开发 互联网