Python爬虫基础：常用HTML标签和Javascript入门
Python爬虫基础：常用HTML标签和Javascript入门
1 HTML基础
大部分HTML标签是闭合的，由开始标签和结束标签构成，二者之间是要显示的内容，例如：<title>网页标题</title>。也有的HTML标签是没有结束标签的，例如：<br />和<hr>。
（1）h标签
在HTML代码中，使用h1到h6表示不同级别的标题，其中h1级别的标题字体最大，h6级别的标题字体最小。该标签的用法为：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
（2）p标签
在HTML代码中，p标签表示段落，用法为：
<p>这是一个段落</p>
（3）a标签
在HTML代码中，a标签表示超链接，使用时需要指定链接地址（由href属性来指定）和在页面上显示的文本，用法为：
<a href="http://www.baidu.com">点这里</a>
（4）img标签
在HTML代码中，img标签用来显示一个图像，并使用src属性指定图像文件地址，可以使用本地文件，也可以指定网络上的图片。例如：
<img src="Python可以这样学.jpg" width="200" height="300" />
<img src="http://www.tup.tsinghua.edu.cn/upload/bigbookimg/072406-01.jpg" width="200" height="300" />
（5）table、tr、td标签
在HTML代码中，table标签用来创建表格，tr用来创建行，td用来创建单元格，用法为：
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
（6）ul、ol、li
在HTML代码中，ul标签用来创建无序列表，ol标签用来创建有序列表，li标签用来创建其中的列表项。例如，下面是ul和li标签的用法：
<ul id="colors" name="myColor">
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ul>
（7）div标签
在HTML代码中，div标签用来创建一个块，其中可以包含其他标签，例如：
<div id="yellowDiv" style="background-color:yellow;border:#FF0000 1px solid;">
<ol>
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ol>
</div>
<div id="reddiv" style="background-color:red">
<p>第一段</p>
<p>第二段</p>
</div>
2 JavaScript基础
JavaScript是由客户端浏览器解释执行的弱类型脚本语言，大幅度提高网页的浏览速度和交互能力，提高了用户体验。
（1）在网页中使用JavaScript代码的方式
可以在HTML标签的事件属性中直接添加JavaScript代码。例如，把下面的代码保存为index.html文件并使用浏览器打开，单击按钮“保存”，网页会弹出提示“保存成功”。
<html>
<body>
<form>
<input type="button" value="保存" onClick="alert('保存成功');">
</form>
</body>
</html>
对于较多但仅在个别网页中用到的JavaScript代码，可以写在网页中的<script>标签中。例如，下面的代码保存为index.html并使用浏览器打开，会发现页面上显示的是“动态内容”而不是“静态内容”。在这段代码中要注意，<script></script>这一对标签要放在<body></body>标签的后面，否则由于页面还没有渲染完，所以获取指定id的div会失败。
<html>
<body>
<div id="test">静态内容</div>
</body>
<script type="text/javascript">
document.getElementById("test").innerHTML="动态内容";
</script>
</html>
如果一个网站中会用到大量的JavaScript代码，一般会把这些代码按功能划分到不同函数中，并把这些函数封装到一个扩展名为js的文件中，然后在网页中使用。例如，和网页在同一个文件夹中的myfunctions.js内容如下：
function modify(){
document.getElementById("test").innerHTML="动态内容";
}
在下面的页面文件中，把外部文件myfunctions.js导入，然后调用了其中的函数：
<html>
<head>
<script type="text/javascript" src="myfunctions.js"></script>
</head>
<body>
<div id="test">静态内容</div>
</body>
<script type="text/javascript">modify();</script>
</html>
（2）常用JavaScript事件
如果不在HTML代码中说明，那么在<script>和</script>这两个标签的JavaScript代码在页面打开和每次刷新时都会得到运行，例如本节的第二段和第三段代码所演示。但有些JavaScript代码需要在特定的时机才可以运行，例如本节第一段代码，只有单击页面的按钮之后才会执行okClick属性指定的JavaScript代码，这种机制叫做事件驱动。得益于事件驱动机制，我们可以指定某段代码在什么情况下才会运行，例如页面加载时（onLoad事件）、鼠标单击时（onClick事件）、键盘按键时（onkeypress事件）等等。
把下面的代码保存为index.html并使用浏览器打开，会发现在每次页面加载时都会弹出提示，但在页面上进行其他操作时，并不会弹出提示。
<html>
<body onLoad="alert('页面开始加载');">
<div id="test">静态内容</div>
</body>
</html>
除了常用的事件之外，还有一些特殊的方式可以执行JavaScript代码。例如，下面的代码演示了在链接标签<a>中使用href属性指定JavaScript代码的用法。
<html>
<script type="text/javascript">
function test(){alert('提示信息');}
</script>
<body>
<a href="javascript:test();">点这里</a>
</body>
</html>
（3）常用JavaScript对象
常用的JavaScript对象有navigator、window、location、document、history、image、form等等，这里简单介绍一下window和document对象的用法。
JavaScript对象window对象表示浏览器窗口，是所有对象的顶层对象，会在<body>或<frameset>每次出现时自动创建，在同一个窗口中访问其他对象时，可以省略前缀“window.”。前面几段代码中的alert()实际上就是window对象的众多方法之一，除此之外，还有confirm()、open()、prompt()、setInterval()、focus()、home()、close()、back()、forward()等等。下面的代码演示了prompt()方法的用法，将其保存为文件index.html并使用浏览器打开，会提示用户输入任意内容，然后在页面上输出相应的信息。
<html>
<script type="text/javascript">
var city = prompt("请输入一个城市名称：", "烟台");
document.write("你输入的是："+city);
</script>
<body></body>
</html>
JavaScript对象document表示当前HTML文档，可用来访问页面上所有元素，常用的方法有write()、getElementById()等等。例如，上一段代码中演示了document对象write()方法的用法，本节（1）部分中的第二段代码演示了document对象getElementById()方法的用法。
当网页中包含<img>标签时，会自动建立image对象，网页中的图像可以通过document对象的images数组来访问，或者使用图像对象的名称进行访问。例如，把下面的代码保存为文件index.html，此时页面上会显示图像文件1.jpg的内容，单击该图像时会切换成为2.jpg的内容。
<html>
<body>
<img name="img1" src="1.jpg"
onClick="document.img1.src='2.jpg';" />
</body>
</html>
腾讯云开发者
