您的位置：首页 > Web前端 > JavaScript

JavaScript程序设计之HTML文档基础

2014-03-20 18:05 197 查看
1.文字设置：

<br>强制换行

<hr>水平线 

noshade无阴影

<style>...</style>标记定义CSS式样表

<script>...</script>用于插入脚本语言

<h1>~<h6>一级到六级标题

<font>...</font>文本格式

face字体

字符的实体名称以&开始，以；结束

<strong>...</strong>或<b>...</b>表示粗体

<i>...</i>或<em>...</em>斜体

<u>...</u>带下划线的文字

<sup>...</sup>上标样式

<s>...</s>或<strike>...</strike>添加删除线

2.段落设置：

<p align="对齐方式">...</p>对齐方式可以为left，center，right

<ul>...</ul>无序表里面常嵌套<li>...</li>表示一个项目的开始

<ol>...</ol>有序表

例：

<u1 type="circle"><li>分类</li></ul>

表示为
o分类

<ol type"a" start="1"><li>分类</li></ol>

表示为
a.分类

3.链接设置：

<a>...</a>超链接标志

<a href="相对路径" target="目标窗口的打开方式"></a>

需注意相对路径和绝对路径的区别

4.图片设置：

src设置图片所在的路径

hspace两个图片间的水距离

vspace图片与文字间的垂直距离

align设置图片的对齐方式

alt显示提示文字

5.表格设置

<table>...</table>表格的开始结束标志

<caption>...</caption>标题单元格

<th>...</th>表头标记

<tr>...</tr>行标记

<td>...</td>单元格标记

bodercolor表格边框的颜色

cellspacing单元格与单元格之间的宽度

cellpadding表格内文字与边框的颜色

bgcolor设置表格的背景颜色

background表格的背景图像

align文字水平对齐方式

valign文字垂直对齐方式

colspan合并单元格（水平方向）

rowspand合并表格的行（垂直方向）

6.框架设置

<frameset>...</frameset>框架容器标记

<frame>...</frame>框架页面标记

rows框架水平宽度

cols垂直分割窗口宽度

frameborder框架边框，属性为1为显示，为0为隐藏

framespacing边框宽度

noresize禁止改变框架的尺寸

marginwidth页面左右边缘与框架边框的宽度

scrolling滚动条

<iframe>...</iframe>浮动框架

7.多媒体设置

<embed>...</embed>多媒体标记

autostart是否自动播放，有true和false两个属性
loop是否循环播放

8.课程表设计实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;

charset=gb2312" />
<title>无标题</title>
<style type="text/css">
<!--
.STYLE1 {font-size: x-large}
-->
</style>
</head>

<body><caption>
<div align="center" class="STYLE1">课程表</div>
<table width="600" border="2" align="center" cellpadding="10"

cellspacing="4">
<tr>
<th width="350" height="30" bgcolor="#999933"

scope="col">2012第一学期</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期一</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期二</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期三</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期四</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期五</th>
<th width="350" height="30" bgcolor="#999933" scope="col">星

期六</th>

</tr>
<tr>
<td rowspan="4" bgcolor="#00FFFF"><div align="center">上午

</div></td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
</tr>
<tr>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
<td bgcolor="#00FF33"> </td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FF00FF"><div align="center">下午

</div></td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
<td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
</tr>
<tr>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
<td bgcolor="#00FF99"> </td>
</tr>
<tr>
<td rowspan="2" bgcolor="#FF00CC"><div align="center">晚上

</div></td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
</tr>
<tr>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
<td bgcolor="#FF00CC"> </td>
</tr>
</table>

</body>
</html>效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html
相关文章推荐
新的分享
章节导航