1、第4章 网站设计基础语言,主讲：,本章要点,HTML的基本概念 页面标记 文字与段落标记 列表 超级链接 表格与表单,4.1 HTML的基本概念,4.1.1 HTML的来历 4.1.2 HTML相关概念 4.1.3 如何编辑HTML文档,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.1.1 HTML的来历,HTML语言是一种用来描述Web站点信息的脚本语言。万维网联盟（W3C，World Wide Web Consortium）负责制定HTML标准。目前最新的HTML版本是HTML 401，后续版本则以XHTML的名字出现。,HTML不是程序设计语言，而是一种脚本描述语言。HTM
2、L不进行严格的语法检查，但如果语法错误，有可能造成显示效果不好。,4.1.2 HTML相关概念,HTML文档是文本格式，一般以名为*.htm或*.html的形式存在。可以通过文本阅读工具，比如用Windows自带的记事本打开它，打开后会看见HTML文档其实是一行行的文本，而并非如它表面上呈现的那样由多种媒体构成。,文本文件,标记,标记或标签（tag）是用一对尖括号“”括起来的单词或单词缩写，是HTML的主要内容。每一个（或一对）标记都具有特定的描述功能，有的用来描述文字的外观，有的用来描述图片呈现形态。HTML使用这些不同功能的标记来完成Web页面呈现效果的描述。,有的标记本身描述能力有限，还
3、需要配合使用“属性”，每个标记具有数目不等的属性。 标记分为双标记和单标记。两个标记合用才能表达某个含义的称为双标记，如就是一对标记，分别表示居中设置的开始和结束。,4.1.3 如何编辑HTML文档,可以使用Dreamweaver、FrontPage等软件编写HTML文档，这些软件帮助编写者构建了大部分的HTML文档。当需要有目的地学习HTML语言时，往往选择简单的文本工具，如Windows自带的记事本，或者功能更丰富的文本编辑软件如UltraEdit。,4.2 页面标记,4.2.1 标记 4.2.2 标记 4.2.3 标记 4.2.4 标记 4.2.5 标记,4.1,4.3,4.4,4.5,
4、4.6,4.7,4.8,4.2.1 标记,是文档开始标记，它告诉浏览器，HTML文档从该处开始。是对应的结束标记，表示HTML文档的结束。,注意：一个文档只能拥有一对 。,文档首部文档主体 ,标记内部可以分为部分（首部）和部分（主体） 。,4.2.2 标记,标记定义了文档的首部，其中包含对文档整体属性的描述，如文档标题、文档搜索关键字、文档生成器等。,4.2.3 标记,标记处于中，用以标识文档的标题，即浏览器标题栏的文本。,这是标题 title标记的应用实例 ,4.2.4 标记,标记用来记录页面内容属性（如字符编码、作者、版权信息或关键字），也可以用来向服务器提供信息，如页面的失效日期、刷新间
5、隔和 pics等级。,有三个属性：name、httpequiv和content。,name和httpequiv属性标明meta标记要定义的页面信息类别，而content则说明这些不同类别信息的值。,4.2.5 标记,标记定义了文档的主体部分，页面的可见部分都要在中描述。由于标记承载了文档的全部可见元素，因此对的属性设置也将影响整个文档的外观。,标记有的常用属性,(1)背景颜色（bgcolor）,(2)背景（background）,(3)文本颜色（text）,(4)边距（leftmargin，topmargin，rightmargin，bottommargin）,4.3 文字与段落,4.3.1
6、文字标记 4.3.2 段落标记 4.3.3 换行标记,4.2,4.1,4.4,4.5,4.6,4.7,4.8,4.3.1 文字标记 使用文字与段落标记可以设置段落、字体、色彩和特殊效果。,标记 设置文字的字体、颜色和大小，是一个双标记。,标记有三个常用属性:大小（size）、颜色（color）、字体（face）。,标题标记 设置标题文字。共有6个，分别是。被设置为标题的文字自动独占一个段落。,标题标记有align（对齐）属性，属性值有left（默认）、center、right。,其他文字标记,（1）：设置加粗文字。 （2）：设置斜体文字。 （3）：为文字加下划线。 （4）：设置文字为上标。 （
7、5）：设置文字为下标。 （6）：为文字加删除线。,4.3.2 段落标记 段落标记用来设置段落，是双标记。被包围起来的元素构成一段。可以设置标记的align属性。,4.3.3 换行标记,换行标记是单标记。文档中的一段文字默认是充满页面左右的，并随着页面大小变化而自动换行，有时元素排版需要换行。,与对应的还有标记，它禁止浏览器自动换行。包围的文字，每一段只显示在一行中。,4.4 列表,4.4.1 有序列表 4.4.2 无序列表 4.4.3 列表的嵌套,4.2,4.1,4.3,4.5,4.6,4.7,4.8,4.4.1 有序列表,标记用来定义有序列表，标记用来定义单个列表项。一个列表中包含有若干列表
8、项。,标记有两个常用属性：type和start。type设定有序列表的序号类型，其属性值有5个：1表示数字编号（默认）；a表示小写字母；A表示大写字母；i表示小写罗马数字；I表示大写罗马数字。start设定有序列表的初始编号值，属性值为数字。,4.4.2 无序列表,标记用来定义无序列表，同一样使用定义列表项。,标记的type属性用来设定列表项目符号的类型。type属性有三个值：circle、disc和square。内部的也同样使用type属性来定义属于自己的项目符号类型。,4.4.3 列表的嵌套,如果列表的某个项目又是一个列表，就形成了嵌套列表。,4.5 文字与段落,4.5.1 超级链接的概念
9、 4.5.2 绝对地址与相对地址 4.5.3 内部链接与外部链接 4.5.4 书签的使用,4.2,4.1,4.3,4.4,4.6,4.7,4.8,4.5.1 超级链接的概念,超级链接（简称超链接或链接）是指向万维网特定资源的指针，该资源可能是另一个HTML文档，也可能是应用程序等。超链接有起始点，就是当前页面的超链接标记；有目的点，就是链接到的资源。,是HTML的超链接标记，其应用格式为： 超链接载体,href标识链接目标资源路径。,除了href，target也是标记常用的属性，用来设定链接目标的打开位置。target=“_self”表示在本窗口中打开（默认）；target=“_blank”表
10、示在新窗口中打开。超链接载体可以是文字，也可以是其他元素。超链接文字具有不同的颜色，一般默认为蓝色，已访问的超链接则为紫红色，也可以自行定义超链接的颜色。使用标记的link、vlink、alink属性可以自定义链接、已访问链接和活动链接的颜色。,4.5.2 绝对地址与相对地址,href属性指向的目标地址可以分为绝对地址和相对地址。从链接起始文档出发到达目标资源的路径就是相对地址，而绝对地址则是从本机或本域名根目录出发到达目标资源的路径。URL属于绝对地址。,Web资源具有惟一的绝对地址，却可以表达为两种不同的形式。 file:/d|/web/target.html http:/ 内部链接与外部
11、链接,若链接目标指向的是本站内部资源，则称为内部链接；若目标指向了站点外部的资源，则称为外部连接。 内部链接既可以采用绝对地址又可以采用相对地址，而外部链接只能采用URL地址即绝对地址形式。,4.5.4 书签的使用,不管是内部链接还是外部链接，只能链接到某个文件。对于一些比较大的HTML文档，有时不仅要链接到该文档，还需要链接到文档内部某个精确位置，如同在看书时不仅找到书，还找到书中某一页。可以使用所谓的“书签”（或称为锚点）完成这一功能。,在targethtml中添加书签 ,4.6 设置多媒体,4.6.1 图片的插入与设置 4.6.2 播放音乐 4.6.3 插入视频,4.2,4.1,4.3,
12、4.5,4.4,4.7,4.8,4.6.1 图片的插入与设置,标记用来向文档插入图片。,本身不能完成这一功能，还需要借助于诸多属性。,源文件（src）:设定图片源文件。 宽和高（width，height）：设定图片的宽度和高度，单位为像素。 替代（alt） ：设定替代文字，在图片未显示时用该文字替代，将鼠标指针移动到图片上时同样会显示替代文字。 对齐（align） ：设定图片与其他元素的对齐方式。 边框（border）:设定图片的边框粗细，以像素为单位，默认为无边框。,4.6.2 播放音乐,使用标记可以向页面中插入各种类型的音乐，如.wav、.mid等。需要注意的是，若要正常浏览插入了音乐的页
13、面，则本机上必须安装相关的播放器，常见的有Windows Media Player、RealOne Player等。可以设置插件面板隐藏属性hidden=“true“，则用户只能听，而不能控制音乐播放。但若设置自动播放属性autostart的值为false而面板隐藏属性的值为true，则音乐将无法播放。,使用标记插入音乐,使用标记插入点播音乐,将超链接的目标设置为某音乐文件，就是点播音乐。,还可以使用标记设置背景音乐，格式为： ,使用标记插入背景音乐,4.6.3 插入视频,与使用插入音乐格式类似，需要注意的是，在插入视频时，播放窗口的尺寸与视频播放尺寸要吻合，否则会造成失真。,使用标记插入视频
14、,使用标记插入视频,标记除了能插入图像外，还可以向页面中插入视频，dynsrc属性指出视频的位置，start设定开始播放的方式（fileopen或mouseover），loop设定循环次数。,4.7 表格,4.7.1 制作表格 4.7.2 尺寸设置 4.7.3 颜色与背景设置,4.2,4.3,4.4,4.5,4.1,4.6,4.8,4.7.1 制作表格,表格标记是，但仅靠它不能构成表格，还需要形成表格的行和列。,表格由单元格构成，单元格分为表头单元格（）和表元单元格（）。表格中任何一个单元格都可以是表头单元格或表元单元格。 表格以行（）为单位组织单元格，被包围的所有单元格组成一行。,4.7.2
15、 尺寸设置,通过width和height两个属性来设置表格或单元格的大小。可以是绝对数值（以像素为单位），也可以是百分比数值。,如果设置的宽度或高度为百分比形式，则表格大小会随着外层容器的缩放而变化。,表格的大小（width, height),border属性用于设置表格的边框粗细。,cellspacing用于设置单元格之间的距离，cellpadding则用于设置单元格中内容距离单元格边框的距离。,边框的尺寸（border）,单元格间距（cellspacing）与边距（cellpadding）,表格有三种元素：table、tr、td或th，许多属性是三种标记都具有的。对于标记有效的属性有wid
16、th，height，border，bordercolor（边框颜色），bgcolor，background，align，cellspacing（单元格间距），cellpadding（单元格边距），frame（边框类型）等。对于标记有效的属性有bordercolor，bgcolor，align，height，valign（垂直对齐方式）等。对于和有效的属性有align，valign，width，height，bordercolor，bgcolor，background等。,4.7.3 颜色与背景设置,除了bordercolor，还有bordercolordark、bordercolorlight
17、两个属性可以更详细地设置边框颜色。,边框颜色（bordercolor）用来设定表格边框颜色，对于、或都有效。,用来设定表格的背景颜色，对于、或都有效。bgcolor的用法与bordercolor属性的设置类似。,用来设定表格的背景图像，对于、或有效。,背景颜色（bgcolor）,背景图像（background）,4.8 表单,4.8.1 表单的概念 4.8.2 表单的一些元素,4.2,4.3,4.4,4.5,4.6,4.7,4.1,4.8.1 表单的概念,表单用于收集和提交用户数据，在动态页面构建中有重要的作用。许多网络应用如账户登录、信息查询等，都需要用户输入数据，Web服务器根据数据做出应答。 比如登录电子邮箱，不同的用户名登录，得到的结果是不一样的，并且用户名和密码不匹配的不能登录。浏览者在客户端输入的数据正是通过表单传递给Web服务器的，服务器验证和处理这些数据后，才能形成动态变化的页面内容。,4.8.2 表单的一些元素,表单是一个容器，其中可以包含多种表单元素，这些元素用来获取各种形式的数据。表单元素有文本框、复选框、单选按钮、下拉列表框、文本域等。,文本框 用于输入单行文本,复选框 用于设置多选项目,单选按钮 用于设置单选项目,按钮 用于触发特定动作,文本域 允许用户输入多行文字,下拉列表框 用于设置项目选择或者跳转,谢谢！,
