案例
1
<html>
<head>
<title>HTML学习</title>
</head>
<body>
欢迎学习HTML网页技术!
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAYL0S4m-1582943741554)(C:\Users\lenovo\AppData\Local\Temp\1582616605020.png)]
2
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<pre>
主讲11
</pre>
<hr>
<div style="width: 400px;height: 100px;background: red">
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xl2cZaBf-1582943741555)(C:\Users\lenovo\AppData\Local\Temp\1582620722980.png)]
3
<html>
<head>
<title>标签的组成</title>
<meta charset = "utf-8">
</head>
<body bgcolor = "yellow" text="blue">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>html简介，主讲:刘晓勇</h1>
<h2>二级标</h2>
<h1>哈哈</h1> 呵呵
<hr>
<span>嘿嘿</span>哄哄
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ODYgdFw-1582943741556)(C:\Users\lenovo\AppData\Local\Temp\1582616454693.png)]
4
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<!--注释-->
图书：<<HTML不精通<<
<hr>
上海 北京 广西
<hr>
在HTML中庸&lt;表示<小于号
<hr>
"HTML"或者 "HTML"
<hr>
版权所有者$copy; 2000-2020高职
<hr>
®
<hr>
×关闭
<hr>
&实体区分大小写
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bx6WO1IT-1582943741556)(C:\Users\lenovo\AppData\Local\Temp\1582616514230.png)]
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<pre>
从入门到精通
学习
</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 不要9999也不要999只要<span style="font-size: 50px;color: red">99</span>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NY46fGAh-1582943741556)(C:\Users\lenovo\AppData\Local\Temp\1582620477701.png)]
6
<html lang="en">
<head>
<<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
<br>
welcome to html
<p>
HTML称为超文本标记语言，是一种标识性的语言。它包括系 列标签， 通过这 些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p >
<p>
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
</p >
<hr>
<h1>-级标题</h1>
<h2>二级标题</h2>
<h3>四级标题</h3>
<h6>六级标题</h6>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tuvACcQ-1582943741556)(C:\Users\lenovo\AppData\Local\Temp\1582615848900.png)]7
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#FF7300">
<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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MD6zVaNH-1582943741557)(C:\Users\lenovo\AppData\Local\Temp\1582616006792.png)]8
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络排行榜</h3>
<ol type="a" start=5>
<li>lol</li>
<li>王者</li>
<li>吃鸡</li>
</ol>
<hr>
<h3>可爱的</h3>
<ul type="circle">
<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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVVf9O3K-1582943741557)(C:\Users\lenovo\AppData\Local\Temp\1582616159191.png)]
9
<!DOCTYPE html>
<html lang="en">
<head>
<title></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</bdo>
<br>
<bdo dir="rtl">上海自来水</bdo>
<hr>
<abbr title="Hyper Text Language">HTML</abbr>
<hr>
<span title="Hyper Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rT8HquXt-1582943741558)(C:\Users\lenovo\Desktop\2020-02-28 14_24_15-.png)]10
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置字符编码-->
<meta charset="utf-8">
<!--设置网页关键字 SEO网站优化-->
<meta name="keywords" content="IT教育，JAVA开发">
<!--设置网页描述-->
<meta name="description" content="做专业的教育">
<!--设置网站作者-->
<meta name="author" content="Hector">
<!--设置网站跳转-->
<!--<meta http-equiv="refresh" content="0;url=https://www.baidu.com">-->
<title>Document</title>
<!--定义内部 css样式-->
<style>
body{
color:red;
}
</style>
<!--引用外部css样式-->
<link rel="stylesheet" href="css文件路径">
<!--定义活引用脚本-->
<!--<script>
alert(哈哈)；
</script>-->
<!--定义基础路径-->
<base href="../image/">
</head>
<body>
IT教育，全国计算机考试
<img src="../image/heihei.gif" alt="">
<hr>
<img src="../image/qq.jpg" alt="">
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WztztRGq-1582943741559)(C:\Users\lenovo\Desktop\2020-02-28 14_40_29-Document - 2345加速浏览器 10.5.png)]11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<img src="../qq.jpg" alt="图片加载失败" title="吉祥物">
<hr>
<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;">
</div>
</body>
</html>
<img src="../qq.jpg" alt="图片加载失败" title="吉祥物">
<hr>
<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;">
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0xXSeKi-1582943741559)(C:\Users\lenovo\Desktop\2020-02-28 15_32_23-Document - 2345加速浏览器 10.5.png)]
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
