html案例_htmlx案例-CSDN博客

本文链接：https://blog.csdn.net/ho622/article/details/104985466

这篇博客详细介绍了HTML的基础知识，包括第一天的案例，如创建第一个HTML文件、标签组成、注释、常用标签等；第二天的案例，涉及表格、表单元素和内嵌框架；以及第三天的内容，讲解了HTML5新增的结构、语义、表单和多媒体相关标签。通过这些案例，读者可以全面了解并掌握HTML5的基本用法。

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

DAY1的案例

案例1 01.第一个HTML文件.html

<html>
	<head>
		<title>第一个HTML文件</title>
		<meta charset="utf-8">
	</head>
	<body>
		欢迎学习HTML
	</body>
</html>

案例2 02.标签的组成.html

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

		HTML从入门到精通
		<hr>

		<hr>html简介，主讲：刘晓勇</hr>
		<hr>

		<h2>二级标题</h2>

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

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

案例3 03.注释.html

<!DOCTYPE html>
<html>
<head>
	<meta charset ="utf-8">
	<title>Doucment</title>
</head>
<body>
	<!--这是我们的第一个HTML注释-->
	图书：&it;&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;实体字符名称是严格区分大小写，大小写敏感
</body>
</html>

案例4 04.hello.html

<html>
	<body>
		<title>html技术</title>
	</body>
	<body>
		大家好，欢迎学习html网页技术！
	</body>
</html>

案例5 05.word.html

<html>
	<head>
		<title>HTML，学习</title>
		<meta charset = "utf-8">
	</head>
	<body>
		welcome to  html ！
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4UJuZK1X-1584673418715)(.\image\day1\案例5.png)]$

案例6 06.hello word.html

<!DOCTYPE html>
<html>
<head>
	<title>学习HTML从入门到精通</title>
</head>
<body>
		welcome to hello word!
</body>
</html>

案例7 07.常用标签1.html

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

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

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

	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h6>六级标题</h6>

</body>
</html>

案例8 08.常用标签2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<pre>
		html从入门到精通
		主讲：hetor
	</pre>
	<hr>

	<div style="width:400px;height:100px;background:red">导航部分</div>
	<div style="width:400px;height:200px;background:blue">正文部分</div>
	<div style="width:400px;height:300px;background:green">版权部分</div>
	<hr>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JIxzgmJU-1584673418715)(.\image\day1\案例8.png)]$

案例9 09.常用标签3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="1" stsrt="3">
		<li>吃鸡</li>
		<li>王者农药</li>
		<li>lol</li>
		<li>wow</li>
	</ol>
	<hr>

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

案例10 10.常用标签4.HTML

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

案例11 11.常用标签5.HTML

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

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

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

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

</body>
</html>

案例12 12.其他标签1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcom <i>to</i> HTML!
	<hr>
	welcome <em>to </em>HTML!
	<hr>
	welcome to <adddress>中欧班列</adddress>	
	<hr>
	HTML从<b>入门</b>到精通！
	<br>
	HTML从<strong>入门</strong>到精通！
	<hr>
	原价：<del>188元</del>，优惠价，<span style="font-size: 40px;color=red" >98元</span>
	<br