一、HTML的定义
HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。
二、HTML标签元素
HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。虽然现在我们还不知道具体标签代表的意思，但标签一定是这样的格式：有一对开始<>和结束</>。一般标签名推荐用小写。标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性时写在标签里面的，而且是开始标签内。
三、HTML 的基本结构
一张网页就是一个html文档，一个html文档由4个基本部分组成。具体如下：
1 <!DOCTYPE html>文档声明 2 <html> 3 这是html文档 4 <head> 5 这是页头 6 </head> 7 <body> 8 这是页身 9 </body> 10 </html>
（1）文档声明：<!DOCTYPE html>声明这是一个html文档
（2）html标签：作用是告诉浏览器，整个网页是从<html>开始到</html>结束
（3）head标签：是页面的头部，在<head></head>标签对内部只能定义一些特殊的内容
（4）body标签：是页面的身体，页面绝大多数标签代码都是在<body></body>标签对内部编写
一般来说，只有六个标签能放在head标签内：
（1）<title> ： 标题标签，页面的标题
<title>这是页面标题</title>
（2）<meta> ：元信息标签，具有两个重要属性name、http-equiv
name属性用于定义页面的关键字、页面的描述等，取值：keywords、description、author、copyright
<meta name = "keywords" content = "Hello World">
http-equiv属性：定义页面所使用的语言、实现页面的自动刷新跳转
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<meta http-equiv = "refresh" content = "秒数；url = 网址">
（3）<link> ：用于引用外部css样式表
<link href = "css文件名" rel = "stylesheet"/>
（4）<style>：用于定义元素的css样式
用于定义元素的css样式
<style type = "text/css"> </style>
（5）<script>：用于定义页面javascript代码，可以放在head标签对内，也可以放在body标签对内
用于定义页面的javascript代码
<scrept type = "text/javascript> </script>
（6）<base>：这个标签基本用不到
html语言添加注释的方法：
<!--这是一个注释-->
四、常用元素
1.段落与文字
（1）标题标签：共6个，<h1>~~<h6>重要性由高到低
一般一个页面只能有一个h1标签，而h2~h6可以有多个
标题元素的级别越高，字体越大
（2）段落标签<p>。用来标记一段文字
<p>这里是一段文字</p>
在定义了段落后，可以利用属性align来对段落进行设置。属性align的值包括left（左对齐）、center（居中对齐）、right（右对齐）三种。
（3）换行标签<br />：用来给文字换行，换行标签是自闭和标签
（4）文本格式标签：
粗体标签：<b>、<strong>
斜体标签：<i>、<cite>、<em>
上标标签：<sup>
下标标签：<sub>
大号字标签：<big>
小号字标签：<small>
删除线标签：<s>
下划线标签：<u>
水平线标签：<hr />
div标签：<div>
特殊网络符号：空格： ； 大于号：>； 小于号：< 引号：" 注册商标（圆圈R）:® 版权（圆圈C）:&copty; 等
2.列表：
（1）无序列表
Html中列表也是常用的元素。无序列表用<ul><li></li></ul>表示。
说明：
属性：type
属性值： 列表前的符号
disc 实心原点
circle 符号为空心圆
square 符号为方形
例子如下：
<ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> </ul>
（2）有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
说明：
属性 属性值 说明
type 1、 a 、 A、i、I 用来设置项目前面的标记
start 数值 排序的起点数值
<ol type="1" start="2"> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> </ol>
（3）定义列表
定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。
<dl> <dt>爱好</dt> <dd>听歌</dd>
<dt>兴趣</dt> <dd>跑步 </dd> <dd>唱歌 </dd> </dl>
3.表格
表格的基本标签有：table标签（表格）、tr标签（行）、td标签（单元格）
1 <table> 2 <tr> 3 <td>单元格1</td> 4 <td>单元格2</td> 5 </tr> 6 <tr> 7 <td>单元格3</td> 8 <td>单元格4</td> 9 </tr> 10 </table>
说明：
html有10个表格相关的标签。
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格表头
<col> 定义列
<colgroup> 定义表格列的分组
<tbody> 定义表格主体
<td> 定义一个单元格
<tfoot> 定义表格的表注（底部）
<thead> 定义表格的表头
<tr> 定义行
属性说明：
属性 值 说明
width px、 % 指定表格的宽度
height px、% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px、 % 指定单元格之间的空白
align left、 right 、 center 指定表格的对齐方式
valign top、 middle 、 bottom 垂直排列方式
colspan 列数 合并列单元格
rowspan 行数 合并行单元格
bgcolor 颜色值 表格背景色
background 图片 表格背景图
bordercolor 颜色值 表格边框颜色
4、超链接标签a
（1）a标签用来定义一条超链接，其主要属性有href和target。href的作用是指明超链接要链接到的网址。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(默认方式，当前页)，_top（在顶层框架中打开），_parent（在当前框架的上一层打开），常用的为_self和_blank。
<a href="#" target="_blank">百度一下</a>
href的值可以是外部链接，也可以是内部文件，如***.html文件。
<a href=“http://www.163.com”>外部链接</a>
<a href=“about.html”>内部链接 </a>
href也可以链接到别的地址，如邮箱、电话、sms。
<a href=“1233456.qqcom”>邮件链接</a>
<a href=“tel:电话号码”>拨打电话</a>
<a href="sms:139xxxxxxx">发送短信</a>
（2）超链接的可以是文字超链接，也可以是图片超链接：
文字超链接：<a href="www.baidu.com" target="_blank">百度一下</a>
图片超链接：<a href="www.baidu.com" target="_self"><img src="bd.jpg" alt="baidu" title="baidu"></a>
（3）锚点链接
有时我们在浏览网页时会发现，有些网页比较人性化，会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。
<a href="#位置名"> </a>
<a name="位置名"> </a>
如代码例子：
<a href="#map">跳转</a>
<p id="map">代码代码</p>
5、图片标签
| 属性 | 属性值 | 说明 |
| src | url | 即source，用于指定图像源文件所在的路径 |
| alt | 用于设置图像的描述信息，这些信息是给搜索引擎看的 | |
| title | 用于设置鼠标移动到图像上时的提示文字，这些文字是给用户看的 |
代码实例如下：
<img src = "bg1.jpg" alt = "小黄人" title = "小黄人"/>
关于图像路径写法的说明：
./ 当前目录
../ 回到上一层目录
images/ 进入同一层目录
../images/ 回到上一层目录，然后再进入images目录
6、表单标签form（注意：表单元素本身不可见）
html中表单的作用是很强大的。我们生活中经常要用到表单，如一些基本信息的填写。在网页中也是如此，我们免不了注册一些账号，此时用到的表单就比较多了。
表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。
表单使用标签（<form>）定义。
表单的基本结构：
<form name="form1" action="URL" method="get|post" target="打开方式" enctype =
"application/x-www-form-urlencoded"> 用户名：<input type="text" name="uname" /> 密 码：<input type="password" name="passwd" /> </form>
说明：
属性 说明
name 用于给表单进行命名
action 用于指定表单数据提交到那个地址进行处理
method 告诉浏览器，指定将表单中的数据使用哪一种http提交方法，取值为get或者post
get：默认值，表单数据被传送到action属性指定的url，然后将这个新的url传送到处理程序上
post：表单数据被包含在表单主体中，然后被传送到处理程序上
enctype 用于设置表单信息提交的编码方式，主要有两种：
application/x-www-form=urlencoded：默认的编码方式。
multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值
target 打开方式（跟超链接a的target属性一样）
表单元素内存放的标签主要有四种：input、textarea、select和option。其中select和option是配套使用的。
（1）input元素：一种自闭合元素。语法：<input type = "表单类型">
type表单类型主要有：text、password、button、reset、image、radio、checkbox、hidden、file
（a）单行文本框：text
通过<input type="text"> 标签来设定，用于键入字母、数字等内容，默认长度为20个字符。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
说明：
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值（指文本框中的默认值）
size input 元素的宽度
readonly 是否只读
maxlength 输入字符的最大长度
disabled 是否禁用
（b）密码框：password（密码框中字符不会明文显示，而是以星号或圆点替代。）
通过标签<input type="password"> 来定义：
<form>
Password: <input type="password" name="pwd">
</form>
（c）单选按钮：radio
通过标签<input type="radio">来定义：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
***name属性：定义单选框的名称，要保证数据的准确获取，单选框都是以组为单位使用的，在同一组的单选按项要用同一个名称。***
（d）复选框：checkbox
通过标签：<input type="checkbox">来定义：
<form>
<input id="checkbox1" type="checkbox" name="song" value="听歌" checked="checked"><label for="checkbox1">听歌</label><br>
<input id="checkbox2" type="checkbox" name="run" value="跑步"><label for="checkbox2">听歌</label> 跑步
</form>
checkbox是没有文本的，需要加入label标签，即checkbox和label必须配合使用，使用label标签的for属性指向复选框的id。
（e）按钮：包括普通按钮（button）、提交按钮（submit）和重置按钮（reset）
通过标签：<input type="button">来定义：
<input type = "button" value = "确认"/>
（f）文本域：file
通过标签：<input type = "file"/>来定义：
<input type=“file” name=“photo” />
利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为multipart/form-data。
说明： multiple 控制是否上传多文件
（g）隐藏域：hidden
通过标签：<input type="hidden">来定义：
<input type="hidden" name="uid" value="10"/>
隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
（2）多行文本框：textarea
<textarea rows = "10" cols = "15">多行文本框的内容</textarea>
说明：
属性 说明
name 元素的名称
rows 指定文本框的高度
cols 指定文本框的宽度
注：此处的文本框宽高是由字符个数组成的。
（3）下拉列表select和option
<select multiple = "multiple" size = "1"> <option value = "HTML">HTML</option> <option value = "CSS">CSS</option> <option value = "C">C</option> <option value = "C++">C++</option> <option value = "Javascript">Javascript</option> </select>
属性 说明
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项值
7、<iframe> 内嵌框架
属性 属性值 说明
width px , % 指定框架的宽度
height px , % 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1, 0 是否显示边框
语法：<iframe src="URL" name="框架名"> </iframe>
<iframe src="http://www.baidu.com" name="baidu" height="600"width="600"></iframe>
scrolling属性在没写明的情况下，是根据设定的框架高度来确定是否需要滚动条的。
8、音视频标签embed
语法：<embed src="url" width="播放界面的宽度" height="播放界面的高度" />
使用embed标签，浏览器必须安装相应的插件
使用embed标签设置页面背景音乐：
<embed src="3.mp3" hidden="" autostart="" loop="" />
说明：
src：表示音频文件的存放地址
hidden：取值为true或者false，取值为true时，不显示播放界面，为false时显示播放界面
autostart：取值为true或者false，取值为true时，但页面一载入则自动播放，取值为false时，表示页面再入后不进行自动播放。
loop：取值为trrue或者false，为true表示无限循环播放，为false值播放一次。
H5新增的音视频标签：
1、音频audio
基本格式：<audio src="" controls><audio>
不同浏览器会对音频的兼容性不同，所以最好是在属性type中指明其类型
属性说明：
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果 使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width 设置视频播放器的宽度。
height 设置视频播放器的高度。
<audio src="4.ogv" width="300" height="40" controls><audio>
2、视频
基本格式：<video src="4.ogv" controls ></viedo>
其属性与音频类同。
