什么是HTML?
HTML 是用来描述网页的一种语言。是用来编写静态网页的，搭建整个网页的。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
第一个HTML
<head>
<!-- 设置整个网页的编码格式 -->
<meta charset="UTF-8">
<!-- 设置网页标题-->
<title>百度一下,你就知道</title>
</head>
<body text="#00FF00" bgcolor="silver" background="">
<h1>HTLLO WORLD --HTML</h1>
<br>
打开运行界面: windows+R
</body>
HTML基础
- HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>
- HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p> <p>这是另外一个段落。</p>
- HTML 链接是通过标签 <a> 来定义的。
<a href="https://www.runoob.com">这是一个链接</a>
- HTML 图像是通过标签 <img> 来定义的。
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
HTML元素
<p> 元素:
<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。
<body> 元素:
<body> <p>这是第一个段落。</p> </body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html> <body> <p>这是第一个段落。</p> </body> </html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
排版标签
<body>
<!--
换行
在HTML代码中,无论有多少个空格,浏览器解析后都认为只有一个空格
==>空格
-->
我是第1行</br>
我是第2行<br>
我是第3行<br>
我是第4行<br>
我是第5行<br>
我是第6行<br>
<p>
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
</p>
<hr width="50%" size="7" color="red" align="left">
<p>
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
</p>
</body>
文字标签
<body>
<font color="red" size="7" face="微软雅黑">我是文字1号</font>
<font color="blue">我是文字2号</font>
<h1>我是h1标签</h1><br>
<h2>我是h2标签</h2><br>
<h3>我是h3标签</h3><br>
<h4>我是h4标签</h4><br>
<h5>我是h5标签</h5><br>
<h6>我是h6标签</h6><br>
<b><font size="7" color="aquamarine">我是一个很强壮的字</font></b>
<strong><font size="7" color="aquamarine">我是一个很强壮的字</font></strong>
</body>
无序标签
<body>
<h1>最火音乐榜</h1>
<ul type="disc">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul>
<h1>最火音乐榜</h1>
<ul type="circle">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul>
<h1>最火音乐榜</h1>
<ul type="square">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul>
</body>
有序标签
<body>
<h1>中国票房排行榜</h1>
<ol type="1" start="5">
<li>战狼</li>
<li>哪吒</li>
<li>流浪地球</li>
<li>诛仙</li>
</ol>
</body>
图形标签
<body> <!-- 绝对路径: 安徽省合肥市高新区xxxxxxx 相对路径: 对面的班级 --> <img src="img/tp.jpg" width="300px" height="300px" border="10px" align="middle" alt="加载文件丢失" title="微软"/> 我是一张微软的图标,我很流弊的！！！！！！！！！ </body>
链接标签
<body>
<a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.nba.com">NBA一下</a><br>
<a href="http://www.qq.com">腾讯一下</a><br>
<a href="http://www.taobao.com">淘宝一下</a><br><br><br><br>
<a href="Demo01文字标签.html" target="_blank">Demo01</a>
</body>
表格标签
<body>
<!-- 新建一个3行5列的表格
消除单元格和单元格之间的间距
cellpadding="0px"
cellspacing="0px"
-->
<table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题1</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题1</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td colspan="3">2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题3</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr>
<tr>
<td>2-1</td>
<td rowspan="2">2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
自定义一个网站
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" style="500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:red;height:200px;100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 runoob.com</div> </div> </body> </html>
完整的HTML教程：https://www.runoob.com/html/html-tutorial.html