html png显示不出来_HTML大整合（下）-优快云博客

案例4常用标签.html

DocumentHTML从入门到精通!
欢迎学习HTML技术

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， HTMLHTML(16)它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

`一级标题`

`二级标题`

`四级标题`

`六级标题`

<>欢迎学习HTML技术123456789101112131415161718192021222324252627282930313233343536

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw6CHVL1-1593240920356)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例4.png)]

案例5常用标签2.html

Document

导航部分

正文部分

版权部分

iphone XP 不要8888，也不要1888，只要98123456789101112131415

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqLIPRpW-1593240920357)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例5.png)]

案例6常用标签3.html

Document

`2020年网络游戏排行榜`

吃鸡王者农药LOLWOL

`亲爱的同学们`

冯乐赵宁木木丹丹

`术语的解释`

LOL它是由腾讯公司代理的一款网络游戏，中文称为叫英雄联盟它分为pc端和移动端HTML是一种用来制作网页的标记语言JAVA是一种跨平台的编程语言1234567891011121314151617181920212223242526272829303132333435363738

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZHuTwuN-1593240920359)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例6.png)]

案例7常用标签4.html

Document

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sI2hPAB-1593240920359)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例7.png)]

案例8常用标签5.html

Document

父容器body123456789101112131415161718192021

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yU93yyiJ-1593240920360)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例8.png)]

案例9其他标签.html

Documentwelcome toHTML! 
welcome toHTML! 
welcome to 上海市南京东路HTML从入门到精通！HTML从入门到精通！
原价：188元, 优惠价：98元主讲:hector
水的分子表达式:H₂0 
2³=81234567891011121314151617181920212223242526

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdmsP4or-1593240920362)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例9.png)]

案例10头部标签.html

头部标签<IT教育，计算机等级考试--Hrctor1234567891011121314151617181920212223242526272829303132333435

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445E4McR-1593240920362)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例10.png)]

案例11标签嵌套.html

Document

hello

worid

1234567891011121314151617181920

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoPZWeC1-1593240920363)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例11.png)]

案例12超链接.html

Document百度bcde1234567891011121314151617

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xsXKs86m-1593240920364)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例12.png)]

案例13锚点链接.html

Document

1 简介2 HTML版本3 特点4 编辑方式5 整体结构6 相关要求

简介

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。

HTML版本

HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。

HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01(微小改进)：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网(WWW)盛行的原因之一，其主要特点如下： [4] 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4] 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4] 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网(WWW)盛行的另一个原因。 [4] 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

编辑方式

HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7] 半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器(由Jon Skinner开发，Sublime Text2收费但可以无限期试用)。 [7] 所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA(出品单位：万维网联盟)；FRONTPAGE(出品单位：微软)；Dreamweaver(出品单位Adobe)。Microsoft Visual Studio(出品公司：微软)：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

整体结构

一个网页对应多个HTML文件，超文本标记语言文件以.htm(磁盘操作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现(部分标记除外例如： )，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10] 标记符，说明该文件是用超文本标记语言(本标签的中文全称)来描述的，它是文件的开头;而，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

相关要求

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9] 文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或 html(外语缩写为扩展名)，以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9] 超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符(标记指定除外)；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“ (注意此字母必须小写，方可空格)”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9] 标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ (注意此字母必须小写，方可空格)”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9] 标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9] HTML注释由"“结束结束，例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQwkft9w-1593240920364)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例13.png)]

案例14页面间的锚点链接.html

Document

简介HTML版本特点编辑方式整体结构相关要求123456789101112131415161718192021

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Z1Yrksq-1593240920366)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例14.png)]

案例15功能链接.html

Document点击此处下载图片
联系我们123456789101112

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSbm5qsd-1593240920366)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例15.png)]

案例01.表格.html

Document

hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello12345678910111213141516171819202122232425262728293031323334353637

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b7NrHKsq-1593240920367)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例01.png)]

案例02.合并单元格.html

Document

hello1hellohello2hello3hello4hello2hello3hello2123456789101112131415161718192021222324252627

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53fwwown-1593240920368)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例02.png)]

案例03.表格的高级标签.html

Document

`学生基本信息表`

<学号姓名年龄性别1001小明19男1002小花18女1003小张19男1004小狗19男合计412345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rbf0ftcZ-1593240920368)(C:甥敳獲lenovoDesktop新建文件夹静态网页2案例esult案例03.png)]

案例04.表单的基本用法.html

Document

`用户注册`

用户名：
密  码：
年  龄：
性别: 男女
爱好: 吃饭睡觉打豆豆头  像: 1234567891011121314151617181920212223242526272829303132333435

效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2qAPVMq-1593240920368)(C:甥敳獲lenovoDesktopprojectesult案例04-2.png)]

案例05.特殊表单元素.html

Document学  历：--请选择你的学历--大专本科研究生硕士
城  市：太原大同长治济南青岛日照南京苏州扬州
服务协议；请遵守本网站的相关协议和国家的法律法规...请遵守本网站的相关协议和国家的法律法规...请遵守本网站的相关协议和国家的法律法规...请遵守本网站的相关协议和国家的法律法规...请遵守本网站的相关协议和国家的法律法规...12345678910111213141516171819202122232425262728293031323334353637383940414243

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slxqIosF-1593240920370)(C:甥敳獲lenovoDesktopprojectesult案例05.png)]

案例06.其他表单元素.html

Document个人信息用户名邮  箱提交按钮重置按钮普通按钮院校信息学号：
学校：
专业：1234567891011121314151617181920212223242526272829303132333435

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hlv43r7m-1593240920371)(C:甥敳獲lenovoDesktopprojectesult案例06.png)]

案例07.内嵌框架.html

Document

`主体部分`


01.html02.html

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvKrpi8R-1593240920371)(C:甥敳獲lenovoDesktopprojectesult案例07.png)]

案例1>.html5新增.结构相关的标签.html

Document标题第一段第二段脚注广告

网页咨讯视频图片知道贴吧采购地图1234567891011121314151617181920212223242526272829303132333435363738

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AR5V99DS-1593240920373)(C:甥敳獲lenovoDesktopprojectesult案例01…png)]

案例02.>HTML5新增.语义相关.html

Documentwelcome to html!我在情人节有个会!HTML简介

HTML是一门用来制作网页的标签语言

HTML可以包含文本、图像、音频、视频等各种多媒体信息

12345678910111213141516171819202122232425262728293031323334353637383940

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcuZlH7Z-1593240920373)(C:甥敳獲lenovoDesktopprojectesult案例02.。.png)]

案例03>HTML5新增.表单相关.html

Document邮箱个人主页:电话：关键字:数字：出生日期：颜色：用户名:年龄：城市：北京上海深圳广州12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ul7yIjAz-1593240920374)(C:甥敳獲lenovoDesktopprojectesult案例03…png)]

案例04>HTML5新增.多媒体相关.html

Document您的浏览器不支持audio标签，请更换浏览器

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpMsaoe7-1593240920375)(C:甥敳獲lenovoDesktopprojectesult案例04…png)]


电话：
关键字:
数字：
出生日期：
颜色：
用户名:
年龄：
城市：北京上海深圳广州1234567891011121314151617181920212223242526272829303132333435363738394041

```

效果

[外链图片转存中…(img-ul7yIjAz-1593240920374)]

案例04>HTML5新增.多媒体相关.html

Document您的浏览器不支持audio标签，请更换浏览器

效果

[外链图片转存中…(img-vpMsaoe7-1593240920375)]

原文链接：https://blog.youkuaiyun.com/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出处：从优快云