资源描述

HTML学习笔记.docx

《HTML学习笔记.docx》由会员分享，可在线阅读，更多相关《HTML学习笔记.docx（42页珍藏版）》请在冰豆网上搜索。

HTML学习笔记.docx

HTML学习笔记

HTML简介：

HTML学习方法：

1、在文本（或者是网页编辑软件）中修改html内容，通过网页刷新（F5键）来验证修改的内容，注意要先保存！

2、各项标记都有自己的属性！

3、多多查看设计比较友好的网页代码；需在页面的空白处，单击右键，通过【查看源文件】选项来查看。

本文是本人在学习HTML过程中所做的笔记，现在分享到网站上，希望对大家有所帮助，同时欢迎对网站建设感兴趣的朋友加入到本人建立的交流群：

183411278。

在网上不乏仅用HTML制作的网站，感兴趣的朋友可以在网上搜索一下。

同时也给大家推荐一个示例：

第1章认识HTML

HTML是一个网站的基础，DIV相当于建筑的框架，CSS相当于建筑的装饰。

Html语言规范和标准:

HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如

等；标记中的属性一般使用小写。

HTML的编写环境可以使用txt文本，或使用可视化编辑工具如Dreamweaver、Frontpage等。

HTML的英文全称是HyperTextMarkupLanguage，直译为超文本标记语言。

它是全球广域网上描述网页内容和外观的标准。

HTML包含了一对打开和关闭的标记，在当中包含有属性和值。

标记描述了每个在网页上的组件，例如文本段落、表格或图像等。

一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。

HTML对回车和空格都不敏感，因此可以使用回车或空格，使代码的格式和结构更清晰明了，这样才能易于查看与维护。

1.1HTML的基本结构：

…是头控制标记；可以在其中放置以下内容：

1.文件标题声明；2.<meta>控制元信息：Meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。Meta元素的属性有name和http-equiv，其中name主要用来描述网页，以便搜索引擎的查找、分类。可以设置<meta>的以下属性，提高网页被搜索到的概率：属性属性名举例说明http-equivcontent-type<metahttp-equiv="content-type"content="text/html;charset=字符集类型">设置网页文字及语言。http-equiv用于传送HTTP通信协议的标头，设定标头属性的名称，在content中是具体的属性值。charset设置了网页的字符集的类型，中国内地常用GB码，charset往往是gb_2312，即简体中文。refresh<metahttp-equiv="refresh"content="跳转时间;url=链接地址">经过一段时间后，页面会自动转到其他页面中。refresh表示网页刷新，content设定刷新时间和刷新后的地址，时间和地址之间用分号相隔。默认跳转时间是以秒为单位的。注意：当语法中的链接地址被省略时，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会用到。Nameauthor<metaname=”author”content=”85853591”>设置作者信息。description<metaname=”description”content=”描述内容”>页面描述也是为了便于搜索引擎的查找，用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。keywords<metaname=”keywords”content=”音乐，动漫”>关键字是向搜索引擎说明网页的关键词，帮助搜索引擎对该网页进行查找和分类，可以提高被搜索到的几率，关键字用逗号隔开。generator<metaname=”generator”content=”记事本”>说明编辑网页的软件。revised<metaname=”revised”content=”html4.01”>设置版本号。others<metaname=”others”content=”我第一个网！”>设置其他内容。3.<base>超链接网址基准参考点，即相对网址；<basehref="链接地址"target="新窗口的打开方式">作用是对文档定义一个默认的域名；如果没有base标记，则会在HTML文件的同级来找关联的网页；URL路径是一种互联网地址的表示法，数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口（Port）号以及服务器（Server）里页面的完整路径和页面名称等信息。HTML中，URL路径分为绝对路经和相对路径。绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录的路径。HTML页面通过基底网址把当前HTML页面中所有的相对URL转换成绝对URL。一般通过基底网址标记<base>设置HTML页面的绝对路径，那么在页面中的链接地址只需设置成相对地址即可，当浏览器浏览页面时，会通过<base>标记将相对地址附在基底网址的后面，从而转化成绝对地址。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{alert（"您没有输入你的性别!"）;}1.2HTML控制标记的格式：（1）.<标记名称>单一型，无设置值的；如 ；（2）.<标记名称属性=”属性值”>单一型，有设置值的；如：<hrwidth=”80%”>；（3）.<标记名称>…</标记名称>对称型，无设置值；<title>…；也叫做容器型；

