HTML网页制作基础

zoukankan html css js c++ java

HTML网页制作基础

HTML文档的结构

示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
    我的第一个html页面
  </BODY>
</HTML>

<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 用来标记你的页面的解码方式。

<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

<BODY>元素的属性概述

    1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor="＃RRGGBB"

        示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY bgcolor="red">
    背影色设置为灰色
  </BODY>
</HTML>

    2. background 属性设置背景图片可使用GIF，JPG

        示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY background="fengjing2_006.jpg">
       设置背景图片
     <br>
  </BODY>
</HTML>

    3. bgproperties="fixed"使背景图片成固定效果，图片不随滚动条滚动。

        示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY background="fengjing2_006.jpg" bgproperties=fixed>
    bgproperties="fixed"<br><br>
    bgproperties设置为fixed  图片不随着滚动条而滚动。
     <br>
  </BODY>
</HTML>

    4 .text 设置非链接文字的色彩。

    5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。

示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY alink="red" link="pink" vlink="green">
<a href="http://www.google.com">点击进入</a>
<a href="http://www.baidu.com">点击进入</a>
  </BODY>
</HTML>

    6. leftmargin和topmargin页面左边的空白距与上边的空白距。

HTML文字设置1

文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。

    第1种方法是直接使用HTML标记进行设置，如:使用粗体标记<B>将文本设置为加粗样式。

    第2种方法是使用css，层叠样式表。

    HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。

    <h1>h1的效果</h1>

    <h2>h2的效果</h2>

    <h3>h3的效果</h3>

    <h4>h4的效果</h4>

    <h5>h5的效果</h5>

    <h6>h6的效果</h6>

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
       <h1>h1的效果</h1>
    <h2>h2的效果</h2>
    <h3>h3的效果</h3>
    <h4>h4的效果</h4>
    <h5>h5的效果</h5>
    <h6>h6的效果</h6>
  </BODY>
</HTML>

    利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。

    align="left / center / right"

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
       <h1 align="left">right的效果</h1>
    <h2 align="center">center的效果</h2>
    <h3 align="right">left的效果</h3>
  </BODY>
</HTML>

HTML文字设置2

<B>设置文字以粗体的方式显示。语法<B>…</B>

<I> 设置文字以斜体显示。语法<I>…</I>

<EM>效果同<l>语法<EM>…</EM>

<SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP>

<SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB>

<U>设置文字以下划线显示。语法<U>…</U>

<S>设置文字以删除线显示。语法<S>…</S>

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
    <B>粗体</B><br>
    <I>斜体</I><br>
    <EM>斜体</EM><br>
    字体<SUP>上标</SUP><br>
    字体<SUB>下标</SUB><br>
    <U>下划线</U><br>
    <S>删除线</S><br>
  </BODY>
</HTML>

<FONT>控制的字体、大小和文字。

    语法：

    <FONT face="字体",size="文字大小",color="颜色值">…</FONT>

face 控制文字使用的字体

    size 控制文字的大小

color 设置文字颜色



HTML段落设置

<P>段落标记，一般情况下在每个段落的前面加上一个<P>标记可以区分段落，又可以换行。

<BR>之后的文字将在下一行显视。

<HR>设置水平线。

<center>标记所有包含的内容，将以居中对齐的方式显示在网页中。

< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来

<NOBR>标记将取消浏览器由于窗口大小变化而换行。

