静态页面：所谓静态页面指的是仅供用户浏览，而没有服务器数据交互的页面
动态页面：用户不仅可以浏览，还可以和服务器数据交互。
HTML：全称是“Hyper Text MarkupLanguage”(超文本标记语言)，用于控制网页的结构。
HTML语法：<标签符>内容</标签>
ps：标签符一般成对出现，包含一个开始符和一个结束符，结束符是在开始符前添加一个’/‘
当浏览器接收到一个HTML文本后，就会解析出来里面的标签，然后把标签对应的功能表达出来。
HTML用标签来说话，学习HTML就是学习各种各样的标签，然后针对自己想要的内容，使用正确的标签展示出来。很对时候我们把标签说成元素。
标签：tag
基本标签：
<!DOCTYPE html> // 文档声明，表示这是一个HTML页面
// HTML文档，该标签是告诉浏览器，这个页面是从这里开始，在实际开发中，
我们可能会经常看到这样一行代码 <htmlxmlns = "w3.org/1999/html">，这句代码的作用告诉浏览器，该页面使用的是W3C的XHTML标准。
<html>
// 是网页的头部，用于定义一些特速度的内容，如页面的标题，定时刷新，外部文件的引用等，一般来说只有6个标签可以放在其中
<head>
<title></title> // 唯一的作用就是定义网页的标题
<style></style> // 用于定义元素的css样式
// meta标签又两个重要属性：name和http-equiv
// name属性取值：keywords:关键字、description：描述、author：作者、 copyright：版权信息
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<script></script> // 用于定义javascript代码或者引入外部的javascript代码文件
<link></link> // 用于引入外部的css文件
</head>
<body> // 页身，要呈现的内容区域
</body>
</html> // 到这里结束
以上是HTML的基本结构
文本标签
页面组成元素：大部分静态页面都是由一下4种元素组成的
1、文本
2、图片
3、超链接
4、音频/视频
本章包含以下6个方面
1、标题标签
// 在html中共有6种标题标签：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2、段落标签
// p标签是用来显示一段文字，会自动换行，期间可以使用<br>进行换行
<p></p>
3、换行标签
<br>
4、文本标签
<b>加粗标签</b>
<i>斜体标签</i>
<em>斜体标签</em>
<cite>斜体标签</cite>
<sup>上标标签@qq
<sub>下标标签.com
<s>中划线标签</s>
<u>下划线标签</u>
<big>加大标签</big>
<small>小号标签</small>
<hr> // 横线标签
5、水平线标签
<hr>
6、特殊符号
\ 是转义字符 以及以 & 开头的一些特殊字符，例如 
根据元素的表现形式一般可分为块元素和行内元素：
块元素：在浏览器的显示状态下独占一行，不与其它元素同处一行，块元素内部可以容纳其它块元素和行内元素
行内元素：行内元素内部可以容纳其它行内元素，但是不建议容纳其它块级元素，<p>标签内部不建议容纳其它任何元素
列表
在html中列表有三种：有序、无序和自定义列表
有序列表：
// 注意ol li配套使用，可以使用type属性改变序号：可取值：1、a、A、i 和 I
<ol type="A">
<li></li>
<li></li>
<li></li>
</ol>
有序列表
// type可取值：disc实心圆(默认)、circle空心圆、square方形
<ul type="cricle">
<li>哈哈哈哈哈</li>
<li>哈哈哈哈哈</li>
<li>哈哈哈哈哈</li>
</ul>
自定义列表
<dt>
名词
<dd>解释该名词</dd>
</dt>
HTNL的精髓在于标签的语义化，语义化对于搜索引擎优化(SEO)来说是很重要的，把标签用在对的地方
表格
基本结构：表格(table)、行(tr[tabel row]标签)和单元格(ta[table data cell])
完整结构：除基本结构的三部分外还有caption、th等
1.caption标签是表格的标题，一个表格只能有一个标题，标题都是位于整个表格的第一行。
2.th(table head cell)为表头单元格标签
一个完整的表格包含tabel tr td caption th，为了更加语义化，html引入了thead、tbody、tfoot标签，分别表示表头、表身、表脚。增加可以性，维护性之外还更加方便css样式控制表格
合并行：rowspan、合并列：colspan
图片
我们可以使用img标签来展示一张图片，对于该标签，我们需要掌握它的三个属性：src、alt、title、srcset(h5新增)
src：用于指定图片路径，相对路径和绝对路径，所有img标签必须有src属性值才可以展示图片，必填属性
alt：用于图片报错无法展示时展示的文字
title：用于鼠标悬浮图片时展示的文字
srcset(h5新增)：为浏览器提供一组不同尺寸和分辨率的图像源，方便不用的用户根据自己的设备选择不同的图片源
图片格式：位图和矢量图
jpg：可以很好的处理颜色，但是体量大，加载慢
png：体量小，加载快，但是不适合色彩丰富的图片
gif：图片效果最差，不过适合做动画
超链接
网页直接通常都是通过超链接进行相互关联的，它可以让我门在各个独立的页面中相互跳转
<a>标签
语法：<a href="地址"; target="打开方式">文本或者图片</a>
target可取值：
_self：默认、在原有窗口打开
_blank： 在新窗口打开
_ parent：在父窗口打开
_top：在顶层窗口打开
锚点链接：实现锚点链接，需要定义两个参数：目标元素的id、a标签的href属性指向该id。
其中，id属性就是元素的名称，在一个页面中，id是唯一的，给a标签的href属性赋值时，需要在if浅加上“#”，用来表示这是一个锚点链接。
表单
如果想要做出一个动态页面我门需要借助表单来实现
文本框，按钮，下拉菜单等都是常见的表单元素
表单元素通常有五种form、input、button、textarea、select、option
从外观上划分、表单有一下八种：
单行文本、密码文本、单选框、复选框、按钮、文件上传、多行文本、下拉列表
form标签：
类似于table标签，所有表单标签要放在form标签内部
form属性：
| 属性 | 说明 |
|---|---|
| name | 表单名称 |
| method | 提交方式（get or post） |
| target | 打开方式(一般用_blank与a标签相似) |
| action | 提交地址 |
| enctyp | 编码方式（一般无需设置除非用到上传文件功能） |
input标签是自闭合标签，type取值如下：
在单行文本中，我们有一下常用属性：
| 属性 | 说明 |
|---|---|
| value | 设置文本框默认值 |
| size | 设置文本框长度 |
| maxlangth | 设置文本框最多可输入的字符数 |
密码文本：外观与单行文本一样，有相同属性，但是内容不可见。
单选框：type为radio
语法：<input type="radio" name="组名" value="取值">
常见的按钮有三种：
普通按钮(button)：一般是为了配合javascript进行各种操作，value为按钮上的文本
提交按钮(submit)：一般用来给服务器提交数据，针对form标签
重置按钮(reset)：一般用于清楚当前所在form标签中的表单内容
文件上传：type为file
多行文本框：textarea
语法：<textarea rows="行数", cols="列数", value="取值"></textarea>
多行文本的默认值实在标签内部设置而不是value
用于展示该标签上传数据格式的标签是<pre><pre>
下拉列表：由selet和option组合使用
select常用属性有：
| 属性 | 说明 |
|---|---|
| multiple | 这是下拉列表可以多选几项，可以使用ctr+鼠标左击进行多选 |
| size | 设置下来列表显示几个列表项 |
option常用属性：
select常用属性有：
| 属性 | 说明 |
|---|---|
| selected | 设置该项是否选中 |
| value | 选项值 |
DEMO
<!DOCTYPE >
<html>
<head>
<meta charset = 'utf-8'>
<title>表单</title>
</head>
<body>
<form name = 'mine'>
昵称：<input type='text'/><br />
密码：<input type='password' /><br />
邮箱：<input type='text'/>
<select>
<option>@qq.com</option>
<option>@163.com</option>
</select>
<br />
性别：<input type='radio' name='gender' value='男'checked="" />男
<input type='radio' name='gender' value='女'/>女
<br />
爱好：
<input type='checkbox' name='hobby' value='旅行' />旅行
<input type='checkbox' name='hobby' vluae='摄影' />摄影
<input type='checkbox' name='hobby' value='摄影' />摄影
<br />
个人简介：
<br /><textarea rows='10' cols='40'></textarea>
<br />上传个人照片：
<br /><input type='file' />
<hr />
 <input type='submit' value='立即注册'>
</form>
</body>
</html>
框架
我们可以使用iframe标签来实现一个内嵌框架，内嵌框架就是在当前页面中嵌入另一个页面
语法：<iframe src="链接地址" width="宽度数值", height="高度数值"></iframe>
其中src是必选的，用于定义页面链接地址，另外两个定义宽高。
iframe实际上就是在当前页面嵌入另外一个页面，当然我们也可以嵌入多个
