《页面静态标记A》PPT课件.ppt

页面静态标记(A),201003,2,主要内容,HTML简介 HTML文件编写工具 一个HTML文件的简单例子 HTML的相关术语 HTML文件的基本结构 及其相关标记 及其相关标记 标记 文字显示标记 段落控制标记 图像和超链接标记 列表和格式预定标记,201003,3,HTML简介,HTML是HyperText Markup Language的缩写 一个HTML文件(即网页)是一些文本再加上一些标记符(markup tags)组成 标记符的作用是告诉浏览器如何显示HTML文件中的文本 HTML文件必须有.htm或者.html的文件后缀 HTML文件可以用简单文本编辑工具编写，如Windows中的记事本，也可以使用其他页面开发工具，如Dreamweaver、FrontPage、等,201003,4,HTML文件编写工具(1),FrontPage Dream Weaver Notepad(记事本) ,201003,5,HTML文件编写工具(2),Notepad记事本,201003,6,静态页面设计,一个简单例子 网页的标题 这是我的第一个网页 此处文本为斜体 ,201003,7,HTML相关术语（1）,Tag(标记符) HTML tag(标记符)是用来标记HTML element(元素)的 HTML 标记符由符号“”合围起来 标记符一般成对出现(围堵标记)比如和，也有单独出现(空标记)的标记如 对于成对出现的标记，第一个称为start tag(起始标记符)，接着出现的称为end tag(结尾标记符) 在起始和结尾标记符之间的称element content(为元素内容) HTML 标记符大小写不敏感和意义相同,201003,8,HTML相关术语（2）,element(元素) 此处的HTML元素开始于: 此元素的内容是：此处文本为斜体 此元素以结束于: 此处标记符的作用再于说明此处的元素内容以斜体显示,此处文本为斜体, 这是我的第一个网页 此处文本为斜体 ,201003,9,HTML相关术语（3）,Tag attributes(标记的属性) 标记可以具有属性，属性可以给HTML元素提供更多信息 例如在标记中可以有bgcolor属性，这个属性说明浏览器显示区域的颜色。若使bgcolor取值为red，则浏览器显示区域呈现红色。例如 属性的写法为：属性名称=“属性值” 属性写在起始标记中,201003,10,HTML基本架构（1）, ,201003,11,HTML基本架构（2）,整份文件处於标记与之间。用以说明这是 html 文件，让浏览器认出并正确处理此 html 文件。 文件分两部分，由至称为头部，至称体部。 基本上两者各有适用的标记。,201003,12,头部及其相关标记（1）,和 首部标记和位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。 和 在首部标记符中，最基本、最常用的标记符是标题标记和，用于定义网页的标题。 当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。演示 网页标题 ,201003,13,头部及其相关标记（2）,和 样式的定义写在和之间,CSS一节详细讲述。 用于说明与网页有关的信息，如：说明网页的制作工具、文件作者等信息。 ,201003,14,标记,和标记 体部文标记符和包含Web 页的内容，同时也可以配置一些有用的页面属性，如： text=“#000000“ 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=“black“ 。 background=“bg1.gif“ 设定背景 纸。GIF 或 JPEG 皆可。 bgcolor=“#FFFFFF” 设定背景颜色。 topmargin=2 设定整份文件显示画面的上方边沿空间。 只适用於IE leftmargin=2 设定整份文件显示画面的左方边沿空间，单位为像素。 只适用於IE,201003,15,文字显示标记(1),文字控制标记 设置文字的大小 在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。用标记设置字号。设置文字的大小的格式为： 被设置的文字 标记可设定文字的字体、字号和颜色。其中属性： size 用来设置文字的大小。数字的取值范围从 17，size 取 1 时最小，取 7 时最大。 face 用来设置字体。如黑体、宋体、楷体_GB2312、隶 书、Times New Roman 等。 color 用来设置文字颜色。演示,201003,16,文字显示标记(2),.标题 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为： 标题文字 属性 align 用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）或 right（右对齐）。属性 n 用来指定标题文字的大小。n 可以取 16 的整数值，取 1 时文字最大，6 时文字最小。 演示,201003,17,文字显示标记(3),斜体显示标记 粗体显示标记 加下划线显示标记 下标字体标记 上标字体标记 大字体标记 小字体标记 文字居中已经不再使用 演示,201003,18,段落控制标记（1）,注释标记 像很多电脑语言一样，HTML 文件也提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示。一般使用目的是为文中不同部分加上说明，方便日后阅读和修改。注释标记的格式为： 注释并不局限于一行，长度不受限制。结束置标符不必与开始置标符在同一行上。 演示,201003,19,段落控制标记（2）,换行标记 放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。由于浏览器会自动忽略原始码中空白和换行的部分，这使成为最常用的标记之一。 演示,从本例可以看出，HTML 语言忽略多余的空格， 最多只空一个空格。在需要空格的位置，可以 用“”可以 在文本中加入任意多个空格。,201003,20,段落控制标记（3）,段落标记 在 HTML 文档中，无法用多个回车、空格、键来调整文档段落的格式。要用 HTML的标记来强制换行、用标记分段。 段落标记放在这段文字的末尾，就定义了一个新段落的开始。标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。 属性align=“对齐方式” 可选参数为:left, center, right 演示,201003,21,段落控制标记（4）,分隔线 在页面中插入一条水平标尺线(Horizontal Rules)，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到 HTML 文件中的标记时，会在此处换行，并加入一条水平线段。线段的样式由标识的参数决定。水平线标记的格式为： 属性align 设定横线放置的位置， 属性size 设定线条粗细，以像素为单位，默认为 2。 属性width 设定线段长度，可以是绝对值（以像素为单位）或相对值 属性color 设定线条颜色，默认为黑色。 演示,201003,22,图像标记,图像标记的基本使用 使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。 格式为： src 属性用于指定要插入的图像的文件名（包括路径） 如: alt 属性表示图像的简单文本说明 width 和 height 属性 border 控制图像边框宽度 演示1 演示2,201003,23,超链接标记(1),文字超链接 标记符用于创建超链接(结束标记符不能省略)，通过单击一个词、句或一段话，可从此处转到另一个链接资源。 格式为: 文字 href属性属性 href 为超文本引用（hypertext reference），它的值为一个 URL，是目标资源的有效地址。 target属性 设定链接被按后结果所要显示的窗口。可选值为：_blank，_self， _parent等。 演示,201003,24,超链接标记(2),图像超链接 演示 锚点链接 使用锚点超链接时，首先需要定义锚点，然后在超链接中指向该锚点。 定义锚点应使用 指向锚点：link 演示 电子邮件链接 演示,201003,25,列表标记和预定格式标记(1),列表标记 有序列表（Ordered list）也称数字式列表，它