html基础教程剖析

《html基础教程剖析》由会员分享，可在线阅读，更多相关《html基础教程剖析（42页珍藏版）》请在金锄头文库上搜索。

1、第2章,HTML基础,本课教学内容,静态网页制作 HTML的常见标签（文字布局、文字设计标签） 表格标签 链接和图片标签 表单标签（文本框、密码框、下拉列表） 框架,网页实景图,2.1 静态网页制作,一个网站，由许许多多的网页组成，通过地址向 服务器发出请求后，接收到可以被浏览器运行解释的 文件，由浏览器显示出来。（思考题：请大家回忆第一 节课当中讲的：从在浏览器地址栏输入URL到显示出网 页界面，中间有哪些过程？） HTML（超文本标记语言），是构成网页文档的主 要语言。一般情况下，网页上看到的文字、图形、动 画、声音、表格、链接等元素大部分都是由HTML语言 描述的。,思考题参考答案,1.

2、客户端（比如：IE、FireFox、360）接受用户的输入，如用户名、密码、查询字符串等； 2.通过域名服务器DNS获得域名指向的IP地址； 3.浏览器得到域名指向的IP后，浏览器会把我们输入的域名转化为HTTP的服务请求，通过这种方式浏览器向服务器发出了请求，应用服务器接收到请求后，使用某种脚本语言访问数据库，查询数据，并获得查询结果； 4.数据库向应用服务器中的程序返回结果； 5.应用服务器向客户端发送响应信息，返回的一般是动态生成的HTML页面，包括文字信息，图片，flash等(每个文件都要有一个唯一的网址). 6.由用户浏览器负责解析HTML代码，显现用户界面。,给HTML语言打的广告

3、,一种进行网页设计的语言 一种标签式的程序设计语言 一种纯文本式的语言 一种简单易学的语言 一种可以使用文本编辑器进行编辑的语言 编辑的文件名后缀是”.html”。,2.1 静态网页制作（续）,HTML语言的基本组成部分是各种标签，一张生动的网页往往含有大量的标签。使用标签，实际上就是采用一系列指令符号来控制输出的效果，如：，是最常使用的控制格式的标签，它表示在网页上换行。,2.1 静态网页制作（续）,HTML有两种类型的标签，一类是单标签，就是一种单标签，它只需要单独一组符号就可以表示完整的功能。另一种是双标签，形如内容，表示将“内容”显示为粗体，这种标签所围绕的内容就是标签作用的作用域。,

4、2.1 静态网页制作（续）,HTML语言对于大小写不敏感，比如马上将要学习的表示HTML文档的标签：，也可写做，甚至可以写为，但是一般推荐，自始至终使用同一种书写方式。,HTML文件基本结构, 标题 （浏览器标题） 内容主体（网页具体内容） ,（头部信息：用于设置网页相关属性，比如网页标题、缓存等，可以省略）,HTML文件基本结构（续）,2.2 HTML中的常见标签：标题, HTML简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 ,一般形式为内容，即到，为最大，为最小,运行结果,2.2 HTML中的常见标签：换行标签, 欢迎学习 HTML

5、这会是一种很有趣的体验 另一个段落元素 ,2.2 HTML中的常见标签：段落标签, 欢迎使用 HTML 这会是一种很有趣的体验 另一个段落元素 ,2.2 HTML中的常见标签：段落标签,为段落标签，一个段落开始由来 标记，结束用表示。有一个常用 属性align，它用来指明内容显示时的对 齐方式，较为常用的有left、center、 right，分别表示左对齐、居中对齐和右 对齐。,2.2 HTML中的常见标签：段落标签（续）, 学习HTML 这会是一种很有趣的体验 ,右对齐,2.2 HTML中的常见标签：水平线段标签,水平标尺标签用于在页面上绘制一条水平线。可借助 于下列属性控制水平线。它只有