<XMP>在HTML文档中加入<XMP>标记，使标记内的HTML标记不起作用。

    示例：

    <HTML>
    <HEAD>
       <title>标题部分</title>
    </HEAD>
    <BODY>
       这是一个段落标记。<p>
     <p>
    这是一个<br><br>
    <hr >
    <center>居中显示</center><br>
    <PRE>
    abc    #sdfsd%#%     de        f g!
         <>    sdfsad s$!@$(  h      $#@#%%  i    dsfasf          jk
    </PRE>
    天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然后变得黑暗无边

    <NOBR>
    天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然后变得黑暗无边
    </NOBR>
    <XMP>
    <HTML>
      <HEAD>
         <title>标题部分</title>
      </HEAD>
    <BODY>
       这是一个段落标记。<p>
     <p>
    这是一个<br><br>
    <hr >
    <center>居中显示</center><br>
     </XMP>
    </BODY>
</HTML>

HTML的转义字符--HTML 跑动文

<MARQUEE> 标记可使文字产生跑动的效果

    direction 文字走动方向

    bgcolor 设置文字背景颜色

    height 设置跑动文字的高度

    width 设置跑动文字的宽度

    hspace 设置文字的水平边距

    vspace 设置文字的上边距

    behavior 设置文字的运动方式 scroll/alternate/slide

    loop 设置跑动文字的圈数

    scrollamount 设置跑动文字移动速度

    scrolldelay 设置跑动文字移动延时

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
    <MARQUEE>
    文字
    </MARQUEE>
  </BODY>
</HTML>

示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
        "<br>
        <<br>
        ><br>
        ±<br>
        ×<br>
        &<br>
        §<br>
        ¢<br>
        ¥<br>
        ·<br>
        €<br>
        £<br>
        ™<br>
        &copy<br>
        ®
  </BODY>
</HTML>

HTML超链接

超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。

格式:<A>这是一个连接</A>

    href 设置超链接目标地址URL

    name 在html文档中建立特定位置的名称

    target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top

    accesskey 设置超链接的快捷键

    title 设置超链接的说明文字

    style 运用css样式设置超链接文字样式

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
    <a href="../07-a.html" name="07html" target="_blank"
         title="说明文字" accesskey="q" >html链接</a>
  </BODY>
</HTML>

HTML超链接的锚点

是指同一页面中的不同位置链接。

一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。

    示例：

<HTML>
  <HEAD>
     <title>标题部分</title>
  </HEAD>
  <BODY>
<a name="top"></a>
  08-A.html
  <hr>
<a href="08-a.html#abc" name="cba" >页面内的锚点1-_-</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="08-b.html#08b" name="08a" >页面外的锚点1…………</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="08-a.html#cba" name="abc">页面内的锚点2</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href=#top>返回顶部</a>
  </BODY>
</HTML>

HTML有序列表

列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。

<OL type="编号样式" start="编号起始值">

        <LI>项目一</LI>

        <LI>项目二</LI>

        ....

    </OL>

    type

        1 阿拉伯数字

        a 英文小写

        A 英文大写

        i 罗马小写数字

        I 罗马大写数字

    start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B.

    示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
    <DL>
      <DT>☆<DD>无序列表</DD>
      <DT>☆<DD>有序列表</DD>
      <DT>☆<DD>定义列表</DD>
    </DL>
    <DL>
         <DT>无序列表</DT><DD>不以数字为开始，而是使用一个符号作为分项标记的列表。</DD>
         <DT>有序列表</DT><DD>使用数字编号，分项带有顺序性质的列表。</DD>
         <DT>定义列表</DT><DD>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</DD>
    </DL>
</body>
</html>

HTML无序列表

无序列表标记

<UL>

    <LI>项目一</LI>

    <LI>项目二</LI>

    ....

</UL>

type

    circle 空心圆

    disc 圆点

    square 正方形

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
<ol type="I" start="2">
    <li>啊啊</li>
    <li>啊啊</li>
    <li>啊啊</li>
    <li>啊啊</li>
</ol>
</body>
</html>

HTM自定义列表

<DL>

    <DT>无序列表</DT><DD>不以数字为开始，而是使用一个符号作为分项标记的列表。</DD>

    <DT>有序列表</DT><DD>使用数字编号，分项带有顺序性质的列表。</DD>

    <DT>定义列表</DT><DD>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</DD>

</DL>

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
<ul type="disc">
    <li>啊啊</li>
    <li>啊啊</li>
    <li>啊啊</li>
    <li>啊啊</li>
</ul>
</body>
</html>

HTML建立表格

使用表格可以划分页面的布局

格式：<table>..</table>

<table>

<tr><td>表格中的一行数据</td></tr> 

<tr><td>表格中的二行数据</td></tr> 

<tr><td>表格中的三行数据</td></tr> 

</table>

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
    <table border="1">
        <tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
        <tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
        <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
     </table>
</body>
</html>

<table>标签的属性

border     设置表格边框

caption    设置表格标题

align     设置表格在网页中的布局

width     设置表格宽度

height     设置表格高度

cellspacing    设置表格各单元格之间距离

cellpadding    设置单元格内部与文本之间的间距

bordercolor    设置表格边框颜色

bordercolorlight     设置表格亮面颜色

Bordercolordark 设置表格暗面颜色

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
    <table border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00">

        <tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
        <tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
        <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
    </table>
</body>
</html>

<tr>标签的属性

bgcolor 设置背景颜色。

align 设置行对齐方式。

valign 设置单元格垂直对齐方式。

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
   <table  width="400" border="1">
     <tr bgcolor="#0099FF"><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
     <tr align="right"><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
     <tr valign="top"><td height="50">表格中的三行数据</td><td>表格中的三行数据</td></tr>
   </table>
</body>
</html>

<td>和<th> 标签的属性

bgcolor 设置单元各背景颜色

rowspan 设置单元格所占行数

colspan 设置单元格所占的列数

align 设置对齐方式

valign 设置单元格垂直对齐方式

width 设置单元格宽度

height 设置单元格高度

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
<table  width="400" border="1">
    <tr><td bgcolor="#0099FF">表格中的一行数据</td><td align="center">表格中的一行数据</td></tr>
            <tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
            <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
    </table>
        <hr>
        <B>rowspan</B>
          <table  width="400" border="1">
        <tr> <td rowspan="3">一行数据</td> <td>第一行数据</td></tr>
        <tr>     <td>第二行数据</td></tr>
            <tr>  <td>第三行数据</td></tr>
        </table>
        <hr>
        <B>colspan</B>
        <table  width="400" border="1">
            <tr><td colspan="2">第一行数据</td></tr>
            <tr><td>第二行数据</td><td>第二行数据</td></tr>
                <tr><td>第三行数据</td><td>第三行数据</td></tr>
        </table>
        <hr>
        <B>th</B>
        <table border="1">
            <tr><th>表格中的一行数据</th><th>表格中的一行数据</th></tr>
            
            <tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
            <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
    </table>
</body>
</html>

HTML特殊表格

Rules 设置单元格的特效

Fieldset 设置特殊表格

示例：

<html>
<head>
    <title>标题</title>
</head>
<body>
    <table width="200" border="1" rules="rows" >
          <tr> <td>第一行</td> <td>第一行</td></tr>
          <tr> <td>第二行</td> <td>第二行</td></tr>
    </table>
    <table border="0" width="100" bgcolor="#000000" cellspacing="1" cellpadding="0">
        <tr bgcolor="#FFFFFF"><td>细线表格</td><td>细线表格</td></tr>
        <tr bgcolor="#FFFFFF"><td>细线表格</td><td>细线表格</td></tr>
    </table>
    <table border="1"   bordercolorlight="#ffffff" bordercolordark="#ffffff">
        <tr><td bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格</td></tr>
        <tr><td bgcolor="#B7B7B7" bordercolorlight="#000000"   >立体表格</td></tr>
    </table>
    <fieldset style="50">
        <legend> 公告 </legend>
        更多更新视教程，请到www.jz97.net
    </fieldset>
</body>
</html>

HTML 表单

表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

<form name="f1"    action="处理表单用的URL" method="get或post" >

</form>

    1、name：设置表单的名称。

    2、action：设置表单的处理程序的URL。

    3、method：提交表单的方法。

示例：

<!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>
</head>

<body>
<form name="f1" action="request.asp" method="post">
    <p>请输入用户名:
        <input name="txt" type="text" size="10" maxlength="7" />
        <br>
        请输入密  码:
        <input name="pwd" type="password" size="10" maxlength="6"  />
        <br>
        选择强项：<br>
        体育
        <input type="checkbox" name="ck" value="体育" />
        音乐
        <input type="checkbox"  name="ck" value="音乐"  />
        跳舞
        <input type="checkbox"  name="ck" value="跳舞" />
        <br>
        男<input type="radio" name="sex" value="男" checked="checked" />女<input type="radio" name="sex" value="女" /><br>
        <select name="sn">
              <option selected>中国</option>
              <option>美国</option>
             <option>韩国</option>
           </select>
        <br>
        <input name="确定" type="submit" id="确定" value="提交" />
        <input name="re" type="reset" value="重置"  />
    </p>
</form>
</body>
</html>

HTML表单中常用的标记

    输入域<input>一般在表单中使用

1、<input type="text" />输入单行文字

2、<input type="password"/>输入密码

3、<input type="radio" /> 单选按钮

4、<input type="checkbox" />多选按钮

5、<input type="image" />图片

6、<input type="file" /> 文件上传

7、<input type="hidden" />隐藏域

8、<input type="reset" />撤销按钮

9、<input type="submit" />提交按钮

10、<input type="button" />普通按钮

    示例：

<!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>
</head>

<body>
    <form>
        输入单行文字<input type="text"  /><br>
        输入密码<input type="password"/><br>
        单选按钮<input type="radio" name="abc" />
                 <input type="radio" name="abc" /><br>
        多选按钮<input type="checkbox" name="ab" />
                 <input type="checkbox" name="ab" /><br>
        图片域<input type="image" src="29.gif"  /><br>
        文件上传<input type="file" /><br>
        隐藏域<input type="hidden" /><br>
        撤销按钮<input type="reset" value="撤销按钮" /><br>
        提交按钮<input type="submit" value="提交按钮" /><br>
        执行脚本<input type="button"  value="普通按钮" onclick="prompt()" /><br>
        <textarea name="t1" rows="4" cols="50">
            文本域
        </textarea>
        <br>
             <select name="selectname">
              <option >中国</option>
              <option selected="selected" >美国</option>
             <option  >韩国</option>
           </select>
    </form>
</body>
</html>

HTML表单中常用的标记

多行文本输入标记<textarea>

<textarea name="t1",rows=x,cols=x>

……

</textarea>

name 设置识别名称。

rows 设置文本域的行数

cols 设置文本域的列数

disabled 设置文本为禁用

warp 设置为off 不换行

HTML     表单中常用的标记

选择域<select>

     <select name=selectname>

    <option selected>选项一</option>

    < option >选项二</option>

    ¡¡

</select>

HTML表单提交数据

    html提交数据时必须设置<input>标签name和value属性，以便asp程序能获取相应的值。

HTML 的框架

使用框架可以划分页面

</head>

<frameset cols="20%,80%">

        <frame src=" A.html " >

        <frame src=" B.html ">

</frameset>

<body>

示例：

<html>
    <head>
        <title>HTML 框架</title>
    </head>
    <frameset cols="20%,*" framespacing="2" frameborder="yes">
        <frame src="A.html" name="framename" >
        <frame src="B.html" scr="B.html">
    </frameset><noframes></noframes>

    <body>
    </body>
</html>

A.html:

<html>
<head>
    <title>HTML 框架</title>
</head>

<body>

A页面-----------<br>A页面<br>A页面<br>A页面<br>
A页面<br>A页面<br>A页面<br>A页面<br>
</body>
</html>

B.html:

<html>
<head>
    <title>HTML 框架</title>
</head>

<body>
    B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>
    B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>
</body>
</html>

HTML frameset标签的属性

cols =size 设置列的大小

rows=size 设置行的大小

frameborder 是否显示边框yes/no,1/0

framespacing 设置分割条大小

HTML frame标签的属性

src 设置要链接的HTML 文件

name 窗体的名称

marginwidth 设置窗口左右边界的距离

Marginheight 设置窗口上下边界的距离

scrolling 设置窗口是否使用滚动条 yes/no 默认为auto

noresize 不能调整窗口大小

示例：

<!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>
    </head>
    <body>
    </body>
</html>

HTML iframe 标签

使用格式：

    <iframe src=URL name=iframename>

    …

    </iframe>

src 设置要链接的HTML文件

frameborder 是否显示边框yes/no,1/0

width 设置宽度

height 设置高度

scrolling设置窗口是否使用滚动条 yes/on默认为auto

示例：

<html>
    <head>
        <title>HTML 框架</title>
    </head>
    <iframe src=A.html name="iframename" width="400" height="300" frameborder="yes" scrolling="yes" >不支持iframe</iframe>
    <body>
        <A href="http://www.google.com" target="iframename">进入谷歌</A>
    </body>
</html>

HTMl 加入图像<img>

插入图片的元素标记

格式: <img> ..</img>

常用属性:

src ="图片源地址"

alt ="替换文字"

width ="宽度"

height ="高度"

hspace ="垂直边距"

vspace ="水平边距"

border ="边框"

align ="对齐方式"

示例：

<!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>
</head>

<body>
    <img src="03.gif" alt="按此在新窗口打开图片" width="110" border="0" onclick="window.open(this.src);"

onmouseover="this.style.cursor='hand';" onload="if(this.width>=111) {this.width=300;}">
</body>
</html>

HTML 加入声音1

<embed src="spain.mp3" autostart="true" loop="true" >

</embed >

src="文件的位置URL"

autostart="true/false"自动启动

loop="循环次数"

示例：

<!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>
    <script language="javascript">
        var bool=true;
        function next()
        {
            if(bool==true)
            {
                 bool=false;
                 bg.src="dt.mp3";

            }
            else
            {
                bool=true;
                bg.src="spain.mp3";
            }
        }
        function Min()
        {     if(bg.volume==-10000)
            {
                return;
            }
            else
            {
            bg.volume-=500;
            this.txt.value=bg.volume;
            }
        }
        function Max()
        {     if(bg.volume==0)
            {
                gb.Max.disabled="disabled"
                return;
            }
            else
            {
            bg.volume+=500;
            this.txt.value=bg.volume;
            }
        }
    </script>
</head>

<body>

    <bgsound src="spain.mp3" volume="0" balance="-1" loop="true" id="bg">
    <input type=button value="静音" onclick="bg.volume=-10000">
    <input type=button value="撤销静音" onclick="bg.volume=0">
    <input type=button value="音量++" onclick="Max()" id="Max" >
    <input type=button value="音量--" onclick="Min()" id="Min">
    <input type=button value="下一首" onclick="next()">
    <input type="text" id="txt"/>
</body>
</html>

HTML 加入声音2

<bgsound src="spain.mp3" volume="" balance="" loop="">

src ="文件的位置URL"

volume="音量" -10000到0之间 0最高音量

balance="声道"-10000到10000之间的值

loop="循环次数"

HTML 加入视频

<object>

    <param name="movie" value="139.swf">

    <param name="wmode"value="transparent">

</object>

示例1：

<html>
    <head>
        <title>无标题文档</title>
    </head>
    <body bgcolor="#666666">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"

            width="485" height="111">
              <param name="movie" value="139.swf">
              <param name="wmode" value="transparent">
        </object>
    </body>
</html>

示例2：

<!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>
</head>

<body>
    <embed  height="80"  src="2.swf" >
    </embed>

</body>
</html>

HTML DIV与CSS样式

DIV＋CSS是网页设计标准

可以把这个DIV元素看作一个层，也可以把他看成一个容器。他是用来在页面上具体定位的一个层。

CSS是Cascading Style Sheets(层叠式样式表)的简称.

    1使页面加载更快 2修改设计更有效率

    3代码从用度高

HTML CSS样式-内联式样式

内联式样式：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。

基本格式：

<HTML标签 style="CSS 样式" >

CSS控制显示区域

</HTML 标签>

示例：

<html>
    <head>
        <title>无标题文档</title>

        <style type="text/css">
             a:link{ font-size:1cm;}
             a:hover{color:#00FF00;}
             a:visited{color:#0033FF}
        </style>
    </head>

    <body>
        <a href="http://google.com">aaaaaa</a>
    </body>
</html>

HTML CSS样式-嵌入式样式

嵌入式样式：它和Javascript一样可以嵌入到HTML文件的头部中（<html>和<body>标记之间），使用<Style>和</Style>容器装载，例如：

     <style>

         p {color : red ; font-weight : bold} </style> ，

这样会对页面中所有<p>标记都起作用

HTML CSS样式-外部式样式

外部式样式：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名。

    例如:

    <link rel="stylesheet" href="demo.css" type="text/css">

HTML CSS样式-输入式样式

输入样式表：

    @import url(demo.css);

作用:导入CSS文件。

HTML - CSS标签选择器

标签选择器

class选择器

id选择器

关联选择器

组合选择器

伪元素选择器

HTML – DIV网页布局

使用DIV+CSS布局，使页面代码更精简。

示例_index.html：

<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
     <div id="one">
        <div id="left"></div>
        <div id="center">
            <div id="head">head</div>
            <div id="bd">
                  <div id="bd_left">
                    <div id="login">  <br>
                        <form>
                        <p>    登录：<input type="text" class="text"><br>
                            密码：<input type="password" class="text"><br>
                            <input type="checkbox">保存Cookies<br>
                            <input type="submit" value="确定"  class="button" >
                            <input type="reset" value="撤销" class="button">
                        </form>
                    </div>
                    <div class="count"><div class="count_1">统计信息</div> </div>
                    <div class="count"><div class="count_2">排行榜</div></div>
                    <div class="count"><div class="count_2">排行榜</div></div>
                </div>
                <div id="bd_right">
                    <div class="bd_right1"><div class="bd_right_1"><a href="#">最新动态</a></div>
                    <ul type="square">
                        <li>欢迎到www.jz97.net
                        <li>欢迎到www.jz97.net
                        <li>欢迎到www.jz97.net
                        <li>欢迎到www.jz97.net
                    </ul>
                    </div>
                    <div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
                    <div class="bd_right1"><div class="bd_right_1">最新动态</div></div>
                    <div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
                    <div class="bd_right1"><div class="bd_right_1">最新动态</div></div>
                    <div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
                </div>
            </div>
            <div id="food">food</div>
        </div>
        <div id="right"></div>
    </div>
  </body>
</html>

示例_demo.css:

/* CSS Document */

body{ text-align:center; background:#e5eef5; margin:0px;}

#one{ background:#f6f6f6; width:816; height:1200px;}

#left{ width:8px; height:1200px; background:url(img/left1.gif); float:left}

#center{ width:800px; height:1200px; background:#FFFFFF; float:left}

#right{ width:8px; height:1200px; background:url(img/right1.gif); float:right}

#head{ width:800px; height:80; background:#e5eef5; float:left}

#bd{ width:800px; height:1000px; background:#f6f6f6; margin-top:20px;}

#food{width:800px; height:80px; background:#e5eef5; margin-top:20px;}

#bd_left{ width:230px; height:1000px; float:left;}

#bd_right{ width:570px; height:1000px; float:right;}

#login{ width:200px; height:120px; margin-top:20px;border:1px solid #84b0c7; background:#FFFFFF}

.count{ width:200px; height:230px; background:#f6f6f6; margin-top:20px;border:1px solid #84b0c7;}

.bd_right1{ width:260px; height:310px; margin-top:20px; border:1px solid #84b0c7; background:#f6f6f6; float:left; text-align:left}

.bd_right2{ width:260px; height:310px; margin-top:20px; border:1px solid #84b0c7; background:#f6f6f6; float:right; margin-right:20px;text-align:left}

p{ font-size:12px; color:#0099FF}

.text{ border-style:groove; width:100px; height:20px;}

.button{ border-style:none; background:#FFFFFF; border-bottom-style:inset; border-right-style:inset}

.count_1{ width:196; height:20px; margin-top:2px; background:#f3f3e5}

.count_2{ width:196; height:20px; margin-top:2px; background:f3e5e5}

.bd_right_1{width:256; height:20px; margin-top:2px; background:e5eef5}

查看全文

相关阅读:
Timer 实现2秒4秒连环炸
 Java中的注解
 PHP连接打印机
 php同步mysql两个数据库中表的数据
 thinkphp 两表、三表联合查询
 ereg/eregi报错处理办法
 ThinkPHP3.2判断手机端访问并设置默认访问模块的方法
 使用PHP获取时间今天明天昨天时间戳的详解
 jquery获取radio和select选中值
 php开启mysqli扩展之后如何连接数据库

原文地址：https://www.cnblogs.com/luowei010101/p/2053750.html