html全部实例

1.欢迎来到html

<meta charset="UTF-8">

<title>HTML学习</title>

  welcome to html!

![在这里插入图片描述](https://img-blog.csdnimg/20200322123310612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 2.你好，html 你好，HTML welcome to html! ![在这里插入图片描述](https://img-blog.csdnimg/2020032212344869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 3.标签的组成标签的组成 < 标签的组成

  html从入门到精通
  <hr>

  <h1>第一课</h1>
  <hr>

  <h2>二级标签</h2>
  
  
  <h1>哈哈</h1>呵呵
  <hr>
  
  <span>嘿嘿</span>吼吼
</body>

![在这里插入图片描述](https://img-blog.csdnimg/20200322123646114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 4.注释

	<meta charset ="UTF-8">

	<title>Document</title>

</head>

<body>

	<!--第一个注释-->

</body>

5.实体标签的字符

Document 图书：<<HTML从入口到精通>>

北京上海广州

在html中用<表示<小于号

"HTML语言"或者 "HTML语言 "

       &reg;
       &time;关闭符合
       &aMp;实体字符名称严格区分大小写，即大小写敏感

![在这里插入图片描述](https://img-blog.csdnimg/20200322123757200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 6.常用标签1 hello world
welcome to html！

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

<p>
	超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>四级标题</h3>
<h6>六级标题</h6>

![在这里插入图片描述](https://img-blog.csdnimg/20200322123948399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 7.常用标签2 Document

		HTML从入门到精通
		主讲：hector

<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>

iphone XR,不要8888，不要1888，只要<span style="font-size: 50px;color: red">98元</span>

![在这里插入图片描述](https://img-blog.csdnimg/20200322124103823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 8.常用标签3 Document

2020年网络游戏排行榜

吃鸡
王者农药
LOL
WOW

可爱的同学们

张三
李四
小五
小六

<h3>术语的解释</h3>
<dl>
	<dt>LOL</dt>
	<dd>它是腾讯公司代理的一款游戏，中文名称叫英雄联盟</dd>
	<dd>可以分为PC端和移动端</dd>
	<dt>HTML</dt>
	<dd>是一种用来制作网页的标记语言</dd>
	<dt>JAVA</dt>
	<dd>是一种跨平台编程语言</dd>
</dl>

![在这里插入图片描述](https://img-blog.csdnimg/20200322124316800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 9.常用标签4 Document

![在这里插入图片描述](https://img-blog.csdnimg/20200322124645153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 10.常用标签5 Document

<img src="../image/mac.jpg" width="400px" height="100px">
<hr>

<img src="../image/mac.jpg" width="50%">
<hr>
<div style="width: 800px;height: 800px;background:red;">
	<img src="../image/mac.jpg" width="50%">
</div>

![在这里插入图片描述](https://img-blog.csdnimg/20200322124804978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 11.常用标签6 Document welcome to HTML!

welcome to HTML!

welcome to 上海市南京东路

HTML从入门到精通！

原价： ~~188元~~，优惠价， 98元
主讲： wwwww

水分子的表达式：H 20
2 3=8

<bdo dir="rtl">welcome to html!</bdo>
<br>
<bdo dir="rtl">上海自来水来自海上</bdo>
<hr>

<abbr title="Hyper Markup Language">HTML</abbr>
<br>
<span title="Hyper Markup Language">HTML</span>
<hr>

HTML从<small>入门到精通</small><br>
HTML从<big>入门到精通</big>

12.头部标签

<title>Document</title>
<!-- 定义内部的CSS样式 -->
<style>
	body{
		color:red;
	}
	
</style>
<!-- 引用外部的CSS样式 -->
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本 -->

<!-- 定义基础路径 -->
<base href="../image/">

IT教育，全国计算机等级考试

![在这里插入图片描述](https://img-blog.csdnimg/20200322125027507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 13.标签嵌套 Document

hello

	</div>
</p>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125101955.png) ![在这里插入图片描述](https://img-blog.csdnimg/20200322125117490.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 14.超链接 Document 百度
百度

b.html

c.html
d ![在这里插入图片描述](https://img-blog.csdnimg/20200322125206847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 15.锚链接 Document

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

简介

<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><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] 
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“&nbsp（注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9] 
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“&nbsp（注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9] 
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9] 
HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
</p>

</body>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125327540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 16.页面间的锚链接 Document

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

![在这里插入图片描述](https://img-blog.csdnimg/2020032212535969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 17.功能链接 Document 点击此处下载链接

<a href="mailto:439988614@qq">联系我们</a>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125442202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 18.表格

<meta charset="UTF-8">

<title>Document</title>

<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../image/bg.gif" cellspacing="0" cellpadding="0px" >

	<tr align="right" valign="top">

		<td>hello</td>

		<td>hello</td>

		<td>hello</td>

		<td>hello</td>

	</tr>

	<tr align="center" valign="middle" bgcolor="blue">

		<td>hello</td>

		<td bgcolor="yellow" valign="bottom">hello</td>

		<td>hello</td>

		<td>hello</td>

	</tr>

	<tr valign="bottom" background="../../image/qq.jpg">

		<td>hello</td>

		<td>hello</td>

		<td>hello</td>

		<td>hello</td>

	</tr>

</table>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125517676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 19.合并单元格

<meta charset="UTF-8">

<title>Document</title>

<!-- table>(tr>td{hello$}*4)*4 -->

<table border="1" width="500px" height="300px">

<tr>

	<td colspan="4" align="center">hello</td>

</tr>

	<tr>

		<td rowspan="3">hello1</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>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125549333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 20.表格的高级标签 Document

<caption><h2>基本信息表</h2></caption>

<thead>

   <th>学号</th>

   <th>姓名</th>

   <th>年龄</th>

   <th>性别</th>

</thead>

<tbody bgcolor="cyan" align="left">

<tr>

   <td>1101</td>

   <td>王五</td>

   <td>19</td>

   <td>男</td>

</tr>

<tr>

   <td>1102</td>

   <td>李四</td>

   <td>19</td>

   <td>男</td>

</tr>

<tr>

    <td>1103</td>

    <td>张三</td>

    <td>20</td>

    <td>男</td>

</tr>

<tr>

    <td>1104</td>

    <td>马六</td>

    <td>20</td>

    <td>男</td>

</tr>

</tbody>

<tr>

   <td width="40%">总计人数</td>

   <td colspan="3">4</td>

</tr>

</table>

![在这里插入图片描述](https://img-blog.csdnimg/20200322125627288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 21.表格的基本用法

<meta charset="UTF-8">

<title>Document</title>

<h2>用户注册</h2>

<form action="" method="get" enctype="application/x-www-form-urlencoded">

	用户名：<input type="text" name="user_name" value="无名氏" >

	<br>

	密码：<input type="text" name="pwd" size="20" maxlength="6">

	<br>

	年龄：<input type="text" name="age" disabled>

	<br>

	<input type="submit" value="确认">

</form>

![在这里插入图片描述](https://img-blog.csdnimg/20200322130503666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 22.表单的基本用法2

<meta charset="UTF-8">

<title>Document</title>

<h2>用户注册</h2>

<form action="" method="get" enctype="application/x-www-form-urlencoded">

	用户名：<input type="text" name="user_name" value="无名氏" >

	<br>

	密码：<input type="text" name="pwd" size="20" maxlength="6">

	<br>

	年龄：<input type="text" name="age" >

	<br>

	性  别：<input type="radio" name="sex" value="male">

			

			<input type="radio" name="sex" value="remale" checked>

			

	<br>

	爱  好：

			<input type="checkbox" name="hobby" value="eat">吃饭			

			<input type="checkbox" name="hobby" value="sleep">睡觉			

			<input type="checkbox" name="hobby" value="doudou">打豆豆	

	<br>

	头  像：

			<input type="file" name="head" accept="image/jpeg">

			<input type="hidden" name="usr_id" value="9528">		

	<hr>

	<input type="submit" value="注  册">

	<input type="reset" value="重  置">

	<hr>

	<input type="image" src="../../image/submit.gif">			

	<input type="image" src="../../image/reset.gif">	

	<hr>

	<input type="button" value="普通按钮">		

</form>

![在这里插入图片描述](https://img-blog.csdnimg/20200322130559848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 23.特殊的表单元素

<meta charset="UTF-8">

<title>Document</title>

<form action="">

	学历：

	<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>
城市：
<select name="city" >
<optgroup lable="山西省">
	<option value="taiyuan">太原</option>
	<option value="datong">大同</option>
</optgroup>
<optgroup lable="山东省">
	<option value="qingdao">青岛</option>
	<option value="jinan">济南</option>
</optgroup>	
<optgroup lable="江苏省">
	<option value="nanjing">南京</option>
	<option value="yangzhou">扬州</option>
</optgroup>		
</select>
<br>
个人简介：
<textarea name="intrduce" rows="10" cols="20" endonly>
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
	请遵守本网站的相关协议和国家的法律法规
</textarea>
<hr>
<input type="submit">

![在这里插入图片描述](https://img-blog.csdnimg/20200322130846255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 24.其他表单元素

<meta charset="UTF-8">

<title>Document</title>

<legend>个人信息</legend>

<lable for="">用户名：</lable>

<input type="text" name="usrname" id="name">

<br>

<lable for="">邮箱：</lable>

<input type="text" name="email" id="email">

<hr>

<input type="submit" value="提交按钮">

<input type="reset" value="重置按钮">	

<input type="image" src="../../image/submit.gif">	

<input type="button" value="普通按钮">

<hr>

<button type="submit">提交按钮</button>	
<button type="reset">重置按钮</button>	
<button type="button">普通按钮</button>	
<button><img src="../../image/submit.gif" alt=""></button>

<legend>院校信息</legend>

学号：<input type="text" name="stuID"><br>

学校：<input type="text" name="stuSchool"><br>

专业：<input type="text" name="stuMajor"><br>

![在这里插入图片描述](https://img-blog.csdnimg/20200322131019682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 25.内嵌框架

<meta charset="UTF-8">

<title>Document</title>

<iframe src="top.html" width="100%" height="250" frameborder="0" scrolling=""></iframe>

<h3>主体部分</h3>

<hr>

<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>

(1) top.html

<meta charset="UTF-8">

<title>Document</title>

<ul>

	<li>网页</li>

	<li>咨询</li>

	<li>视频</li>

	<li>图片</li>

	<li>知道</li>

	<li>贴吧</li>

</ul>

(2) foot.html

<meta charset="UTF-8">

<title>Document</title>

<p>底部和版权</p>

![在这里插入图片描述](https://img-blog.csdnimg/20200322131400185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 26.HTML5新增结构相关标签

<meta charset="UTF-8">

<title>Document</title>

<article>

	<header>标题</header>

	<section>

		第一段

	</section>

	<section>

		第二段

	</section>

	<footer>脚注</footer>

</article>

<aside>广告</aside>
<br>

<figure>
	<figcaption>log标识</figcaption>
	<img src="../../image/google.png" alt="">
	<img src="../../image/facebook.png" alt="">
</figure>

<nav>
		<ul>
	<li>网页</li>
	<li>咨询</li>
	<li>视频</li>
	<li>图片</li>
	<li>知道</li>
	<li>贴吧</li>
</ul>
</nav>

![在这里插入图片描述](https://img-blog.csdnimg/20200322131540523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 27.HTML5新增语义相关标签

<meta charset="UTF-8">

<title>Document</title>

welcome <mark>to</mark> html!

<hr>

我在<time datetime="2020年3月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="30" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1"  value="5" high="60" low="20" optimum="10"></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>
<hr>
<meter max="100" min="1"  value="30" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1"  value="15" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1"  value="15" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1"  value="10" high="60" low="20" optimum="15"></meter><meter max="100" min="1"  value="30" high="60" low="20" optimum="15"></meter><meter max="100" min="1"  value="90" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1"  value="40" high="60" low="20" optimum="65"></meter><meter max="100" min="1"  value="10" high="60" low="20" optimum="65"></meter><meter max="100" min="1"  value="90" high="60" low="20" optimum="65"></meter>
<hr>

<progress value="20" max="50"></progress>

![在这里插入图片描述](https://img-blog.csdnimg/20200322131724818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 28.HTML5新增表单相关

<meta charset="UTF-8">

<title>Document</title>

<form action="" autocomplete="on" id="myform">

<label for="email">邮箱</label>

<input type="text" 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="keyword">关键字</label>
<input type="search" name="keyword" id="keyword">
<br>
<label for="num">数字</label>
<input type="number" name="num" id="num" min="2" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="month" name="birthday" id="birthday">
<br>
<label for="color">颜色:</label>
<input type="color" name="color" id="color">
<br>
<label for="username">用户名:</label>
<input type="text" name="name" id="username" placeholder="请输入用户名" required="" autocomplete="off" 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="ciity">
<datalist id="citylist">
	<option value="beijing">北京</option>
	<option value="nanjing">南京</option>
	<option value="shanghai">上海</option>
	<option value="tianjin">天津</option>
</datalist>

</form>
<hr>
<input type="submit" form="myform">

![在这里插入图片描述](https://img-blog.csdnimg/20200322131830978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 29.HTML5新增多媒体相关

<meta charset="UTF-8">

<title>Document</title>

<!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> -->

<audio>

	<source src="../../audio/earth.ogg">

	<source src="../../audio/water.mp3">

	您的浏览器不支持！

</audio>



<video src="../../video/volcano.mp4" controls width="600px" poster="../../image/p1.jpg"></video>

![在这里插入图片描述](https://img-blog.csdnimg/20200322131924110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70)

更多推荐

html全部实例