HTML5 的课堂案例

最新推荐文章于 2021-06-08 17:34:59 发布

ChengMeng11

最新推荐文章于 2021-06-08 17:34:59 发布

阅读量1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/ChengMeng11/article/details/105007888

版权

这篇博客详细介绍了HTML5的各种特性，包括HTML的扩展、注释、文档类型、常用标签、超链接、锚链接、表格、表单、内嵌框架以及HTML5新增的结构、语义、表单和多媒体标签。每个部分都配有代码实例和案例分析，帮助读者深入理解并掌握HTML5的使用。

摘要由CSDN通过智能技术生成

1、HTML的扩展1

代码：

<html>
	<head>
		<title>第一个HTML文件</title>
		<meta charset="utf-8">
	</head>
	<body>
		welcome to html!
	</body>
</html>

案例：在这里插入图片描述

2、HTML 的扩展2

代码：

<html>
	<head>
		<title>第二个HTML页面</title>
		<meta charset = "gbk">
	</head>
	<body>
		welcome to html,html技术！
	</body>
</html>

案例：
在这里插入图片描述

3、HTML的扩展3

代码：

<html>
	<head>
		<title>第一个HTML文件</title>
		<meta charset="utf-8">
	</head>
	<body>
		welcome to html!
	</body>
</html>

案例：在这里插入图片描述

4、注释

代码：

<html>
	<head>
		<title>标签的组成</title>
		<meta charset="utf-8">
	</head>
	<body bgcolor="yellow" text="red">
		标签的组成
		<hr>

		HTML从入门到精通
		<hr>

		<h1>一级标题</h1>
		<hr>

		<h2>二级标题</h2>
		<hr>
		<h5>五级标题</h5>

		咪咪  <br>  佛佛

		<h1>哈哈</h1>呵呵
		<hr>

		<span>嘿嘿</span>吼吼
		
	</body>
</html>

案例：

在这里插入图片描述

5、文档类型

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 这是我们的第一个html的注释 -->
	html从入门到精通
	<hr>

	图书:&lt;&lt;HTML从入门到精通&gt;&gt;
	<hr>
	北京&nbsp;&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;&nbsp;&nbsp;广州
	<hr>
	在html中用&amp;lt;表示<小于号
	<hr>
	"HTML语言" 或者 &quot;HTML语言&quot;
	<hr>
	版权所有 &copy; 2000-2020 高教培训
	<hr>
	&reg;
	<hr>
	&times;关闭符号
	<hr>
	&amp；<br>
	&aMp; 实体字符名称是区分大小写，大小写敏感
</body>
</html>

案例：在这里插入图片描述

6、常用标签 1）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hello<br>html

	<p>
		HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
	</p>
	
	<p>
		超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
	</p>
	<hr>


	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h4>四级标题</h4>
	<h6>六级标题</h6>


</body>
</html>

案例：

在这里插入图片描述

7、常用标签 2）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<pre>
		HTML从入门到精通
		学员：张杰
	</pre>
	<hr>

	<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 XR,不要8888,不要1888,只要<span style="font-size:50px;color:red">98元</span>


</body>
</html>

案例：

在这里插入图片描述

8、常用标签 3）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="1" start="5">
		<li>吃鸡</li>
		<li>王者荣耀</li>
		<li>LOL</li>
		<li>WOW</li>
	</ol>
	<hr>

	<h3>可爱的学生们</h3>
	<ul type="disc">
		<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>

案例：

在这里插入图片描述

9、常用标签 4）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="#00FF00">
	<hr size="9px" color="yellow">
	<hr color="red" width="400px">
	<hr color="blue" width="50%" size="10">
	<div style="width:600px;height:300px;background:#cccccc">
		<hr color="red" width="50%" align="left">
	</div>
</body>
</html>

案例：

在这里插入图片描述

10、常用标签 5）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
	<hr>

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

	<img src="../img/mac.jpg" width="50%">
	<hr>

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

案例：

11、其他标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <i>to</i> HTML!
	<hr>
	welcome <em>to</em> HTML!
	<hr>
	welcome to <address>上海市南京东路</address>
	<hr>
	HTML从<b>入门</b>到精通!
	<br>
	HTML从<strong>入门</strong>到精通!
	<hr>
	原价：<del>188元</del>，优惠价，<span style="font-size:40px;color:red">98元</span>
	<br>
	主讲人:<ins>Hector</ins>
	<hr>
	水的分子表达式：H<sub>2</sub>O
	<br>
	2<sup>3</sup>8
	<hr>

	<bdo dir="rtl">welcome to html!