HTML网页制作基础_js网页设计基础-CSDN博客

本文链接：https://blog.csdn.net/luowei505050/article/details/6438176

HTML文档的结构

示例：

标题部分


 我的第一个html页面

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

用来标记你的页面的解码方式。

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

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

元素的属性概述

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

示例：

标题部分

 bgcolor="red">
 背影色设置为灰色

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

示例：

标题部分

 background="fengjing2_006.jpg">
 设置背景图片

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

示例：

<HTML>

 标题部分

 background="fengjing2_006.jpg" bgproperties=fixed>
 bgproperties="fixed"

 bgproperties设置为fixed 图片不随着滚动条而滚动。

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

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

示例：

标题部分

 alink="red" link="pink" vlink="green">
href="http://www.google.com">点击进入
href="http://www.baidu.com">点击进入

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

HTML文字设置1

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

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

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

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

h1的效果

h2的效果


h3的效果


h4的效果


h5的效果


h6的效果

 示例：


 标题部分



h1的效果


h2的效果


h3的效果


h4的效果


h5的效果


h6的效果



 利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。
 align="left / center / right"
 示例：
<HTML>

 标题部分



align="left">right的效果


align="center">center的效果


align="right">left的效果



HTML文字设置2
设置文字以粗体的方式显示。语法…
设置文字以斜体显示。语法…
效果同语法…
设置文字以上标文本效果显示。语法^…
设置文字以下标文本效果显示。语法_…
设置文字以下划线显示。语法…
~~设置文字以删除线显示。语法…~~
 ~~示例：~~
<HTML>

 标题部分


 粗体

 斜体

 斜体

 字体上标

 字体下标

 下划线

 ~~删除线~~



~~控制的字体、大小和文字。~~
 ~~语法：~~
 ~~字体",size="文字大小",color="颜色值">…~~
~~face 控制文字使用的字体~~
 ~~size 控制文字的大小~~
~~color 设置文字颜色~~

~~HTML段落设置~~
~~段落标记，一般情况下在每个段落的前面加上一个~~
~~标记可以区分段落，又可以换行。~~

~~之后的文字将在下一行显视。~~

设置水平线。
标记所有包含的内容，将以居中对齐的方式显示在网页中。

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

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

&lt;/span&gt;&lt;span style="font-family:宋体"&gt;在&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;HTML&lt;/span&gt;&lt;span style="font-family:宋体"&gt;文档中加入&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;XMP&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标记，使标记内的&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;HTML&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标记不起作用。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt; &lt;/span&gt;&lt;/p&gt;&lt;p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;strong&gt;示例： &lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;span style="color:blue"&gt;HTML&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;title&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标题部分&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/title&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;BODY&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个段落标记。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;p&amp;gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;p&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;br&amp;gt;&lt;span style="color:blue"&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;hr&lt;/span&gt;&nbsp;&lt;span style="color:blue"&gt;&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;center&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;居中显示&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/center&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;PRE&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;abc&nbsp;&nbsp;&nbsp;&nbsp;#sdfsd%#%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f&nbsp;g!&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;&gt;&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;sdfsad&nbsp;s$!@$(&nbsp;&nbsp;h&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$#@#%%&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;dsfasf&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jk&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/PRE&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;天空在不断的变暗&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;但在玻璃窗的边缘&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;留下了一丝宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的深邃&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像大海深处的暗淡&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的忧郁&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像我心底深处的盘旋&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;多么渴望留住这一丝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这最后的暗淡宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;可时间的蔓延&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;总要将它消逝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;然后&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;变得黑暗无边&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;NOBR&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;天空在不断的变暗&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;但在玻璃窗的边缘&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;留下了一丝宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的深邃&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像大海深处的暗淡&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;那样的忧郁&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;像我心底深处的盘旋&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;多么渴望留住这一丝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这最后的暗淡宝石的蓝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;可时间的蔓延&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;总要将它消逝&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;然后&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;变得黑暗无边&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/NOBR&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;XMP&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HTML&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;title&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;标题部分&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/title&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;/HEAD&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;BODY&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个段落标记。&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;p&amp;gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;p&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;这是一个&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&amp;lt;br&amp;gt;&lt;span style="color:blue"&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;hr&lt;/span&gt;&nbsp;&lt;span style="color:blue"&gt;&gt;&lt;/span&gt;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;&lt;center&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family:宋体"&gt;居中显示&lt;/span&gt;&lt;span style="font-family:Consolas"&gt;&lt;span style="color:blue"&gt;&lt;/center&gt;&lt;br&gt;&lt;/span&gt;&nbsp;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="color:blue"&gt;



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

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

 direction 文字走动方向

 bgcolor 设置文字背景颜色

 height 设置跑动文字的高度

 width 设置跑动文字的宽度

 hspace 设置文字的水平边距

 vspace 设置文字的上边距

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

 loop 设置跑动文字的圈数

 scrollamount 设置跑动文字移动速度

 scrolldelay 设置跑动文字移动延时

 示例：

