JavaScript程序设计之HTML文档基础

时间：2014-03-20 18:28:01 阅读：518 评论：0 收藏：0 [点我收藏+]

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>

效果

bubuko.com,布布扣

JavaScript程序设计之HTML文档基础,布布扣,bubuko.com

JavaScript程序设计之HTML文档基础

原文：http://blog.csdn.net/u012505695/article/details/21638135

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)