Html CSS JavaScript
Html: Hyper Text Markup Language
软件：Dreamweaver
基本格式：
<html>
<head>
<title>标题标记<title>
<meta http-equiv=”contentType” content=”text/html;charset=gb18030”/>
文档头部信息
</head>
<body>
文档正文内容
</body>
</html>
设置页面关键字： <meta name=”keywords” content=”输入具体的关键字”>
设置页面说明： <meta name=”description” content=”设置页面说明”>
定义编辑工具：<meta name=”generator” content=”编辑软件的名称”>
设置作者信息：<meta name=”author” content=”作者的姓名”>
设置网页文字及语言：<meta http-equiv=”contentType” content=”text/html;charset=字符集类型”/>
设置网页的定时跳转：<meta http-equiv=”refresh” content=”跳转的时间;URL=跳转的地址”>
网页的主体标记body
网页背景颜色：bgcolor <body bgcolor=”背景颜色”>
网页背景图片：background <body background=”图片的地址”>
文体的颜色：text <body text=”字体的颜色”>
链接文字属性：link <body link=”颜色”>
边距：margin <body topmargin=”上边距的值” leftmargin=”左边距的值”>
网页注释内容标记： <!-- 注释内容 -->
标题字：<h1>..............<h6>
h1>一级标题<h1> <h4>四级标题<h4>
<h2>二级标题<h2> <h5>五级标题<h5>
<h3>三级标题<h3> <h6>六级标题<h6>
| 属性值 | 含义 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
标题字对齐属性 align
文体基本标记 font
字体属性：face <font face=”字体样式”>....</font>
字号属性：size <font size=”字体字号”>.....</font>
颜色属性：color <font color=”字体颜色”>.....</font>
文体格式化标记
粗体标记b , strong
<b>加粗的文字</b> <strong > 加粗的文字 </strong>
斜体标记 i , em , cite
<i>斜体文字</i> <em>斜体文字</em> <cite>斜体文字</cite>
上标标记：sup <sup>上标内容</sup>
下标标记：sub <sub>下标内容</sub>
大字号标记：big <big>大字号内容</big>
小字号标记：small <small>小字号内容</small>
下划线标记：u <u>下划线的内容<u>
段落标记
段落标记：p <p>d段落文字<p>
换行标记：br <br/>
不换行标记：nobr <nobr>不换行内容</nobr>
水平线 hr
插入水平线：hr <hr>
水平线宽度：width <hr width=”宽度”>
水平线高度：size <hr size=”高度”>
水平线去掉阴影：noshade <hr noshade>
水平线颜色：color <hr color=”颜色’>
水平线排列：align <hr align=”对齐方式”> （center, left ,right）
插入空格：
插入特殊符号
| 特殊符号 | 特殊符号代码 |
| “ | " |
| & | & |
| > | < |
| < | > |
| × | × |
| § | § |
| © | © |
| ® | ® |
| ™ | ™ |
图像的使用 （.png .gif .jpeg）
| 属性 | 描述 |
| src | 图像的源文件地址 |
| alt | 提示文字 |
| width heith | 宽度 高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
| dynsrc | 设定avi文件的播放 |
| loop | 设定avi文件循环播放次数 |
| loopdelay | 设定avi文件循环播放延迟 |
| start | 设定avi文件播放方式 |
| lowsrc | 设定低分辨率图片 |
| usemap | 映像地图 |
插入图像的源文件 ：src <img src=”图像文件的地址” />
图像的提示文字：alt <img src=”图像文件的地址” alt=”提示文字内容”/>
图像的宽度和高度：width height <img src=”图像文件的地址” width=”宽度” height=”高度”/>
图像的边框：border <img src=”图像文件的地址” border=”图像边框的宽度”/>
图像的垂直边距：vspace <img src=”图像文件的地址” vspace=”垂直边距” />
图像的水平边距：hspace <img src=”图像文件的地址” hspace=”水平边距”/>
图像的排列：align <img src=”图像文件的地址” align=”对齐方式”/>
| 属性 | 描述 |
| bottom | 图像的底部和当前行的文字底部对齐 |
| top | 图像的顶端和当前行的文字顶端对齐 |
| middle | 图像水平中线和当前行的文字中线对齐 |
| left | 图像左对齐 |
| center | 图像水平中线和当前行的文字中线对齐 |
| right | 图像右对齐 |
图像的超链接 <a herf=”链接地址”><img src=”图像文件的地址”/> </a>
图像热区链接
<img src=”图像文件的地址” usemap=”映射图像名称”/>
<map name=”映射图像名称”>
<area shape=”热区形状” coords=”热区坐标(x,y,width,height)” herf=”链接地址”/>
</map>
列表的使用
有序列表标记：ol
<ol> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li>...... </lo>
有序列表的序号类型：type
<ol type=”序号类型”><li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li>......</lo>
| type | 列表项目的序号类型 |
| 1 | 数字 1. 2. 3. 4. ........... |
| a | 小写字母a. b. c. ............ |
| A | 大写字母A. B. C. ............ |
| i | 小写罗马数字 i. ii. iii. iv. .......... |
| I | 大写罗马数字 I. II. III. IV. ............. |
有序列表的起始数值：start <ol type=”序号类型 start=”起始数值”> .................... </ol>
无序列表标记：ul
<ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li>...... </ul>
无序列表的类型：type <ul type=”序号类型 > .................... </ul>
| 数值类型 | 列表项目的符号 |
| disc | 默认值，实心圆 |
| circle | 空心圆 |
| square | 正方形 |
目录列表标记：dir
<dir> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li>...... </dir>
定义列表标记：dl
<dl> <dt>定义条件</dt> <dd>定义描述</dd> .................... </dl>
菜单列表标记：menu
<menu> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li>...... </menu>
表格的创建
表格的基本构成：table tr td
<table>
<tr> <td>单元格内的文字</td> <td>单元格内的文字</td>. ...... </tr>
<tr> <td>单元格内的文字</td> <td>单元格内的文字</td>. ...... </tr>
<tr> <td>单元格内的文字</td> <td>单元格内的文字</td>. ...... </tr>
...............
<table>
设置表格的标题：caption <caption>表格的标题</caption>
表头：th <table> <th>表头内容</th> <th>表头内容</th> .........</table>
表格的宽度：width <table width=”表格宽度”>
表格的高度：height <table height=”表格高度”>
表格对齐方式：align <table align=”对齐方式”>
表格边框宽度：border <table border=”边框宽度”>
表格边框颜色：bordercolor <table border=”边框宽度” bordercolor=”边框颜色”>
内框宽度：cellspacing <table cellspacing=”内框宽度值 ”>
表格内文字与边框间距：cellpadding <table cellpadding=”文字与边框距离值”>
表格背景颜色：bgcolor <table bgcolor=”背景颜色”>
表格背景图像：background <table backgroud=”背景图像地址”>
表格的行属性
高度控制：height <tr height=”行的高度”>
边框颜色：bordercolor <tr bordercolor=”边框的颜色”>
行的背景：bgcolor,background <tr bgcolor=”行的背景颜色”>
行文字的水平对齐方式：align <tr align=”水平对齐方式”>
行文字的垂直对齐方式：valign <tr valign=”垂直对齐方式’>
单元格属性
单元格的大小：width,height <td width=”单元格宽度” height=”单元格高度”>
水平跨度：colspan <td colspan=”跨度的列数”>
垂直跨度:rowspan <td rowspan=”跨度的行数”>
对齐方式：align,valign <td align=”水平对齐方式” valign=”垂直对齐方式”>
单元格的背景颜色：bgcolor <td bgcolor=”背景颜色”>
单元格的边框颜色：bordercolor <td bordercolor=”边框颜色”>
单元格的亮边框颜色：bordercolorlight <td bordercolorlight=”亮边框颜色”>
单元格的暗边框颜色：bordercolordark <td bordercolordark=”暗边框颜色”>
单元格背景图像：background <td background=”背景图像的地址”>
表格的结构
表格的表首标记：thead <thead bgcolor=”背景颜色” align=”对齐方式”> ......................</thead>
表格的表主体标记：tbody <tbody bgcolor=”背景颜色” align=”对齐方式”>.......................</tbody>
表格的表尾标记：tfoot <tfoot bgcolor=”背景颜色” align=”对齐方式”>........................</tfoot>
超链接的创建
相对路径 绝对路径
内部链接
内部链接 <a href=”链接地址”> .................. </a>
链接的目标窗口 <a href=”链接地址” target=”目标窗口的打开方式”>
| 属性值 | 含义 |
| _self | 在当前页面打开链接（默认） |
| _blank | 在一个全新的空白窗口打开链接 |
| _top | 在顶部框架中打开链接，即在根框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
锚点链接
建立锚点 <a name=”锚点的名称”> </a>
链接同一页面的锚点 <a href=”#锚点的名称”> ............ </a>
链接到其他的页面中的锚点 <a href=”链接的文件地址 # 锚点的名称”> ............. </a>
外部链接
链接到外部网站 <a href=”http://...............”> .............. </a>
链接到E-mail <a href=”maitlo:邮件地址”> ............... </a>
链接到FTP <a href=”ftp://ftp 地址”> ................ </a>
链接到Telnet <a href=”telnet://地址”> ............... </a>
下载文件 <a href=”文件地址”> .............. </a>
使用表单
表单标记：form
提交表单：action <form action=”表单的处理程序”>.....</form>
表单名称：name <form name=”表单名称”>....</form>
传送方法：method <form method=”传送方法”>....</form>
编码方式：enctype <form enctype=”编码方式”>.....</form>
| enctype取值 | 取值的含义 |
| application/x-www-form-urlencoded | 默认的编码形式（所有网页的表单使用的可接受类型） |
| multipart/form-data | MIME编码，上传文件的表单必须选择该项 |
目标显示方式：target <form target=”目标窗口的打开方法”>.....</form>
插入表单对象
文字字段：text
<input name=”控件名称” type=”text” value=”文字字段的默认取值” size=”控件的长度” maxlength=”最长字符数”>
| 参数类型 | 含义 |
| type | 用来指定插入那种表单元素，如type=”text”,即为文字字段 |
| name | 文字字段的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但没有大小写区分 |
| value | 用来定义文本框的默认值 |
| size | 确定文本框在页面中显示的长度，以字符为单位 |
| maxlength | 用来设置文本框中最多可以输入的字符数 |
密码域：password
<input name=”控件名称” type=”password” value=”文字字段的默认取值” size=”控件的长度” maxlength=”最长字符数”/>
单选按钮：radio <input name=”单选按钮名称” type=”radio” value=”单选按钮的取值” checked/>
复选框：checkbox <input name=”复选框名称” type=”checkbox” value=”复选框取值” checked/>
普通按钮：button <input type=”button” name=”按钮名称” value=”按钮的取值” οnclick=”处理程序”/>
提交按钮：submit <input type=”submit” name=”按钮名称” value=”按钮的取值”/>
重置按钮：reset <input type=”reset” name=”按钮名称” value=”按钮的取值”/>
图像域：image <input name=”图像域名称” type=”image” src=”图像路径”/>
隐藏域：hidden <input name=”隐藏域名称” type=”hidden” value=”隐藏域的取值”/>
文件域：file <input name=”文件域名称” type=”file” size=”控件的长度” maxlength=”最长字符数”/>
菜单和列表
下拉菜单：
<select name=”下拉菜单名单”>
<option value=”选项值” selected（默认选项）>选项显示内容 </option>
<option value=”选项值”>选项显示内容 </option>
.........
</select>
列表项：
<select name=”列表项名称” size=”显示的列表项数” multipe >
<option value=”选项值” selected>选项显示内容 </option>
<option value=”选项值” >选项显示内容 </option>
..........
</select>
文本域标记：textarea <textarea name=”文本域名称” cols=”列数” rows=”行数”></textarea>
id标记：id <id=”元素的标识名”>
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
