收藏
下载资源下载资源 加入VIP,免费下载

HTML学习笔记zhr1226.docx

上传人：b****2 文档编号：24511410 上传时间：2023-05-28 格式：DOCX 页数：51 大小：64.88KB
下载 相关 举报
HTML学习笔记zhr1226.docx_第1页
第1页 / 共51页
HTML学习笔记zhr1226.docx_第2页
第2页 / 共51页
HTML学习笔记zhr1226.docx_第3页
第3页 / 共51页
HTML学习笔记zhr1226.docx_第4页
第4页 / 共51页
HTML学习笔记zhr1226.docx_第5页
第5页 / 共51页
点击查看更多>>
下载资源
资源描述

HTML学习笔记zhr1226.docx

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

HTML学习笔记zhr1226.docx

HTML学习笔记zhr1226

HTML语言剖析

Html简介-目录

全写：

HyperTextMark-upLanguage

译名：

超文本标识语言

简释：

一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。

由文字（字母，数字、标点符号）及标签组合而成。

任何文字编辑器都可以，这里推荐用：

Dreamweaver。

1.Html特点：

►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；

►通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；

►纯文本文件，可以使用各种文本编辑器编写；（Dreamweaver是首选）

►文件扩展名：

.htm或.html；

►html文件必须在Web浏览器上运行；（运行环境）

►具有跨平台性。

1.HTML语法结构：

►HTML文件是由一系列的元素和标签（tag）组成的；

►元素：

网页中的内容；

►标签：

用于规定元素的属性和它在文件中的位置；

►格式：

<元素名称属性="值"...>元素资料,<元素名称属性="值"...>

►不区分大小写。

2.HTML文件结构：

►起始标记：

　　表示HTML网页的起始；

►文件头部：

　　设置初始化文档信息和文档管理标注；

►文件主体：

　　设置格式化的浏览器显示的文档（内容）；

►注释部分：

--　　　　-->　可以放在任何位置；

►

　　　　　　>

※例:

Html简介

--网页内容-->

⏹标签写法：

►任何标签皆由"<>"所包含，如

►标签名与小于号之间不能留有空白字符。

►某些标签　要加上参数，某些则不必。

如大家好

►参数只可加于起始标签中。

►在起始标签之标签名前加上符号"/"便是其终结标签，如

►标签字母大小写皆可。

⏹成对标签与单标签：

标签按型态分为成对标签与单标签

1.成对标签

顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。

例如HTML源码：

我愿意和大家显示成：

我愿意和大家一起学好html/css!

大家有信心吗？

其中便称为成对标签。

它以起始标签及结尾标签标示文字我愿意和大家一起学好html/css!

令它显示成粗体，两者失其一都会发生错误显示。

2.单标签

是指标签单独出现，只有起始标签没有终结标签。

※例如HTML源码：

Ilovemyhometown.
It'sabeautifulplace.

显示成：

Ilovemyhometown.

It'sabeautifulplace.

其中换行标签
便属单标签。

它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的，但有些人会为空标签加上终结标签，如果加上结尾标签，对HTML没有影响。

便于记忆。

HTML语言剖析

Html标记一览-目录

标记

类型

译名或意义

作用

备注

文件标记

●

文件声明

让浏览器知道这是HTML文件

●

开头

提供文件整体信息

