HTML学习笔记.docx

1、HTML学习笔记HTML简介：HTML学习方法：1、在文本（或者是网页编辑软件）中修改html内容，通过网页刷新（F5键）来验证修改的内容，注意要先保存！2、各项标记都有自己的属性！3、多多查看设计比较友好的网页代码；需在页面的空白处，单击右键，通过【查看源文件】选项来查看。本文是本人在学习HTML过程中所做的笔记，现在分享到网站上，希望对大家有所帮助，同时欢迎对网站建设感兴趣的朋友加入到本人建立的交流群：183411278。在网上不乏仅用HTML制作的网站，感兴趣的朋友可以在网上搜索一下。同时也给大家推荐一个示例：第1章 认识HTMLHTML是一个网站的基础，DIV相当于建筑的框架，CSS相

2、当于建筑的装饰。Html 语言规范和标准:HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如, , 等；标记中的属性一般使用小写。HTML的编写环境可以使用txt文本，或使用可视化编辑工具如Dreamweaver 、 Frontpage等。HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML 包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。一个完整的 HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元

3、素。HTML对回车和空格都不敏感，因此可以使用回车或空格，使代码的格式和结构更清晰明了，这样才能易于查看与维护。1.1 HTML 的基本结构： 是头控制标记；可以在其中放置以下内容：1. 文件标题声明；2. 控制元信息：Meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。Meta元素的属性有name和http-equiv，其中name主要用来描述网页，以便搜索引擎的查找、分类。可以设置的以下属性，提高网页被搜索到的概率：属性属性名举例说明http-equivcontent-type设置网页文字及语言。http-equiv 用于传送HTTP 通信协议的标头，设定标头

4、属性的名称，在content 中是具体的属性值。charset 设置了网页的字符集的类型，中国内地常用GB码，charset往往是gb_2312，即简体中文。refresh经过一段时间后，页面会自动转到其他页面中。refresh表示网页刷新，content设定刷新时间和刷新后的地址，时间和地址之间用分号相隔。默认跳转时间是以秒为单位的。注意：当语法中的链接地址被省略时，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会用到。Nameauthor设置作者信息。description页面描述也是为了便于搜索引擎的查找，用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示

5、出来。keywords关键字是向搜索引擎说明网页的关键词，帮助搜索引擎对该网页进行查找和分类，可以提高被搜索到的几率，关键字用逗号隔开。generator说明编辑网页的软件。revised设置版本号。others设置其他内容。3.超链接网址基准参考点，即相对网址；作用是对文档定义一个默认的域名；如果没有base标记，则会在HTML文件的同级来找关联的网页；URL 路径是一种互联网地址的表示法，数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口（Port）号以及服务器（Server）里页面的完整路径和页面名称等信息。HTML中，URL路径分为绝对路经和相对路径。绝对路径是将服务器上

6、磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前HTML 文档所在目录或站点根目录的路径。HTML 页面通过基底网址把当前HTML 页面中所有的相对URL转换成绝对URL。一般通过基底网址标记设置HTML页面的绝对路径，那么在页面中的链接地址只需设置成相对地址即可，当浏览器浏览页面时，会通过标记将相对地址附在基底网址的后面，从而转化成绝对地址。4.Javascript 和VBScript 程序；5.stylesheet 可用来设置排版来的声明；6.可引用外部文件，如CSS 排版样本；7. 在网页中加入脚本程序：举例：1.alert(欢迎使用JavaScri

7、pt 脚本);2.var ans=prompt(请输入你的性别);if (ans) alert(您的性别为：+ans);else alert(您没有输入你的性别!);1.2 HTML 控制标记的格式：(1). 单一型，无设置值的；如； (2). 单一型，有设置值的；如：； (3). 对称型，无设置值；也叫做容器型； (4). 对称型，有设置值；如：；注意：要区分好标记、属性、属性值三者的概念！1.3 最常用的控制标记：(1).跳行格式：；无属性设置；强制换行标记，可连续使用以实现连续换行！(2).段落格式：属性值说明：left 往左靠（默认）；center 往中靠；right 往右靠；注意：换

