HTML大整合（下）

发布日期：2023-08-14 19:50浏览次数：

本文摘要：案例4常用标签.html!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/title/headbodyHTML从入门到醒目!br !--换行--接待学习HTML技术hrp超级文本标志语言是尺度通用标志语言下的一个应用，也是一种规范，一种尺度， HTMLHTML(16)它通过标志符号来标志要显示的网页中的各个部门。

广东会

案例4常用标签.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>HTML从入门到醒目!<br> 接待学习HTML技术<hr><p>超级文本标志语言是尺度通用标志语言下的一个应用，也是一种规范，一种尺度， HTMLHTML(16)它通过标志符号来标志要显示的网页中的各个部门。网页文件自己是一种文本文件，通过在文本文件中添加标志符，可以告诉浏览器如何显示其中的内容（如：文字如那边理，画面如何摆设，图片如何显示等）。

浏览器按顺序阅读网页文件，然后凭据标志符解释和显示其标志的内容，对书写堕落的标志将不指出其错误，且不停止其解释执行历程，体例者只能通过显示效果来分析堕落原因和堕落部位。但需要注意的是，对于差别的浏览器，对同一标志符可能会有不完全相同的解释，因而可能会有差别的显示效果。</p><p>浅易性：超级文本标志语言版本升级接纳超集方式，从而越发灵活利便。

</p><h1>一级标题</h1><h2>二级标题</h2><h4>四级标题</h4><h6>六级标题</h6><hr><pre><<HTML从入门到醒目>>接待学习HTML技术</pre></body></html>123456789101112131415161718192021222324252627282930313233343536效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-yw6CHVL1-1593240920356)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例4.png)]案例5常用标签2.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div style="width:400px;height:100px;background:red">导航部门</div><div style="width:400px;height:500px;background:yellow">正文部门</div><div style="width:400px;height:100px;background:blue">版权部门</div><hr>iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98</span></body></html>123456789101112131415效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-qqLIPRpW-1593240920357)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例5.png)]案例6常用标签3.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><h3>2020年网络游戏排行榜</h3><ol type="a" start="3"><li>吃鸡</li><li>王者农药</li><li>LOL</li><li>WOL</li></ol><hr><h3>亲爱的同学们</h3><ul type="disc"><li>冯乐</li><li>赵宁</li><li>木木</li><li>丹丹</li></ul><hr><h3>术语的解释</h3><dl><dt>LOL</dt><dd>它是由腾讯公司署理的一款网络游戏，中文称为叫英雄同盟</dd><dd>它分为pc端和移动端</dd><dt>HTML</dt><dd>是一种用来制作网页的标志语言</dd><dt>JAVA</dt><dd>是一种跨平台的编程语言</dd></dl></body></html>1234567891011121314151617181920212223242526272829303132333435363738效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-CZHuTwuN-1593240920359)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例6.png)]案例7常用标签4.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><hr color="#FF7300" size="10px"><hr color="red"><hr color="blue" width="400"><hr color="#00FF00" width="50%"><div style="width:600px;height:300px;background:#FF7300"><hr color="red" width="50%" size="9px" align="right"></div></body></html>12345678910111213141516效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-7sI2hPAB-1593240920359)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例7.png)]案例8常用标签5.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><img src="google.png" alt="图片加载失败...."title="只是一个标志"><hr><div style="width:800px;height:800px;background:red"><img src="mac(1).jpg" alt=""width="50%"><div style="width:500px;height:500px;background:#CCCCCC"><img src="mac(1).jpg" alt=""width="50%"></div></div><img src="mac(1).jpg" alt=""width="50%"> 父容器body</body></html>123456789101112131415161718192021效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-yU93yyiJ-1593240920360)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例8.png)]案例9其他标签.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>welcome <i>to</i>HTML! <br>welcome <em>to</em>HTML! <br>welcome to <address>上海市南京东路</address><hr>HTML从<b>入门</b>到醒目！HTML从<strong>入门</strong>到醒目！<br>原价：<del>188元</del>, 优惠价：<span style="font-size:40px;color:#FF7300">98元</span><hr>主讲:<ins>hector</ins><br><hr>水的分子表达式:H<sub>2</sub>0 <br>2<sup>3</sup>=8<hr></body></html>1234567891011121314151617181920212223242526效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-XdmsP4or-1593240920362)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例9.png)]案例10头部标签.html<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><meta name="keywords"content="IT教育，JAVA开发，WEB前端，Aandroid开发，python"><meta name="descaription" content="做专业的IT教育....."><meta name="author" content="hector"><title>头部标签</title><style>body{color:red;}</style><link rel="stylesheet" href="CSS样式文件的路径"><<script>alert("接待登录")</script><base href="../image/"></head><body>IT教育，盘算机品级考试--Hrctor<img src="../image/google.png" alt=""><img src="../image/p1.jpg" alt=""></body></html>1234567891011121314151617181920212223242526272829303132333435效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-445E4McR-1593240920362)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例10.png)]案例11标签嵌套.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>alert("哈哈！ ");</script></head><body><div style="width:200px;height:200px;background:red"><p>hello</p></div><p style="width:300px;height:300px;background:green"><div style="width:200px;height:200px;background:blue">worid</div></body></html>1234567891011121314151617181920效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-IoPZWeC1-1593240920363)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例11.png)]案例12超链接.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><a href="http://www.baidu.com">百度</a><hr><a href="d:/b.html" target="_self">b</a><hr><a href="c.html" target="_blank">c</a><hr><a href="../d.html">d</a><hr><a href="../../e.html">e</a></body></html>1234567891011121314151617效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-xsXKs86m-1593240920364)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例12.png)]案例13锚点链接.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ol><li><a href="#first">1 简介</a></li><li><a href="#second">2 HTML版本</a></li><li><a href="#three">3 特点</a></li><li><a href="#four">4 编辑方式</a></li><li><a href="#five">5 整体结构</a></li><li><a href="#six">6 相关要求</a></li></ol><p><a name="first">简介</a> </p> <P> HTML的英文全称是 Hypertext Marked Language，即超文本标志语言。HTML是由Web的发现者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年建立的一种标志语言，它是尺度通用化标志语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于种种操作系统平台(如UNIX， Windows等)。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识此外信息，即现在所见到的网页。</p> <p> 自1990年以来，HTML就一直被用作WWW的信息表现语言，使用HTML语言形貌的文件需要通过WWW浏览器显示出效果。

