HTML网页制作基础
1.HTML 语言简介:
Html 的全称是”超文本标示语言”(Hyper text Markup Language) 是一种标记语言,不需要编译,直接由浏览器执行。
Html 语言规范和标准:HTML语言是不区分大小写的,但一般来说,标记使用大写书写,如<P>,<HTML>, <TABLE>等;标记中的属性一般使用小写。
HTML的编写环境可以使用txt文本,或使用可视化编辑工具 如Dreamweaver 、 Frontpage 等。
1.HTML 语言简介
HTML对回车和空格都不敏感,因此可以使用回车或空格,使代码的格式和结构更清晰明了,这样才能易于查看与维护。
HTML文档的结构:
包括HEAD、TITLE、BODY三部分,下面是基本结构:
<HTML>
<HEAD>
<title>这里是标题部份</title>
</HEAD>
<BODY>
这里是内容部份
</BODY>
</HTML>
HTML文档的结构:
<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口中显示,但是其之间可以嵌入javascript 和css样式等丰富网页的内容。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 用来标记你的页面的解码方式。charset=gb2312表示使用的是中文编码。
<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。
<body>元素属性的概述 :
<BODY>元素的属性概述
1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor=“#RRGGBB”(十六进制编码) 。
2. background 属性设置背景图片可使用GIF,JPG
3. bgproperties=“fixed”使背景图片成固定效果,图片不随滚动条滚动。
4 .text 设置非链接文字的色彩。
5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。
<BODY alink="red" link="pink" vlink="green">
<a href="http://www.google.com">点击进入</a>
<a href="http://www.baidu.com">点击进入</a>
</BODY>
6. leftmargin和topmargin页面左边的空白距 与上边的空白距。
文字是网页设计的基础部分,设置好文字的样式,可以起到事半功倍的效果,通常可以使用两种方法。
第1种方法是直接使用HTML标记进行设置,如:使用粗体标记<B>将文本设置为加粗样式。
第2种方法是使用css,层叠样式表。
HTML定义了6级标题,1-6级,标题文字随级数增大依次减小。
<h1>h1的效果</h1>
<h2>h2的效果</h2>
<h3>h3的效果</h3>
<h4>h4的效果</h4>
<h5>h5的效果</h5>
<h6>h6的效果</h6>
利用align 属性可以实现标题文字水平方向左、中、右的对齐方式; align=“left / center / right”。
HTML 文字设置
<B>设置文字以粗体的方式显示。语法<B>…</B>
<I> 设置文字以斜体显示。语法<I>…</I>
<EM>效果同<l>语法<EM>…</EM>
<SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP>
<SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB>
<U>设置文字以下划线显示。语法<U>…</U>
<S>设置文字以删除线显示。语法<S>…</S>
<FONT>控制的字体、大小和文字。
语法:
<FONT face=“字体”,size=“文字大小”,color=“颜色值”>…</FONT>
face 控制文字使用的字体
size 控制文字的大小
color 设置文字颜色
<FONT>控制的字体、大小和文字。
语法:
<FONT face=“字体”,size=“文字大小”,color=“颜色值”>…</FONT>
face 控制文字使用的字体
size 控制文字的大小
color 设置文字颜色
HTML段落设置
<P>段落标记,一般情况下在每个段落的前面加上一个<P>标记可以区分段落,又可以换行。
<BR>之后的文字将在下一行显视。
<HR>设置水平线。
<center>标记所有包含的内容,将以居中对齐的方式显示在网页中。
< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来
<NOBR>标记将取消浏览器由于窗口大小变化而换行。
<XMP>在HTML文档中加入<XMP>标记,使标记内的HTML标记不起作用。
HTML的转义字符
" "
< <
> >
± ±
× ×
& &
§ §
¢ ¢
¥ ¥
· ·
€ €
£ £
™ ™
© ©
HTML 跑动文字
<MARQUEE> 标记可使文字产生跑动的效果
direction 文字走动方向
bgcolor 设置文字背景颜色
height 设置跑动文字的高度
width 设置跑动文字的宽度
hspace 设置文字的水平边距
vspace 设置文字的上边距
behavior 设置文字的运动方式 scroll(文字跑动一遍后停止)/alternate(左右来回跑动)/slide
loop 设置跑动文字的圈数 跑动的次数
scrollamount 设置跑动文字移动速度
scrolldelay 设置跑动文字移动延时
效果:
HTML 超链接
超链接是一个网站的重要元素之一,一个网站由多个页面组成,各页面之间是通过超链接来确定相互关系的,每个页面的地址都不同。
格式:<A>链接文字</A>
href 设置超链接目标地址URL
name 在html文档中建立特定位置的名称
target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top
accesskey 设置超链接的快捷键
title 设置超链接的说明文字
style 运用css样式设置超链接文字样式
<a href="07-a.html" 点击链接时所转向的文件的文件名(如有文件夹,要指明路径);如放在根目录外则用../进行指引
name="07html" 当我们使用锚点时就用得上(锚点在下一个知识点可见)
target="_self" _self表示从当前窗口打开网页(即跳转);_blank表示超链接的网页在新的网页在窗口中打开
title="说明文字" 当鼠标移动到超链接上时,出现的提示说明文字
accesskey="q" 快捷键 ,当按下键盘上的Alt+“Q”,并按“Enter”时,将链接到跳转的网页。
>html>
HTML 超链接的锚点 (在同一网页中,通过锚点调到本网页内的相应位置的内容上!)
是指同一页面中的不同位置链接。
一个网页的内容很长,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
HTML 有序列表
列表分成三种类型:有序列表、无序列表和自定义列表。
有序列表使用编号来记录项目的顺序,
无序列表使用项目符号来记录无序的项目,
自定义列表它由两个部分组成:定义条件和定义描述。
有序列表格式:
<OL type="编号样式" start="编号起始值">
<LI>项目一</LI>
<LI>项目二</LI>
....
</OL>
type
1 阿拉伯数字
a 英文小写
A 英文大写
i 罗马小写数字
I 罗马大写数字
start 编号样式的起始数字,如:编号样式设为A,起始值设置为2,则列表的起始值为B
<ol> 默认值为1,如可以改为<ol type="a">,则结果如下:
如将起始值改为2,即<ol type="a" start="2">,则结果如下:
HTML 无序列表
无序列表标记
<UL>
<LI>项目一</LI>
<LI>项目二</LI>
....
</UL>
type
circle 空心圆
disc 圆点
square 正方形
HTML 自定义列表
<DL>
<DT>无序列表</DT><DD>不以数字为开始,而是使用一个符号作为分项标记的列表。</DD>
<DT>有序列表</DT><DD>使用数字编号,分项带有顺序性质的列表。</DD>
<DT>定义列表</DT><DD>用于解释名词的列表,包含了两种层次,一是名词,一是名词的解释。</DD>
</DL>
v