html（结构）+css（表现）+js（行为），组成了前端页面。简单举个例子，如果把页面比作一间房子，那么html就是这个房子的结构，这个房子有几间卧室，哪里是客厅，哪里是厨房，这些都是由html决定的。css就是这个房子的装修，卧室铺什么样的地板，刷什么样的墙壁，客厅怎么装，厨房怎么装，这些是由css完成的。js就是这个房子里的家具，卧室里放了一张床，给与这个卧室睡觉的功能，厨房里放了灶台，给与了厨房做饭的功能。
html的结构
html的结构主要有6种标签组成：
1.!DOCTYPE
文档类型声明标签，一般写在第一行，用来告诉浏览器当前网页的版本。
2.meta
设置一些网页的元数据，页面上是看不到meta标签的。name属性指定为keywords和description可以设置关键词和网站描述，方便搜索引擎搜索到网站。
3.html
页面的根标签，大部分标签都包含在html标签内。
4.head
头标签，一般用来设置页面的标签都包含在head标签内，主要包含meta标签和title标签。
5.title
标题标签，设置页面的标题。
5.title
- body：显示在浏览器中的内容都写在body标签内。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="网站描述">
<title>这是标题</title>
</head>
<body>
</body>
</html>
2. html常用标签
- h1-h6 标题标签，一般用来显示页面内容的标题，分别对应1-6级标题。
- p 段落标签，内部文字自成一个自然段。
- br 换行标签，将文字另换一行。
- span 空标签，没有任何的视觉效果，一般用来更改段内文字的样式。
- strong 文字加粗标签
- em 文字倾斜标签
- del 文字增加删除线标签
- ins 文字增加下划线
- sup 文字上标
- sub文字下标
- a 超链接，可以跳转到外部网站
- table 表格标签，内部包含tr行标签、th表头单元格、td表格数据三个标签
- ul 无序列表，内包含li标签
- ol 有序列表，内包含li标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>这是标题</title>
</head>
<body>
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
<p>这是p</p>
这是<br/>br
<span>这是span</span>
<strong>这是strong</strong>
<em>这是em</em>
<del>这是del</del>
<ins>这是ins</ins>
<sup>这是sup</sup>
<sub>这是sub</sub>
<a href="https://www.baidu.com">这是a</a>
<table>
<tr>
<th>这是th</th>
<th>这是th</th>
<th>这是th</th>
</tr>
<tr>
<td>这是td</td>
<td>这是td</td>
<td>这是td</td>
</tr>
<tr>
<td>这是td</td>
<td>这是td</td>
<td>这是td</td>
</tr>
</table>
<ul>
<li>这是无序列表</li>
<li>这是无序列表</li>
<li>这是无序列表</li>
</ul>
<ol>
<li>这是有序列表</li>
<li>这是有序列表</li>
<li>这是有序列表</li>
</ol>
</body>
</html>
在实际应用的时候会发现，有一些标签自成一行，而另一些标签会在一行内显示，这就引入了另一个概念，块元素和行内元素。可以简单的理解为，块元素就是自己独占一行的元素，比如：h1-h6、p等这些就是块元素。行内元素就是不会独占一行的元素，比如：span、strong、em等这些元素就是行内元素，行内元素主要用来包裹文字。
