HTML学习教程5-头元素脚本链接

TML<head>元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="tom">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head> 
<body>

<script>
document.write("Hello World!")
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>

JavaScript事件响应:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head>
<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>
</html>

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

HTML链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

了方面和节约时间，本次使用的python编译器和解释器分别为pycharm，python3.6.1RC

逢年过节

有一个神奇的网站

你一定不陌生

“12306”

是不是总抢不到票啊

是不是观察着余票最新动态

告诉你一个新技能

贼666

12306自动抢票

前方高能,请系好好全带~~

…

首先在买票前我们需要先确认是否有票,那么进行正常的查票,打开12306查票网站输入出发地和目的地进行搜索。

私信小编007 即可获取数十套PDF以及大量的教学视频！全都是从零到项目实战的！

然后我们点击查询按钮以后浏览器向服务器发起了两次请求,那么我们来通过返回值分析下那个请求才是真正获取到车次相关数据的请求,以便我们用Python来模拟浏览器操作。

第一次请求:

很明显第一次请求返回的值没有我们需要的车次信息。

第二次请求:

第二次请求里面看到了很多数据,虽然我们暂时还没看到车次信息,但是我们发现它有个特性,就是有个列表的值里面有6个元素,而刚好我们搜索出来的从西安到达州的车辆也是6条数据,所以这两者肯定有一定关系,那么我们先用Python来获取到这些数据再进行下一步分析。

# -*- coding: utf-8 -*-

import urllib2

import ssl

ssl._create_default_https_context = ssl._create_unverified_context

def getList():

req = urllib2.Request('https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2017-07-10&leftTicketDTO.from_station=CDW&leftTicketDTO.to_station=CSQ&purpose_codes=ADULT')

req.add_header('User-Agent','Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36')

html = urllib2.urlopen(req).read()

return html

print getList()

req.add_header(‘User-Agent’,’Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36’)

其中的

ssl._create_default_https_context =ssl._create_unverified_context

是因为12306采用的是https协议,而ssl证书是它自己做的并没有得到浏览器的认可,所以Python默认是不会请求不受信任的证书的网站的,我们可以通过这行代码来关闭掉证书的验证。

那么我们先来看看能不能正常获取到我们想要的信息。

事实证明我们的操作没有问题,接下来先拿到包含有6条数据的这个列表再说。

返回的数据是json格式,但是Python标准数据类型中没有json这个类型,所以对于Python而言它就是个字符串,如果要非常方便的操作这个json我们就可以借助Python中的json这个包来把json这个字符串变成dict类型,然后通过dict的键值对操作方法把列表取出来并进行返回。

# -*- coding: utf-8 -*-

import urllib2

import ssl

import json

ssl._create_default_https_context = ssl._create_unverified_context

def getList():

req = urllib2.Request('https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2017-07-10&leftTicketDTO.from_station=CDW&leftTicketDTO.to_station=CSQ&purpose_codes=ADULT')

req.add_header('User-Agent','Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36')

html = urllib2.urlopen(req).read()

dict = json.loads(html)

result = dict['data']['result']

return result

最终返回的是一个list数据,我们先把这个数据for出来再看看每一条数据都有些什么东西。

for i in getList():

print i

for出来之后我们先来看看第一条数据是什么样的:

|预定|76000G131805|G1318|ICW|IZQ|ICW|CWQ|07:54|18:54|11:00|N|UHESFcaIDeX22Z0zWfqttDuZXJFuWPdIa148i6TNk5spIqfp|20170710|3|W2|01|16|0|0|||||||||||无|无|无||O0M090|OM9

其实我们稍微留一下就会发现里面有包含G1318,07:54,18:54,无这样的车次信息的,只不过看起来比较乱,但是他们都有一个特点,每个数据都是由|这个符号分开的,所以我们可以通过用|分割看看能发现什么呢?

for i in getList():

for n in i.split('|'):

print n

