HTML学习笔记Word格式文档下载.docx
- 文档编号:19281866
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:42
- 大小:982.46KB
HTML学习笔记Word格式文档下载.docx
《HTML学习笔记Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《HTML学习笔记Word格式文档下载.docx(42页珍藏版)》请在冰豆网上搜索。
text/html;
charset=字符集类型"
>
设置网页文字及语言。
http-equiv用于传送HTTP通信协议的标头,设定标头属性的名称,在content中是具体的属性值。
charset设置了网页的字符集的类型,中国内地常用GB码,charset往往是gb_2312,即简体中文。
refresh
meta
http-equiv="
refresh"
跳转时间;
url=链接地址"
经过一段时间后,页面会自动转到其他页面中。
refresh表示网页刷新,content设定刷新时间和刷新后的地址,时间和地址之间用分号相隔。
默认跳转时间是以秒为单位的。
注意:
当语法中的链接地址被省略时,网页的功能就变成了刷新页面本身,这在不断更新数据的页面中常常会用到。
Name
author
name=”author”content=”85853591”>
设置作者信息。
description
name=”description”content=”描述内容”>
页面描述也是为了便于搜索引擎的查找,用来描述网页的主题等,与关键字一样,设置的页面描述也不会在网页中显示出来。
keywords
name=”keywords”content=”音乐,动漫”>
关键字是向搜索引擎说明网页的关键词,帮助搜索引擎对该网页进行查找和分类,可以提高被搜索到的几率,关键字用逗号隔开。
generator
name=”generator”content=”记事本”>
说明编辑网页的软件。
revised
name=”revised”content=”html4.01”>
设置版本号。
others
name=”others”content=”我第一个网!
”>
设置其他内容。
3.<
base>
超链接网址基准参考点,即相对网址;
basehref="
链接地址"
target="
新窗口的打开方式"
作用是对文档定义一个默认的域名;
如果没有base标记,则会在HTML文件的同级来找关联的网页;
URL路径是一种互联网地址的表示法,数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里页面的完整路径和页面名称等信息。
HTML中,URL路径分为绝对路经和相对路径。
绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来,同时也会表现出磁盘上的目录结构;
相对路径是相对于当前HTML文档所在目录或站点根目录的路径。
HTML页面通过基底网址把当前HTML页面中所有的相对URL转换成绝对URL。
一般通过基底网址标记<
设置HTML页面的绝对路径,那么在页面中的链接地址只需设置成相对地址即可,当浏览器浏览页面时,会通过<
标记将相对地址附在基底网址的后面,从而转化成绝对地址。
4.Javascript和VBScript程序;
5.stylesheet可用来设置排版来的声明;
6.<
link>
可引用外部文件,如CSS排版样本;
linkrel="
shortcuticon"
href="
favicon.ico"
type="
image/x-icon"
7.在网页中加入脚本程序:
scripttype=”类型”src=”URL”>
/script>
举例:
1.alert("
欢迎使用JavaScript脚本"
);
2.varans=prompt("
请输入你的性别"
if(ans){
alert("
您的性别为:
"
+ans);
}
else{
您没有输入你的性别!
1.2HTML控制标记的格式:
(1).<
标记名称>
单一型,无设置值的;
如<
br>
;
(2).<
标记名称属性=”属性值”>
单一型,有设置值的;
如:
hrwidth=”80%”>
(3).<
/标记名称>
对称型,无设置值;
/title>
也叫做容器型;
(4).<
标记名称属性=”属性值”>
对称型,有设置值;
bodybgcolor=”red”>
/body>
fontsize=”7”>
/font>
要区分好标记、属性、属性值三者的概念!
1.3最常用的控制标记:
(1).跳行<
格式:
无属性设置;
强制换行标记,可连续使用以实现连续换行!
(2).段落<
p>
palign=”排列方式”>
/p>
属性值说明:
left往左靠(默认);
center往中靠;
right往右靠;
换行和段落有一个区别就是:
换行后行与行之间的空隙小,而段落间的空隙大;
(3).水平直线<
hr>
属性值
size
像素
绝对值,以数字表示,属性值越大,线越粗;
用于设置水平线的高度;
百分比
相对值,以%表示,属性值越大,线越粗;
width
绝对值,长度不会应视窗的改变而改变;
百分比会随着视窗的宽度而改变;
像素设置不会随着窗口宽度变化而变化;
相对值,长度会随着视窗宽度而改变;
noshade
没有属性值;
表示水平线去掉阴影;
(4).向中对齐<
center>
/center>
具有一个隐含的换行属性!
(5).背景色与文字设置
bodybgcolor=”背景色”text=”文字颜色”>
bodyleftmargin=”像素”topmargin=”像素”>
(6).标题文字设置
h1>
/h1>
h2>
/h2>
h3>
/h3>
h4>
/h4>
h5>
/h5>
h6>
/h6>
属性名称属性值说明
alignleft靠左;
center靠中;
right靠右;
(7).特殊字符设置
&
lt;
gt;
&
amp;
“&
quot;
(8).在HTML备注
!
--…-->
(9).实体字符控制标记
1.<
b>
/b>
粗
2.<
i>
/i>
斜
s>
/s>
删
4.<
u>
/u>
下划
5.<
tt>
/tt>
电报
sub>
/sub>
下标
7.<
sup>
/sup>
上标
(10).语意字符控制
address>
/address>
地址
big>
/big>
大字
del>
/del>
删除
ins>
...<
/ins>
修改
samll>
/small>
小字
strong>
/strong>
加强语气(加粗)
em>
/em>
加强语气(倾斜)
(11).<
font>
字体控制
0-7
字体大小,在HTML中7是最大了,在CSS中可以继续放大!
fontsize=”7”style=”font-size:
200px;
QQ:
85853591<
color
英文或十六颜色
face
字体字体
(12).格式化
pre>
/pre>
保持代码编写时的文本样式;
(13).引用文本
blockquote>
/blockquote>
属性名称属性值说明:
citeurl被引用的地址;
blockquotecite=””>
被引用的文字<
在设计网页时,一般要遵循以下原则:
结构性:
在设计网页时,须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符,让整体结构看起来整齐美观,易于纠错及理解,在发生问题时,才能很快找到错误所在处。
通用性:
考虑标记语言能否适用于各种浏览器,尽量以大多数浏览器都支持的标记语言为主,倘若有不得已的情况,一定要特别加以注明,并找出替代性的方案。
遇有可以注解或说明的标记或组件属性,应该尽可能地注明其内容。
差异性:
了解各种浏览器的差异,力求输出的结果尽可能一致。
习惯性:
了解用户使用窗口与浏览时的习惯,如组件摆放的顺序,习惯用鼠标、Tab键、Esc键及Enter键等操作习惯,或因网页下载时间太长,无法让用户耐心等候等因素,都是设计网页时必须考虑的因素。
适用性:
有些组件会因用户的窗口环境或安装的程序而异,可能在作者的计算机里可以完整地执行,而在其他用户的计算机上却只能下载文档,所以在设计完毕后,一定要多试几组不同平台的计算机,以确保网页的可行性。
反复性:
反复检查是否错误,是否有需要注意文字大小写之处,以及名称是否正确。
1.4XML和XHTML
从外表来看,XML与HTML很相似,它们都是由标记、属性和值组成的。
但XML并非一种只用来创建网页的语言,它还是一种用来创建其他语言的语言。
可以使用XML设计自己定制的标记语言,然后使用这种语言对自己的文档进行格式化。
定制的标记语言包含标记,这些标记实际描述它们包含的数据。
XML的强大之处在于:
用标记标识了数据之后,数据就可以用于其他任务。
程序可以设计为只提取它需要的信息,或者将此信息与来自其他来源的数据合并,最后将产生的组合信息以另一种形式输出,供另一种用途使用。
与基于HTML的网页不同,加上标记的信息可以根据需要经常复用。
但是,与一般情况一样,好处总是有代价的。
XML与HTML相比没那么宽容。
为了让XML解析器(读取并解释XML数据的软件)满意,XML要求非常注意大小写、引号、结束标记和其他细节。
另外,数以亿计的网页已经用HTML编写好了,数以百万计的服务器和浏览器也知道该如何读取它们。
解决方案很巧妙。
W3C用XML重写了HTML。
这种新语言具有HTML的所有特性,因此所有浏览器都能够理解它。
另外,因为它的词汇表完全来自于HTML,所以已经掌握HTML的人只需学习几条基本语法规则,就能够开始使用这种新语言。
同时,因为它使用XML的语法,所以它能够获得XML的所有好处和灵活性,并且为应用CSS提供了完美的基础。
这种同时具有HTML和XML两者优点的语言称为XHTML。
1.5经验总结
对网站地址的理解:
在电脑文件夹的目录地址栏直接输入电脑中存放文件的地址,回车就可以打开文件;
在浏览器中输入网址,然后回车同样可以打开网页文件;
所以可以这么认为:
网站服务器就类似电脑;
网址就类似电脑上存放文件的路径;
第2章头部标记
HTML标记一般是成对出现的,例如在<
html>
与<
/html>
之间出现的内容就是整个html文档的内容。
不同的标记具有不同的属性,来控制标记内容!
2.1HTML头部标记
一般情况下,CSS和JavaScript都是定义在头元素中的,而定义在HTML语言头部的内容往往不会在网页上直接显示。
它用于包含当前文档的相关信息,包括<
、<
basefont>
isindex>
style>
script>
等。
如下所示:
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
—HTML头部标记-->
Content-Type"
charset=gb2312"
/>
我的第一个HTML网页<
scriptlanguage="
javascript"
你好吗?
body>
我的第一个HTML网页
ahref="
XX<
/a>
第3章BODY标记
网页的主体部分以<
标记标志它的开始,以<
标志它的结束。
在网页的主体标记中有很多的属性设置,包括页面的背景设置、文字属性设置、链接设置、边距设置等。
2.1网页背景色bgcolor
bodybgcolor="
颜色代码"
2.2网页背景图片background
bodybackground="
图片地址"
bgproperties="
背景图片固定属性"
用图片作为背景,还可以设置背景图片的平铺方式、显示方式等。
说明:
默认可以省略bgproperties属性,这时图片会按照水平和垂直的方向不断重复出现,直到铺满整个页面。
bgproperties属性设置为fixed,滚动页面时,背景图像也会跟着移动,这相对浏览者来说,就是总停留在相同的位置上。
2.3文字颜色text
bodytext="
该属性设置的是网页所有文字的颜色,可以通过局部设置来改变要变化部分文字的颜色!
2.4连接文字属性link/alink/vlink
bodylink="
alink="
vlink="
在网页创作中,除了文字、图片等,超链接也是最为常用的一种元素。
超链接中以文字链接最多,浏览器默认以蓝色作为超链接文字的颜色;
访问过的文字则变为暗红色。
使用通过link参数修改链接文字的颜色;
使用alink参数设置正在访问的文字颜色;
使用vlink参数设置访问后的文字链接颜色。
2.5边距margin
bodytopmargin=上边距的值leftmargin=左边距的值>
定义页面的空白,即内容与浏览器边框的距离。
其中包括上边框和左边框。
以像素为单位。
2.6页面注释标记<
---->
--注释的文字-->
主体部分综合实例:
设置网页标题<
metahttp-equiv=”content-type”content=”text/html”;
charset=”字符集类型”/>
--主体部分综合实例-->
#ff99ff"
background="
image/12.JPG"
link="
#993300"
#0066ff"
#336600"
text="
#9966CC"
topmargin=”100”leftmargin=”100”>
ahref=”#”>
链接的文字<
公司业务不断扩大。
br/>
/heml>
第4章图像
4.1简介
常见的图像格式有GIF、JPEG、PNG三种。
GIF用于导航条、按钮、图标等具有统一色彩和色调的图像。
在图像未完全下载下来时,以马赛克的形式显示。
JPEG是压缩格式,图像有一定的失真度。
PNG图像格式是一种非破坏型的网页图像文件格式,它提供了将图像文件以最下方式压缩却不造成图像失真的技术。
4.2插入图像
imgsrc="
图像文件的地址"
divalign=”center”>
图像<
imgsrc=”images/CAR.jpg”width=”400”height=”400”alt=”图像提示文字内容”border=”5”vspace=”20”hspace=”20”align=”bottom”>
垂直边距和水平边距;
图像的超链接<
ahref=>
imgsrc=”image/7.jpg”height=”400”width=”400”/>
/div>
4.3语法
图像属性
直接插入图片,图像的大小和原图相同,图像属性可调整图像的大小等内容。
图像高宽
height、width
像素绝对设置,宽
百分比相对设置,宽
图像地址"
height=图像高度width=图像宽度>
图像边框
border
默认页面中插入的图像是没有边框的,通过border属性为图像添加边框。
border="
边框的宽度"
图像与文字的水平、垂直间距Hspace、vspace
用来调整图像与文字的垂直边距;
如果不使用<
标记或者<
标记进行换行显示,那么添加的图像会紧跟在文字之后。
而图像与文字之间的水平、垂直距离是可以通过hspace、vspace进行设置的。
hspace="
水平间距"
vspace="
垂直间距"
图像相对于文字基准线对齐方式align
绝对对齐包括左、右和居中对齐;
相对文字对齐是指图像与一行文字的相对位置,有bottom、top、middle,即图片的底部和当前行的文字底部对齐、图片的顶部和文字的顶部对齐、图片中线和文字中线对齐三种方式。
align="
相对文字的对齐方式"
图像提示文字alt
当图像没有装载到浏览器上时,就会显示添加的提示文字,而下载图像之后,当鼠标停留在图像上方时也会显示出提示文字。
图像文字的地址"
alt="
提示文字的内容"
图像的
超链接
Ahref="
目标窗口打开方式"
图像文件地址"
/A>
补充:
1、图像热区链接:
设置图像热区链接
将图像划分成不同的区域进行链接设置。
而包含热区的图像也可以称为映射图像。
在该语法中要先定义映射图像的名称,然后再引用这个映射图像。
在<
area>
标记中定义了热区的位置和链接,其中shape用来定义热区形状,可以取值为rect(矩形区域)、circle(圆形区域)以及poly(多边形区域);
coords参数则用来设置区域坐标,对于不同形状来说,coords设置的方式也不同。
对于圆形区域circle来说,coords包含3个参数,分别为center-x、center-y和tadius,也可以看作是圆形的圆心坐标(x,y)与半径的coords参数需要按照顺序(可以是逆时针,也可以是顺时针)取各个点的x、y坐标值。
(1)首先设置映射图像名,<
usemap>
标记添加图像要引用的映射图像的名称:
usemap="
映射图像名称"
(2)然后定义热区图像以及热区的链接属性:
mapname="
areashape="
热区形状"
coords="
热区坐标"
/map>
2、切片索引
使用Firework来进行!
用表格进行定位!
红色字体分别将边框、单元格间距、单元格内边距设置为0,只有这样才能实现图片的无缝连接!
第5章列表
5.1简介
HTML中有3中列表,分别是无序列表、有序列表和定义列表。
5.2语法
标记
描述
语法及其他
无序列表标记
ul
无序列表的特征在于提供一种不编号的列表方式,而在每一个项目文字之前,以符号作为分项标识。
ul>
LI>
第1项<
/LI>
第2项<
第3项<
/ul>
设置无序列表的项目符号类型type
默认无序列表的项目符号是●,type参数可以调整无序列表的项目符号。
type属性有3个值;
disc●实心圆;
circle○空心圆;
square■实心方块;
ul>
LItype=符号类型>
有序列表标记
ol
各个列表项使用编号而不是符号来进行排列。
ol>
……
/ol>
有序列表的序号类型type
默认情况下,有
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 学习 笔记