第2章HTML基础
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
其它常用标记
<hr> <h1>--<h7> <br> <p></p> <i></i>
块级元素的应用
块级元素中，主要包括DIV、SPAN等常用 的标记。 其中最常用的是DIV和SPAN标记，希望大 家重点掌握。
DIVБайду номын сангаас
DIV是层标记，有的书刊上称之为块标记， 其实都是同一个东西。 <div id=mydiv>I am a layer!</div>
HTML概述
Hypertext Markup Language, 超文本链接标 示语言 在WWW上，通常使用的发布语言是HTML， 即超文本标识语言。 当前的HTML版本是HTML4.0
HTML基本概念
标记 "<>","</>" 元素 属性
建立HTML网页框架
<html> <head> </head> <body> </body> </html>
按钮的制作
按钮通常分为提交按钮、复位按钮和普通按钮。 通常的格式是：
<input type="xx" value="yy" name="zz">
这里的type类型和前面对应可以分别是Submit、Reset、 type Submit Reset button。这里的属性Value是按钮上的文字；Name是这个 按钮的名字。 也可以这样来定义：
Map语法
<MAP NAME=mymap> <area href="/literary/" alt="文学类" coords="5,5,95,195"> <area href="/computer/" alt="计算机类" coords="105,5,195,195"> <area href="/toolbook/" alt="工具书类" coords="205,5,295,195"> </MAP> <center> <IMG src="0306.jpg" alt="Site Map" usemap="#mymap" width=300 height=200> </center>
表格的样式
下面的表格是比较好的表格样式之一
<table border="4" bordercolor="orange"> <TR bgcolor="orange" align="middle"> <TD><font color=white><b>学号</b></font></TD>
表单
一般输入的形式有：单行输入、多行输入、单选 框和多选框等。 表单信息的处理过程如下：
文字
普通文字 ???? 文字格式<font face="隶书" size="4" color="red">???</font>的标记
face :字体 Size：1—7 Color:字体颜色
图片
<img src="??" width=?? height=?? border=??>
src属性要求给出所连接图片的路径和文件名 Border图片边框的宽度
本课总结
Head头元素的基本使用方法 HTML常用标记文字处理、图片处理和超级连接 的使用 如何创建有序和无序列表
HTML块元素：DIV、SPAN、ADDRESS、 DEL和PRE标记的使用 介绍了两种常见的框架结构 HTML的常见组件的使用方法
常用组件介绍
组件是HTML不可缺少的一个重要的部分 不同的组件有不同的插入的方法．通常我 们常用的组件是Java的Applet组件，和其他 的一些ActiveX组件等等
APPLET
这里的Applet是插入Java小程序
<APPLET CODE="breakout.class"></APPLET>
下拉列表框
基本语法如下：
<select name="user" size=1> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>
所有的选项都是在以<select>开始和</select>结束中的 每一个选项用<option>来分隔。这里面有一个属性是 size=N，这里的N代表可以同时显示几个选项，通常我们 都设置为1。
超级链接
<a href="???" target="???">???</a> <a name="???">
有序列表
有序列表的基本的语法如下:
<ol type=???> <li>行一</li> <li>行一</li> <li>行一</li> <li>行一</li> </ol>
type的取值范围
1 a A i I
当单击表单中的提交按钮时，输入在表单中的信息就 会上传到服务器中，然后由服务器的有关应用程序(例 如CGI、ASP、PHP、JSP等)进行处理，处理后将用户 提交的信息存储在服务器端的数据库中，或者将有关 信息返回到客户端浏览器上。
表单头及其属性
表单的通用格式是：
<form method="POST" action="mailto:szg@263.net" >xx</form>
框架
左右框架
<frameset rows="20%,*"> <frame name="top" src="top.htm" noresize> <frame name="bottom" src="bottom.htm" noresize> </frameset>
上下框架
<frameset cols="20%,*"> <frame name="left" src="left.htm" noresize> <frame name="right" src="right.htm" noresize> </frameset>
<button name="yy">xx<button>
这里的xx是按钮上的文字。请看下面的案例。
表单输入单元
基本的使用语法是：
<input type="xx" name="yy" value="zz">
Type的选择范围(10个可选，其它值都作为Text处理)
Text Hidden Password Checkbox Radio File Reset Submit image Button
HEAD元素的子元素-<META>
<META>的属性及其值包括：
NAME= （与数据检索/交换有关的数据）
keywords是关键字，当搜索引擎查找时，按此关键字查找 description是网页的描述信息； author用来设置该网页的作者姓名
http-equiv = （与浏览器有关的数据）
refresh用来设置网页的自动更新，当content="3; URL=http://www.263.net"时，该网页打开后3秒钟后，就自动的转到 www.263.net网站。 Pragma content="no-cache" content-type用来设置该网页的编码 content="text/html; charset=GB2312"
中画线
一般在表明价格的时候，人们习惯上都用 一个中画线。 在HTML语言中也为我们提供了这种标记， 使用的格式有两种：strike和del标记。
<strike>$13.00</strike> <del >$15.00</del>
PRE
PRE标记的学名叫做：预排版标记 所谓的预排版就是:包含在PRE标记中的字 符会按照HTML原码的格式输出到浏览器 上．我们利用下面的格式来说明．
表单的元素包含在以<form>开始到</form>结束中的。 有两个重要的属性：method="post"或是"get" 这两个选择的区别是：post是一种邮寄的方式，在浏览器的 地址栏不显示提交的信息，但是这种方式传送的数据是没 有限制的；get是一种手把手的提交到服务器上，最大的信 息量是2K，而且提交的信息显示在浏览器上。
动态网页设计——
HTML基础
HTML基础 基础
HTML概述 HEAD元素的子元素 列表 表格、表单 块级元素的应用 常用组件介绍
内容提要
HTML网页框架 HTML中常用的标记：IMG和HREF的使用方法 如何使用建立列表、表格和表单
HTML块元素的使用方法 网页框架的使用方式 常用的HTML组件
Span和DIV标记的区别
使用Span标记的行只限制到有字的区域 使用DIV标记的行，限制到有字的一整行， 不管有没有字符
地址标记
一般在网页设计中，都要输入自己的或者 是公司的地址，所以在HTML中有专门的地 址标记，标记中的内容就是以斜体来显示。 <address>xxxx </address>
SPAN
SPAN标记和DIV标记的基本语法是一样的
<span id=myspan>I am a span!</span>
但是SPAN和DIV的区别还是很大的，简单的理解为 前者不换行，后者是自成一段。
<span style="text-indent:1em;background:yellow;fontfamily:courier"> 我像小船，寻找港湾，不能将你忘记</span> <div style="text-indent:1em;background:yellow;fontfamily:courier"> 我像小船，寻找港湾，不能将你忘记</div>
都用Content来接后，一个META中只能有一对这样的 名对
HEAD元素的子元素2
<Title>?</Title> <base href="?" > <base target="?"> <BGSound src="?">
BODY元素的属性
background bgcolor link alink vlink text id
<embed width="332" height="332" src="004.swf">
这里我们需要注意的是src这个属性，在这里我们 要给出的是要插入的文件名
使用MAP
在一幅地图上，每一个超级连接指向的位 置都不一样，需要对其进行细分 使用可以方便的使用MAP组件对我们需要 的同一幅图进行不同超级连接的切割．请 看下面的超级连接．
MARQUEE
Marquee是一个组件，不如说它是一个标记 使用的基本语法是： <marquee>xx</marquee> 显示的效果是xx就会从屏幕一边跑到另外一 边．
利用Embed
可以插入Flash动画，Avi动画和MPEG电影等等 下面我们就利用Embed来插入一个Flash动画。 插入这些元素的基本的格式是：
无序列表
无序列表基本语法如下:
<ul type="???"> <li>行一</li> <li>行一</li> <li>行一</li> <li>行一</li> </ul>
type的取值范围
Circle Disc square
表格
<Table>和</Table> Table的属性
Align Bgcolor Border Cellpadding Cellspacing Height Width
<TR></TR>元素 <TD></TD>为结束，代表第1行，依次类推。每一个<TR>标识中的第 1个<TD>标识第一列，第2个<TD>标识第2列，依次类推。请看下面 的基本格式。
表格的灵活应用
rowspan和colspan 其用法是，rowspan=N是用来设置该单元格 占用N行，同样道理，colspan=M是占用个 M列