第三课html例子.docx
《第三课html例子.docx》由会员分享，可在线阅读，更多相关《第三课html例子.docx（25页珍藏版）》请在冰豆网上搜索。
第三课html例子
第二讲HTML概述及其使用
html文件结构说明
----------------------------------------开始标记
--------------------------------------头部标记
一个简单的HTML示例--------------------------------------
----------------------------------------文件主体
|欢迎光临我的主页
|
这是我第一次做主页|
|
|
---------------------------------------结尾标记
在文档的最外层，文档中的所有文本和html标记都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。
是HTML文档的头部标记,在浏览器窗口中，头部信息是不被显示在正文中的,在此标记中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。
该标记可以省略。
是嵌套在头部标记中的，标记之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
该标记可以省略。
标记一般不能省略，标记之间的文本是正文，是在浏览器要显示的页面内容。
二、练习实例
1．1-1.html
掌握内容：
基本html编程的结构理解
我的第一个网页开始学习html网页编程
2.1-2.html
掌握内容：
把网页的内容放在段落中
这是
第一段。
第二段。
第三段。
使用br可以换行,知道
了
吗
3.1-3.html
掌握内容：
原样显示文字
白日依山尽，
黄河入海流。
4.1-4.html
掌握内容：
居中对齐标记
居中对齐标记《送孟浩然之广陵》
故人西辞黄鹤楼，烟花三月下扬州。
孤帆远影碧山尽，惟见长江天际流。
5.1-5.html
掌握内容：
居中对齐标记
居中对齐标记《送孟浩然之广陵》
故人西辞黄鹤楼，烟花三月下扬州。
孤帆远影碧山尽，惟见长江天际流。
水平分隔线标记
测试水平分隔线标记春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少？
属性
参数
功能
单位
默认值
Size
设置水平分隔线的粗细
pixel（像素）
2
Width
设置水平分隔线的宽度
pixel（像素）、%
100%
Align
Leftcenterright
设置水平分隔线的对齐方式
center
Color
设置水平分隔线的颜色
black
noshade
取消水平分隔线的3d阴影
注释标记
--body标记是主体内容-->
<赋得古原草送别>
pre代表原样显示排版格式>
离离原上草，
一岁一枯荣。
野火烧不尽，
春风吹又生。
标题文字标记
标题标记的格式：
说明：
标记是成对出现的，标记共分为六级，在...
之间的文字就是第一级标题，是最大最粗的标题；...
之间的文字是最后一级，是最小最细的标题文字。
align属性用于设置标题的对齐方式，其参数为left（左），enter（中），right（右）。
标记本身具有换行的作用，标题总是从新的一行开始。
设定各级标题一级标题。
二级标题。
三级标题。
文字格式控制标记
属性
使用功能
默认值
face
设置文字使用的字体
宋体
size
设置文字的大小
3
color
设置文字的颜色
黑色
盼望着，盼望着，东风来了，春天脚步近了。
特定文字样式标记
（1）粗体标记：
放在与标记之间的文字将以粗体方式显示。
（2）斜体标记：
放在与标记之间的文字将以斜体方式显示。
（3）下划线标记：
放在与标记之间的文字将以下划线方式显示。
这些文字是粗体的
这些文字是斜体的
这些文字带有下划线
超链接的应用:
文件超链接：
这种链接的目标端点是一个文件，当然包括各种文件，如页面文件，它可以位于当前网页所在的服务器上，此时可称为“站点内页面的链接”，也可以位于其他服务器，此时可称为“与站点外页面的链接”。
书签超链接：
这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。
E-mail链接：
通过这种链接可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。
图像超链接：
这种链接是在图像上建立若干个区域称为“链接区”，通过它可以跳转到其他目标端点去。
返回顶部
跳转到test.htm页的顶部
tzsimple@?
subject=关于动态网站设计">给我写信
考虑：
…（链接到本地磁盘上同一目录下的页面）
…（链接到本地磁盘上不同目录下的页面）
建立列表
（1）
无序列表- 默认的无序列表加"实心园"
无序列表square加方块
无序列表circle加空心园
（2）
- 默认的有序列表
- 默认的有序列表
第1项第2项第4项
图像的处理
![]()
的格式及一般属性设定：
图片标记![]()
的属性：
Src：
图像的url的路径
Alt：
提示文字
Width：
宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Height：
高度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.
Align；图像和文字之间的排列属性
Border:
边框
TABLE表格
标签
描述
用于定义一个表格开始和结束
... | 定义表头单元格。
表格中的文字将以粗体显示，在表格中也可以不用此标记，
标记必须放在 | 标记内
...
定义一行标记，一组行标记内可以建立多组由
或 | 标记所定义的单元格 | ... | 定义单元格标记，一组
标记将将建立一个单元格， | 标记必须放在 | 标记内表格的控制
姓名 | 性别 | 年龄 | 专业 |
咚咚 | 男 | 18 | 学生 |
楠楠 | 女 | 17 | 学生 | 颜色参考：
| 第1行，第1列 | 第1行的第2、3列
第2行及第3行的第1列
第2行第2列 | 第2行第3列 |
| 第3行第2列 | 第3行第3列 |
表格的标题标记bordercolorlight="#9999FF"bordercolordark="#9900CC">
学生信息表
学生基本信息
成绩
姓名 | 专业 | 课程 | 分数 |
蓉蓉 | 计算机
程序设计
88 |
喃喃 | 89 | 表格的嵌套
表格嵌套
网页标志
广告条
|
|
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
| 标题栏 |
内容六
内容一
|
| 内容二 |
内容三
内容四
内容五
网页的动态
应用格式为:
align：
指定对齐方式top,middle,bottom
scroll：
单向运动
slide：
如幻灯片,一格格的，效果是文字一接触左边就停止。
alternate：
左右往返运动
bgcolor：
设定文字卷动范围的背景颜色
loop：
设定文字卷动次数，其值可以是正整数或infinite表示无限次，默认为无限循环
height：
设定字幕高度
width：
设定字幕宽度
scrollamount：
指定每次移动的速度,数值越大速度越快
scrolldelay：
文字每一次滚动的停顿时间，单位是毫秒。
时间越短滚动越快
hspace：
指定字幕左右空白区域的大小
vspace：
指定字幕上下空白区域的大小
direction：
设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动
behavior：
指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，alternate表示滚动到一方后向相反方向滚动。
滚动字幕
啦啦啦~~~我会往上跑了
啦啦啦~~~我会往上跑了
多视窗口框架
框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。
使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。
1.
其中：
banner.htm文件内容：
thisisbanner.htm
menu.htm文件内容：
thisismenu.htm
main.htm文件内容：
thisismain.htm
表单的设计
1.form
HTMLform标签示例
用户名:
表单中主要包括下列元素：
button——普通按钮
radio——单选按钮
checkbox——复选框
select——下拉式菜单
text——单行文本框
textarea——多行文本框
submit——提交按钮
reset——重填按钮
表单输入标记
此标记在表单中使用频繁，大部分表单内容需要用到此标记。
其语法如下：
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
HTMLinput标签示例
升级会员 