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>

原文发布于微信公众号 - Python小屋(Python_xiaowu)

原文发表时间:2018-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

5209
来自专栏蓝天

常用vim设置

    \ if line("'\"")>0&&line("'\"")<=line("$") |

1064
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

4263
来自专栏林德熙的博客

win10 uwp 横向 AppBarButton

一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把...

861
来自专栏Android干货

Android项目实战(四十):在线生成按钮Shape的网站

29410
来自专栏WindCoder

Jquery控制input与selected

当以form表单提交,diabled时无法获取数值,readonly可以获取到数值。

1811
来自专栏WD学习记录

HTML.Label

如果用户单击 label,浏览器会把焦点传送给相关的输入控件 ,这一点对于复选框和单选按钮特别有用,

651
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》五、快捷键(编码利器)

上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白。今天我们就来学习快捷键的配...

3266
来自专栏计算机编程

【vue随手笔记】MuseUI 自定义 select 适配 mobile

通过 emit将result值发给外部实现字父组件的双向绑定,于是父组件获取result值即:

1212
来自专栏Youngxj

hislider自适应幻灯片焦点图-emlog插件

1604

扫码关注云+社区

领取腾讯云代金券