JavaScript程序设计之HTML文档基础

来源:互联网 发布:自制手机app软件 编辑:IT博客网 时间:2020/02/23 13:06
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>
效果



0 0
原创粉丝点击