<HTML>

 标题部分



 文字



示例：


 标题部分


 "

 <

 >

 ±

 ×

 &

 §

 ¢

 ¥

 ·

 €

 £

 ™

 ©

 ®


HTML超链接

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

格式:这是一个连接

 href 设置超链接目标地址URL

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

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

 accesskey 设置超链接的快捷键

 title 设置超链接的说明文字

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

 示例：

<HTML>

 标题部分


 href="../07-a.html" name="07html" target="_blank"
 title="说明文字" accesskey="q" >html链接


HTML超链接的锚点

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

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

 示例：

<HTML>

 标题部分


name="top">
 08-A.html


href="08-a.html#abc" name="cba" >页面内的锚点1-_-

href="08-b.html#08b" name="08a" >页面外的锚点1…………

href="08-a.html#cba" name="abc">页面内的锚点2

href=#top>返回顶部


HTML有序列表

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

编号样式 " start=" 编号起始值 ">



项目一



项目二

 ....



 type

 1 阿拉伯数字

 a 英文小写

 A 英文大写

 i 罗马小写数字

 I 罗马大写数字

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

 示例：

<html>

 标题



 ☆
无序列表

 ☆
有序列表

 ☆
定义列表





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

 有序列表
使用数字编号，分项带有顺序性质的列表。

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



HTML无序列表

无序列表标记



项目一



项目二

 ....

type

 circle 空心圆

 disc 圆点

 square 正方形

示例：

 标题

type= "I" start= "2">

啊啊


啊啊


啊啊


啊啊

HTM自定义列表


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


有序列表
使用数字编号，分项带有顺序性质的列表。


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

示例：

 标题

type= "disc">

啊啊


啊啊


啊啊


啊啊

HTML建立表格

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

格式：

..

表格中的一行数据
表格中的二行数据
表格中的三行数据

示例：

 标题


border "1">

=
表格中的一行数据表格中的一行数据

表格中的二行数据表格中的二行数据

表格中的三行数据表格中的三行数据


标签的属性

border 设置表格边框

caption 设置表格标题

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

width 设置表格宽度

height 设置表格高度

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

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

bordercolor 设置表格边框颜色

bordercolorlight 设置表格亮面颜色

Bordercolordark 设置表格暗面颜色

示例：

<html>

 标题



border "1" width "50%" height "100" bordercolorlight "#FF0000" bordercolordark "#00FF00">

= = = = =
表格中的一行数据表格中的一行数据

表格中的二行数据表格中的二行数据

表格中的三行数据表格中的三行数据


标签的属性

bgcolor 设置背景颜色。

align 设置行对齐方式。

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

示例：

<html>

 标题


width "400" border "1">
bgcolor "#0099FF">
align "right">
valign "top">

 = =
=
表格中的一行数据表格中的一行数据

=
表格中的二行数据表格中的二行数据

=
height="50">表格中的三行数据表格中的三行数据


和标签的属性

bgcolor 设置单元各背景颜色

rowspan 设置单元格所占行数

colspan 设置单元格所占的列数

align 设置对齐方式

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

width 设置单元格宽度

height 设置单元格高度

示例：

<html>

 标题

width "400" border "1">

 = =
bgcolor="#0099FF">表格中的一行数据 align="center">表格中的一行数据

表格中的二行数据表格中的二行数据

表格中的三行数据表格中的三行数据



 rowspan
 width"400"border"1">

 = =

rowspan="3">一行数据

第一行数据


第二行数据


第三行数据



 colspan
 width"400"border"1">

 = =
colspan="2">第一行数据

第二行数据第二行数据

第三行数据第三行数据



 th
 border"1">

=
表格中的一行数据表格中的一行数据

表格中的二行数据表格中的二行数据

表格中的三行数据表格中的三行数据


HTML特殊表格

Rules 设置单元格的特效

Fieldset 设置特殊表格

示例：

<html>

 标题


width "200" border "1" rules "rows" >

= = =

第一行

第一行


第二行

第二行

 border"0"width"100"bgcolor"#000000"cellspacing"1"cellpadding"0">
bgcolor"#FFFFFF">
bgcolor"#FFFFFF">

= = = = =
=
细线表格细线表格

=
细线表格细线表格

 border"1"bordercolorlight"#ffffff"bordercolordark"#ffffff">

= = =
bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格

bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格


style= "width:50">
 公告
 更多更新视教程，请到 www.jz97.net



HTML 表单

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

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

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

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

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

示例：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />
无标题文档

name= "f1" action= "request.asp" method= "post">

请输入用户名:
 name="txt" type="text" size="10" maxlength="7" />


 请输入密 码:
 name="pwd" type="password" size="10" maxlength="6" />


 选择强项：

 体育
 type="checkbox" name="ck" value="体育" />
 音乐
 type="checkbox" name="ck" value="音乐" />
 跳舞
 type="checkbox" name="ck" value="跳舞" />


 男 type="radio" name="sex" value="男" checked="checked" />女 type="radio" name="sex" value="女" />


