T1 HTML页面及基本标记

1、HTML页面与基本标记第一章第一章课程目标页面与基本标记的使用表格的设计与应用表单与页面控件CSS样式定义与应用框架与多媒体效果浮动窗口、层的基础层的应用、滤镜使用Dreamweaver设计网页项目演示淘宝网淘宝网了解网页基本知识掌握HTML文件的结构 理解HTML文件的背景色及文本色 掌握超链接的使用 掌握文字排版等标记掌握图像标记本章任务完成如图所示的HTML页面超文本标记语言-HTMLHTML是Hypertext Markup Language(超文本标记语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标记语言。HTML文档由文本和HTML标记组成，通常以

2、.html或者.htm为文本的扩展名(如index.htm)浏览器浏览器负责翻译HTML文档中的标记，并将HTML文档显示为网页。网页基本知识互联网是世界上最大的计算机网络；互联网上的信息各种各样.有文字,图片,视频,动画等要把这些信息美观大方的显示在网页上,就要用到HTML标签用HTML标签编写的网页是一个个的文件网站就是由若干个文件组成网页基本知识统一资源定位器统一资源定位器URL(URL(又称又称”网址网址”)”)（Uniform Resource LocatorUniform Resource Locator）例如：例如：http:/ 其中其中http:/http:/是是传送协议传送协

3、议 是是服务器名称服务器名称 index.htmlindex.html 是是文件的完整路径文件的完整路径.com .net .gov .com .net .gov 等等代表服务类型。等等代表服务类型。comcom表示的是商业机构表示的是商业机构netnet表示的是网络服务机构表示的是网络服务机构govgov表示的是政府机构表示的是政府机构eduedu表示的是教育机构表示的是教育机构cn,tw,hkcn,tw,hk这一类的表示不同区域，分别是中国，台湾，香港。这一类的表示不同区域，分别是中国，台湾，香港。 如如: : * * * * *表示中国的商业网站。表示中国的商业网站。超文本标记语言-HT

4、MLHTML标记是由浏览器负责解释执行的， 不同的浏览器中网页的显示效果可能不同。大多数浏览器不完全支持HTML的所有特性，每一种浏览器都可能会有一些特有的HTML标记和属性，这些标记和属性可能不会被其他的浏览器识别。这些由软件公司开发的标记和属性被称为HTML扩展，而不是标记的一部分。小结:1、URL代表什么意思？2、HTML代表什么意思？3、HTML文档通常以什么格式保存？HTML页面的基本结构HTML页面基本结构：起始标记、网页标题、文件主体如下所示：网页的标题和属性网页的标题和属性文件主体文件主体, ,要显示的内容要显示的内容HTML标记的基本格式： 文件内容文件内容/ 比如:标题某些

5、标记还可以包含一些属性： 比如:文字将显示红色用来注释的标记 !- - 例如例如:!-:-HTMLHTML标记可以嵌套，标记可以嵌套，但不能交叉嵌套但不能交叉嵌套，如下，如下可以这样 不可以这样 起始标记标记用于标记用于HTMLHTML文档的最前面，用来标记文档的最前面，用来标记HTMLHTML文档的文档的开始开始, ,则是放在则是放在HTMLHTML文档的最后面，用来表示文档的最后面，用来表示HTMLHTML文档的结束文档的结束必须配对使用必须配对使用标记对构成HTML文档的头部分,头中可以包含其他标签，如:ltitle标记: 文件标题llink标记: 定义文档关联的文件，用于链接CSS样式

6、表文件或Javascript程序文件等lmeta标记: 说明文档类型以及编码格式，gb2312为中文编码，默认为UTF-8,UTF-8 是unicode的一种实现方法 就是全世界通用的编码.l必须配对使用必须配对使用主体标记标记对之间的内容是HTML文档的主要部分，在此标记对之间可包含众多的标记和信息。标记可以设置如下的属性：必须配对使用必须配对使用常用标记标题标记:一般文章都有标题、副标题、章和节等结构， HTML中也提供了相应的标题标记，其中n为标题的等级,可以1-6之间的数字，1最大,6最小。例如:我的开发之路可以有对齐属性，align=对齐方式对齐方式可选:left 标题居左；cent

7、er 标题居中；right 标题居右,默认左对齐例如:我的开发之路段落标记在文章的排版过程中,段落与段落之间是有间隔的,HTML中提供了标记来实现；与标记一样，可以有align属性段落标记换行标记标记可以创建一个回车换行，在html代码中，敲打键盘换行的代码显示在网页中并不会换行，所以换行要用标签预排版标记() 标记允许保留你在原代码中输入的空标记允许保留你在原代码中输入的空格和回车格和回车, ,使用方法如下：使用方法如下： 编号编号 名称名称 价格价格( (元元) )001 001 语文教材语文教材 20.0020.00 字体标记()用来设置文本的字体常用方式：态度决定一切 face设置文字

8、的字形size设置文字的大小，其值为数字color设置文字的颜色，可以采用red、blue、green等值，也可以采用6位十六进制，分别指定红、绿、蓝的值效果效果字体风格字体风格可以分为物理风格和逻辑风格；物理风格直接指定字体，逻辑风格指定文本的作用指定物理风格的常用标记有： 黑体、斜体、下划线、打字机体指定逻辑风格的常用标记有： 强调、特别强调、较小、较大 、上标、下标等例如:今天有风最高气温10。 也可以使用font的style属性设置,例如:刘德华设置字体风格设置字体风格黑体斜体下划线打字机风格强调加重水平线()显示水平分割线常用方式：align设置线的对齐方式size设置线条的粗细，以

9、像素为单位，默认值是2width设置线条长度，以像素为单位，可以采用像素值或百分比color设置线条的颜色滚动字符()标记实现跑马灯效果:常用方式：欢迎光临本站direction设置活动字幕的滚动方向，可以是up、down、left、rightbehavior设置滚动的方式，可以是scroll(一端滚动到另一端)、slide(一端快速滑动到另一端，且不再重复)、alternate(在两端之间来回滚动)height设置滚动字幕的高度bgcolor：用于设定活动字幕的背景颜色width：则设定滚动字幕的宽度hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度(上下左右留白)。

10、 scrollamount：用于设定活动字幕两次之间的滚动距离(像素)。 scrolldelay：用于设定滚动两次之间的延迟时间(毫秒)。如:-每200毫秒移动10像素 loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新图像标记()的常用方式： img.html图像标记()属性介绍：属性介绍：src:设置图片的路径，一般使用相对路径。width和height:设置图片的宽和高，一般设为图像的真实大小，以免失真。alt:设置描述该图形的文字。border:设置图像的边框，以像素为单位。align:属性用于指定图像元素相对于周围元素的水平和垂直飘浮方式。可选值：top,

11、middle, bottom, left, right，默认为bottom 页面链接页面链接可以分为：外部链接、内部链接以及邮件链页面链接可以分为：外部链接、内部链接以及邮件链接接外部链接：外部链接：从一个页面链接到另一个页面。使用方法：从一个页面链接到另一个页面。使用方法：相册相册百度百度相对路径和绝对路径：假定相对路径和绝对路径：假定a.htmla.html和和b.htmlb.html均放在均放在e:mywebe:myweb文件夹中，在文件夹中，在a.htmla.html页面中链接到页面中链接到b.htmlb.html；采用相对路径时：采用相对路径时： B B 采用绝对路径时：采用绝对路径

12、时：a Bhref=“e:mywebb.html”B采用哪种方式更好？为什么？采用哪种方式更好？为什么？页面链接内部链接：链接到同一页面中或指定页面中的参考点。使用方法分两步：1、 先在欲链接处作记号：2、 设定链接：链接内部链接内部链接.html 页面链接邮件链接：可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件。使用方法： a ”清清华华ITIT 清单标记清单的功能在WORD里面叫做“项目符号及编号”HTML中常用的清单有三种形式：无序清单（unordered List） 有序清单（ordered list） 定义清单（definition list）无序清单(ul)的常用方式：星期一星期二星期三type设置符号的样式，可以是square(方形)、disc(圆圈)、circle(点)有序清单(ol)的常用方式：星期一星期二星期三type设置编号的样式，可以是”A”(大写字母)、”a”(小写字母)、”I”(大写罗马数字)、”i”(小写罗马数字)、“1”(