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
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