name="sn">






 name="确定" type="submit" id="确定" value="提交" />
 name="re" type="reset" value="重置" />


HTML表单中常用的标记

 输入域一般在表单中使用

1、"text" />输入单行文字

2、"password"/>输入密码

3、"radio" /> 单选按钮

4、"checkbox" />多选按钮

5、"image" />图片

6、"file" /> 文件上传

7、"hidden" />隐藏域

8、"reset" />撤销按钮

9、提交按钮

10、"button" />普通按钮

 示例：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />
无标题文档



 输入单行文字 type="text" />

 输入密码 type="password"/>

 单选按钮 type="radio" name="abc" />
 type="radio" name="abc" />

 多选按钮 type="checkbox" name="ab" />
 type="checkbox" name="ab" />

 图片域 type="image" src="29.gif" />

 文件上传 type="file" />

 隐藏域 type="hidden" />

 撤销按钮 type="reset" value=" 撤销按钮 " />

 提交按钮 type="submit" value=" 提交按钮 " />

 执行脚本 type="button" value=" 普通按钮 " onclick="prompt()" />

 name="t1" rows="4" cols="50"> 文本域 



name="selectname">






HTML表单中常用的标记

多行文本输入标记<textarea name="t1",rows=x,cols=x> …… 

name 设置识别名称。

rows 设置文本域的行数

cols 设置文本域的列数

disabled 设置文本为禁用

warp 设置为off 不换行

HTML 表单中常用的标记

选择域


 选项一

 < option >选项二

 ¡¡

HTML表单提交数据

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

HTML 的框架

使用框架可以划分页面

"20%,80%">





示例：

<html>

 HTML 框架

 cols="20%,*" framespacing="2" frameborder="yes">
 src="A.html" name="framename" >
 src="B.html" scr="B.html">





A.html:

 HTML 框架



A页面----------- A页面
A页面
A页面

A页面
A页面
A页面
A页面

B.html:

 HTML 框架


 B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面

 B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面
B页面

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">
xmlns="http://www.w3.org/1999/xhtml">

 http-equiv="Content-Type" content="text/html; charset=gb2312" />
 无标题文档




HTML iframe 标签

使用格式：



 href="http://www.google.com" target="iframename">进入谷歌


HTMl 加入图像

插入图片的元素标记

格式: ..

常用属性:

src ="图片源地址"

alt ="替换文字"

width ="宽度"

height ="高度"

hspace ="垂直边距"

vspace ="水平边距"

border ="边框"

align ="对齐方式"

示例：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

 http-equiv="Content-Type" content="text/html; charset=gb2312" />
 无标题文档

 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;}">

HTML 加入声音1

src="文件的位置URL"

autostart="true/false"自动启动

loop="循环次数"

示例：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

 http-equiv="Content-Type" content="text/html; charset=gb2312" />
 无标题文档
 <scriptlanguage="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>

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

HTML 加入声音2

src ="文件的位置URL"

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

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

loop="循环次数"

HTML 加入视频

示例1：


 无标题文档

 bgcolor="#666666">



示例2：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

 http-equiv="Content-Type" content="text/html; charset=gb2312" />
 无标题文档

 height="80" src="2.swf" >


HTML DIV与CSS样式

DIV＋CSS是网页设计标准

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

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

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

 3代码从用度高

HTML CSS样式-内联式样式

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

基本格式：

标签 style="CSS 样式" >

CSS控制显示区域

标签>

示例：


 无标题文档





 href="http://google.com">aaaaaa


HTML CSS样式-嵌入式样式

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

 ，

这样会对页面中所有

标记都起作用

HTML CSS样式-外部式样式

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

 例如:

 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：

无标题文档
rel="stylesheet" type="text/css" href="demo.css">



id= "one">

id= "left">


id= "center">

id= "head">head


id= "bd">

id= "bd_left">

id= "login">




 登录： type="text" class="text">

 密码： type="password" class="text">

 type="checkbox">保存Cookies

 type="submit" value="确定" class="button" >
 type="reset" value="撤销" class="button">




class= "count">
class="count_1" > 统计信息


class= "count">
class="count_2" > 排行榜


class= "count">
class="count_2" > 排行榜




id= "bd_right">

class= "bd_right1">
class="bd_right_1" > href="#">最新动态


type= "square">

欢迎到www.jz97.net

欢迎到www.jz97.net

欢迎到www.jz97.net

欢迎到www.jz97.net





class= "bd_right2">
class="bd_right_1" > 互动学习


class= "bd_right1">
class="bd_right_1" > 最新动态


class= "bd_right2">
class="bd_right_1" > 互动学习


class= "bd_right1">
class="bd_right_1" > 最新动态


class= "bd_right2">
class="bd_right_1" > 互动学习






id= "food">food




id= "right">





示例_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}