一、什么是HTML
HTML是用来描述网页的语言, HTML(Hypertext Markup Language)翻译过来就是 超文本标记语言。
超文本即超越文本，可以显示文字，图片，视频，音频，最重要的是可以包含超链接。
标记语言：当我们把特定的英文单词放入到我们的标记（单标记</>, 双标记<></>）当中， 我们的标记具有了新的语义，而由特定语义的标记的规范，我们称之为标记语言。
当我们将特定的英文单词放入到标记中，这样我们可以称之为标签（单标签<br/>,双标签<p></p>）
二、HTML的基本结构
<!DOCTYPE html>
<!-- 文档头（类型）声明 不是标签，代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
<!--网页的标题 -->
<title>html+css基础知识总结</title>
<!--针对搜索引擎和解析格式的属性->
<meta charset="utf-8"/>
<!--定义网页的关键字-->
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<!--定义网页的关键字-->
<meta name="description" content="html+css基础知识总结" />
</head>
<body>
<!-- 里面包含的绝大部分在页面中都是可见的， 主要用于搭建 HTML 结构 -->
</body>
</html><!DOCTYPE html>
文档头申明， 由于一些历史原因导致需要加这与话。记住，如果你的页面添加了 <!DOCTYPE html> 那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有浏览器里表现出来的都是一个样。
三 、 head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
1. <title> 标签：
定义文档的标题，它是 head 部分中唯一必需的元素。
2. <link>标签：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head><link>标签定义文档与外部资源的关系，最常见的用途是链接样式表
tips: link标签是空标签， 它仅包含属性； 此标签只能存在于head部分，不过可以出现任何次数
3. <meta>标签：
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 如：
<meta name="keywords" content="上大，上海大学"><meta name="description" content="上海大学是上海市属、国家“211工程”重点建设的综合性大学">当在百度搜索栏搜索：关键字，上大，上海大学时就会在搜索结果里找到html的链接，description就是链接下面的简介。
http-equiv 属性：
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
http-equiv属性还有一个非常有用的用法，实现页面跳转：
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)意思是2s后实现页面跳转，新网页地址为"www.baidu.com"
content 属性：
为必须属性，定义与http-equiv或name属性相关的元信息, content 属性始终要和 name 属性或 http-equiv 属性一起使用。
四、 body 标签
1. 基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素的特点
总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素inline元素的特点
和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
2. <img>图形标签 ***
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)实例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>更多实例：
http://www.w3school.com.cn/html/html_images.asp#more_examples
3. <a>超链接标签（锚标签）
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #id.（锚）指向 w3school 的超链接：
<a href="http://www.w3school.com.cn">W3School</a><a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
实例：
创建超级链接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>将图像作为链接：
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>链接到同一页面的不同位置（锚）：
<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>在新的浏览器窗口打开链接：
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
</body>
</html>跳出框架：本例演示如何跳出框架，假如你的页面被固定在框架之内。
<html>
<body>
<p>被锁在框架中了吗？</p>
<a href="/index.html"
target="_top">请点击这里！</a>
</body>
</html>创建电子邮件链接：
<html>
<body>
<p>
这是邮件链接：
<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>创建电子邮件链接 2：
<html>
<body>
<p>
这是另一个 mailto 链接：
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
4. 列表标签：
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项5. 表格标签: <table>
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.6. 表单标签<form> *****
表单标签用于向服务器传输数据。
表单能够包含 input 元素，比如文本字段文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
表单属性：
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action:
表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method:
表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是HTTP请求里常见的两种请求方式.
常用表单元素：
(1)input元素
表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。
基本用法：
效果 ：
注意细节：
1，对于input来说，它的type的默认值是text，表示单行文本
2，对于input，最好给它添加一个name属性，作用是用于将用户输入的内容提交给要处理这个数据的页面
GET提交与POST提交：
GET:
如果以get方式进行提交，但没有写上name属性，那么用户输入的内容是提交不了的，但是也会出现？这个标志：
POST：
当用户以post方式提交时，用户输入的内容不会放到地址栏里面，比较安全：
GET和POST小结：
1，GET会将用户输入的内容放到地址栏里面，使用GET请求不安全
2，POST不会将用户输入的内容放到地址栏里面，相对安全
细节：
1，每一个input标签都有一个value属性，不同类型的input， value的作用也不同
对于type=”text”来说，value可有可无，因为用户输入的内容都可以提交过去。
对于type=”radio”或type=”checkbox”来说，没有value，是提交不了的。
2，对于type=”radio”来说，如果你只想选择一个，需要给每个input添加一个name属性，属性值也必须一致，如果不添加，就不能满足单选框的需求。
3，关于单行文本的宽度，可以使用size属性来设置，表示字符长度，实际上不用，我们一般是通过CSS进行控制的。
（2）select和option
作用：用来实现下拉列表
格式：<select>
<option>内容</option>
<option>内容</option>
<option>内容</option>
</select>
基本用法：
注意点：
1，默认情况下，提交时，它将option里面的内容作为提交的内容，但是通常我们不这样做，我们通常给opton设置一个value属性，属性值我们通常用数字。
使用value后的情况如下：
我们可以使用selected属性让某个option处理默认选中状态。
（3）textarea
作用：提供输入大量文本的输入框，比如，QQ空间中发表状态，贴吧发表贴子等。
格式：<textarea></textarea>
基本用法：
参考博客：
https://blog.csdn.net/wang1006008051/article/details/78157325
http://www.cnblogs.com/yuanchenqi/articles/5976755.html