I don't make software; I make it better

HTML复习

上一篇 / 下一篇  2008-12-26 12:53:02 / 个人分类:开发相关

参考文章:

http://www.51testing.com/?59943/action_viewspace_itemid_98728.html

HTML.chm

一、 HTML基础
    1、HTML标记符的作用
    2、网页的基本结构,html、head、title、body标记
    3、网页中插入注释和特殊符号

二、文本格式
    1、字符格式:font、b、i、u、hn
    2、段落格式:p、pre、hr、br
    3、列表格式:ol、ul、li、dl、dt、dd


三、超级链接和图像
    1、超级链接a的使用
    2、插入图像
    3、图像映射

四、表格和框架
    1、表格的使用:table、tr、td和th标记,细线表格和不规则表格
    2、创建框架结构:frameset、frame、iframe

五、其它网页元素
    1、 表单:form、input、textarea、select、label。
    2、滚动字幕marquee
    3、网页插件的使用


六.CSS+DIV
DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
  CSS单元的位置和层次-div标签
  div接口=数字图像数据接口
Cascading Style Sheets(CSS)是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning(CSS-P)是 CSS 的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。

ul: unordered lists
ol: ordered lists
li: Lists
ol 有序列表:
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……

ul 无序列表,表现为li前面是大圆点而不是123:
<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dt dd的用法:
dl 内容块
dt 内容块的标题
dd 内容
可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

七.表格 
看看表格的基本语法:
<table>...</table> - 定义表格
<tr> ...</tr>- 定义表行
<th> ...</th>- 定义表头
<td> ...</td>- 定义表元
  下面看看它的示例:
   <table border="1">     <!--border是表格的边框属性,=“1”,即边框的宽为一象素-->
   <tr>       <!--定义表格的行-->
   <th>Food</th><th>Drink</th><th>Sweet</th>  <!--定义表格的表头,即标题-->
   </tr>      <!--行结束-->
   <tr>
   <td>A</td><td>B</td><td>C</td>   <!--定义表格的表元--> 
   </tr>
   </table>

   跨多行、多列的表元(Table Span)
   跨多列的表元 <th colspan=#>

   <table border>
   <tr><th colspan=3> Morning Menu</th></tr>   <!--colspan=3,跨三列表元-->
   <tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>
   <tr><td>A</td><td>B</td><td>C</td></tr>
   </table>

   跨多行的表元 <th rowspan=#>

   <table border>
   <tr><th rowspan=3> Morning Menu</th>   <!--rowspan=3,跨三行表元-->
       <th>Food</th> <td>A</td></tr>
   <tr><th>Drink</th> <td>B</td></tr>
   <tr><th>Sweet</th> <td>C</td></tr>
   </table>
   其余的如表格居中,间隙,大小等省略。

八.框架
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
 <FRAME SRC="a.htm" NAME="1">
 <FRAME SRC="b.htm" NAME="2">
</FRAMESET>
</HTML> 

九.表单
<FORM>
喜好:
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
</FORM>

十.排版卷标
分段卷标p
<p align="left">文字靠左</p> 文字靠左
<p align="center">文字置中</p> 文字置中
<p align="right">文字靠右</p> 文字靠右
置中卷标<center>
<center>这是最中间</center>
向右缩排卷标<blockquote>
<blockquote>缩排1单位</blockquote> 
<blockquote><blockquote>缩排2单位</blockquote></blockquote>

十一.链接
网站链接 好站 <a href="http://www.wrclub.net">好站</a>
电子邮件链接 写信给朋友 <a href="mailto:fuxing@wrclub.net">写信给朋友</a>
ftp链接 下载档案 <a href="ftp://ftp.wrclub.net">下载档案</a>
news链接 seednet news服务 <a href="news:news.wrclub.net">seednetnews服务</a>
gopher链接 seednet gopher服务 <a href="gopher://gopher.wrclub.net/">seednetgopher服务</a>
bbs链接 seednet gopher服务 <a href="telnet://bbs.wrclub.net/">seednetbbs服务</a>
o target=框窗名称:这在『框架标志』中也有提到,而且也只有在框架(框窗 or frame)中才用得到。正常而言,框窗有各自的名称,因此,我们可以利用此标志,来指定链接的内容显示到哪一个框窗中。

o target=_blank:将链接的画面内容,开在新的浏览窗口中。

o target=_parent:将链接的画面内容,当成文件的上一个画面。

o target=_self:将链接的画面内容,显示在目前的窗口中。

o target=_top:这个参数可以解决新链接的画面内容,被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。

十二.背景标识
背景卷标<body bgcolor="#ffffff" background="bg.jpg">
内文、连结文字颜色设定:<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000">

十三.HTML示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Descrīption" CONTENT="">
  <link rel="" type="text/css" href="">
  <link rel="" type="text/css" href="">
  <scrīpt src="XX/xx/xx.JS" type="txt/javascrīpt">
  <scrīpt src="XX/xx/xx.JS" type="txt/javascrīpt">
  ...
 </HEAD>

 <BODY>
  <scrīpt src="XX.JS" type="text/javascrīpt">
  <scrīpt src="XX.JS" type="text/javascrīpt">
  <div id="head">
 <div class="top">
 <div class="top_banner">
  <div id="logo"></div>
  <div id="HOME_top_fla">
 <div id="new_menu">
  <ul>
   <li class="top_nav4"/>
    <a href="XX.html">首 页</a>
   <li class="top_nav4"/>
   <li class="top_nav4"/>
   ...
  </ul>
 ...
<div id="home_no1">
 </BODY>
</HTML>

 


 


TAG: 开发相关

 

评分:0

我来说两句

Open Toolbar