HTML简介
有人会说，网页就是html，那这样理解的话就大错特错，因为在一个网页中有很多东西都是html完成不了的。如特效、复杂的排版等等。所以说html是定义了一套语法规则，而不是我们所认为的就是网页。那么html长什么样？简单的说也就定义如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
也许有的朋友看过许多网站的源代码，乍一看几千行，头就大了，更别说研究了，如果有了解HTML的朋友会发现，把源代码拆开来看就会发现如上所示，所有的功能都是在里面完成的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>hello world</h1> </body> </html>
而HTML文档就是一系列的Tag组成，最外层的Tag是<html>。规范的HTML也包含<head>...</head>和<body>...</body>（注意不要和HTTP的Header、Body搞混了），由于HTML是富文档模型，所以，还有一系列的Tag用来表示链接、图片、表格、表单等等。下面就来具体介绍这些标签了
什么是标签
对HTML来说，可以简单的理解为网页标签就是网页浏览的标示符，就像一个人的名字来代表一个人一样。而不同的标签又代表着不同的功能和样式。
在HTML中，标签是放以<>中开始以</>结束的基本格式，当然也有<>开始和结束，这种属于自闭合标签，在<>内有规定的内容，我们自己随意定义的，浏览器会不识别，内部填写不区分大小写。
在HTML中，细心的朋友会发现我们打开编译器时，编译器会默认的给出<html></html>和<head></head>和<body></body>三种基本的标签。那么这三种标签代表的含义是什么？
- <html> </html>这是一对超文本开始与结束标签
- <head></head>是一对头部声明标签，如标题标签、JS链接、CSS链接都是放入此对标签内
- <body></body>是一定内容标签，即要显示内容都放入此标签内
下面主要介绍<head></head>和<body></body>两种标签
head标签
我们打开编译器时，编译器会默认给出meta标签和title标签在head标签里面。此时我们可以分为meta标签和非meta标签两类去理解。
meta标签
在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。
网页中常见的字符集编码如下
中文：<meta http-equiv="Content-Type" content="text/html;charset=utf8" />，可以简写为<meta charset="UTF-8">
网页制作信息
<meta name="author" content="Evance" />
网页关键字说明
<meta name="keywords" content="abc,xxx,defg,xyz" />
网页简历说明
<meta name="description" content="你很帅等等" />
自动跳转（此标签用法可以让网页在2秒后自动从当前页面跳转到另外一个网页页面或网站）
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />
- Content后跟值为当前页面在多少时间跳转；
- Url值为跳转到具体网页网站
网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）
<meta name="robots" content="all" /> 一般情况下我们用不到
content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。
我们会注意到在meta后面会有name 和 http-equiv，这就是meta标签的两种属性，不同的属性又有不同的参数值(后面跟的就是)
- name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content
非meta标签
顾名思义除了meta意外的
<title>titile</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
以link为例，最常见的就是<link> 标签最常见的用途是链接外部样式表，外部资源。
- href 值为外部资源地址，这里是css的地址
- rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
- type 规定被链接文档的 MIME 类,这里是值为text/css
body标签
<h1>：加黑，加大 <p>:换行和隔行 块级标签 <br>:换行 <hr>:分割线 <a href=""> 链接 锚(#id属性) <img src="" alt="" title=""> <ul> <ol> <dl>: 列表标签 <table border="1" cellspacing cellpadding> : 表格标签 <div> <span> <form>表单 里面的其它标签等等
基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
<a>锚文本超链接标签
基本格式
<a href="网址、链接地址" target="目标" title="说明">被链接内容</a>
<a>标签内属性
href：打开目标地址（网址），一般填写将要转到目标地址。如href="http://www.baidu.com/"这样浏览者在网页中鼠标点击对应此锚文本将打开到网页http://www.baidu.com/
target：打开目标方式
如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页
_blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址
_parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址
举个简单实例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ height: 300px; } #div2{ height: 300px; } #div3{ height: 300px; } </style> </head> <body> <a href="#div1">第一章</a> <a href="#div2">第二章</a> <a href="#div3">第三章</a> <div id="div1"> 第一张<br> <img src="1.jpg" alt="hehe" title="汽车"> </div> <div id="div2"> 第二张<br> <img src="1.jpg" alt="hehe" title="汽车"> </div> <div id="div3"> 第三张<br> <img src="1.jpg" alt="hehe" title="汽车"> </div> </body> </html>
列表标签
分为有序列表、无序列表和定义列表
ol li有序列表标签语法与结构
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
Ul li无序列表标签语法与结构
<ul>
<li></li>
<li></li>
<li></li>
</ul>
具体使用和ol 有序标签相同
dl定义列表
html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格
dl dt dd列表标签语法
<dl> <dt>列表标题</dt> <dd>列表内容</dd> <dd>列表内容</dd> ... </dl>
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
表格标签 <table>
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.
图形标签 <img>
语法结构
<img src="图片路径" width="175" height="47" alt="" title='描述'>
- Src 跟图片路径
- Width 设置图片宽度
- Height 设置图片高度
- Alt 没有加载成功时的提示
- title: 鼠标悬浮时的提示信息
form表单
Form表单区域标签语法与结构
<form action="" method="get"> </form> 或 <form action="" method="post"> </form>
- action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理
- Method的值为get时，是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
- Method的值为post时，是通过类似缓存传填写内容与参数，而URL是不能看到form表单填写内容提交内容。
所以get方式较post方式不安全
Form表单区域标签使用说明
比如我们要写一个简单的登陆注册界面就需要很多用到form表单，如要选择性别，爱好，输入姓名年龄等。都需要在form表单内部输入input、单选、多选等等。
input标签
input type包含input text输入框、input submit按钮、input checkbox多选复选框、input radio单选框等等
Form input标签语法与结构
<input name="" type="submit" value="提交" > Name为此表单控件识别命名，一般使用英文字母在一个页面里具有唯一性 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同 Type为表单控件样式 type="text" 输入框控件，用于输入内容如用户名、密码之类内容输入框控件 type="submit" 按钮控件，用于提交、重置动作 type= 'button' 按钮(需要配合js使用.) button和submit的区别？ type="checkbox" 多选复选框控件，用于多选题、多选功能(进入了解 html checkbox多选框) type="radio" 单选框，用于单选，唯一选择功能 type='file' 提交文件：form表单需要加上属性enctype="multipart/form-data"
<textarea>文本区域表单标签元素
textarea语法结构
<textarea name="HTML" cols="30" rows="4">
- Name 为传值命名
- Cols 为字符宽度（每行输入文字多少宽度），跟具体数字
- Rows 为行数，默认输入框区域显示高度，跟具体数字
<select>下拉框标签
Form select语法与结构
<select name="city" size='2' multiple="multiple" > <option value="0">北京</option> <option value="1">天津</option> </select> #size：设置下拉框显示的个数 #value表单项提交时能提交的值 #multiple 默认可以选多个
<label>标签
在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。
比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了<label>标签实现
注：点击<label>标签文字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。
label语法
<label for="man">男</label> #Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。
举个简单单击性别的例子
<form action="" method="get"> 性别：<br /> <input name="sex" id="man" type="radio" value="" /> <label for="man">男</label> <input name="sex" id="woman" type="radio" value="" /> <label for="woman">女</label> </form>
需要注意的事项
在HTML中<div>和<span>本身没有任何意义，所有我们可以在里面添加很多属性，去进行修改成我们想要的结果
在HTML中注释的格式为
<!-- html注释的内容 -->