没有合适的资源?快使用搜索试试~ 我知道了~
适合html的入门教学,每一个标签都都有详细的例子,希望对大家有帮助
资源推荐
资源详情
资源评论
安徽新华学校
第一讲 细说 HTML 标签
在 语法中,大致上可以分为:网页架构:主要网页主架构的介绍
分隔标签:也就是所谓的水平线
排版标签:针对标签的属性,可做适当的版面编排
字体标签:教导您设定文字的字体。
文字标签:教导您设定文字的颜色、行距、变化等等。
影像标签:教导您如何在网页中,植入图像。
背景标签:教导您如何设定背景颜色或是背景图像。
连结标签:教导您如何设定超连结,以及开视窗的条件。
表格标签:教导您如何在网页中运用表格。
序列标签:教导您如何设定文字序列或图形序列。
表单标签:教导您如何制作可填写用的表单。
框架标签:可让同一个视窗由多个网页一起组成。
其他技巧:让您的整个网页背景可以让您设定为图片或是声音。
1.1 网页架构 <回细说索引>
网页制作教学
之间则为主要语法所在,也是网页的主要呈现部分。
【标签解说】
网页教学
1
安徽新华学校
以上看到的就是一篇最简单架构的网页。没错,网页其实就是一堆标签(所谓标签
就是指被包起来的语法)集合起来的,透过浏览器的消化整理,就便成了美仑
美奂的网页了。
简单而言,通常一份完整的网页包含了二个部份:抬头()、文件本体
()。也就是各位在上面所看到的以及
。
在抬头的部份中,有另一组标签。打在
这里面的文字会出现在浏览器视窗最上头蓝色部份里,当作一篇
网页的主题。
您可能会发现,为什么我一直没提到这一组标签,嗯!因为它可
有可无。这一组标签是告诉浏览器说:我是一份 文件喔!也就是说它是一
个网页的格式啦!通常都包在网页的最上下两端,将所有的原始码都包起来。
1.2 分隔标签 <回细说索引>
【文字上的分隔标签】
或许你已经发现这个问题了:天啊!我不是在记事本里排版排得很漂亮,为何透过浏览器看起来一切都
走了样?对啊!别太讶异,在网页的编排里,并不像汉书或 一样,只要拼命按 ! 键或空白
键,便能完成分段或分行,因为, 语言是不认识我们所谓的 ! 键或空白键,所以不管您按了
多少次的空白或 !,浏览器都会当作没看见啦!
使用方法:强制断行标签"!、强制分段标签#
标签解说:我们在写文章时,有时候在特定的地方会强迫断行("!),或是在写完某一段的
时候便会分段(#),写网页也一样,而且更需要断行及分段的功能,以免整个网页看起来
乱糟糟的。
网页教学
2
安徽新华学校
使用范例:
原始码 呈现结果
这是一个断行的范例"!看出来了吗?
这是一个断行的范例
看出来了吗?
这是一个分段的范例#基本上他会比断
行还多空出一行
这是一个分段的范例
基本上分段会比断行还多空出一行
【分隔线标签】
使用方法:上一段文字内容$!下一段文字内容
标签解说:利用$!这个标签便可产生一条横分隔线。另外,其有些属性分别说明如下:
3. 使用范例:
一般用法 尚未加任何属性。
原始码
普通分隔线$!
呈现结果
普通分隔线
颜色属性 用法:$!%&'&!()颜色码或颜色名称)
原始码
橘色分隔线$!%&'&!()*++)
呈现结果
橘色分隔线
宽度属性
用法:$!,-.$()宽度),其单位为 #/(像素),宽度亦可用百分比来
作设定,如 0即意为宽度占荧幕 0。
原始码
宽度为 #/ 的分隔线$!,-.$())
网页教学
3
安徽新华学校
呈现结果
宽度为 #/ 分隔线
厚度属性 用法:$!1-2()厚度)
原始码
厚度为 的分隔线$!1-2())
呈现结果
厚度为 分隔线
位置属性
用法:$!'-3 ()水平对齐位置),其设定值有三个,也就是置左
'-3 ()'+)、置中 '-3 ()% !)、置右 '-3 ()!-3$)
原始码
靠右的分隔线$!'-3 ()!-3$)
呈现结果
靠右的分隔线
阴影属性
用法:$! &1$.,无设定值,只要将 &1$.加入即可,通常会配
合颜色设定,效果较佳。
原始码
实心分隔线(无阴影)$! &1$.
呈现结果
实心分隔线(无阴影)
1.3 排版标签 <回细说索引>
【文字置左、置中、置右】
使用方法:老实说,刚刚我们学过的分段标签<p>再加上一些简单的属性设定,就
可以让其整个文字段落置左、置中或置右了,就如下表所示:
原始码 呈现结果
网页教学
4
安徽新华学校
#'-3 ()'+)文字靠左# 文字靠左
#'-3 ()% !)文字置中# 文字置中
#'-3 ()!-3$)文字靠右# 文字靠右
标签解说:嗯!秘诀就在于“'-3 (对齐位置”而已啦!'-3 是分段标签#的属性之一,这个
属性将来会常常在不同标签中看到,它的功能是专门在设定“水平对齐位置”,其常见的设定值
有三个,也就是置左('-3 ()'+))、置中('-3 ()% !))、置右('-3 ()!-3$))。
【置中标签】
使用方法:% !这是置中% !
标签解说:这个标签是最常用到的标签了,除了文字,对于图片、表格,任何可以显现在网页
上的东西都可以置中喔!
使用范例:
原始码 呈现结果
% !这是最中间% ! 这是最中间
【向右缩排标签】
使用方法:"'&%456&要缩排的文字"'&%456&
标签解说:利用"'&%456&"'&%456&这个标签可以将其包起来的文字,全部往右缩
排。而且加一组标签,往右缩排一单位,加两组标签,往右缩排两单位,依此类推。
使用范例:
原始码 呈现结果
网页教学
5
剩余46页未读,继续阅读
资源评论
yangxiu1230
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功