break

可以看到所有的值都打印出来了,我们再在前面加上一个序号就能清楚到看到每个序号所对应的值到底是什么了,比如有辆火车硬座还剩3张票,软卧还剩8张票,那我们就查看哪个序号对应的值是3哪个序号对应的值是8就搞清楚了哪个序号是代表什么座次或者其他参数了。

c = 0

for i in getList():

for n in i.split('|'):

print '[%s] %s' %(c,n)

c += 1

c = 0

break

#索引3=车次

#索引8=出发时间

#索引9=到达时间

到了这里不知道同学们有没有发现一个问题,就是我用的这个函数只能够获取到从长沙到成都的数据,而别人不一定是买这个方向的火车,所以我们还得搞清楚请求的url当中的出发站和到达站的值是怎么来的？

https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2017-07-10&leftTicketDTO.from_station=CDW&leftTicketDTO.to_station=CSQ&purpose_codes=ADULT

先找到出发站和到达站的参数分别是：

leftTicketDTO.from_station=CDW

leftTicketDTO.to_station=CSQ

然而通过查找和分析我并没有发现这两个参数有规律,那么也就是说这两个值是在之前的请求里面就已经获取到了的,通过检查网页源代码没有找到,那么又只能通过抓包的方式来找。

在抓包过程中找到了一个包的返回值是附带有各城市的代号的,url如下:

https://kyfw.12306.cn/otn/resources/js/framework/station_name.js?station_version=1.9018

先找到出发站和到达站的参数分别是：

leftTicketDTO.from_station=CDW

leftTicketDTO.to_station=CSQ

在抓包过程中找到了一个包的返回值是附带有各城市的代号的,url如下:

https://kyfw.12306.cn/otn/resources/js/framework/station_name.js?station_version=1.9018

那么我们把这里面的城市数据复制出来单独新建一个cons.py的文件保存起来。

然后我们通过把参数做成通过输入出发城市和到达城市就可以直接在这个数据里面匹配到相应的城市代号,代码如下:

station = {}

for i in cons.station_names.split('@'):

if i:

tmp = i.split('|')

station[tmp[1]] = tmp[2]

\#print station

train_date = raw_input('请输入出发时间')

from_station = station[raw_input('请输入出发城市')]

to_station = station[raw_input('请输入到达城市')]

到这里就已经能够通过输入“时间，城市”获取相应的车次信息了

那么我们再进行一些简单的判断,就能实现检查相应的时间,地点,车次是否有余票了。同时再结合登录，购票等流程,通过自动判断是否有票,如果无票就继续刷新,直到有票之后自动登录下单后通过短信或者电话等方式全自动联系购票人手机就可以了。

未完待续！

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

接下来我们将为大家演示如何使用Notepad++工具来创建 HTML 文件，其他两个工具操作步骤类似。

Notepad++

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

步骤 1: 新建 HTML 文件

在 Notepad++ 安装完成后，选择" 文件(F)->新建(N) "，在新建的文件中输入以下代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

步骤 2: 另存为 HTML 文件

然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。

在一个容易记忆的文件夹中保存这个文件，比如 runoob

步骤 3: 在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择"文件"菜单的"打开文件"命令，或者直接在文件夹中双击您的 HTML 文件,

运行显示结果类似如下:

Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。
Emmet 官网：http://emmet.io/

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：HTML常用代码集合，背完这些基本可以自己做表白网页了
下一篇：前端程序员入门html的4大方法，这两本神书真心经典！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML学习教程5-头元素 脚本 链接

TML<head>元素

HTML <title> 元素

HTML <base> 元素

HTML <style> 元素

HTML <meta> 元素

<meta> 标签- 使用实例

HTML <script> 元素

HTML<noscript> 标签

JavaScript事件响应:

HTML 脚本标签

HTML链接

HTML head 元素

您的项目需求

HTML学习教程5-头元素脚本链接