HTML基础
超文本标记语言（Hypertext Markup Language），用于描述网页的语言，通过超链接进行页面跳转。语法规则由封闭标签组成。
#####结构
<html>
<head>
<title>页面标题</title>
</head>
<body>页面主体</body>
</html><html></html> 根控制标记，成对出现。写在文件开头和结尾。说明文本为html语言。
<head></head> 头控制标记，包括网页标题和一些文件引用的声明语句。如用<meta>标签对控制标记的动态文件转换声明。
<body></body> html的主体内容，同时也是页面的可见部分。
#####标签分类
| 标签分类 | 通用符 | 示例 |
|---|---|---|
| 单标签，无属性值 | </MarkName> |
</br> |
| 单标签，有属性值 | </MarkName attribute="attributeValue"> |
<hr width="20px"> |
| 双标签，无属性值 | <MarkName>Element value</MarkName> |
<title>Title name<title> |
| 双标签，无属性值 | <MarkName attribute="attributeValue">Element value</MarkName> |
<body bgcolor=”red”>…</body> |
其中单标签在html语法规则中，可以不闭合即<MarkName>（注意html规范下要求不允许闭合）。
但在Xhtml1.0中规定单标签必须闭合。这里即写作闭合形式（该文档整理时html5规范还未广泛应用）。同样的在html2.0中很多标签的属性已经废弃，相对的采用css样式弥补，所以也不赘述。
#####控制标签
- 常用标签
换行 <br>
标题 <h1></h1>-<h6></h6>
段落 <p></p>
内段落<span></span>
小字体<small></small>
超链接<a>
图像<img>
输入框<input>
注释 <!--...-->
删除线 <s></s>
斜体 <i></i>
上标 <sub></sub>
下划线 <u></u>
加粗 <b></b>
下标 <sup></sup>
水平线<hr>
- 清单标签
无序清单：
<ul> <li>...</li> <li>...</li> </ul><ul>...</ul> 标识清单的开始和结束。
<li>...</li> 标识清单的每一个项目。
有序清单
<ol><li>...</li> <li>...</li> <li>...</li></ol>叙述式清单
<dl>...<dt>...</dt><dd>...</dd><dd>...</dd><dt>…</dt>.......</dl><dl></dl>清单开始和结束标识 。
<dt></dt>一级清单内容 。
<dd></dd>二级清单内容。
<li></li> 属性及其值对应的效果（每个项目前的图标）
type: 实心圆（dise） 空心圆（cirle） 实心方块（square）
<ol></ol> 属性及其值对应的效果（以何种方式排序）
type: 1 2 3（1） a b c（a） A B C（A） i ii iii（i） I II III（I）
#####表格标签
<table> <th>...</th> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <table><table></table>标识表格的开始和结束 。
<th></th>标识表格的标题栏。
<tr></tr>标识表格的行。
<td></td>标识表格的列。
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| table标签 | ||
| border | 像素值 | 边框宽度 |
| cellspacing | 像素值 | 格线框宽度 |
| cellpadding | 像素值 | 单元格宽度 |
| width | 像素/百分比 | 表格宽度 |
| height | 像素/百分比 | 表格高度 |
| align | left/center/right | 表格位置左/中间/右 |
| bgcolor | 颜色名/十六进制数 | 背景颜色 |
| background | （url/"url.jpg"） | 背景图片 |
| border-color | 颜u色名/十六进制数 | 边框颜色 |
| frame | void | 不显示表格外边线 |
| above below lhs rhs | 只显示表格上下左右外边线 | |
| hsides vsides | 只显示上下 左右外边线 | |
| rules | rows | 显示单元格间行线 |
| cols | 显示单元格间列线 | |
| all | 显示单元格间的线 | |
| none | 表格内的线隐藏 | |
| colspan | 数字 | 向左右扩充单元格 |
| rowspan | 数字 | 向上下扩充单元格 |
| th tr td | ||
| width | 像素/百分比 | 单元格宽 |
| height | 像素/百分比 | 单元格高 |
| bgcolor | 颜色名/十六进制数 | 背景颜色 |
| align | left/center/right | 水平位置 |
| valign | top/middle/bottom | 垂直位置 |
| nowarp | 无 | 是否换行 |
#####图像标签
背景图 <body background="Url/img.jpg"/>
页面图片 <img src="Url/img.jpg">
图片超链接 <a href="URL"><img src="url/img.jpg"></a>
网站图标 <a href="url"><img src="url/img.jpg"></a>
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| src | url/img.jpg | 图片路径 |
| alt | 字符串 | 图像丢失时的注释 |
| width | 像素/百分比 | 图片宽度 |
| height | 像素/百分比 | 图片高度 |
| border | 数字 | 图像边框 |
| align | left/right/top/middle/bottom | 图像位置 |
| vsplace | 像素 | 与其他上下方对象的距离 |
| hspace | 像素 | 与其他左右方对象的距离 |
#####超链接标签
向其他网页跳转的超链接 <a href=scheme://host[:post]/path/filename >…</a>
scheme://host[:post]/path/filename为要跳转的在本地服务器中的网页的名字。
在本页中跳转到段落的超链接 ，其中#表示跳转到本页。
瞄点<a name=”音乐”>…</a>
链接点<a href=”#音乐”>…</a>
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| name | 字符串 | 超链接的标识名 |
| href | 字符串url | 超链接的目标 |
| link/alink/vlink | 颜色名/十六进制数 | 超链接点击前/点击中/点击后的颜色 |
| Accesskey="char" | 字符 | 键盘超链接快捷键 |
#####表单标签 表单是用来提交数据的，其中包含文本栏、选框、按钮等标签。
<form>...</form>主标记结构
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| form | ||
| name | 字符串 | 表单的名字 |
| method | get/post | 表单的传输方式 |
| action | url | 接受表单的目标 |
| input | ||
| type | text | 文本栏 |
| password | 密码栏 | |
| hidden | 隐藏栏（不可见） | |
| radio | 单选框 | |
| checkbox | 复选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| name | 字符串 | 文本栏名称 |
| value | 字符串 | 文本栏值 |
| size | 数字 | 文本栏可显示字符数 |
| maxlength | 数字 | 允许输入的最大长度 |
| readonly | readonly | 不允许修改 |
| disabled | disabled | 不可用（不会传递数据给表单） |
| select | ||
| name | 字符串 | 下拉框名称 |
| option | ||
| name | 字符串 | 下拉框子选项 |
| value | 字符串 | 下拉框子选项值（传递给表单的值） |
| selected | selected | 选中的选项 |
| textarea | ||
| cols | 数字 | 文本区域宽度 |
| rows | 数字 | 文本区域高度 |
| 其他标签 | ||
| optgroup | 无属性 | 下拉框选项分组 |
| fieldset | 无属性 | 外边框 |
| label | 无属性 | 字符串 |
| legend | 无属性 | 标题 |
#####框架标签
<frameset>...<frame>....<frame>....<frame>....</frameset>
<frameset>用于设置多窗框结构的声明。
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| cols rows | 像素/百分比 | 框架比例分区 |
| border | 像素 | 边框宽度 |
| framespacing | 像素 | 框架分界线间隔 |
因为表格和html模板的应用已经基本取代框架，所以也不多于介绍框架太多内容。
框架就是将一个页面间隔区分开的标签。由<frameset >的cols 和 rows 划分一个页面为几个单独的子页面。再通过<framset>的子标签<frame>的src属性引用其他html页面。将几个html拼合到一起。以下实例
<frameset rows="20%,80%">
<frame src="URL/htmlOne.html"><frame src="URL/htmlTwo.html">
</frameset>#####多媒体标签
<embed>...<embed> 插入flash。
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| src | url | flash路径 |
| width/height | 像素/百分比 | flash大小（宽度/高度） |
| wmode | window/transparent | 在页面正常显示 |
| transparent | 使flash某一部分透明 |
<embed>...<embed> 插入mp3。
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| autostart | true/false | 是否自动播放 |
| loop | 数字 | 音乐循环播放的次数 |
#####其他标签
<meta http-equiv="refresh" content="time;URL">自动展示网页内容。
http-equiv=”refresh” 表示页面会重新载入。
content=”time;URL”表示过多久时间重新载入页面和重新载入的页面。
网页检索信息提示：<metra>标签的name属性在定义不同的值时，可以给content属性不同的值记录相应信息，方便别人检索信息时找到网页。
<meta name=”keywords” content=”音乐，动漫，博客”>meta搜索优化。
其中name的值包括 author（作者）description（页面内容描述）keywords（关键字）等。
<marquee><marquee>活动文字。
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| behavior | scroll | 从右向左 |
| slide | 从左向右 | |
| alternate | 向两边移动 | |
| direction | left/right/ | up/down 向左/右/上/下移动 |
| bgcolor | 颜色名/十六进制数 | 背景颜色 |
| height/width | 像素/百分比 | 高度/宽度 |
| scrollamount | 数字 | 播放速度 |
| vspace | 像素 | 左右两侧间隔 |
| hspace | 像素 | 上下两侧间隔 |
在网页中导入脚本文件：
<script type=”类型” src=”URL”>…</script>如<script type="text/css" src="style/style.css">....</script>
Author: Eten Gstar
CreatedAt: 2012.09.05