python进阶之web前端（01—HTML超文本标记语言）
2024-05-24 11:25:14
目录
01、Web前端开发介绍
1、Web前端开发概述
2、Web起源
3、Web特点
4、Web工作原理
5、URL介绍
02、HTML网页结构
1、HTML基本结构
2、HTML文档类型
3、HTML文档规范与注释
03、HTML标签
1、文本标签
2、换行标签
3、列表标签
4、div与span标签
5、图片标签img
6、超链接标签
7、表格标签
8、表单标签
1）form表单标签
2）表单项标签
3）下拉列表标签
4） 文本域标签
5）按钮标签
04、实践案例
01、Web前端开发介绍
1、Web前端开发概述
1）什么是Web开发?
- 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
- 它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。
- 随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
- 移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷
2）Web前端开发核心技术
《1》HTML语言（超文本标记语言，相当于一个整体的框架，很重要）
- 掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
- HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
- 随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。
- HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。
《2》CSS（层叠样式表,用来装饰HTML框架，相当于化妆，进行装饰 ）
《3》JavaScript（前端编程语言，用来使页面进行交互，动态展示，让设计的东西活起来，可以进行交互的）
HTML、CSS、JavaScript，被称为前端开发三剑客。
2、Web起源
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站
3、Web的特点
4、Web工作原理
比如，面试经常问的一个问题：在浏览器中输入 www.baidu.com 后执行的全部过程是怎样的？
- 浏览器向DNS服务器发出解析域名的请求；
- DNS服务器将域名解析为对应的IP地址，并返回给客户端；
- 浏览器与服务器建立TCP连接(默认端口为80)；
- 浏览器发出HTTP请求报文；
- 服务器回复HTTP响应报文；
- 浏览器解析响应报文，并显示在Web页上；
- 收发报文结束，释放TCP连接。
- 应用层：HTTP(WWW访问协议)，DNS(域名解析服务)
- 传输层：TCP(为HTTP提供可靠的数据传输)，UDP(DNS使用UDP传输)
- 网络层：IP(IP数据数据包传输和路由选择)，ICMP(提供网络传输过程中的差错检测)，ARP(将目的主机的IP地址映射成MAC地址)
5、URL介绍
URL(uniform resource locator)统一资源定位器，也就是网址，用来访问页面内容
再来回顾下常见的端口：
http：80
https：443
ssh：22
mysql：3306
redis：6379
ftp:21
02、HTML网页结构
1、HTML介绍
HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑。
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
2、HTML基本结构
如下图，便是HTML的框架内容，我们一边编写HTML文档时，都是依照这个模板往里面添加的。
<!--注释在这里写，写完直接按ctrl+/ -->
<!--声明html-->
<!DOCTYPE html><!--表示是html文档-->
<html lang="en"><!--html的头部，在页面中不会显示-->
<head><!-- 这里声明html文档的编码格式--><meta charset="UTF-8"><!-- 编辑整个页面的标题--><title>标题示例</title>
</head><!--html的主体，在页面中真正显示的内容-->
<body>
<!-- <h1></h1>：是一级标题，里面还可以进行设置格式颜色等-->
<h1 style="color: crimson">标题一</h1></body>
</html>
3、文档类型
目前常用的两种文档类型是 : html5 和 xhtml 1.0
这里简单说一下XHTML1.0、HTML4.01和HTML5的区别：
- XHTML1.0是XML风格的HTML4.01。
- XHTML1.1主要是初步进行了模块化。
- HTML5是下一代HTML，取代HTML4.01。
- 还没等XHTML兴起，它的地位就被HTML5取代了。HTML5规定了两种serialization形式，一种是宽松的HTML风格，一种是严格的XML/XHTML风格。
- 大部分企业会使用html5，使用xhtml1.0的一般是政府相关部门的显示页面。
4、文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释 的方法是：
03、HTML标签
1、文本标签
| 标签名称 | 基本语法 | 简要说明 |
|
标题字标签 |
<hn>标题字</hn> | 标题字根据字号分为6级，分别用h1~h6来表示 |
|
strong标签 |
<strong>文本</strong> | 通过预期的加重来强调文本 |
|
强调斜体标签 |
<em>文本</em> | 也是具有强调意义的标签，同时在样式上会显示倾斜效果 |
|
mark标签 |
<mark>文本</mark> | HTML5新增的标签，用来定义带有记号的文本 |
|
span标签 |
<span>文本内容</span> | span标签是一个装饰性标签，通常用于设置文本的视觉差异 |
|
段落与换行标签 |
<p>段落内容</p> | 将标签对之间的内容创建为一个段落。生成的段落默认与上下文有一空行的间隔 |
2、换行标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实验效果</title>
</head>
<>
<body><h1 style="color: blueviolet">标题一</h1>
<h2 style="color: red">标题二</h2>
<h3 style="color: yellow">标题三</h3>
<h4 style="color: green">标题四</h4>
<h5 style="color: black">标题五</h5>
<h6 style="color: blue">标题六</h6>
<br>
<i>斜体</i>
<em>斜体</em>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
<sub>下标</sub>
<sup>上标</sup>
<tt>居中显示</tt>
<u>字体加下划线</u>
<s>字体加删除线</s>
<strike>字体加删除线</strike>
s<sub>1</sub> = pi * r<sup>2</sup>
原价：<del>$100</del>
现价:<b style="color:red">$50</b><i>斜体</i>
<br/>
<em>斜体</em>
<br/><hr>
<br><p>总想在一场如酥如丝的春雨中，撑着油纸伞穿梭于江南。可能没有布满青苔的大石板，没有杨柳拂堤的断桥，没有一个且行且谈笑的好友。就一个人，静静的起行。在那里，我可以遇到破土而出、正展现着它勃勃生机的小草，遇到拂身而来、吹面不寒的二月春风，遇到一个促膝而谈、志同道合的友人。有人说，遇见，不过是在一定的地点，一定的时间，遇到一定的人或物，或许还有事情。但是在茫茫人海中，无数次擦肩的人又有几个是隐隐约约还存留着记忆的呢?没有心灵上的刻印，或许算不上是遇见吧。西湖三月，白素贞一袭轻衣走过，邂逅了一个儒雅书生，从此写就了一段刻骨铭心的爱情。草桥之上，梁山伯遇见祝英台，从十八里相送，到坟前的双双化蝶，为他们的爱情点开凄美的涟漪。最美的遇见，不过初见。我们之所以愿意去记忆那些初遇的一颦一笑，只是因为这是两颗陌生而又神秘的心在相互碰撞。如春风吹着云，又如蜻蜓点着水，青涩而又温馨。有多少人曾怀念着往昔，怀念的第一次相逢，第一次微笑，因为在各自心里，那里承载的是心的起点。人生若只如初见，最美的画面不会因为时间的推移而消散殆尽，反而会因此愈念愈浓，直至如梦如画，直至永恒。最暖的遇见，不过偶遇。如果说每一次初遇是云与风的交汇，那么我会相信每一次偶遇便是流星划过。没有计划、不经商量的，就那么匆匆地到来，该是有多欢喜。人生最大的悲痛永远不过是未知，然而最大的快乐也是未知。我们不能预知下一秒将遇到哪个人，也不能预测到你想遇见的人在何时遇到。人海还不一定茫茫，但机会总是渺渺。于是乎，我们不再刻意，一切都托付与机缘。当有一天，我们不期而遇，我们会发现这比任何一次彩排、任何一次计划都来得随意简单，但却是最为温暖。
</p>
<p>佛祖座下弟子阿难曾说：我愿化身石桥，受那五百年风吹，五百年日晒，五百年雨淋，只求她从桥上经过。 因为在他看来，每一次遇见都足以永恒，哪怕那时的他已经是一座沧桑的古桥。我收起伞，尽管天上还飘着雨丝。我纵身于雾汽之中，听着雨珠在发间流淌的声音。蓦然回首，仅莞尔一笑，愿我以最美的姿态遇见你。
</p></body>
</html>
3、列表标签
| 类型 | |
|---|---|
| disc | 圆点（默认） |
| square | 正方形 |
| circle | 空心圆 |
| 类型 | 1（默认） | A | a | I | i |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>无序列表：四大名著</h1>
<ul><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ul><!--ul的标记类型有：disc 圆点（默认）;square 方形; circle 空心圆建议不使用-->
<ul type="disc"><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ul><h1>有序列表：四大名著</h1>
<ol><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ol>
<!-- ol的标记类型有：1; A; a; I; i
--><ol type="I"><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ol><h1>自定义列表：四大名著</h1>
<dl><dt>四大名著</dt><dd>西游记</dd><dd>三国演义</dd><dd>水浒传</dd><dd>红楼梦</dd><dt>前端开发</dt><dd>HTML</dd><dd>CSS</dd><dd>JS</dd>
</dl></body>
</html>
4、div和span标签
<div>...</div> 是块级元素，一个元素占一行。 常用于组合块级元素，以便通过css来对这些元素进行格式化。<span>...</span> 行内元素：一个元素所占的位置取决于元素的标签内容。 常用于包含的文本，可以使用CSS对它定义样式，或者可以使用JS对它进行操作。块级标签：标题、段落、div 行内标签：斜体、加粗、上标、下标、span如果没有进行设置，二者显示是一样的可以把div想象成一个容器，把信息都要写在这个容器范围内，可以设置它的宽度，也就是这个容器的范围。
实验代码如下：
<!--<div>...</div> 是块级元素，一个元素占一行；比如目录等。-->
<!--常用于组合块级元素，以便通过css来对这些元素进行格式化。--><!--<span>...</span> 行内元素：一个元素所占的位置取决于元素的标签内容。-->
<!--常用于包含的文本，可以使用CSS对它定义样式，或者可以使用JS对它进行操作。--><!--如果没有进行设置，二者显示是一样的--><!--可以把div想象成一个容器，把信息都要写在这个容器范围内，可以设置它的宽度，也就是这个容器的范围--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div与span</title>
</head>
<body><!--块级元素：一个元素占一整行-->
<!--字体大小：30px; 设置边框：黑色，宽度1px; 背景颜色：黄色; -->
<div style="font-size: 30px; border:black 1px solid;background-color: aquamarine">div标签
</div><!--行内元素：一个元素占的位置取决于元素的标签内容-->
<span style="font-size: 20px; border:black 1px solid;background-color: chartreuse">span标签
</span></body>
</html>页面显示效果如下：
5、图片标签img
< img > 标签定义HTML 页面中的图像。
有两个必需的属性：src 和 alt
- src: 图片名及url地址
- alt: 图片加载失败时的提示信息
- title：文字提示属性
- width/height： 图片宽度/高度
简单示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片标签示例</title>
</head>
<body><!--
src: 指定图片的位置，绝对路径、相对路径都可以写，大多数情况用相对路径
alt: 当图片不能加载出来时，显示的文字信息
-->
<img src="./img/baidu.gif" alt="百度图片" width="500px" height="200px"></body>
</html>1）图片加载成功时网页展示：
2）图片加载失败时网页展示：（显示的就是文字）
小案例：（实现京东平台手机自助购物客户端显示）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片标签练习</title>
</head>
<body><img src="./img/phone.jpg"alt="iphone11"width="200px"height="200px">
<br>
<!--text-algin：显示的位置（left,right,center）-->
<div style="width:250px; text-align: center"><b style="font-size: 18px">Apple iPhone 11 (A2223) 128GB 黄色 移动联通电信4G手机 双卡双待</b><br><b style="color:red; font-size: 30px">¥5999</b><br><s style="font-size: 18px">¥6999.00</s>
</div></body>
</html>自页面显示结果：
6、超链接标签
如下这种形式的标签就是超链接的一种。
属性：
href：必须要有，指的是链接跳转地址，#表示链接到当前
target：表示链接的打开方式：
_blank ：新窗口
_self ：本窗口（默认）
title：文字提示属性，鼠标放到那里会显示的信息
分类：
有文字链接、图片链接、锚点链接
锚点链接：跳转到当前页面的某个位置
例如：1）一个简单的超链接案例实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签</title>
</head>
<body><h1>文字标签</h1>
<!--a标签时行内元素, href指定的时跳转的连接地址, traget指定是否开启新窗口打开链接-->
<a href="http://www.baidu.com"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank" title="text"> 百度一下</a><h1>图片链接</h1><br/>
<hr><a href="http://www.baidu.com"><img src="./img/baidu.gif" alt="baidu" title="'baidu">
</a></body>
</html>网页实现效果：
点击网页中任意超链接，就可以跳转至百度首页，比如我点击第一个超链接，会出现如下界面：
可见超链接建立成功！
2）简单的锚点案例实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>锚点实现案例</title>
</head>
<body><h1>锚点</h1>
<a href="#a1">跳到a1处</a>
<a href="#a2">跳到a2处</a><h2 id="a1">标题一</h2>
<p>生命__沈从文【作者简介】本书提炼的散文不仅是被公认的上乘之作，更分门别类，意蕴宽广。此外，每一篇散文更是加入了编者的心路花语，与读者分享。我们诚挚地期望，通过本书，能够引领读者登堂入室，管中窥豹，领略中外散文的真貌，同时启迪心智，陶冶性情，进而提高个人的审美意识、文学素养、写作水平、鉴赏能力、人生品位，为自己的人生添上光彩亮丽的一笔。沈从文（1902—1988），原名沈岳焕，笔名休芸芸、甲辰、上官碧、璇若等，乳名茂林，字崇文，湖南凤凰县人。沈从文是现代著名作家、历史文物研究家，代表作品有《边城》、《中国丝绸图案》等。我好像为什么事情很悲哀，我想起“生命”。……有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。明智者若善用其明智，即可从此云空中，读示一小文，文中有微叹与沉默，色与香，爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂，读者灵魂中如有音乐。虚空明蓝，读者灵魂上却光明净洁。大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。然抽象的爱，亦可使人超生。爱国也需要生命，生命力充溢者方能爱国。至如阉寺性的人，实无所爱，对国家，貌作热诚，对事，马马虎虎，对人，毫无情感，对理想，异常吓怕。也娶妻生子，治学问教书，做官开会，然而精神状态上始终是个阉人。与阉人说此，当然无从了解。夜梦极可怪。见一淡绿百合花，颈弱而花柔，花身略有斑点青渍，倚立门边微微动摇。在不可知的地方好像有极熟悉的声音在招呼：“你看看好，应当有一粒星子在花中。仔细看看。”于是伸手触之。花微抖，如有所怯。亦复微笑，如有所恃。因轻轻摇触那个花柄，花蒂，花瓣。近花处几片叶子全落了。如闻叹息，低而分明。雷雨刚过。醒来后闻远处有狗吠，吠声如豹。半迷糊中卧床上默想，觉得惆怅之至。因百合花在门边动摇，被触时微抖或微笑，事实上均不可能！起身时因将经过记下，用半浮雕手法，如玉工处理一片玉石，琢刻割磨。完成时犹如一壁炉上小装饰。精美如瓷器，素朴如竹器。一般人喜用教育身份来测量一个人道德程度。尤其是有关乎性的道德。事实上这方面的事情，正复难言。有些人我们应当嘲笑的，社会却常常给以尊敬，如阉寺。有些人我们应当赞美的，社会却认为罪恶，如诚实。多数人所表现的观念，照例是与真理相反的。多数人都乐于在一种虚伪中保持安全或自足心境。因此我焚了那个稿件。我并不畏惧社会，我厌恶社会，厌恶伪君子，不想将这个完美诗篇，被伪君子眼目所污渎。百合花极静。在意象中尤静。山谷中应当有白中微带浅蓝色的百合花，弱颈长蒂，无语如语，香清而淡，躯干秀拔。花粉作黄色，小叶如翠珰。法朗士曾写一《红百合》故事，述爱欲在生命中所占地位，所有形式，以及其细微变化。我想写一《绿百合》，用形式表现意象。【赏析】很多人步履匆匆，忙忙碌碌，他们或沉迷于功名利禄，或不惜一切代价追求物质财富，在追逐功名财富的时候烦恼丛生，却唯独忘了生命中那些最让人温暖，最让人感动的瞬间！其实生活中本没有那么多烦恼，一切只不过是庸人自扰。只要我们稍微停下脚步，就可以更好地珍惜生命本原的美丽，不为爱欲所炫目，不为污秽所恶心，永远正确看待生命，永远那么透明地看。那时候，你将发现，在人生的幽僻处、细小处，都闪耀着光芒。沈从文先生用优美的笔触展现了他对生命深深的思索。该文写于20世纪40年代，今天看来仍鲜活而不失色泽，精辟而不加粉饰。</p><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><h2 id="a2">标题二</h2>
<p>藤野先生__鲁迅东京也无非是这样。上野的樱花烂漫的时节，望去确也像绯红的轻云，但花下也缺不了成群结队的“清国留学生”的速成班，头顶上盘着大辫子，顶得学生制帽的顶上高高耸起，形成一座富士山。也有解散辫子，盘得平的，除下帽来，油光可鉴，宛如小姑娘的发髻一般，还要将脖子扭几扭。实在标致极了。中国留学生会馆的门房里有几本书卖，有时还值得去一转；倘在上午，里面的几间洋房里倒也还可以坐坐的。但到傍晚，有一间的地板便常不免要咚咚咚地响得震天，兼以满房烟尘斗乱；问问精通时事的人，答道：“那是在学跳舞。”到别的地方去看看，如何呢？我就往仙台的医学专门学校去。从东京出发，不久便到一处驿站，写道：日暮里。不知怎地，我到现在还记得这名目。其次却只记得水户了，这是明的遗民朱舜水先生客死的地方。仙台是一个市镇，并不大；冬天冷得利害；还没有中国的学生。大概是物以稀为贵罢。北京的白菜运往浙江，便用红头绳系住菜根，倒挂在水果店头，尊为“胶菜”；福建野生着的芦荟，一到北京就请进温室，且美其名曰“龙舌兰”。我到仙台也颇受了这样的优待，不但学校不收学费，几个职员还为我的食宿操心。我先是住在监狱旁边一个客店里的，初冬已经颇冷，蚊子却还多，后来用被盖了全身，用衣服包了头脸，只留两个鼻孔出气。在这呼吸不息的地方，蚊子竟无从插嘴，居然睡安稳了。饭食也不坏。但一位先生却以为这客店也包办囚人的饭食，我住在那里不相宜，几次三番，几次三番地说。我虽然觉得客店兼办囚人的饭食和我不相干，然而好意难却，也只得别寻相宜的住处了。于是搬到别一家，离监狱也很远，可惜每天总要喝难以下咽的芋梗汤。从此就看见许多陌生的先生，听到许多新鲜的讲义。解剖学是两个教授分任的。最初是骨学。其时进来的是一个黑瘦的先生，八字须，戴着眼镜，挟着一叠大大小小的书。一将书放在讲台上，便用了缓慢而很有顿挫的声调，向学生介绍自己道：“我就是叫做藤野严九郎的……”后面有几个人笑起来了。他接着便讲述解剖学在日本发达的历史，那些大大小小的书，便是从最初到现今关于这一门学问的著作。起初有几本是线装的；还有翻刻中国译本的，他们的翻译和研究新的医学，并不比中国早。那坐在后面发笑的是上学年不及格的留级学生，在校已经一年，掌故颇为熟悉的了。他们便给新生讲演每个教授的历史。这藤野先生，据说是穿衣服太模糊了，有时竟会忘记带领结；冬天是一件旧外套，寒颤颤的，有一回上火车去，致使管车的疑心他是扒手，叫车里的客人大家小心些。他们的话大概是真的，我就亲见他有一次上讲堂没有带领结。过了一星期，大约是星期六，他使助手来叫我了。到得研究室，见他坐在人骨和许多单独的头骨中间——他其时正在研究着头骨，后来有一篇论文在本校的杂志上发表出来。“我的讲义，你能抄下来吗？”他问。“可以抄一点。”“拿来我看！”我交出所抄的讲义去，他收下了，第二三天便还我，并且说，此后每一星期要送给他看一回。我拿下来打开看时，很吃了一惊，同时也感到一种不安和感激。原来我的讲义已经从头到末，都用红笔添改过了，不但增加了许多脱漏的地方，连文法的错误也都一一订正。这样一直继续到教完了他所担任的功课：骨学、血管学、神经学。可惜我那时太不用功，有时也很任性。还记得有一回藤野先生将我叫到他的研究室里去，翻出我那讲义上的一个图来，是下臂的血管，指着，向我和蔼地说道：“你看，你将这条血管移了一点位置了——自然，这样一移，的确比较好看些，然而解剖图不是美术，实物是那么样的，我们没法改换它。现在我给你改好了，以后你要全照着黑板上那样的画。”但是我还不服气，口头答应着，心里却想道：“图还是我画的不错；至于实在的情形，我心里自然记得的。”学年试验完毕之后，我便到东京玩了一夏天，秋初再回学校，成绩早已发表了，同学一百余人之中，我在中间，不过是没有落第。这回藤野先生所担任的功课，是解剖实习和局部解剖学。解剖实习了大概一星期，他又叫我去了，很高兴地，仍用了极有抑扬的声调对我说道：“我因为听说中国人是很敬重鬼的，所以很担心，怕你不肯解剖尸体。现在总算放心了，没有这回事。”但他也偶有使我很为难的时候。他听说中国的女人是裹脚的，但不知道详细，所以要问我怎么裹法，足骨变成怎样的畸形，还叹息道：“总要看一看才知道。究竟是怎么一回事呢？”有一天，本级的学生会干事到我寓里来了，要借我的讲义看。我检出来交给他们，却只翻检了一通，并没有带走。但他们一走，邮差就送到一封很厚的信，拆开看时，第一句是：“你改悔罢！”这是《新约》上的句子罢，但经托尔斯泰新近引用过的。其时正值日俄战争，托老先生便写了一封给俄国和日本的皇帝的信，开首便是这一句。日本报纸上很斥责他的不逊，爱国青年也愤然，然而暗地里却早受了他的影响了。其次的话，大略是说上年解剖学试验的题目，是藤野先生讲义上做了记号，我预先知道的，所以能有这样的成绩。末尾是匿名。我这才回忆到前几天的一件事。因为要开同级会，干事便在黑板上写广告，末一句是“请全数到会勿漏为要”，而且在“漏”字旁边加了一个圈。我当时虽然觉到圈得可笑，但是毫不介意，这回才悟出那字也在讥刺我了，犹言我得了教员漏泄出来的题目。我便将这事告知了藤野先生；有几个和我熟识的同学也很不平，一同去诘责干事托辞检查的无礼，并且要求他们将检查的结果发表出来。终于这流言消灭了，干事却又竭力运动，要收回那一封匿名信去。结末是我便将这托尔斯泰式的信退还了他们。中国是弱国，所以中国人当然是低能儿，分数在六十分以上，便不是自己的能力了：也无怪他们疑惑。但我接着便有参观枪毙中国人的命运了。第二年添教霉菌学，细菌的形状是全用电影来显示的，一段落已完而还没有到下课的时候，便影几片时事的片子，自然都是日本战胜俄国的情形。但偏有中国人夹在里边：给俄国人做侦探，被日本军捕获，要枪毙了，围着看的也是一群中国人；在讲堂里的还有一个我。“万岁！”他们都拍掌欢呼起来。这种欢呼，是每看一片都有的，但在我，这一声却特别听得刺耳。此后回到中国来，我看见那些闲看枪毙犯人的人们，他们也何尝不酒醉似的喝彩——呜呼，无法可想！但在那时那地，我的意见却变化了。到第二学年的终结，我便去寻藤野先生，告诉他我将不学医学，并且离开这仙台。他的脸色仿佛有些悲哀，似乎想说话，但竟没有说。“我想去学生物学，先生教给我的学问，也还有用的。”其实我并没有决意要学生物学，因为看得他有些凄然，便说了一个慰安他的谎话。“为医学而教的解剖学之类，怕于生物学也没有什么大帮助。”他叹息说。将走的前几天，他叫我到他家里去，交给我一张照相，后面写着两个字道“惜别”，还说希望将我的也送他。但我这时适值没有照相了；他便叮嘱我将来照了寄给他，并且时时通信告诉他此后的状况。我离开仙台之后，就多年没有照过相，又因为状况也无聊，说起来无非使他失望，便连信也怕敢写了。经过的年月一多，话更无从说起，所以虽然有时想写信，却又难以下笔，这样的一直到现在，竟没有寄过一封信和一张照片。从他那一面看起来，是一去之后，杳无消息了。但不知怎地，我总还时时记起他，在我所认为我师的之中，他是最使我感激，给我鼓励的一个。有时我常常想：他的对于我的热心的希望，不倦的教诲，小而言之，是为中国，就是希望中国有新的医学；大而言之，是为学术，就是希望新的医学传到中国去。他的性格，在我的眼里和心里是伟大的，虽然他的姓名并不为许多人所知道。他所改正的讲义，我曾经订成三厚本，收藏着的，将作为永久的纪念。不幸七年前迁居的时候，中途毁坏了一口书箱，失去半箱书，恰巧这讲义也遗失在内了。责成运送局去找寻，寂无回信。只有他的照相至今还挂在我北京寓居的东墙上，书桌对面。每当夜间疲倦，正想偷懒时，仰面在灯光中瞥见他黑瘦的面貌，似乎正要说出抑扬顿挫的话来，便使我忽又良心发现，而且增加勇气了，于是点上一支烟，再继续写些为“正人君子”之流所深恶痛疾的文字。【赏析】鲁迅笔下的“正人君子”，映射的正是藤野先生正直无私、坚持真理、热爱学生的人格魅力。在鲁迅的精神家园里，有藤野播下的种子。鲁迅就是时时受着藤野先生的鞭策，几十年过去了，仍不敢有丝毫懈怠，他坚韧地斗争着，为民族的觉醒和解放而奋斗。作者运用了多种多样的表现手法，来怀念藤野先生，歌颂了藤野先生的伟大品格，也表现了作者强烈的爱国主义思想。</p></body>
</html>网页实现效果展示：（点击图中锚点下方两处连接，可以直接跳转至想要看到的内容）
7、表格标签
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像;
（1）表格标签
标签:
表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption
标签合并:
行合并:rowspan
列合并:colspan
常用属性：
border：边框，设置边框宽度，有内外边框
bordercolor：设置边框颜色
cellspacing：内边框和外边框的距离，如果等于0就是两线重合，那么边框就是实线
align ：表格的排列方向：left、right、centerr
bgcolor： 表格背景颜色
width：表格宽度
height：表格高度，一般不建议设置高度
但是如果要设置表格中的文字信息的样式需要写在style里：
sytle="text-align:center ; color:blue"
表格标签实验案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body><table border="1px" align="left" bgcolor="#ffe4c4" width="500px" style="text-align:center;color: coral"><caption>综合成绩单</caption><!-- 创建表头 --><tr><th>姓名</th><th>年龄</th><th>综合分数</th></tr><!-- 先创建3行，再在每行里创建3列，也就是3个单元格 --><tr><td>张三</td><td>12</td><td>97</td></tr><tr><td>李四</td><td>12</td><td>96</td></tr><tr><td>晶晶</td><td>13</td><td>99</td></tr></table></body>
</html>网页显示效果如下：
（2）表格标签合并
简单实验实现如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签合并案例</title>
</head>
<body><h1>表格的行列合并 5行3列</h1>
<table border="1px" bordercolor="plum" bgcolor="#7cfc00" cellspacing="0" width="50%" align="left" style="text-align:center"> <!--solid实线 --><tr><td colspan="3">星期一菜单</td></tr><tr><td rowspan="2">素菜</td><td>清炒茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td> <!-- 在第一行已经合并过了，下面就不用写第一列了，剩下两列--><td>炒白菜</td></tr><tr><td rowspan="2">荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr><tr><td>红烧肉<img src="./img/hongshaorou.jpg" alt="红烧肉" width="80px" height="60px"></td><td>烤全羊</td></tr>
</table></body>
</html>网页实现效果：
（3）案例（实现课程表标签的设计）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>课程表标签设计</title>
</head>
<body><table border="1px" bordercolor="blue" bgcolor="#98fb98" style="align-content: center"><caption><b>课程表</b></caption><tr><td><b>项目</b></td><td colspan="5"><b>上课</b></td><td colspan="2"><b>休息</b></td></tr><tr><td><b>星期</b></td><td><b>星期一</b></td><td><b>星期二</b></td><td><b>星期三</b></td><td><b>星期四</b></td><td><b>星期五</b></td><td><b>星期六</b></td><td><b>星期日</b></td></tr><tr><td rowspan="4">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr><tr><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英语</td><td>计算机</td></tr><tr><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr><tr><td rowspan="2">下午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="2">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr>
</table></body>
</html>网页实现效果：
8、表单标签
类似下面这样的我们日常可见的界面都是属于表单标签
（1）form表单标签
常用属性：
- action：提交的目标地址(URL)
- method：提交方式：get(默认)和post
get方式：URL地址栏可见、 长度受限制、相对不安全.（如输入账号时使用）
post方式：URL地址不可见、 长度不受限制、相对安全.（如输入密码等隐私信息时使用）
action是将填入的信息提交到指定位置 ，一般我们在做的时候就提交到后台服务器了
（2）表单项标签
在 HTML 5 中，type 属性有很多新的值
实现如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单项标签</title>
</head>
<body><h1>用户登录</h1>
<hr>
<form action="success.html" method="get">用户名：<input type="text"><br>密码：<input type="password"><br><input type="submit" value="登录">网页实现效果：
可见并不是很美观，我们可以使用表格的形式让效果看起来更美观一点，
注意我们还指定了用户输入信息的name，这个很重要
这个name属性一定要写，即将用户传入的用户名和密码赋值给username和password变量
因为我们提交的信息提交到后台服务器他是一个字典，字典的key值就是这里的name，就实现了数据传递。
做优化后的结果如下：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title>
</head>
<body> <form action="success.html" method="get"> <table width="20%" align="center"> <tr> <td colspan="2" style="text-align:center">用户登录</td> </tr> <tr> <td style="text-align:right">用户名</td> <td><input type="text" name="username"></td> </tr> <tr> <td style="text-align:right">密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align:center"><input type="submit" value="登录"></td> </tr> </table>
</form> </body>
</html> 网页显示效果如下：
点击登录之后，便到了 如下界面：
我们再写一个success.html文件测试一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color:blue" >登录成功</h1></body>
</html>测试页面显示如下：
同时我们可以看到，因为使用的是method=get方式，所以在url地址栏中可以看到我们填入的信息
如果使用post方式就看不到了，所以一些重要隐私的信息，可以使用post方式，让它不要显示出来
再比如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1>
<hr>
<form action="success.html" method="get">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br>爱好：<input type="checkbox" name="hobby" value="0">编程<input type="checkbox" name="hobby" value="1">打篮球<input type="checkbox" name="hobby" value="2">阅读<br>性别：<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女<br>出生日期：<input type="date" name="birth"><br>个人简历：<input type="file" name="resume"><br><input type="submit" value="登录"><input type="reset" value="重置">
</form></body>
</html>页面显示效果：
登录时候的页面：
注意：多选框和单选框在使用的时候，因为提交到后台的信息是中文，就会很慢，所以我们可以指定value值，来代表每一个选项，可以看到在url地址栏中，显示的就是value值
《1》项目案例实践：（完成一个用户登录界面的设计）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table align="center" style="width:451px; height:239px; background-image:url('./img/mailphoto.jpg')"><tr><td width="40%" height="15%"></td><td colspan="2" style="text-align:center"><b>用户登录</b></td></tr><tr><td width="40%" height="15%"></td><td style="text-align:right" ><b>用户名</b></td><td><input type="text" name="username"></td></tr><tr><td width="40%" height="15%"></td><td style="text-align:right"><b>密码</b></td><td><input type="password" name="password"></td></tr><tr><td width="40%" height="15%"></td><td colspan="2" style="text-align:center"><input type="submit" value="登录"><input type="reset" value="重置"></td></tr><tr><td width="40%" height="15%"></td><td colspan="2" style="text-align:center"><a href="#">找回密码</a><a href="#">注册新用户</a></td></tr><tr></tr>
</table></body>
</html>案例页面展示效果如下：
（3）下拉列表标签
name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
（4）文本域标签
<textarea>...</textarea> 多行的文本输入区域
- name :定义名称,用于存储文本区域中的值。
- cols ：规定文本区内可见的列数。
- rows ：规定文本区内可见的行数。
- disabled： 是否禁用
- readonly： 只读
（5）按钮标签
<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。
如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1>
<hr>
<form action="success.html" method="get">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br>爱好：<input type="checkbox" name="hobby" value="0">编程<input type="checkbox" name="hobby" value="1">打篮球<input type="checkbox" name="hobby" value="2">阅读<br>性别：<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女<br>出生日期：<input type="date" name="birth"><br>城市:<select name="city"><option value="0">西安</option><option value="1">北京</option><option value="2">上海</option></select><br>个人简历:<br><textarea name="info" cols="50" rows="10" placeholder="个人简历填写"></textarea><br><input type="submit" value="登录"><input type="reset" value="重置"><br><button>按钮一</button>
</form></body>
</html>页面 展示：
9、html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架)，
- src属性来定义另一个html文件的引用地址
- frameborder属性定义边框,
- scrolling属性定义是否有滚动条,
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
可以将内嵌框架与a标签配合使用
a标签的target属性可以将链接的页面直接显示在当前页面的iframe中：
小实验如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="01_第一个HTML代码.html" target="myframe">页面一</a>
<a href="01_第一个HTML代码.html" target="myframe">页面二</a>
<a href="01_第一个HTML代码.html" target="myframe">页面三</a>
<iframe src="01_第一个HTML代码.html" frameborder="0" scrolling="no" name="myframe"></iframe></body>
</html>页面显示结果：（此处出现的“标题一”即就是内嵌的标签内容）
点击下面三个超链接，会在当前页面展示出链接到的内容。
最后，在这里说一个网站：（W3CSchool）
W3CSchool是一个专业的编程入门学习及技术文档查询网站，提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册，可以在该网站查询一些使用方法。
python进阶之web前端（01—HTML超文本标记语言）相关推荐
- Web前端之HTML超文本标记语言
文章目录 一.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 2)Web前端开发核心技术 (1)HTML语言(超文本标记语言,相当于一个整体的框架) (2)CSS(层叠样式表,用来 ...
- web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
- 带你了解前端之HTML超文本标记语言
文章目录 前端简介 超文本传输协议前戏 HTTP超文本传输协议 HTML简介 head内常见标签 body内常见标签 块儿级标签与行内标签 boby内基本符号 body内布局标签 body内常见标签 ...
- Web前端—01HTML超文本标记语言
文章目录 一.Wed前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML介绍 2.HTML基本结构 3.文档类型 4. ...
- python前端——HTML超文本标记语言、CSS层叠样式表
01.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术. ...
- 040_初识 web 前端 HTML 超文本标记语言
文章目录 1. web前端开发技术 2. HTML 页面结构 3. HTML 标签 3.1 文本标签 3.2 换行标签 3.3 列表标签 3.3 div 和 span 标签 3.4 图片标签 3.5 ...
- Web前端（一）HTML超文本标记语言
文章目录 一.Web前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HTML文 ...
- web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法 在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
- HTML教程，带你轻松掌握html超文本标记语言，web前端学习必备
有些初学web前端的小伙伴会比较迷惑,HTML到底是什么呢? 这里解释一下,HTML称为超文本标记语言,是一种标识性的语言. 它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Inte ...
最新文章
- 老码农绝密：使用 TS（TypeScript） 的 10 大理由
- 优秀领导者，离不开这6个品质
- Python基础教程（一）：简介、环境搭建、中文编码
- AlvinZH双掉坑里了
- JavaScript学习（三十四）—事件委托
- atheros无线网卡驱动_5.8G无线网桥CPE,安防监控拍档高清无干扰
- 32位64位Eclipse和jdk对应关系
- 精讲了33道二叉树经典题目之后，我总结了这些，帮你一举搞定二叉树
- python excel 教程推荐_python脚本实现数据导出excel格式的简单方法(推荐)
- 自制Flash电子相册
- 数独九宫格专家级解题思路
- 学籍管理系统设计 mysql_学生学籍管理系统数据库设计及查询.pdf
- panabit高级流控
- web前端---css基础
- 使用ultraEdit 进行字符串操作技巧
- 计算机音乐非酋,非酋在线试听_薛明媛_高音质歌曲_九酷音乐
- Ubuntu下安装Microsoft Teams
- 盘点世界七大新材料强国
- Cassandra基础及使用
- mathematica怎么用