html的工具简介（HTML大整合下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML从入门到精通!
<br> <!--换行-->
欢迎学习HTML技术
<hr>
<p>
超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准，
HTML
HTML(16)
它通过标记符号来标记要显示的网页中的各个部分网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等） 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果
</p>
<p>
简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便
</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
<hr>
<pre>
<<HTML从入门到精通>>
欢迎学习HTML技术
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536，我来为大家科普一下关于html的工具简介?以下内容希望对你有帮助!
html的工具简介
案例4常用标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML从入门到精通!
<br> <!--换行-->
欢迎学习HTML技术
<hr>
<p>
超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准，
HTML
HTML(16)
它通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果。
</p>
<p>
简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
<hr>
<pre>
<<HTML从入门到精通>>
欢迎学习HTML技术
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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">
<!-- 设置网站的跳转 -->
<!-- <meta http-equiv="refrest" content="2";url=
baidu -->
<title>头部标签</title>
<!-- 定义内部的CSS样式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS样式文件 -->
<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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例11.png)]
案例12超链接.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="baidu">百度</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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页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">联系我们</a>
</body>
</html>123456789101112
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例01.png)]
案例02.合并单元格.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>tb{hello$}*4)*4 -->
<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:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例02.png)]
案例03.表格的高级标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td*4)*6 -->
<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="%">合计</td>
<td colspan="3">4</td>
</tfoot>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夹\静态网页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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例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:\Users\lenovo\Desktop\project\result\案例03…png)]
案例04>HTML5新增.多媒体相关.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<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:\Users\lenovo\Desktop\project\result\案例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 src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<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)]
原文链接：blog.csdn/WanXuang/article/details/106982782?ops_request_misc=%7B%22request%5Fid%22%3A%22160513384519724835852804%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&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
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