HTML是一种建设网页文件的语言，通过标志式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件内里包罗了HTML指令代码，这些指令代码并不是一种法式语言，只是一种排版网页中资料显示位置的标志结构语言，易学易懂，很是简朴。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各田主机的文件链接超文本传输协议划定了浏览器在运行HTML文档时所遵循的规则和举行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和尺度。

</P> <p><a name="second">HTML版本</a></p> <p>HTML是用来标志Web信息如何展示以及其他特性的一种语法例则，它最初于1989年由GERN的Tim Berners-Lee发现。HTML基于更古老一些的语言SGML界说，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就获得各个Web浏览器厂商的支持。

</p> <p>HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程事情小组(IETF)事情草案公布。<br> ②HTML 2.0：1995年1 1月作为RFC 1866公布，于2000年6月公布之后被宣布已经由时。<br> ③HTML 3.2：1997年1月14日，W3C推荐尺度。

<br> ④HTML 4.0：1997年12月18日，W3C推荐尺度。<br> ⑤HTML 4.01（微小革新）：1999年12月24日，W3C推荐尺度。

<br> ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br> </p> <p><a name="three">特点</a></p> <p> 超级文本标志语言文档制作不是很庞大，但功效强大，支持差别数据花样的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4] 浅易性：超级文本标志语言版本升级接纳超集方式，从而越发灵活利便。[4] 可扩展性：超级文本标志语言的广泛应用带来了增强功效，增加标识符等要求，超级文本标志语言接纳子类元素的方式，为系统扩展带来保证。[4] 平台无关性：虽然小我私家盘算机大行其道，但使用MAC等其他机械的大有人在，超级文本标志语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

[4] 通用性：另外，HTML是网络的通用语言，一种简朴、通用的全置标志语言。它允许网页制作人建设文本与图片相联合的庞大页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

广东会

</p> <p><a name="four">编辑方式</a></p> <p> HTML其实是文本，它需要浏览器的解释，它的编辑器大要可以分为以下几种：基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，固然，如果你用WPS来编写，也可以。不外存盘时请使用.htm或.html作为扩展名，这样就利便浏览器认出直接解释执行了。[7] 半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。[7] 所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单元：万维网同盟）；FRONTPAGE（出品单元：微软）；Dreamweaver（出品单元Adobe）。