8、行和段落有一个区别就是：换行后行与行之间的空隙小，而段落间的空隙大；(3).水平直线格式：属性值说明：属性属性值说明size像素绝对值，以数字表示，属性值越大，线越粗；用于设置水平线的高度；百分比相对值，以%表示，属性值越大，线越粗；width像素绝对值，长度不会应视窗的改变而改变；百分比会随着视窗的宽度而改变；像素设置不会随着窗口宽度变化而变化；百分比相对值，长度会随着视窗宽度而改变；noshade没有属性值；表示水平线去掉阴影；(4).向中对齐格式： 具有一个隐含的换行属性！(5).背景色与文字设置格式：(6).标题文字设置格式：属性名称 属性值说明align left 靠左；center

9、 靠中；right 靠右；(7).特殊字符设置格式： >& &“ "(8).在HTML 备注格式：(9).实体字符控制标记1. 粗2. 斜3. 删4. 下划5. 电报6. 下标7. 上标(10).语意字符控制1. 地址2. 大字3. 删除4. 修改5. 小字6. 加强语气(加粗)7. 加强语气(倾斜)(11).字体控制格式：属性值说明：属性属性值说明size0-7字体大小，在HTML中7是最大了，在CSS中可以继续放大！QQ：85853591color英文或十六颜色face字体字体(12).格式化格式： 保持代码编写时的文本样式； (13).引用文本格式：.属性名称属性

10、值说明：cite url 被引用的地址；被引用的文字在设计网页时，一般要遵循以下原则：􀂉 结构性：在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。􀂉 通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。遇有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。􀂉 差异性：了解各种浏览器的差异，力求输出的结果尽可能一致。𙦧

11、3; 习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc键及Enter键等操作习惯，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网页时必须考虑的因素。􀂉 适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在作者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档，所以在设计完毕后，一定要多试几组不同平台的计算机，以确保网页的可行性。􀂉 反复性：反复检查是否错误，是否有需要注意文字大小写之处，以及名称是否正确。1.4 XML和XHTML从外表来看，XML 与HTML 很相似，它们都是由标记、属性和

12、值组成的。但XML 并非一种只用来创建网页的语言，它还是一种用来创建其他语言的语言。可以使用XML 设计自己定制的标记语言，然后使用这种语言对自己的文档进行格式化。定制的标记语言包含标记，这些标记实际描述它们包含的数据。XML 的强大之处在于：用标记标识了数据之后，数据就可以用于其他任务。程序可以设计为只提取它需要的信息，或者将此信息与来自其他来源的数据合并，最后将产生的组合信息以另一种形式输出，供另一种用途使用。与基于HTML 的网页不同，加上标记的信息可以根据需要经常复用。但是，与一般情况一样，好处总是有代价的。XML 与HTML 相比没那么宽容。为了让XML 解析器（读取并解释XML 数

13、据的软件）满意，XML 要求非常注意大小写、引号、结束标记和其他细节。另外，数以亿计的网页已经用HTML 编写好了，数以百万计的服务器和浏览器也知道该如何读取它们。解决方案很巧妙。W3C 用XML 重写了HTML。这种新语言具有HTML 的所有特性，因此所有浏览器都能够理解它。另外，因为它的词汇表完全来自于HTML，所以已经掌握HTML 的人只需学习几条基本语法规则，就能够开始使用这种新语言。同时，因为它使用XML的语法，所以它能够获得XML 的所有好处和灵活性，并且为应用CSS 提供了完美的基础。这种同时具有HTML 和XML 两者优点的语言称为XHTML。1.5 经验总结对网站地址的理解：

14、在电脑文件夹的目录地址栏直接输入电脑中存放文件的地址，回车就可以打开文件；在浏览器中输入网址，然后回车同样可以打开网页文件；所以可以这么认为：网站服务器就类似电脑；网址就类似电脑上存放文件的路径；第2章 头部标记HTML标记一般是成对出现的，例如在与之间出现的内容就是整个html文档的内容。不同的标记具有不同的属性，来控制标记内容！2.1 HTML头部标记一般情况下，CSS 和JavaScript 都是定义在头元素中的，而定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息，包括、等。格式：如下所示：我的第一个HTML网页alert(你好吗？);我的第一个HTML

