案例1 第一个HTML文件.html
<html >
<head>
<title>第一个HTML文件</title>
<meat charge="utf-8"
</head>
<body>
欢迎学习HTML
</body>
</html>
网页效果:
案例2 标签的组成.html
<!DOCTYPE html>
<html>
<head>
<title>论美食的碰撞</title>
<meta charset="utf-8">
</head>
<body bgcolor="pink" text="yellow">
<hr>
快乐肥宅水
<hr>
甜甜的松软的
<h2>颜值超高</h2>
<h1>云朵</h1>面包
<hr>
<span>火锅&</span>寿喜锅
</body>
</html>
网页效果:
案例3 注释.html
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--这是我们的第一个HTML注释-->
图书:<<云边有个小卖部>>
<hr>
景天 龙葵 重楼
<hr>
在HTML中用&lt;表示小于号
<hr>
"html语言"或者 "html语言"
<hr>
版权所有 ©最右
<hr>
®
×关闭字符
&aMp;实体字符名称严格区分大小写,即大小写敏感
</body>
</html>
网页效果:
案例4 hello.html
<html >
<head>
<title>你好,htlm</title>
<meat charge="GBK"
</head>
<body>
welcome to html !
</body>
</html>
网页效果:
网页效果:
案例5 常用标签1.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata <meta charset="utf-8">
<title>Document</title>
</head>
<body>
hello world
<br>
welcome to html!
<hr>
<p>
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
</p>
<p>
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
</p>
</body>
</html>
<hr>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
网页效果:
案例6 常用标签2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
HTML从入门到精通
主讲:hector
</pre>
<hr>
<div style="width: 400px;height: 100px;background: pink">棉花糖</div>
<div style="width: 400px;height: 500px;background: yellow">肥宅快乐兽</div>
<div style="width: 400px;height: 100px;background: blue">hahaha</div>
hahaha, 不要888,不要666,只要<span style="font-size: 55px;color: red">99元</span>
</body>
</html>
网页效果:
案例7 常用标签3.html
<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>
<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>
网页效果:
案例8 常用标签4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="pink";size=8px>
<hr color="gree" width="400px">
<hr color="pink" width="50%" size=10>
<div style="width:600px;height: 300px;background:#CCCCCC">
<hr color="wathet red" width="50%" align="left" size="10px">
</div>
</body>
</html>
网页效果:
案例9 常用标签5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<base href="../img/">
<body>
<img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物,它的名字叫企鹅" >
<hr>
<img src="mac.jpg" width="400px">
<hr>
<img src="mac.jpg" width="50%">
<hr>
<div style="width:800px;hight:800px;background: red;">
<img src="mac.jpg" width="50%">
</div>
</body>
</html>
网页效果:
案例10 其他标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hahaha<i>kkk</i>i>lll!
<br>
hahaha<em>kkk</em>em>lll!
<hr>
welcome to<address>上海南京东路</address>
<hr>
HTML从<b>入门</b>到精通!
<hr>
HTML从 <strong>入门</strong>到精通!