</p><p>●</p><p>标题</p><p>定义文件标题，将显示于窗口标题</p><p><BODY></p><p>●</p><p>本文</p><p>设计文件格式及内文所在</p><p>段落标记</p><p><!</p><p>--注解--></p><p>○</p><p>说明标记</p><p>为文件加上说明，但不被显示</p><p><P></p><p>○</p><p>段落标记</p><p>为文字、图片、表格等之间留一空白行</p><p><BR></p><p>○</p><p>换行标记</p><p>令文字、图片、表格等显示于下一行</p><p><HR></p><p>○</p><p>水平线</p><p>插入一条水平线</p><p><CENTER></p><p>●</p><p>居中</p><p>令文字、图片、表格等显示于页面中央</p><p>不建议使用</p><p><PRE></p><p>●</p><p>保留原格式</p><p>令文件按照原始格式的排列方式显示</p><p><DIV></p><p>●</p><p>区域标记</p><p>设定文字、图片、表格等的摆放位置</p><p><NOBR></p><p>●</p><p>强制不分行</p><p>令文字不因太长而自动换行</p><p><WBR></p><p>●</p><p>根据宽度换行</p><p>根据浏览器的大小显示文本</p><p>字体标记</p><p><STRONG></p><p>●</p><p>加重语气</p><p>产生字体加粗Bold的效果</p><p><B></p><p>●</p><p>粗体标记</p><p>产生字体加粗的效果</p><p><EM></p><p>●</p><p>强调标记</p><p>字体出现斜体效果</p><p><I></p><p>●</p><p>斜体标记</p><p>字体出现斜体效果</p><p><TT></p><p>●</p><p>打字字体</p><p>Courier字体，字母宽度相同</p><p><U></p><p>●</p><p>加上底线</p><p>加上底线</p><p>不建议使用</p><p><H1></p><p>●</p><p>一级标题标记</p><p>变粗变大加宽，程度与级数反比</p><p><H2></p><p>●</p><p>二级标题标记</p><p>将字体变粗变大加宽</p><p><H3></p><p>●</p><p>三级标题标记</p><p>将字体变粗变大加宽</p><p><H4></p><p>●</p><p>四级标题标记</p><p>将字体变粗变大加宽</p><p><H5></p><p>●</p><p>五级标题标记</p><p>将字体变粗变大加宽</p><p><H6></p><p>●</p><p>六级标题标记</p><p>将字体变粗变大加宽</p><p><FONT></p><p>●</p><p>字形标记</p><p>设定字形、大小、颜色</p><p>不建议使用</p><p><BASEFONT></p><p>○</p><p>基准字形标记</p><p>设定所有字形、大小、颜色</p><p>不建议使用</p><p><BIG></p><p>●</p><p>字体加大</p><p>令字体稍为加大</p><p><SMALL></p><p>●</p><p>字体缩细</p><p>令字体稍为缩细</p><p><STRIKE></p><p>●</p><p>画线删除</p><p>为字体加一删除线</p><p>不建议使用</p><p><CODE></p><p>●</p><p>程式码</p><p>字体稍为加宽如<TT></p><p><KBD></p><p>●</p><p>键盘字</p><p>字体稍为加宽，单一空白</p><p><SAMP></p><p>●</p><p>范例</p><p>字体稍为加宽如<TT></p><p><VAR></p><p>●</p><p>变数</p><p>斜体效果</p><p><CITE></p><p>●</p><p>传记引述</p><p>斜体效果</p><p><BLOCKQUOTE></p><p>●</p><p>引述文字区块</p><p>缩排字体</p><p><DFN></p><p>●</p><p>述语定义</p><p>斜体效果</p><p><ADDRESS></p><p>●</p><p>地址标记</p><p>斜体效果</p><p><SUB></p><p>●</p><p>下标字</p><p>下标字</p><p><SUP></p><p>●</p><p>上标字</p><p>指数（平方、立方等）</p><p>列表标记</p><p><OL></p><p>●</p><p>有序列表</p><p>列表项目将以数字、字母顺序排列</p><p><UL></p><p>●</p><p>无序列表</p><p>列表项目将以圆点排列</p><p><LI></p><p>○</p><p>列表项目</p><p>每一标记标示一项列表项目</p><p><MENU></p><p>●</p><p>选单列表</p><p>列表项目将以圆点排列，如<UL></p><p>不建议使用</p><p><DIR></p><p>●</p><p>目录列表</p><p>列表项目将以圆点排列，如<UL></p><p>不建议使用</p><p><DL></p><p>●</p><p>定义列表</p><p>列表分两层出现</p><p><DT></p><p>○</p><p>定义条目</p><p>标示该项定义的标题</p><p><DD></p><p>○</p><p>定义内容</p><p>标示定义内容</p><p>表格标记</p><p><TABLE></p><p>●</p><p>表格标记</p><p>设定该表格的各项参数</p><p><CAPTION></p><p>●</p><p>表格标题</p><p>做成一打通列以填入表格标题</p><p><TR></p><p>●</p><p>表格列</p><p>设定该表格的列</p><p><TD></p><p>●</p><p>表格栏</p><p>设定该表格的栏</p><p><TH></p><p>●</p><p>表格标头</p><p>相等于<TD>，但其内之字体会变粗</p><p>表单标记</p><p><FORM></p><p>●</p><p>表单标记</p><p>决定单一表单的运作模式</p><p><TEXTAREA></p><p>●</p><p>文字区域</p><p>提供文字区域以输入更多文字</p><p><INPUT></p><p>○</p><p>输入标记</p><p>决定输入形式</p><p><SELECT></p><p>●</p><p>选择标记</p><p>建立下拉列表</p><p><OPTION></p><p>○</p><p>选项</p><p>每一标记标示一个选项（下拉列表时使用）</p><p>图形标记</p><p><IMG></p><p>○</p><p>图形标记</p><p>用以插入图形及设定图形属性</p><p>连结标记</p><p><A></p><p>●</p><p>链接标记</p><p>加入链接</p><p><BASE></p><p>○</p><p>基准标记</p><p>可将相对URL转绝对及指定链接目标</p><p>框架标记</p><p><FRAMESET></p><p>●</p><p>框架设定</p><p>设定框架</p><p><FRAME></p><p>○</p><p>框窗设定</p><p>设定框窗</p><p><IFRAME></p><p>○</p><p>页内框架</p><p>于网页中间插入动态框架</p><p>IE</p><p><NOFRAMES></p><p>●</p><p>不支援框架</p><p>设定当浏览器不支援框架时的提示</p><p>影像地图</p><p><MAP></p><p>●</p><p>影像地图名称</p><p>设定影像地图名称</p><p><AREA></p><p>○</p><p>连结区域</p><p>设定各连结区域</p><p>多媒体</p><p><BGSOUND></p><p>○</p><p>背景声音</p><p>于背景播放声音或音乐</p><p>IE</p><p><EMBED></p><p>○</p><p>多媒体</p><p>加入声音、音乐或影像</p><p>其他标记</p><p><MARQUEE></p><p>●</p><p>滚动文字</p><p>令文字左右走动</p><p>IE</p><p><BLINK></p><p>●</p><p>闪烁文字</p><p>闪烁文字</p><p>NC</p><p><ISINDEX></p><p>○</p><p>页内寻找器</p><p>可输入关键字寻找于该一页</p><p>不建议使用</p><p><META></p><p>○</p><p>开头定义</p><p>让浏览器知道这是HTML文件</p><p><LINK></p><p>○</p><p>关系定义</p><p>定义该文件与其他URL的关系</p><p>StyleSheet</p><p><STYLE></p><p>●</p><p>样式表</p><p>控制网页版面</p><p><span></p><p>●</p><p>自订标记</p><p>独立使用或与样式表同用</p><p>注：</p><p>►●表示该标记属成对标记，即需要关闭标记如</标记>。</p><p>►○表示该标记属空标记，即不需要关闭标记。</p><p>►IE表示该标记只适用于InternetExplorer。</p><p>►NC表示该标记只适用于NetscapeCommunicator。</p><p> </p><p>HTML语言剖析</p><p>文件标记-目录</p><p><HTML>；<HEAD>；<TITLE>；<BODY>；<meta>；<base>；<link>；-文件头部标签</p><p>⏹HTML基本架构：</p><p>1.以下HTMLSourceCode（源代码）便是一份HTML文件的基本架构：</p><p><HTML></p><p><HEAD></p><p><title>HTML超文本标记语言在线教程