6、开始标签，没有结束标签，且 不包含任何内容， size:水平线的宽度，单位为像素。 width：水平线的长，如不设置则默认为页面长度，单位默认为像素， 但也可以使用百分制，如width=50表示长度为页面长度的50. align:水平线的对齐方式，常用的有left、center、right. noshade:线段无阴影属性，无属性值，若设置，则线段为实心线段。 color:线段内部的颜色。,2.2 HTML中的常见标签：水平线段标签(续）, 欢迎使用HTML 我的第一个HTML文档 这将会是一种很有趣的体验 ,2.2 HTML中的常见标签:文字设计标签,文字设计标签 face：用来设置字体类型

7、，默认为宋体。如，即设置该内容的输出的字体为楷体但是需要注意的是，只有电脑中安装的字体才可以在浏览器中出现相应风格，如果用户没有安装该字体，则会显示默认字体的风格。 color：用于设置字体颜色,2.2 HTML中的常见标签:文字设计标签（续）,文字设计标签 常见的设置文字风格的标签有： 内容：将内容设置为粗体。 内容：将内容设置下划线。 内容：将内容设置为斜体。 内容：将内容设置为上标。 内容：将内容设置为下标,字体颜色标签示例, 字符级标签示例 Black， Olive， Teal， Red， Blue， Maroon， Navy， Gray， Lime， White， Green， Pu

8、rple， Silver， Yellow， ,2.2.2 列表标签,列表标签分为两种，一种是有序的，一种是无序的。 内容，表示它所包围的内容是无序列表标签，即列表中每一项目前不会加上序号，而是会加上、等符号。 内容表示有序标签，意义与使用方法和无序列表标签大致相同，不同点为它会在每个列表项前加上数字 其中列表的每一项用列表项 标示。,无序列表, 学习 HTML 星期一 星期二 星期三 星期四 星期五 ,无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表 包含在无序列表标签 内。列表中的每个项目都使用列表项 进行标签，关闭标签是可选的。,列表的项目符号, 方形项目符号 实心圆项

9、目符号 空心圆项目符号,有序列表, 学习HTML 星期一 星期二 星期三 星期四 星期五 ,有序列表包含在 标签内。有序列表也显示列表项目。它与无 序列表的区别在于有序列表项前面的编号是可设置的有序编号。,无序和有序的嵌套,大写罗马数字 小写罗马数字 大写字母 小写字母 从第n个值开始编号, 学习HTML 星期一 简介HTML 创建列表 星期二 创建表 插入图像 星期三 星期四 星期五 ,2.3 表格标签,编写表格所用到的标签如下： ：定义表格，表格的所有内容都写在这个标签之内 ：定义标题，标题会自动出现在整张表格的上方 ：定义表行 ：定义表头，包含在之间，表头中的文字会自动变成粗体 ：定义表

10、元(表格的具体数据)，包含在之间,表格标签,以下为制作表格的标签中大多拥有的公共属性： align：水平布局方式，常用属性值有 left，right，center，表示左对齐，右对齐和居中对齐，的该属性表示表格在页面的布局方式，、的该属性表示该行和该表元内的内容的布局方式。默认布局方式为左对齐 bgcolor：设置背景颜色 border：设置边框的宽度，属性值为整数，为 0 时表格没有边框，默认值为 0 width：宽度，默认单位为像素，也可以使用百分制单位 height：高度，默认单位为像素；也可以使用百分制单位,表格标签,对于整张表格，标签常用的属性有以下几个： bordercolor：表

11、格边框的颜色，默认为黑色 cellpadding：表元边框的宽度 cellspacing：表元的边框与表格边框之间的宽度,合并单元格,合并单元格必须对标签中的 rowspan、colspan 进行设置，属性值都为整数，默认为 1，表示没有合并。这两个属性的意思分别为：从该表元起，该表元在行或者列上占有的单 元格数，比如设置某个标签rowspan=2，表示该表元及其下面的表元合并成一个,表格标签,2.4 链接和图片标签,链接标签可以使用户链接到另一个页面，它的写法是内容，标签内的内容为链接所显示的内容，可以是文字、空格占位符、图片等，此标签的一个重要属性是：href，它的值表示链接所指向的资源地

12、址。,2.4 链接和图片标签,图片标签比较重要和常用的标签有以下几个： src：表示图片储存的位置 width，height，border，align：作用与前文所提到属性相同 alt：当图片未载入或者载入失败时提供的替代性的文字说明,2.4 链接和图片标签, 使用链接 本页的所有内容都讲述关于如何创建到文档的链接 单击此处查看文档 2 , 文档2 这是文档2。单击文档1中的超链接后将显示本页。 返回 ,2.4 链接和图片标签,HTML文档中的图片 GIF（Graphics Interchange Format ）图像 (.GIF) 支持图形渐近 透明 GIF 图像 支持动画 支持无损压缩 J

13、PEG（Joint Photographic Experts Group）图像 (.JPG) PNG（Portable Network Graphics ）,插入图像, 插入图像 插入图像 底部对齐 顶部对齐 居中对齐 ,IMG标签用于将图像插入到HTML文档中。可以将IMG标签放置在要显示图像的位置。语法为：其中SRC是属性，而值是指定图像文件位置的URL。IMG标签的ALIGN属性可以用于调 整图像相对于周围文本的对齐方式。语法为：,2.5 表单标签,type 可以为以下的值： text：文本框，text 也为 type 的默认属性 password：密码框 radio：单选按钮，可以将多

14、个单选按钮的 name 属性设置相同，使其成为一组。checked属性可设置默认被选 checkbox：复选框，checked 属性可设置默认被选,2.5 表单标签,reset：重置按钮，按下之后，所有的表单元素内容变为默认值 button：普通按钮 submit：提交按钮，按下之后，网页会将表单的内容提交给 action 设定的网页，action的值为空时提交给本页 image：图片，但是点击它的效果与提交按钮一样，都会提交表单,2.5 表单标签,2.6 框架,框架的写法如下： 纵向3:7分割 框架窗口，无滚动条 ,本章结束,本章总结 静态网页制作 HTML中的常见标签 表格标签 链接和图片标签 表单标签 框架 上机习题,实践环节,设计一个网页，版面布局如左所示。 Logo自选 信息显示区可以自由发挥 需设计框架，纵向和横行分割比例自行确定,放飞心情 XXX 个人网站,基本信息,爱好专长,理想志向,喜欢歌曲,信息显示区,Logo,Title,button,