15、网页XXXX第3章 BODY标记网页的主体部分以标记标志它的开始，以标志它的结束。在网页的主体标记中有很多的属性设置，包括页面的背景设置、文字属性设置、链接设置、边距设置等。2.1 网页背景色 bgcolor格式：2.2 网页背景图片 background格式：用图片作为背景，还可以设置背景图片的平铺方式、显示方式等。说明：默认可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。bgproperties 属性设置为fixed，滚动页面时，背景图像也会跟着移动，这相对浏览者来说，就是总停留在相同的位置上。2.3 文字颜色 text格式：该属性设置的

16、是网页所有文字的颜色，可以通过局部设置来改变要变化部分文字的颜色！2.4 连接文字属性 link/alink/vlink格式：在网页创作中，除了文字、图片等，超链接也是最为常用的一种元素。超链接中以文字链接最多，浏览器默认以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。使用通过link 参数修改链接文字的颜色；使用alink 参数设置正在访问的文字颜色；使用vlink 参数设置访问后的文字链接颜色。2.5 边距 margin格式：定义页面的空白，即内容与浏览器边框的距离。其中包括上边框和左边框。以像素为单位。2.6 页面注释标记格式：主体部分综合实例：设置网页标题链接的文字公司业务不断扩

17、大。公司业务不断扩大。第4章 图像4.1 简介常见的图像格式有GIF、JPEG、PNG三种。GIF用于导航条、按钮、图标等具有统一色彩和色调的图像。在图像未完全下载下来时，以马赛克的形式显示。JPEG是压缩格式，图像有一定的失真度。PNG图像格式是一种非破坏型的网页图像文件格式，它提供了将图像文件以最下方式压缩却不造成图像失真的技术。4.2 插入图像格式：图像垂直边距和水平边距；图像的超链接 4.3 语法图像属性直接插入图片，图像的大小和原图相同，图像属性可调整图像的大小等内容。图像高宽height 、width像素 绝对设置,宽百分比 相对设置,宽图像边框border默认页面中插入的图像是没

18、有边框的，通过border 属性为图像添加边框。图像与文字的水平、垂直间距Hspace、 vspace用来调整图像与文字的垂直边距；如果不使用标记或者标记进行换行显示，那么添加的图像会紧跟在文字之后。而图像与文字之间的水平、垂直距离是可以通过hspace 、vspace进行设置的。图像相对于文字基准线对齐方式align绝对对齐包括左、右和居中对齐；相对文字对齐是指图像与一行文字的相对位置，有bottom、top、middle，即图片的底部和当前行的文字底部对齐、图片的顶部和文字的顶部对齐、图片中线和文字中线对齐三种方式。图像提示文字alt当图像没有装载到浏览器上时，就会显示添加的提示文字，而下

19、载图像之后，当鼠标停留在图像上方时也会显示出提示文字。图像的超链接 补充：1、图像热区链接：设置图像热区链接将图像划分成不同的区域进行链接设置。而包含热区的图像也可以称为映射图像。说明：在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在标记中定义了热区的位置和链接，其中shape 用来定义热区形状，可以取值为rect（矩形区域）、circle（圆形区域）以及poly（多边形区域）；coords 参数则用来设置区域坐标，对于不同形状来说，coords 设置的方式也不同。对于圆形区域circle 来说，coords 包含3 个参数，分别为center-x、center-y 和tadius

20、，也可以看作是圆形的圆心坐标（x，y）与半径的coords 参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y 坐标值。(1) 首先设置映射图像名， 标记添加图像要引用的映射图像的名称：(2) 然后定义热区图像以及热区的链接属性：2、切片索引使用Firework来进行!用表格进行定位!注意：红色字体分别将边框、单元格间距、单元格内边距设置为0，只有这样才能实现图片的无缝连接！第5章 列表5.1 简介HTML中有3中列表，分别是无序列表、有序列表和定义列表。5.2 语法标记描述语法及其他无序列表标记ul无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。第1 项第2 项第3 项设置无序列表的项目符号类型type默认无序列表的项目符号是，type 参数可以调整无序列表的项目符号。说明：type 属性有3个值；disc 实心圆；circle 空心圆；square 实心方块；第1 项第2 项第3 项有序列表标记ol各个列表项使用编号而不是符号来进行排列。第1 项第2 项第3 项有序列表的序号类型type默认情况下，有