（4）.<标记名称属性=”属性值”>…对称型，有设置值；

如：

…；

注意：

要区分好标记、属性、属性值三者的概念！

1.3最常用的控制标记：

（1）.跳行

格式：

；无属性设置；强制换行标记，可连续使用以实现连续换行！

（2）.段落

格式：

…

属性值说明：

left往左靠（默认）；center往中靠；right往右靠；

注意：

换行和段落有一个区别就是：

换行后行与行之间的空隙小，而段落间的空隙大；

（3）.水平直线

格式：

属性值说明：

属性

属性值

说明

size

像素

绝对值，以数字表示，属性值越大，线越粗；

用于设置水平线的高度；

百分比

相对值，以%表示，属性值越大，线越粗；

width

像素

绝对值，长度不会应视窗的改变而改变；

百分比会随着视窗的宽度而改变；像素设置不会随着窗口宽度变化而变化；

百分比

相对值，长度会随着视窗宽度而改变；

noshade

没有属性值；表示水平线去掉阴影；

（4）.向中对齐

格式：

…具有一个隐含的换行属性！

（5）.背景色与文字设置

格式：

（6）.标题文字设置

格式：

…

属性名称属性值说明

alignleft靠左；center靠中；right靠右；

（7）.特殊字符设置

格式：

“"

（8）.在HTML备注

格式：

--…-->

（9）.实体字符控制标记

1.…粗

2.…斜

3.…删

4.…下划

5.…电报

6._…下标

7.^…上标

（10）.语意字符控制

…

地址

2.…大字

3.…删除

4....修改

5.…小字

6.…加强语气（加粗）

7....加强语气（倾斜）

（11）.字体控制

格式：

…

属性值说明：

属性

属性值

说明

size

0-7

字体大小，在HTML中7是最大了，在CSS中可以继续放大！

200px;”>QQ：

85853591

color

英文或十六颜色

face

字体字体

（12）.格式化

格式：

…

保持代码编写时的文本样式；

（13）.引用文本

格式：

...

属性名称属性值说明：

citeurl被引用的地址；被引用的文字

在设计网页时，一般要遵循以下原则：

􀂉结构性：

在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。

􀂉通用性：

考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。

遇有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。

􀂉差异性：

了解各种浏览器的差异，力求输出的结果尽可能一致。

􀂉习惯性：

了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、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文档的内容。

不同的标记具有不同的属性，来控制标记内容！

2.1HTML头部标记

一般情况下，CSS和JavaScript都是定义在头元素中的，而定义在HTML语言头部的内容往往不会在网页上直接显示。

它用于包含当前文档的相关信息，包括、<base>、<basefont>、<isindex>、<meta>、<style>、<link>、<script>等。格式：<head>…</head>如下所示：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><!—HTML头部标记--><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>我的第一个HTML网页

alert（"你好吗？

"）;

我的第一个HTML网页

第3章BODY标记

网页的主体部分以标记标志它的开始，以标志它的结束。

在网页的主体标记中有很多的属性设置，包括页面的背景设置、文字属性设置、链接设置、边距设置等。

2.1网页背景色bgcolor

格式：

2.2网页背景图片background

格式：

用图片作为背景，还可以设置背景图片的平铺方式、显示方式等。

说明：

默认可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。

bgproperties属性设置为fixed，滚动页面时，背景图像也会跟着移动，这相对浏览者来说，就是总停留在相同的位置上。

2.3文字颜色text

格式：

该属性设置的是网页所有文字的颜色，可以通过局部设置来改变要变化部分文字的颜色！

