HTML实例
0.欢迎进入HTML
<html>
<head>
<title>HTML学习</title>
</head>
<body>
welcome to html!
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9EOE04Nq-1582636674586)(C:\Users\DELL\AppData\Local\Temp\WeChat Files\b1554bdf63fb4333c8dd9d81438190b.png)]
#####1.HTML入门
<html>
<head>
<title>你好，HTML</title>
<meta charset ="utf-8">
</head>
<body>
welcome to html!
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdQ353Qf-1582636674589)(C:\Users\DELL\AppData\Local\Temp\1582597788388.png)]
2.标签的组成
<html>
<head>
<title>标签的组成</title>
<meta charset ="UTF-8">
</head>
<<body bgcolor ="red" text="blue">
标签的组成
<hr>
html从入门到精通
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标签</h2>
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
实例应用：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j8ISC5B4-1582636674589)(C:\Users\DELL\AppData\Local\Temp\1582596351527.png)]
3.注释
<html lang ="en">
<head>
<meta charset ="UTF-8">
<title>Document</title>
</head>
<body>
<!--第一个注释-->
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFOgYJgo-1582636674589)(C:\Users\DELL\AppData\Local\Temp\1582598102839.png)]
4.实体标签的符号
<html lang ="en">
<head>
<meta charset ="UTF-8">
<title>Document</title>
</head>
<body>
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&<表示<小于号
<hr>
"html语言"或者 "html语言"
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&实体字符名称是区分大小写,大小写敏感
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iQeuCK87-1582636674590)(C:\Users\DELL\AppData\Local\Temp\1582596494976.png)]
5.常用标签（1）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello html
hello world
<br>
welcome to html
<p>
在HTML文档的第一行，使用 声明html文档的类型用来告诉浏览器页面的HTML文档类型，简单来说，用来指定使用的html版本规范
</p>
<hr>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vg85DjLk-1582636674590)(C:\Users\DELL\AppData\Local\Temp\1582596658298.png)]
6.常用标签（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:300px;background:yellow">正文部分</div>
<div style ="width:400px;height:100px;background:gray">版权部分</div>
<hr>
手机不要8888,不要7777，只要<span style ="font-size:50px;color:red">6666</span>
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VgsvnDoZ-1582636674592)(C:\Users\DELL\AppData\Local\Temp\1582596807673.png)]
7.常用标签（3）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type ="①" start=5>
<li>王者荣耀</li>
<li>吃鸡</li>
<li>LOL</li>
<li>wow</li>
</ol>
<hr>
<h3>可爱的同学们</h3>
<ul type ="circle">
<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>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzFAQHXh-1582636674592)(C:\Users\DELL\AppData\Local\Temp\1582596901293.png)]
8.常用标签（4）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="gray">
<hr size ="8px" color="red">
<hr color ="yellow" width="400px">
<hr color ="black" width ="50%" size="10">
<div style ="width:500px;height:300px;background:#cccccc">
<hr color ="red" width="50%" align="center">
</div>
</body>
</html>
实例展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ai3p4EbW-1582636674592)(C:\Users\DELL\AppData\Local\Temp\1582596989797.png)]
实例展示：
[外链图片转存中…(img-ai3p4EbW-1582636674592)]