">

00:

00">

网页的内容，很多标记都作用于此

2.特点解说：

►整个文件处于标记与之间。

用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

►文件分两部分，由至称为开头，至称主体（或者称之为正文）。

基本上两者各有适用的标记，如只可出现于开头部分。</p><p>►开头部分用以保存重要信息，而只有主体部分会被显示。</p><p>所以大部分标记会运用于主体部分。</p><p>►<TITLE>所标示的是文件的标题。</p><p>会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。</p><p>上述标记中只有<BODY>具有参数设定。</p><p>3.<META>标签相关属性</p><p>►文档标题标签：</p><p><title>HTML超文本标记语言在线教程

►

►作者：

►关键字：

►描述信息：

">

►刷新：

►跳转：

►文档过期：

00:

00">

►基础地址：

为当前文档提供了完整的URL

►链接文件：

　　　　　

　　　　　定义在当前文档和其它文档之间的关系

属性描述：

href

提供被链接的文档的Internet地址。

rel

提供向前链接的类型。

rev

指明反向链接。

title

提供一个建议的标题。

type

指明连接的stylesheet媒体类型。

►页面过渡效果：

⏹之参数设定：

※例:

►text="#000000"

用以设定文字颜色。

#000000代表黑色，亦可以采用颜色的名称，即text="black"。

