HTML 基础教程
HTML 的定义
HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML 也在不断的更新，最新版本已经出现了 HTML5。在 HTML5 中出现了许多新特性，也遗弃了一些旧元素。
我们写好 html 文件后，可以在浏览器中打开。
主流的浏览器包括 IE、Firefox、Chrome 等。
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>- 文档声明：
<!DOCTYPE html>声明这是一个html文档 html标签：作用是告诉浏览器，整个网页是从<html>开始到</html>结束head标签：是页面的头部，在<head></head>标签对内部只能定义一些特殊的内容body标签：是页面的身体，页面绝大多数标签代码都是在<body></body>标签对内部编写
head 标签
一般来说，只有六个标签能放在 head 标签内：
title
标题标签，页面的标题
<title>这是页面标题</title>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 = 网址">link
用于引用外部 css 样式表
<link href = "css文件名" rel = "stylesheet"/>style
用于定义元素的 css 样式
<style type = "text/css"> </style>script
用于定义页面 javascript 代码，可以放在 head 标签对内，也可以放在 body 标签对内
<scrept type = "text/javascript> </script>base
这个标签基本用不到
html语言添加注释的方法：
body 标签
body 标签内可以放的标签就比较多了，主要包括如下几种：
段落与文字
- 标题标签
<h>
共6个，<h1>~~<h6> 重要性由高到低，一般一个页面只能有一个 h1 标签，而 h2~h6 可以有多个，标题元素的级别越高，字体越大。
- 段落标签
<p>
用来标记一段文字
<p>这里是一段文字</p>在定义了段落后，可以利用属性 align 来对段落进行设置。属性 align 的值包括 left（左对齐）、center（居中对齐）、right（右对齐）三种。
- 换行标签
<br />
用来给文字换行，换行标签是自闭和标签
- 文本格式标签
粗体标签：<b>、<strong>
斜体标签：<i>、<cite>、<em>
上标标签：<sup>
下标标签：<sub>
大号字标签：<big>
小号字标签：<small>
删除线标签：<s>
下划线标签：<u>
水平线标签：<hr />
div标签：<div>特殊网络符号：空格：
 ； 大于号：>； 小于号：< 引号：" 注册商标（圆圈R）:® 版权（圆圈C）:&copty; 等
列表
- 无序列表
Html中列表也是常用的元素。无序列表用 <ul><li></li></ul> 表示。
说明：
属性： type
属性值： 列表前的符号
- disc 实心原点
- circle 符号为空心圆
- square 符号为方形示例：
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>- 有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
说明：
属性 属性值 说明
type 1、 a 、 A、i、I 用来设置项目前面的标记
start 数值 排序的起点数值示例：
<ol type="1" start="2">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>- 自定义列表
定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。
<dl>
<dt>爱好</dt>
<dd>听歌</dd>
<dt>兴趣</dt>
<dd>跑步 </dd>
<dd>唱歌 </dd>
</dl>表格
表格的基本标签有：table 标签（表格）、tr 标签（行）、td 标签（单元格）
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</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 | 颜色值 | 表格边框颜色 |
超链接标签
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>超链接的可以是文字超链接，也可以是图片超链接：
文字超链接：
<a href="www.baidu.com" target="_blank">百度一下</a>
图片超链接：
<a href="www.baidu.com" target="_self"><img src="bd.jpg" alt="baidu" title="baidu"></a>锚点链接: 有时我们在浏览网页时会发现，有些网页比较人性化，会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。
<a href="#位置名"> </a>
<a name="位置名"> </a>如代码例子：
<a href="#map">跳转</a>
<p id="map">代码代码</p>图片标签
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | url 即source，用于指定图像源文件所在的路径 | |
| alt | 用于设置图像的描述信息，这些信息是给搜索引擎看的 | |
| title | 用于设置鼠标移动到图像上时的提示文字，这些文字是给用户看的 |
代码实例如下：
<img src = "bg1.jpg" alt = "小黄人" title = "小黄人"/>关于图像路径写法的说明：
./ 当前目录
../ 回到上一层目录
images/ 进入同一层目录
../images/ 回到上一层目录，然后再进入images目录表单标签
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 |
method方法：
- get：默认值，表单数据被传送到action属性指定的url，然后将这个新的url传送到处理程序上
- post：表单数据被包含在表单主体中，然后被传送到处理程序上
enctype：用于设置表单信息提交的编码方式，主要有两种：
- application/x-www-form=urlencoded：默认的编码方式。
- multipart/form-data：MIME编码，对于"上传文件"这种表单必须选择该值
target： 打开方式（跟超链接a的target属性一样）
表单元素内存放的标签主要有四种：input、textarea、select 和 option。其中 select 和 option 是配套使用的。
input 元素一种自闭合元素。语法：<input type = "表单类型">
type表单类型主要有：text、password、button、reset、image、radio、checkbox、hidden、file
- 单行文本框：
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 | 是否禁用 |
- 密码框：
password
密码框中字符不会明文显示，而是以星号或圆点替代。通过标签 <input type="password"> 来定义：
<form>
Password: <input type="password" name="pwd">
</form>- 单选按钮：
radio
通过标签<input type="radio">来定义：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>name属性：定义单选框的名称，要保证数据的准确获取，单选框都是以组为单位使用的，在同一组的单选按项要用同一个名称。*
- 复选框：
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。
- 按钮：包括普通按钮（
button）、提交按钮（submit）和重置按钮（reset）
通过标签：<input type="button">来定义：
<input type = "button" value = "确认"/>- 文本域：
file
通过标签：<input type = "file"/>来定义：
<input type=“file” name=“photo” />利用这项功能时，在 form 标签中要指定 method 属性。要把 method 指定为 post, enctype 属性指定为 multipart/form-data。
说明： multiple 控制是否上传多文件
- 隐藏域：
hidden
通过标签：<input type="hidden">来定义：
<input type="hidden" name="uid" value="10"/>隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
- 多行文本框：
textarea
<textarea rows = "10" cols = "15">多行文本框的内容</textarea>说明：
| 属性 | 说明 |
|---|---|
| name | 元素的名称 |
| rows | 指定文本框的高度 |
| cols | 指定文本框的宽度 |
注：此处的文本框宽高是由字符个数组成的。
- 下拉列表
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 | 选项值
<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 属性在没写明的情况下，是根据设定的框架高度来确定是否需要滚动条的。
- 音视频标签
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值播放一次。