2.4连接文字属性link/alink/vlink

格式：

在网页创作中，除了文字、图片等，超链接也是最为常用的一种元素。

超链接中以文字链接最多，浏览器默认以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。

使用通过link参数修改链接文字的颜色；使用alink参数设置正在访问的文字颜色；使用vlink参数设置访问后的文字链接颜色。

2.5边距margin

格式：

定义页面的空白，即内容与浏览器边框的距离。

其中包括上边框和左边框。

以像素为单位。

2.6页面注释标记

---->

格式：

--注释的文字-->

主体部分综合实例：

设置网页标题

--主体部分综合实例-->

链接的文字

公司业务不断扩大。

第4章图像

4.1简介

常见的图像格式有GIF、JPEG、PNG三种。

GIF用于导航条、按钮、图标等具有统一色彩和色调的图像。

在图像未完全下载下来时，以马赛克的形式显示。

JPEG是压缩格式，图像有一定的失真度。

PNG图像格式是一种非破坏型的网页图像文件格式，它提供了将图像文件以最下方式压缩却不造成图像失真的技术。

4.2插入图像

格式：

图像垂直边距和水平边距；

图像的超链接

4.3语法

图像属性

直接插入图片，图像的大小和原图相同，图像属性可调整图像的大小等内容。

图像高宽

height、width

像素绝对设置,宽

百分比相对设置,宽

图像边框

border

默认页面中插入的图像是没有边框的，通过border属性为图像添加边框。

图像与文字的水平、垂直间距Hspace、vspace

用来调整图像与文字的垂直边距；

如果不使用
标记或者

标记进行换行显示，那么添加的图像会紧跟在文字之后。

而图像与文字之间的水平、垂直距离是可以通过hspace、vspace进行设置的。

hspace="水平间距"

vspace="垂直间距">

图像相对于文字基准线对齐方式align

绝对对齐包括左、右和居中对齐；

相对文字对齐是指图像与一行文字的相对位置，有bottom、top、middle，即图片的底部和当前行的文字底部对齐、图片的顶部和文字的顶部对齐、图片中线和文字中线对齐三种方式。

图像提示文字alt

当图像没有装载到浏览器上时，就会显示添加的提示文字，而下载图像之后，当鼠标停留在图像上方时也会显示出提示文字。

图像的

超链接

补充：

1、图像热区链接：

设置图像热区链接

将图像划分成不同的区域进行链接设置。

而包含热区的图像也可以称为映射图像。

说明：

在该语法中要先定义映射图像的名称，然后再引用这个映射图像。

在标记中定义了热区的位置和链接，其中shape用来定义热区形状，可以取值为rect（矩形区域）、circle（圆形区域）以及poly（多边形区域）；coords参数则用来设置区域坐标，对于不同形状来说，coords设置的方式也不同。

对于圆形区域circle来说，coords包含3个参数，分别为center-x、center-y和tadius，也可以看作是圆形的圆心坐标（x，y）与半径的coords参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y坐标值。

（1）首先设置映射图像名，标记添加图像要引用的映射图像的名称：

（2）然后定义热区图像以及热区的链接属性：

2、切片索引

使用Firework来进行!

用表格进行定位!

注意：

红色字体分别将边框、单元格间距、单元格内边距设置为0，只有这样才能实现图片的无缝连接！

第5章列表

5.1简介

HTML中有3中列表，分别是无序列表、有序列表和定义列表。

5.2语法

标记

描述

语法及其他

无序列表标记

无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。

第1项

第2项

第3项

设置无序列表的项目符号类型type

默认无序列表的项目符号是●，type参数可以调整无序列表的项目符号。

说明：

type属性有3个值；

disc●实心圆；

circle○空心圆；

square■实心方块；

第1项

第2项

第3项

有序列表标记

各个列表项使用编号而不是符号来进行排列。

第1项

第2项

第3项

……

有序列表的序号类型type

默认情况下，有

展开阅读全文