前端三大语言的作用:
HTML: 用来开发前端 页面的结构
CSS: 美化页面
JavaScript: 实现页面交互
1.页面基本结构
<!DOCTYPE html><html> <head> <title>First HTML Program</title> <meta charset="utf-8" /> </head> <body> Hello HTML </body></html>
<!DOCTYPE HTML>
文档类型,是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。
此声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
标签告知浏览器这是一个 HTML 文档。
标签是 HTML 文档中最外层的元素。
标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
元素是所有头部元素的容器。 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。 以下列出的元素能被用在 元素内部：
（在头部中，这个元素是必需的） <style> <base> <link> <meta> <script> <noscript></p>
<p><a name="PkwdE"></a></p>
<h4 id="1yydwb"><a name="1yydwb" class="reference-link"></a><span class="header-link octicon octicon-link"></span><body></body><br /> <body> 标签定义文档的主体。</h4><body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
<a name="wyZFF"></a>
#### <meta charset="utf-8" />
元数据（Metadata）是数据的数据信息。<br /><meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。<br />META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。<br />元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
<a name="CgTMj"></a>
####
<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。<br /><title>元素：<br />定义浏览器工具栏中的标题<br />提供页面被添加到收藏夹时的标题<br />显示在搜索引擎结果中的页面标题
<a name="zyRin"></a>
## 2. 标签名与标签属性
- 标签名：
用来描述该标签中的内容在页面中的角色.<br />标签分从书写格式上分为单标签和双标签两种
- 双标签
<标签名>xxxxx</标签名>
- 单标签
<标签名>
- 标签按显示样式分为行标签和块标签两种
- 行标签
每个标签在页面中显示时,不会独占一行.
- 块标签
每个标签在页面中显示时,会独占一行<br />两种标签可以通过显示属性进行切换
- 标签属性：
用来对标签的细节进行补充
<a name="Mapgb"></a>
## 3. 添加文字
标题标签
<code>html
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6></code>
段落标签<br />用来修饰一段文字,段落之间有明显的段间距
<code>html
<p>
这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长和共同繁荣”，很有现实意义。从18世纪第一次工业革命的机械化，到19世纪第二次工业革命的电气化，再到20世纪第三次工业革命的信息化，一次次颠覆性的科技革新，带来社会生产力的大解放和生活水平的大跃升，从根本上改变了人类历史的发展轨迹。
</p>
<p>
如今，我们正在经历一场更大范围、更深层次的科技革命和产业变革。大数据、人工智能等前沿技术不断取得突破，新技术、新业态、新产业层出不穷。各国利益和命运紧密相连，深度交融。同时，世界经济新旧动能转换尚未完成，南北失衡等深层次、结构性问题还未消除。地缘政治冲突此起彼伏，保护主义和单边主义愈演愈烈，直接影响到新兴市场国家和发展中国家发展外部环境。
</p></code>
字体标签(了解)<br />font 标签规定文本的字体、字体尺寸、字体颜色。已废弃,在HTML5中不支持
- color 属性 , 用来规定文本的颜色
- size 属性, 用来规定文本的字体大小
- face 属性, 用来规定文本的字体
<a name="nks99"></a>
## 4. 添加CSS样式
<a name="TtXFE"></a>
##### 1 、CSS介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言<br />CSS 的作用是用来对页面进行样式的设置,美化页面<br /><strong>选择标签</strong>
<code>html
选择器{
}
// 所有符合选择器的标签都会被选中</code>
<strong>设置格式</strong>
<code>html
属性名: 属性值;
....</code>
<a name="RMsgZ"></a>
#####
<a name="yReao"></a>
##### 2、CSS使用方式
<strong>行内样式</strong>
<code>html
<p style="width:500px;height:300px;background-color:red;">
这是一个DIV标签
</p></code>
<strong>内部样式</strong>
<code>html
<head>
<style>
p{
width:500px;
height:500px;
}
</style>
</head></code>
<strong>外部样式</strong>
<code>html
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head></code>
Theme.css 是一个样式表文件, 所有的样式可以写在该文件中<br />通过 link 标签引入后,对当前页面进行修饰(实际工作中使用非常多)
<a name="mMKFe"></a>
##### 3 、CSS选择器
css 通过选择器,来选取符合的标签进行样式的设置<br />常用选择器有: id选择器, class选择器, 标签选择器, 群组选择器, 派生选择器, :hover<br /><strong>id 选择器</strong>
<code>html
<head>
<style>
#p1{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p id="p1">AAAA</p>
</body></code>
<strong>Class 类选择器</strong>
<code>html
<head>
<style>
.p1{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p class="p1">AAAA</p>
</body></code>
<strong>标签选择器</strong>
<code>html
<head>
<style>
p{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p>AAAA</p>
</body></code>
<strong>组选择器</strong>
```html
<head>
</head>
<body>
<p>AAAA</p>
<div> BBB </div>
</body>
<pre><code>**派生选择器(层级选择器)**
```html
<head>
<style>
div p{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
<p>AABBCC</p>
</div>
<p>AAAA</p>
</body>
</code></pre><p><strong>:hover 伪类选择器</strong></p>
<pre><code class="lang-html"><head>
<style>
p:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p>AAAA</p>
</body>
</code></pre>
<p><a name="M1p3I"></a></p>
<h5 id="dfwpok"><a name="dfwpok" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4 、择器优先级</h5><p>当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。<br /><strong>不同级别</strong><br />1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。<br />2、作为style属性写在元素内的样式 <br />3、id选择器 <br />4、类选择器 <br />5、标签选择器 <br />6、通配符选择器<br />7、浏览器自定义或继承<br />总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性<br />同一级别中后写的会覆盖先写的样式。
<a name="ifyEP"></a></p>
<h5 id="9dijhc"><a name="9dijhc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5 、常用样式属性</h5><table>
<thead>
<tr>
<th><strong>样式</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>font-size</td>
<td>数字</td>
<td>设置字体大小</td>
</tr>
<tr>
<td>font-weight</td>
<td>normal | bold | bolder | lighter</td>
<td>设置文字是否加粗</td>
</tr>
<tr>
<td>font-style</td>
<td>normal | italic | oblique</td>
<td>设置文字是否为斜体</td>
</tr>
<tr>
<td>font-family</td>
<td>字体名称</td>
<td>设置文字显示的字体名称</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>text-align</td>
<td>left | center | right | justify</td>
<td>水平对齐方式</td>
</tr>
<tr>
<td>vertical-align</td>
<td>top | middle | bottom | sub | super | baseline</td>
<td>垂直对齐方式</td>
</tr>
<tr>
<td>text-indent</td>
<td>长度</td>
<td>设置文本缩进</td>
</tr>
<tr>
<td>line-height</td>
<td>normal | 长度</td>
<td>设置行高</td>
</tr>
<tr>
<td>text-decoration</td>
<td>none | blink | underline | line-through | overline</td>
<td>设置文本装饰</td>
</tr>
</tbody>
</table>
<p><a name="XrFvq"></a></p>
<h2 id="3tb7li"><a name="3tb7li" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. div标签</h2><p><a name="Qm2Sa"></a></p>
<h5 id="d12bpr"><a name="d12bpr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、 盒子模型</h5><p>1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。<br />CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。<br />2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。<br />3、 一个盒子的实际高度（宽度）是由content+padding+border组成。<br />可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
<a name="Ah6Pi"></a></p>
<h5 id="5vtfl"><a name="5vtfl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2 、常用样式</h5><table>
<thead>
<tr>
<th><strong>单位</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>长度 | 百分比</td>
<td>设置标签宽度</td>
</tr>
<tr>
<td>height</td>
<td>长度 | 百分比</td>
<td>设置标签高度</td>
</tr>
<tr>
<td>max-width</td>
<td>长度 | 百分比</td>
<td>设置标签最大宽度</td>
</tr>
<tr>
<td>max-height</td>
<td>长度 | 百分比</td>
<td>设置标签最大高度</td>
</tr>
<tr>
<td>min-width</td>
<td>长度 | 百分比</td>
<td>设置标签最小宽度</td>
</tr>
<tr>
<td>min-height</td>
<td>长度 | 百分比</td>
<td>设置标签最小高度</td>
</tr>
<tr>
<td>border</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置边框显示效果</td>
</tr>
<tr>
<td>border-width</td>
<td>长度</td>
<td>设置边框粗细</td>
</tr>
<tr>
<td>border-style</td>
<td>none | hidden | solid | dashed | dotten | double…</td>
<td>设置边框样式</td>
</tr>
<tr>
<td>border-color</td>
<td>颜色</td>
<td>设置边框颜色</td>
</tr>
<tr>
<td>border-top</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签顶部边框</td>
</tr>
<tr>
<td>border-left</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签左边边框</td>
</tr>
<tr>
<td>border-right</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签右边边框</td>
</tr>
<tr>
<td>border-bottom</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签底部边框</td>
</tr>
<tr>
<td>margin</td>
<td>上边距 右边距 下边距 左边距</td>
<td>设置标签四边的外延边距</td>
</tr>
<tr>
<td>margin-left</td>
<td>长度 | 百分比</td>
<td>设置标签左边的外延边距</td>
</tr>
<tr>
<td>margin-right</td>
<td>长度 | 百分比</td>
<td>设置标签右边的外延边距</td>
</tr>
<tr>
<td>margin-top</td>
<td>长度 | 百分比</td>
<td>设置标签顶部的外延边距</td>
</tr>
<tr>
<td>margin-bottom</td>
<td>长度 | 百分比</td>
<td>设置标签底部的外延边距</td>
</tr>
<tr>
<td>padding</td>
<td>上边距 右边距 下边距 左边距</td>
<td>设置标签四边的内部边距</td>
</tr>
<tr>
<td>padding-left</td>
<td>长度 | 百分比</td>
<td>设置标签左边的内部边距</td>
</tr>
<tr>
<td>padding-right</td>
<td>长度 | 百分比</td>
<td>设置标签右边的内部边距</td>
</tr>
<tr>
<td>padding-top</td>
<td>长度 | 百分比</td>
<td>设置标签顶部的内部边距</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>长度 | 百分比</td>
<td>设置标签底部的内部边距</td>
</tr>
</tbody>
</table>
<p><a name="n24wR"></a></p>
<h2 id="1mb81t"><a name="1mb81t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、添加图片</h2><p><a name="GNqkZ"></a></p>
<h5 id="f3m242"><a name="f3m242" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、 图片标签</h5><pre><code class="lang-html"><img src="" />
</code></pre>
<p><a name="Mf4Ba"></a></p>
<h4 id="anpnvt"><a name="anpnvt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、 背景图片</h4><pre><code class="lang-html"><style>
div{
background:url("");
}
</style>
</code></pre>
<p><a name="PwubT"></a></p>
<h2 id="5uuve3"><a name="5uuve3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、标签定位显示</h2><p>用不同的定位方式，控制标签具体的显示位置。<br /> position：static | relative | fixed | absolute；<br /> <br /> static 定位是默认值，即没有定位，遵循正常的文档流对象。<br /> （1）absolute绝对定位<br /> <br /> （2）relative相对定位<br /> <br /> （3）fixed绝对定位</p>