广东会

Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的体现更强。任何地方举行修改只需要刷新即可显示。缺点是生成的代码结构庞大，倒霉于大型网站的多人协作和精准定位等高级功效的实现。</p> <p><a name="five">整体结构</a></p> <p> 一个网页对应多个HTML文件，超文本标志语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。

可以使用任何能够生成TXT类型源文件的文本编辑器来发生超文本标志语言文件，只用修改文件后缀即可。尺度的超文本标志语言文件都具有一个基本的整体结构，标志一般都是成对泛起（部门标志除外例如：<br/>），即超文本标志语言文件的开头与末端标志和超文本标志语言的头部与实体两大部门。

有三个双标志符用于页面整体结构简直认。[10] 标志符<html>，说明该文件是用超文本标志语言（本标签的中文全称）来形貌的，它是文件的开头;而</html>，则表现该文件的末端，它们是超文本标志语言文件的开始标志和末端标志。</p> <p><a name="six">相关要求</a></p> <p> 在编辑超文本标志语言文件和使用有关标志符时有一些约定或默认的要求。

[9] 文本标志语言源法式的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或 html（外语缩写为扩展名），以便于操作系统或法式辨认，除自界说的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。[9] 超文本标志语言源法式为文本文件，其列宽可不受限制，即多个标志可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标志指定除外）；对文件中的空格通常也不按源法式中的效果显示。

完整的空格可使用特殊符号（实体符）“（注意此字母必须小写，方可空格）”表现非换行空格；表现文件路径时使用符号“/”分开，文件名及路径形貌可用双引号也可不用引号括起。[9] 标志符中的标志元素用尖括号括起来，带斜杠的元素表现该标志说明竣事；大多数标志符必须成对使用，以表现作用的起始和竣事；标志元素忽略巨细写，即其作用相同，但完整的空格可使用特殊符号“（注意此字母必须小写，方可空格）”；许多标志元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明序次不限，其间用空格分开即可；一个标志元素的内容可以写成多行。

[9] 标志符号，包罗尖括号、标志元素、属性项等必须使用半角的西文字符，而不能使用全角字符。[9] HTML注释由"“竣事竣事，例如。注释内容可插入文本中任何位置。任何标志若在其最前插入赞叹号，即被标识为注释，不予显示。

