案例1
!DOCTYPE html>
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
欢迎学习HTML
</body>
</html>
案例2
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor = "yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>html,简介,观众:xxx</h1>
<hr>
<h2>二级标题</h2>
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
案例3
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--这是我们第一个html注释-->
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&lt;表示<小于号
<hr>
"HTML语言" 或者 "HTML语言&quop;
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&aMp; 实体字符名称是区分大小写,大小写就敏感
</body>
</html>
案例4
<!DOCTYPE html>
<html>
<body>
<title>html技术</title>
</body>
<body>
大家好,欢迎学习html网页技术!
</body>
</html>
案例5
<html>
<head>
<title>HTML,学习</title>
<meta charset = "utf-8">
</head>
<body>
welcome to html !
</body>
</html>
案例6
<!DOCTYPE html>
<html>
<head>
<title>学习HTML从入门到精通</title>
</head>
<body>
welcome to hello word!
</body>
</html>
案例7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doctype</title>
</head>
<body>
hello wolde
<br>
welcome to html!
<p>
超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
</p>
<p>
超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
</body>
</html>
案例8
<!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: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>
案例9
<!DOCTYPE html>
<html>
<<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<li>吃鸡</li>
<li>王者荣耀</li>
<li>LOL</li>
<li>WOW</li>
<hr>
<h3>可爱的同学</h3>
<ul type="circle">
<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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#ff0000">
<hr size="8px" color="green">
<hr color="red" width="400px">
<hr color="yellow" width="50%">
<div style="width: 600px;height: 300px;background: #cccccc">
<hr color ="red" width="50%" align="right">
</div>
</body>
</html>
案例11
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UFT-8" >
<title>docutype</title>
</head>
<body>
<img src="../image/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物,它的名字叫企鹅">
<hr>
<img src="../imagr/mac.jpg" width="400px" height="100px">
<hr>
<img src="../image/mac.jpg" width="50%">
<hr>
<div sytle="width=800px;height:800px;background:red;">
<img src="../image/mac.jpg" width="50%">
</div>
</body>
</html>
案例12
<!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 <address>to html!</address>
<hr>
从<b>入门</b>到精通
<br>
从<strong>入门</strong>到精通
<hr>
原价188,优惠价<span style="font-size: 40px;color: red">98</span>
<br>
主讲:<ins>hector</ins>
<hr>
水的分子表达式:H<sub>2</sub>O<sup>3</sup>
<hr>
<bdo dir="ltr rtl">jdgjglkajgj</bdo>
<bdo dir="ltr rtl">