Python_day19--HTML基础--文本标签、超链接标签、图片标签
一、什么是Web开发
最早的软件都是运行在大型机上的,软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起,软件开始主要运行在桌面上,而数据库这样的软件运行在服务器端,这种Client/Server模式简称CS架构。随着互联网的兴起,人们发现,CS架构不适合Web,最大的原因是Web应用程序的修改和升级非常迅速,而CS架构需要每个客户端逐个升级桌面App,因此,Browser/Server模式开始流行,简称BS架构。在BS架构下,客户端只需要浏览器,应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器,获取Web页面,并把Web页面展示给用户即可。当然,Web页面也具有极强的交互性。由于Web页面是用HTML编写的,而HTML具备超强的表现力,并且,服务器端升级后,客户端无需任何部署就可以使用到新的版本,因此,BS架构迅速流行起来。今天,除了重量级的软件如Office,Photoshop等,大部分软件都以Web形式提供。比如,新浪提供的新闻、博客、微博等服务,均是Web应用。
目前,Web开发技术仍在快速发展中,异步开发、新的MVVM前端技术层出不穷。Python的诞生历史比Web还要早,由于Python是一种解释型的脚本语言,开发效率高,所以非常适合用来做Web开发。
Python有上百种Web开发框架,有很多成熟的模板技术,选择Python开发Web应用,不但开发效率高,而且运行速度快。
二、HTTP协议
1、简介在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP,所以:
1）HTML是一种用来定义网页的文本,会HTML,就可以编写网页;
2）HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信。
2、页面显示的过程
当浏览器读取到网页首页的HTML源码后,它会解析HTML,显示页面,然后,根据HTML里面的各种链接,再发送HTTP请求给新浪服务器,拿到相应的图片、视频、Flash、JavaScript脚本、CSS等各种资源,最终显示出一个完整的页面。所以我们在 Network 下面能看到很多额外的HTTP请求。
3、HTTP请求
跟踪了新浪的首页,我们来总结一下HTTP请求的流程:
1）浏览器首先向服务器发送HTTP请求,请求包括:
方法:GET还是POST,GET仅请求资源,POST会附带用户数据;
路径:/full/url/path;
域名:由Host头指定:Host: www.sina.com.cn以及其他相关的Header;
如果是POST,那么请求还包括一个Body,包含用户数据。
2）服务器向浏览器返回HTTP响应,响应包括:
响应代码:200表示成功,3xx表示重定向,4xx表示客户端发送的请求有错误,5xx表示服务器端处理时发生了错误;
响应类型:由Content-Type指定;以及其他相关的Header;通常服务器的HTTP响应会携带内容,也就是有一个Body,包含响应的内容,网页的HTML源码就在Body中。
3）如果浏览器还需要继续向服务器请求其他资源,比如图片,就再次发出HTTP请求,重复步骤1、2。
Web采用的HTTP协议采用了非常简单的请求-响应模式,从而大大简化了开发。当我们编写一个页面时,我们只需要在HTTP请求中把HTML发送出去,不需要考虑如何附带图片、视频等,浏览器如果需要请求图片和视频,它会发送另一个HTTP请求,因此,一个HTTP请求只处理一个资源。
HTTP协议同时具备极强的扩展性,一个站点可以链接到其他站点,无数个站点互相链接起来,就形成了World Wide Web,简称WWW。
三、HTML简介
网页就是HTML?这么理解大概没错。因为网页中不但包含文字,还有图片、视频、Flash小游戏,有复杂的排版、动画效果,所以,HTML定义了一套语法规则,来告诉浏览器如何把一个丰富多彩的页面显示出来。
所以,学HTML,就不要指望从新浪入手了。我们来看看最简单的HTML长什么样:
01_html基本结构
hello,python
这就是我们写的最简单的欢迎仪式了；
HTML文档就是一系列的Tag组成,最外层的Tag是 <html> 。规范的HTML也包含 <head>...</head> 和 <body>...</body> (注意不要和HTTP的Header、Body搞混了),由于HTML是富文档模型,所以,还有一系列的Tag用来表示链接、图片、表格、表单等等。
四、基本的HTML结构
HTML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义，在这里由于我是写后端 的，所以这里说的并没有很清晰详细；其次前端页面的标签非常多，我不可能记住每一个怎么用，在这里先介绍一个很好的网站 http://www.w3school.com.cn/html5/index.asp，这里是比较全的所有有关web
个人博客
this is a first html page!
hello world
五、常用的文本标签
1、
2、
- 标签可定义标题。 定义最大的标题。 定义最小的标题。
定义最大的标题。 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
01_html基本结构
hello,python
hello,python
hello,python
hello,python
hello,python
hello,python
3、
换行标签
4、
标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
5、
标签可定义下标文本；
可定义上标文本。
x1 = 5
x2= -1， 求x?
x12= -1， 求x1?
6、
标签水平线，它应该定义内容中的主题变化。
7、
空格，在html中的空格在页面中是无法显示的，需要特殊的字符来代替空格
8、
定义重要的文本。
呈现为被强调的文本。
定义一个定义项目。
定义计算机代码文本。
定义样本文本。
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
定义变量。您可以将此标签与 及
标签配合使用。
定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
9、
标签定义下划线文本。HTML 5 中不再支持该标签。
10、
标签被用来组合文档中的行内元素。
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
11、
标签定义摘自另一个源的块引用。与之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。12、
标签的一个常见应用就是用来表示计算机的源代码。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
六、超链接标签
（一）页内连接
01_html基本结构 跳转到第一个案例 #这里的链接名字可以随意起，href="#c1",但是注意这里的名字要与下面的接口的名字相同
跳转到第二个案例
跳转到第三个案例
跳转到第10个案例1. 案例1：创建超级链接
#在这里的名字要与上面相同1 沁园春 长沙 一九二五年 独立寒秋 湘江北去 橘子洲头 看万山红遍 层林尽染 漫江碧透 百舸争流 鱼翔浅底 万类霜天竞自由 怅寥廓 问苍茫大地 谁主沉浮 携来百侣曾游 忆往昔峥嵘岁月稠 恰同学少年 风华正茂 书生意气 挥斥方遒 指点江山 激扬文字 粪土当年万户候 曾记否 到中流击水 浪遏飞舟 2 菩萨蛮 黄鹤楼 一九二七年 茫茫九派流中国 沉沉一线穿南北 烟雨莽苍苍 龟蛇锁大江 黄鹤知何去 剩有游人处 把酒酹滔滔 心潮逐浪高 3 西江月 井冈山 一九二八年秋 山下旌旗在望 山头鼓角相闻 敌人围困万千重 我自岿然不动 早已森严壁垒 更加重志成城 黄洋界上炮声隆 报道敌军宵遁 4 采桑子 重阳 一九二九年十月 人生易老天难老 岁岁重阳 今又重阳 战地黄花分外香 一年一度秋风劲 不似 春光 胜似春光 寥廓江天万里霜 5 如梦令 元旦 一九三零年一月 宁化 清流 归化 路隘林深苔滑 今日向何方 直指武夷山下 山下 山下 风展红旗如画2. 案例2： 将图像作为链接
1 沁园春 长沙 一九二五年 独立寒秋 湘江北去 橘子洲头 看万山红遍 层林尽染 漫江碧透 百舸争流 鱼翔浅底 万类霜天竞自由 怅寥廓 问苍茫大地 谁主沉浮 携来百侣曾游 忆往昔峥嵘岁月稠 恰同学少年 风华正茂 书生意气 挥斥方遒 指点江山 激扬文字 粪土当年万户候 曾记否 到中流击水 浪遏飞舟 2 菩萨蛮 黄鹤楼 一九二七年 茫茫九派流中国 沉沉一线穿南北 烟雨莽苍苍 龟蛇锁大江 黄鹤知何去 剩有游人处 把酒酹滔滔 心潮逐浪高 3 西江月 井冈山 一九二八年秋 山下旌旗在望 山头鼓角相闻 敌人围困万千重 我自岿然不动 早已森严壁垒 更加重志成城 黄洋界上炮声隆 报道敌军宵遁 4 采桑子 重阳 一九二九年十月 人生易老天难老 岁岁重阳 今又重阳 战地黄花分外香 一年一度秋风劲 不似 春光 胜似春光 寥廓江天万里霜 5 如梦令 元旦 一九三零年一月 宁化 清流 归化 路隘林深苔滑 今日向何方 直指武夷山下 山下 山下 风展红旗如画3. 案例3：链接到同一个页面的不同位置
1 沁园春 长沙 一九二五年 独立寒秋 湘江北去 橘子洲头 看万山红遍 层林尽染 漫江碧透 百舸争流 鱼翔浅底 万类霜天竞自由 怅寥廓 问苍茫大地 谁主沉浮 携来百侣曾游 忆往昔峥嵘岁月稠 恰同学少年 风华正茂 书生意气 挥斥方遒 指点江山 激扬文字 粪土当年万户候 曾记否 到中流击水 浪遏飞舟 2 菩萨蛮 黄鹤楼 一九二七年 茫茫九派流中国 沉沉一线穿南北 烟雨莽苍苍 龟蛇锁大江 黄鹤知何去 剩有游人处 把酒酹滔滔 心潮逐浪高 3 西江月 井冈山 一九二八年秋 山下旌旗在望 山头鼓角相闻 敌人围困万千重 我自岿然不动 早已森严壁垒 更加重志成城 黄洋界上炮声隆 报道敌军宵遁 4 采桑子 重阳 一九二九年十月 人生易老天难老 岁岁重阳 今又重阳 战地黄花分外香 一年一度秋风劲 不似 春光 胜似春光 寥廓江天万里霜 5 如梦令 元旦 一九三零年一月 宁化 清流 归化 路隘林深苔滑 今日向何方 直指武夷山下 山下 山下 风展红旗如画10. 案例10： 古诗内容
1 沁园春 长沙 一九二五年 独立寒秋 湘江北去 橘子洲头 看万山红遍 层林尽染 漫江碧透 百舸争流 鱼翔浅底 万类霜天竞自由 怅寥廓 问苍茫大地 谁主沉浮 携来百侣曾游 忆往昔峥嵘岁月稠 恰同学少年 风华正茂 书生意气 挥斥方遒 指点江山 激扬文字 粪土当年万户候 曾记否 到中流击水 浪遏飞舟 2 菩萨蛮 黄鹤楼 一九二七年 茫茫九派流中国 沉沉一线穿南北 烟雨莽苍苍 龟蛇锁大江 黄鹤知何去 剩有游人处 把酒酹滔滔 心潮逐浪高 3 西江月 井冈山 一九二八年秋 山下旌旗在望 山头鼓角相闻 敌人围困万千重 我自岿然不动 早已森严壁垒 更加重志成城 黄洋界上炮声隆 报道敌军宵遁 4 采桑子 重阳 一九二九年十月 人生易老天难老 岁岁重阳 今又重阳 战地黄花分外香 一年一度秋风劲 不似 春光 胜似春光 寥廓江天万里霜 5 如梦令 元旦 一九三零年一月 宁化 清流 归化 路隘林深苔滑 今日向何方 直指武夷山下 山下 山下 风展红旗如画（二）外部链接
01_html基本结构 不创建新窗口-百度一下
创建新窗口-百度一下七、图片标签
我们这里的图片链接可以是本地链接，也可以是网络图片的链接
05_多媒体标签之图片标签
这是一个西部开源的logo:
详细信息
这是一个西部开源的logo:
这是一个西部开源的logo:
八、前两个综合应用（使用图片作为链接）
01_html基本结构