</p></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-nQwkft9w-1593240920364)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例13.png)]案例14页面间的锚点链接.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ol><li><a href="13.锚点链接.html#first" target="_blank">简介</a></li><li><a href="13.锚点链接.html#second" target="_blank">HTML版本</a></li><li><a href="13.锚点链接.html#three" target="_blank">特点</a></li><li><a href="13.锚点链接.html#four" target="_blank">编辑方式</a></li><li><a href="13.锚点链接.html#five" target="_blank">整体结构</a></li><li><a href="13.锚点链接.html#six" target="_blank">相关要求</a></li></body></html>123456789101112131415161718192021效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-4Z1Yrksq-1593240920366)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例14.png)]案例15功效链接.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><a href="../image/hh.gif">点击此处下载图片</a><br><a href="mailto:422133899@qq.com">联系我们</a></body></html>123456789101112效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-rSbm5qsd-1593240920366)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例15.png)]案例01.表格.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="2" width="400px" height="300px" align="center" bordercolor="red" bgcolor="#cccccc" backgroud="../..image/timg (1).jpg" cellspacing="0" cellpading="1"><tr alige="center" bgcolor="cyain"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr><tr align="right"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr><tr align="leign" valign="top"><td>hello</td><td align="right" bgcolor="blue">hello</td><td>hello</td><td>hello</td></tr><tr align="right" valign="bottom" background="../../image/hh.gif"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr></table></body></html>12345678910111213141516171819202122232425262728293031323334353637效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-b7NrHKsq-1593240920367)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例01.png)]案例02.合并单元格.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" width="500px" height="300px"><tr><td colspan="4" align="center">hello1</td></tr><tr><td rowspan="3">hello</td><td>hello2</td><td>hello3</td><td>hello4</td></tr><tr><td>hello2</td><td rowspan="2" colspan="2">hello3</td></tr><tr><td>hello2</td></tr></table></body></html>123456789101112131415161718192021222324252627效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-53fwwown-1593240920368)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例02.png)]案例03.表格的高级标签.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" width="500px" height="300px" align="center"><caption><h2>学生基本信息表</h2></caption><<thead bgcolor="cyan"><td>学号</td><td>姓名</td><td>年事</td><td>性别</td></thead><tbody align="center" bgcolor="yellow"><tr><td>1001</td><td>小明</td><td>19</td><td>男</td></tr><tr><td>1002</td><td>小花</td><td>18</td><td>女</td></tr><tr><td>1003</td><td>小张</td><td>19</td><td>男</td></tr><tr><td>1004</td><td>小狗</td><td>19</td><td>男</td></tr></tbody><tfoot bgcolor="#FF7300" align="center"><td width="%25">合计</td><td colspan="3">4</td></tfoot></table></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-rbf0ftcZ-1593240920368)(C:UserslenovoDesktop新建文件夹静态网页2案例result案例03.png)]案例04.表单的基本用法.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><h2>用户注册</h2><form action="" method="get" enctype="multipart/form-data">用户名：<input type="text" name="usname" maxlength="4" value="碧瑶" readonly="readonly"><br>密码：<input type="password" name="pwd" size="6"><br>年龄：<input type="text" name="age" value="18" disabled=""><br>性别: <input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female" checked>女<br>喜好: <input type="checkbox" name="hobby" value="eat" checked>用饭<input type="checkbox" name="hobby" value="sleep">睡觉<input type="checkbox" name="hobby" value="doudou">打豆豆<hr>头像: <input type="file" name="head" accept="image/jpg"><input type="hidden" name="usr_id" value="8888"><br><input type="submit" value="注册"><input type="reset" value="重置"><hr><input type="image" src="../../image/tijiao.gif"><input type="image" src="../../image/chongtian.gif"><hr><input type="button" value="普通按钮"></form></body></html>1234567891011121314151617181920212223242526272829303132333435效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-X2qAPVMq-1593240920368)(C:UserslenovoDesktopprojectresult案例04-2.png)]案例05.特殊表单元素.html<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>学历：<select name="degree"><option value="0">--请选择你的学历--</option><option value="dazhuan">大专</option><option value="benke" selected>本科</option><option value="yanjiusheng">研究生</option><option value="shuoshi">硕士</option></select><br>城市：<select name="city"><optgroup label="山西省>"<option value="taiyuan">太原</option><option value="datong">大同</option><option value="changzhi">长治</option></optgroup><optgroup label="山东省"><option value="jinan">济南</option><option value="qingdao">青岛</option><option value="rizhao">日照</option></optgroup><optgroup label="江苏省"><option value="nanjing">南京</option><option value="suzhou">苏州</option><option value="yangzhou">扬州</option></optgroup></select><br>服务协议；<textarea name="introduce" rows="10" cols="100" readonly>请遵守本网站的相关协议和国家的执法法例...请遵守本网站的相关协议和国家的执法法例...请遵守本网站的相关协议和国家的执法法例...请遵守本网站的相关协议和国家的执法法例...请遵守本网站的相关协议和国家的执法法例...</textarea></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-slxqIosF-1593240920370)(C:UserslenovoDesktopprojectresult案例05.png)]案例06.其他表单元素.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><fieldset><legend>小我私家信息</legend><label for="name">用户名</label><input type="text" name="ursname" id="name"><br><label for="email">邮箱</label><input type="text" name="email" id="email"><br></fieldset><hr><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><input type="image" src="../../image/tijiao.gif"><input type="button" value="普通按钮"><hr><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮</button><button><img src="../../image/tijiao.gif" alt=""></button><hr><fieldset><legend>院校信息</legend>学号：<input type="text" name="stuld"><br>学校：<input type="text" name="stuSchool"><br>专业：<input type="text" name="stuMajor"><br></fieldset></body></html>1234567891011121314151617181920212223242526272829303132333435效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-hlv43r7m-1593240920371)(C:UserslenovoDesktopprojectresult案例06.png)]案例07.内嵌框架.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><iframe src="top.html" width="100%" height="200px" frameborder="0" scrolling="auto"></iframe><h3>主体部门</h3><br><a href="01.表格.html" target="hello">01.html</a><a href="02.合并单元格.html" target="hello">02.html</a><br><iframe src="./foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe></body></html>1234567891011121314151617效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-BvKrpi8R-1593240920371)(C:UserslenovoDesktopprojectresult案例07.png)]案例1>.html5新增.结构相关的标签.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><article><header>标题</header><section>第一段</section><section>第二段</section><footer>脚注</footer></article><aside>广告</aside><figure><figcaption>log标识</figcaption><img src="../../image/facebook.png" alt=""><img src="../../image/google.png" alt=""></figure><nav><ul><li>网页</li><li>咨讯</li><li>视频</li><li>图片</li><li>知道</li><li>贴吧</li><li>采购</li><li>舆图</li></ul></nav></body></html>1234567891011121314151617181920212223242526272829303132333435363738效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-AR5V99DS-1593240920373)(C:UserslenovoDesktopprojectresult案例01…png)]案例02.>HTML5新增.语义相关.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>welcome <mark>to</mark> html!<hr>我在<time datetime="2020年2月14日">情人节</time>有个会!<hr><details><summary>HTML简介</summary><p>HTML是一门用来制作网页的标签语言</p><p>HTML可以包罗文本、图像、音频、视频等种种多媒体信息</p></details><meter max="100" min="1" value="30"></meter><hr><meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter><hr><meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter><meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter><meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter><hr><meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="65" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="40" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter><hr><meter max="100" min="1" value="15" high="60" low="20" optimum="35"></meter><meter max="100" min="1" value="70" high="60" low="20" optimum="35"></meter><meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter><hr><progress value="10" max="50"></progress></body></html>12345678910111213141516171819202122232425262728293031323334353637383940效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-PcuZlH7Z-1593240920373)(C:UserslenovoDesktopprojectresult案例02.。.png)]案例03>HTML5新增.表单相关.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><form action="" autocomplete="on" id="myform"><label for="email">邮箱</label><input type="email" name="email" id="email"><br><label for="home">小我私家主页:</label><input type="url" name="home" id="home"><br><label for="phone">电话：</label><input type="tel" name="phone" id="phone"><br><label for="keywords">关键字:</label><input type="search" name="keywords" id="keywords"><br><label for="num">数字：</label><input type="range" name="num" id="num" min="1" max="10" step="2"><br><label for="birthday">出生日期：</label><input type="datetime" name="birthday" id="birthday"><br><label for="color">颜色：</label><input type="color" name="color" id="color"><br><label for="name">用户名:</label><input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus=""><br><label for="age">年事：</label><input type="text" name="age id="age pattern="d{1,2}"><br><label for="city">都会：</label><input type="text" name+"city" id="city" list="citylist" autocomplete="off"><datalist id="citylist"><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option><option value="4">广州</option></datalist><hr><input type="submit" form="myform"></form></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-ul7yIjAz-1593240920374)(C:UserslenovoDesktopprojectresult案例03…png)]案例04>HTML5新增.多媒体相关.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><audio controls=""><source src="../../audio/earth.ogg"><source src="../../audio/water.mp3">您的浏览器不支持audio标签，请更换浏览器</audio><video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video></body></html>123456789101112131415161718效果[外链图片转存失败,源站可能有防盗链机制,建议将图片生存下来直接上传(img-vpMsaoe7-1593240920375)(C:UserslenovoDesktopprojectresult案例04…png)]<input type="url" name="home" id="home"><br><label for="phone">电话：</label><input type="tel" name="phone" id="phone"><br><label for="keywords">关键字:</label><input type="search" name="keywords" id="keywords"><br><label for="num">数字：</label><input type="range" name="num" id="num" min="1" max="10" step="2"><br><label for="birthday">出生日期：</label><input type="datetime" name="birthday" id="birthday"><br><label for="color">颜色：</label><input type="color" name="color" id="color"><br><label for="name">用户名:</label><input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus=""><br><label for="age">年事：</label><input type="text" name="age id="age pattern="d{1,2}"><br><label for="city">都会：</label><input type="text" name+"city" id="city" list="citylist" autocomplete="off"><datalist id="citylist"><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option><option value="4">广州</option></datalist><hr><input type="submit" form="myform"></form>1234567891011121314151617181920212223242526272829303132333435363738394041```效果[外链图片转存中…(img-ul7yIjAz-1593240920374)]案例04>HTML5新增.多媒体相关.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><audio controls=""><source src="../../audio/earth.ogg"><source src="../../audio/water.mp3">您的浏览器不支持audio标签，请更换浏览器</audio><video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video></body></html>123456789101112131415161718效果[外链图片转存中…(img-vpMsaoe7-1593240920375)]原文链接：https://blog.csdn.net/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出处：从CSDN。

本文关键词：广东会,HTML,大,整合,下,案例,常用,标签,.html,DOCTYPE

本文来源：广东会-www.shduhang.com

上一篇：社交电商是什么？？

下一篇：没有了