各种颜色的值及名称可参考【调色原理】一节。

►link="#0000FF"

设定一般文字链接颜色。

（默认为蓝色）

►alink="#FF0000"

设定鼠标刚按下时文字颜色。

►vlink="#0000FF"

设定链接访问后的颜色。

（被点击过）。

►background="bg1.gif"

设定背景图片。

GIF或JPEG皆可，可以是绝对途径或相对途径。

►bgcolor="#FFFFFF"

设定背景颜色。

当己设定背景图片时会失去作用，除非图片有透明部分。

►leftmargin=2

设置网页的左边距，单位为像素。

『只适用于IE』

►topmargin=2

设置网页的上边距。

『只适用于IE』

►bgproperties="fixed"

固定背景图片，当滚动条拖动时背景图片不会跟着滚动。

『只适用于IE』

注：

标记及参数之字母大小都可以。

HTML语言剖析

字体标记-目录

⏹实体标记与逻辑标记：

实体标记与逻辑标记的区别：

1.实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。

例如逻辑标记的由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。

2.多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。

例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用。

►实体标记有：

►逻辑标记有：

注：

若要求真确的效果当然以实体标记为佳。

⏹：

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为gb2312Encoding时，两者所标示的中文字不会于NetscapeNetvigator显示粗体效果。

⏹

：

这些标记于InternetExplorer都产生斜体效果，而只有于NetscapeNetvigator失去作用。

这些标记中只有

较为特别，因为它自身具备换行效果所以不需要在它前面加上
标记。

⏹

►可令每字母有相等宽度且每字母之间的距离稍为加宽。

但于NC不见得如此。

►是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。

►加上删除线的标记。

►令字体加大。

►令字体变细。

►为下标字，则为上标字，仅剩的数学标记

⏹

：

这些是标题标记，由

至

变粗变大加宽的程度逐渐减小。

每个标题标记所标示的字句将独占一行且上下留一空白行。

⏹：

►可以用于文件的开头部分，即与之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。

是应用于文件的内文部分，即与之间的位置，只影响所标示的字句，是一个围堵标记。

►两标记可同时存在，唯没被所标示的字句才直接受所影响，而本身亦受的影响。

的参数设定：

※例：

我把青春献给你

►face="Arial"

设定文字的字形。

Arial是常用的一种，请不要使用Window内建字形以外的字形。

于没有设定为Gb2312Encoding的中文网页，NetscapeNetvigator不会显示此标记所指明的任何中文字形。

►size="+2"

设定文字的大小。

其值可以是绝对或相对，

绝对的意思便是标记自己决定文字的大小，不受的影响，如

size="5"表示其大小便是5，而html内定值为3，即size="3"和没有设定是一样的。

相对的意思便是在内定值3的基础上增加或减少大小级数，如size="+2"便等同绝对表示法的size="5"，但若已设定则其实际大小便是n+2不再是3+2了。

只有绝对表示法。

►color="#008000"

设定文字的颜色。

#008000表示绿色

HTML语言剖析

段落标记-目录

--注解-->；

；
；

；
；
；
；；
⏹
--注解-->：
►为文中不同部份加上说明，方便日后修改。
※例：
--由此处开始是表格排版的相关知识-->
►用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字眼。
※例：
--本文版权为2005,Copyright©华夏第一芥版权所有，未经允许，请勿抄摘-->
⏹
：
称为段落标记。
作用：
在文字、图、表格之间增加一空白行。
原来
是一成对标记，标于一段落的头尾，但从HTML2.0开始己不需要
作结尾。
的常用参数：
如：
►align="center"
可选值：
right,left,center。
内定值：
align="left"
⏹
：

称为换行标记。
作用：
使文字、图、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分，这令到
成为最常用的标记之一。
因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。
※例：
错误示范：
（邮局不会接受一行过的地址）
源代码
9686#No.55feixiroad
hefeianhui
ThePeople'sRepublicofChina
结果
9686#No.55feixiroadhefeianhuiThePeople'sRepublicofChina
正确例子：
源代码
9686#No.55feixiroad

hefeianhui

ThePeople'sRepublicofChina
结果
9686#No.55feixiroad
hefeia

		

           
展开阅读全文
猜你喜欢
相关搜索

当前位置：首页 > 高中教育 > 初中教育

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1