最新更新 热门文章
当前位置：首页>免费文档>文库资料>综合文库>HTML网页制作基础

HTML网页制作基础

更新时间：2024-06-04 13:35:02 阅读量： 综合文库 文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

HTML网页制作基础

HTML网页制作基础 1.HTML 语言简介

2.HTML 语言的基本标签与对应的属性 3.表格与表单 4.框架

5.图像、声音、视频 6.DIV 层与css样式

一.HTML 语言简介

?Html 的全称是”超文本标示语言”(Hyper text Markup Language) 是一种标记语言,不需要编译,

直接由浏览器执行。

?Html 语言规范和标准:HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如

, , 等；标记中的属性一般使用小写。

?HTML的编写环境可以使用txt文本，或使用可视化编辑工具 如Dreamweaver 、 Frontpage 等。 1.HTML 语言简介

?HTML对回车和空格都不敏感，因此可以使用回车或空格，使代码的格式和结构更清晰明了，这样才能易于查看与维护。

?HTML文档的结构：

包括HEAD、TITLE、BODY三部分，下面是基本结构：

标题部分 我的第一个html页面

HTML文档的结构：

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

?

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

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

元素属性的概述 ： ?元素的属性概述 1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor=“＃RRGGBB” 02.html 2. background 属性设置背景图片可使用GIF，JPG 03.html 3. bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。

1

04.html 4 .text 设置非链接文字的色彩。 5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。 05.html 6. leftmargin和topmargin页面左边的空白距 与上边的空白距。 实例如下： 1.背景颜色：

标题部分

2. 设置背景图片：

标题部分













































3. 设置背景图片(不滚动)：

标题部分


设置背景图片

bgproperties=\使背景图片成固定效果，图片不随滚动条滚动















































4.插入链接：

标题部分

2







5. 字体颜色与链接：

6.左上距离：

二HTML 语言的基本标签与对应的属性

?文字 ?段落 ?特殊文字 ?超链接 ?列表

HTML 文字设置

?文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。 第1种方法是直接使用HTML标记进行设置，如:使用粗体标记将文本设置为加粗样式。 第2种方法是使用css，层叠样式表。 HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。

h1的效果

h2的效果

h3的效果

h4的效果

h5的效果
h6的效果
利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right” HTML 文字设置

?设置文字以粗体的方式显示。语法… ? 设置文字以斜体显示。语法… ?效果同语法…

?设置文字以上标文本效果显示。语法… ?设置文字以下标文本效果显示。语法… ?设置文字以下划线显示。语法… ?设置文字以删除线显示。语法…

HTML 文字设置

?控制的字体、大小和文字。

3

语法： … face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色

HTML段落设置

?

段落标记，一般情况下在每个段落的前面加上一个

标记可以区分段落，又可以换行。 ?
之后的文字将在下一行显视。 ?

设置水平线。

?

标记所有包含的内容，将以居中对齐的方式显示在网页中。 ?< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来 ?标记将取消浏览器由于窗口大小变化而换行。

?

在HTML文档中加入<XMP>标记，使标记内的HTML标记不起作用。 </p><p>HTML的转义字符 HTML 跑动文 </p><p>?<MARQUEE> 标记可使文字产生跑动的效果 direction 文字走动方向 bgcolor 设置文字背景颜色 height 设置跑动文字的高度 width 设置跑动文字的宽度 hspace 设置文字的水平边距 vspace 设置文字的上边距 behavior 设置文字的运动方式 scroll/alternate/slide loop 设置跑动文字的圈数 scrollamount 设置跑动文字移动速度 scrolldelay 设置跑动文字移动延时 </p><p>HTML 超链接 </p><p>?超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。 ?格式:这是一个连接 href 设置超链接目标地址URL name 在html文档中建立特定位置的名称 target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top accesskey 设置超链接的快捷键 title 设置超链接的说明文字 style 运用css样式设置超链接文字样式 </p><p>HTML 超链接的锚点 </p><p>?是指同一页面中的不同位置链接。 </p><p>?一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击</p><p>相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。 </p><p>HTML 有序列表 ?列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，</p><p> 4 </p><p>无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。 </p><p>?<OL type=\编号样式\编号起始值\ 项目一 项目二 .... </OL> type 1 阿拉伯数字 a 英文小写 A 英文大写 i 罗马小写数字 I 罗马大写数字 start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B </p><p>HTML 无序列表 ?无序列表标记 项目一 项目二 .... </p><p>type circle 空心圆 disc 圆点 square 正方形 </p><p>HTML 自定义列表 </p><p>? <DL> </p><p> 无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。 </p><p> 有序列表使用数字编号，分项带有顺序性质的列表。 </p><p> 定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。 </p><p></DL> 实例如下： </p><p>1. (1)文字设置： <HTML> <HEAD> </p><p> <title>标题部分</title> </HEAD> </p><p> <BODY <h1>h1的效果</h1> <h2>h2的效果</h2> <h3>h3的效果</h3> <h4>h4的效果</h4> <h5>h5的效果</h5> <h6>h6的效果</h6> </p><p>alink=\</p><p> 5 </p><p></p><p> </BODY> </HTML> (2)文字设置： <HTML> <HEAD> </p><p> <title>标题部分</title> </HEAD> <BODY> </p><p> <B>粗体</B><br> <I>斜体</I><br> </p><p> <EM>斜体</EM><br> </p><p> 字体上标<br> 字体下标<br> <U>下划线</U><br> <S>删除线</S><br> </BODY> </HTML> </p><p>2.文字设置： <HTML> <HEAD> </p><p> <title>标题部分</title> </HEAD> <BODY> </p><p> <font color=\宋体\ 文字设置 </BODY> </HTML> 3.段落设置： HTML> <HEAD> </p><p> <title>标题部分</title> </HEAD> <BODY> </p><p> 这是一个段落标记。&lt;&gt; <p> </p><p> 这是一个&lt;br&gt;<br> <hr> </p><p> <center>居中显示</center><br> <PRE> </p><p> abc #sdfssd%#% de f gt </p><p> <> sdfsad s$!@$( h $#@#%% i </PRE> </p><p>NOBR标记将取消浏览器由于窗口大小变化而换行。 <HOBR> </p><p> NOBR标记将取消浏览器由于窗口大小变化而换行。 </HOBR> <XMP> <HTML> </p><p> 6 </p><p> <HEAD> </p><p> <title>标题部分</title> </HEAD> <BODY> </p><p> 这是一个段落标记。&lt;&gt; <p> </p><p> 这是一个&lt;br&gt;<br> <hr> </p><p> <center>居中显示</center><br> </HTML> 4.转义字符：

标题部分 "
<
>

±
×
&
§
¢
¥
·
€
£
™
©
5.跑动文：

标题部分

scrollamount=\ 郑州航空工业管理学院

注意：loop=\与behavior不能同时使用，互斥〉 6.超链接：

7

标题部分

07-a.html：目标地址 特别注意：

同一目录下直接链接如

标题部分

































































































返回顶部

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

8.有序列表：

标题

8

    9.无序列表： HTML>

    标题

      啊啊 啊啊 啊啊

    square方块．circle空心圆 10.自定义列表：

    标题

    ☆无序列表 ☆有序列表 ☆定义列表

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

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

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

    三HTML的表格与表单的设置

    ?表格的设置

    ?表单及表单中常用的标记

    9

    HTML 建立表格

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

    格式：..

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

    标签的属性 border 设置表格边框 caption 设置表格标题

    align 设置表格在网页中的布局 width 设置表格宽度 height 设置表格高度

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

    cellpadding 设置单元格内部与文本之间的间距 bordercolor 设置表格边框颜色 bordercolorlight 设置表格亮面颜色

    Bordercolordark 设置表格暗面颜色 标签的属性

    bgcolor 设置背景颜色。 align 设置行对齐方式。

    valign 设置单元格垂直对齐方式。 和 标签的属性

    bgcolor 设置单元各背景颜色 rowspan 设置单元格所占行数 colspan 设置单元格所占的列数 align 设置对齐方式

    valign 设置单元格垂直对齐方式 width 设置单元格宽度 height 设置单元格高度 HTML 特殊表格

    ?Rules 设置单元格的特效 ?Fieldset 设置特殊表格

    HTML 表单

    表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 1、name： 设置表单的名称。 2、action： 设置表单的处理程序的URL。 3、method：提交表单的方法。

    HTML 表单中常用的标记 输入域一般在表单中使用 1、输入单行文字 2、输入密码

    10

    3、 单选按钮 4、多选按钮 5、图片 6、 文件上传 7、隐藏域 8、撤销按钮 9、普通按钮 form1.html HTML 表单中常用的标记

    ?多行文本输入标记

    name 设置识别名称。 rows 设置文本域的行数 cols 设置文本域的列数 disabled 设置文本为禁用 warp 设置为off 不换行 HTML 表单中常用的标记

    ?选择域

    < option >选项二

    HTML 表单提交数据

    html提交数据时必须设置标签name和value属性，以便asp程序能获取相应的值。 实例如下： 1.(1) table标签属性：

    标题

    标题

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

    2. (2) table标签属性： HTML>

    标题

    11

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

    3. tr标签属性：

    标题

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

    4. td th标签属性：

    标题

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

    rowspan

    第一行数据 第二行数据 第三行数据

    colspan

    第二行数据第二行数据 第三行数据第三行数据

    th

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

    12

    5.特殊表格：

    标题

    第一行数据第一行数据

    第二行数据第二行数据

    细线表格 细线表格

    公告 欢迎进入，我的空间

    6. 表单属性标记：(1)

    标题

    request.asp： <%

    if request.QueryString(\

    response.Write(\用户名为:\＋request.QueryString(\＋\response.Write(\密码为:\＋request.QueryString(\＋\response.Write(\多选项为:\＋request.QueryString(\＋\response.Write(\性别为:\＋request.QueryString(\＋\response.Write(\选择域:\＋request.QueryString(\＋\end if (2)

    标题 (3)

    标题

    B页面
    B页面
    B页面

    四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 不能调整窗口大小

    HTML iframe 标签 ?使用格式：

    ?src 设置要链接的HTML文件

    ?frameborder 是否显示边框yes/no,1/0 ?width 设置宽度 ?height 设置高度

    ?scrolling设置窗口是否使用滚动条 yes/on默认为auto 实例如下：

    1.rameset标签的属性：

    15

    标题

    2.frame标签的属性：

    标题

    3.iframe 标签：

    标题