建设网站的基础HTML语言

1、电子商务网站建设与管理 配套课件HTML常用标记常用标记 4.2从HTML到XHTML 4.4CSS样式样式 4.3什么是什么是HTML 4.1 HTML的全称是Hyper Text Markup Language，即“超文本标记语言”，是一种用标记（也可称为标签）来描述网页文档结构和表现形式的语言 。 HTML语言并不是一种程序语言，只是包含一些标记的文本文件，这些标记告诉浏览器如何在网页页面上显示文字、表格、图片和超级链接等。 HTML文件可以使用记事本、FrontPage、Dreamweaver等任何文本编辑器编辑，编辑完毕后，保存为.htm或.html文件 我的第一个网页文件 我的主页

2、 欢迎光临我的主页。 这是我的第一个网页文件。 文档头部 文档主体 头部信息不会显示在浏览器窗口中主体内容显示在浏览器窗口中，即网页的正文内容1文档头部 在和之间的内容，是文档头部信息。尽管文档头部信息不显示在页面中，但仍然是非常重要的，它会告诉浏览器如何处理文档主体内的内容。 电子商务教学网站 用来设置网页的标题定义关键字 定义网页的描述信息 说明文件的内容类型和语言编码方式 设置网页自动刷新的时间 有很多属性，用来设置网页背景、文字、页边距等。如： 说明： text：用以设定文字颜色。 background：设定背景图片的路径。路径可以是绝对路径或相对路径。 bgcolor：设定背景颜色。

3、当设定背景图片时，会失去作用。 leftmargin：只适用于IE浏览器，设定页面左边距，单位为像素。 topmargin：只适用于IE浏览器，设定页面上边距，单位为像素。4.2.1 常用排版标记1分段标记2换行标记 3标题标记和 4文字标记5水平线标记例：最简单网页示例 HTML语言的学习欢迎光临我的主页。今天我们学习了标记（标签）这是我做的第一个网页。大学之道，在明明德，在亲民，在止于至善。知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始，知所先后，则近道矣。浏览器中查看？（1）加入背景音乐。 要加入的背景声音文件的格式可以是wav、au或mid。 播放次数

4、取-1或Infinite时，声音将一直播放直到关闭该网页为止。（2）加入视频。 标记可用来插入各种多媒体，格式可以是Wmv、Avi、Midi、Wav、AU、MP3等，文件路径可以是相对路径或绝对路径 用法：滚动文字（或图片） 具体属性说明如下。 width：设置字幕的宽，x为像素数或相对于窗口宽的百分比。 height：设置字幕的高，y为像素数。 behavior：值为scroll时，设置文字单向流动；值为slide时，设置流动文字到达边界停止；值为alternate时，设置流动文字到达边界后反向流动。 scrollamount：指定每次移动速度，值越大速度越快。 scrolldelay：移动

5、每步的延时，单位是毫秒，时间越短，速度越快。创建无序列表，格式如下： 第一个列表项 第二个列表项 无序列表 电子商务项目管理。 电子商务顾问。 销售人员。 创建有序列表。通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式如下： 第一个列表项 第二个列表项 1超级链接的概念 所谓的超级链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址或一个文件。而在一个网页中用来超级链接的对象，可以是文本也可以是一个图片，甚至可以是图片的一部分。2用法链接主体说明：（1）href：用来定义超

6、级链接文件的路径，可以是相对路径或绝对路径。（2）target：指定打开超级链接的窗口或框架。取值有以下5种情况。 _blank：在新窗口中打开链接。 _self：在当前窗口打开链接。默认为_self。 _top：在整个浏览器窗口中打开链接。 _parent：在当前窗口的父窗口打开链接。 框架名称：在指定名字的框架中打开链接。（1）站内链接。链接到本地站点上的某一文件，例如：企业简介（2）外部链接。链接到另一个站点的某一文件，例如：链接到当当网（3）锚点链接。链接到当前页面的某一位置，例如：这里定义了一个锚点指向同一页中的锚点first（4）E-mail链接。链接到一个电子邮箱地址，例如：请与

7、我联系 超级链接应用示例 本文本 是一个指向本网站中的一个页面的链接。 本文本 是一个指向万维网上的页面的链接。 思考：如何将一个图片设置为超级链接？1表格 表格是网页设计中常用的元素，有两个常用功能：一是用来显示文字或图片内容；二是用来进行网页布局，使网页更规范、更美观。 表格的标记为，使用标记可将一个表格划分成若干表格行，然后通过标记将每个行划分成若干列（单元格）。数据内容放在与之间。单元格中的数据信息可以是文字、图片、列表，还可以是嵌套表格。2语法格式表格的用法如下： 表项1表项 2 表项n 表项1表项 表项n 属性: border：定义表格边框的粗细，n取整数，单位是像素。如果省略，则

8、不带边框。 bgcolor：设置背景颜色。 background：设置背景图片。 width：定义表格的宽度，单位可以是绝对的像素数或窗口的百分比。 height：定义表格的高度，单位是像素数。 cellspacing：定义单元格之间的间隙宽度，单位是像素，默认为2。 cellpadding：定义单元格内容与单元格边界之间的距离，单位是像素，默认为2。 colspan和rowspan：可以分别制作跨多行（合并行）和跨多列（合并列）的表格。 表格的边框属性 单元格1 单元格2 表格跨多列属性值班人员周一周二周三 张三李四王五 1框架的基本结构基本格式如下： 标记属性 rows：设定横向分割的框架

9、数目。 cols：设定纵向分割的框架数目。 border：设定边框的宽度。 bordercolor：设定边框的颜色。 frameborder：设定有/无边框。 framespacing：设置各窗口间的空白。先认识一下表单：1表单定义要创建一个表单，可以用标记来实现。表单像一个容器，能够容纳各种各样的控件（即表单元素）。下面介绍表单及构成表单的各个控件的用法。格式： 说明：（1）action：表单处理的方式，往往是E-mail地址或网址。（2）method：表单数据的传送方式，可以是get方式，也可以是post方式。get：表示将表单信息附在URL地址后面传递给服务器。post：表示将所有信息当

10、作一个表单传递给服务器。（3）标记主要用来设计表单中提供给用户的输入形式。type：指定要加入表单控件的类型（text、password、checkbox、radio、image、hidden、submit、reset）。name：该表单控件名，主要在处理表单时起作用 文本框：文本框是一种让访问者自己输入内容的表单对象，通常被 用来填写简短的内容或回答，如姓名、地址等。格式：input type=text name=名称 size=宽度 maxlength=最大长度 value=初始值说明：type：当类型为text时，定义单行文本框。 name：定义文本框的名称，要保证数据的准确采集，必须定

11、义一个独一无二的名称。size：定义文本框的宽度，单位是单个字符宽度。maxlength：定义最多输入的字符数。value：定义文本框的初始值。密码框：密码框是一种特殊的文本框，不同之处是当输入内容时，均以*表示，以保证密码的安全性。 格式： 按钮类型：普通按钮、提交按钮、重置按钮。（1）普通按钮。当type的类型为button时，表示该控件是普通按钮。 格式：说明：Value：表示显示在按钮上面的文字。普通按钮经常和脚本一起使用。 （2）提交按钮。通过提交按钮（即type的类型为submit时）可以将表单（Form）中的信息提交给表单中action所指向的文件。例如，。 （3）重置按钮。当t

12、ype的类型为reset时，表示该控件是重置按钮。单击该按钮后，浏览器将清除表单中的输入信息而恢复到默认的表单内容设置。格式：单选按钮和复选框（1）单选按钮格式： 说明：checked：表示此项默认选中。 value：表示选中后传送到服务器端的值。 name：表示单选按钮的名称。如果是一组单选项，name 属性的值相同，有互斥效果。 （2）复选框格式： 说明：checked：表示此项默认选中。 value：表示选中后传送到服务器端的值。 name：表示复选框的名称。如果是一组单选项，即便name属性的值相同也不会有互斥效果。文件输入框当type类型为file时，表示该控件是一个文件输入框，用户

13、可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。格式：下拉列表框 ：既可以设置为单选，也可以设置为复选。如： 苹果 桔子 芒果 如果要变成复选下拉列表框，只需加multiple即可。用户用Ctrl键来实现多选。用户还可以设置size属性来改变下拉列表框的大小。 多行输入框 ：主要用于输入较长的文本信息。例如： HTML语言在很多方面存在着不足：（1）维护困难。（2）标记不足。（3）网页过“胖”。（4）定位困难。如：哀悼日网页的素装如何实现？CSS样式表的概念 CSS是Cascading Style Sheets（层叠样式表）的缩写，是一种用于控制网页样式的标记性语言。通过使用

14、CSS样式，可将页面的内容与表现形式分离。CSS样式表的特点（1）CSS语言是一种标记语言，不需要编译，直接由浏览器解释执行。（2）通过设置CSS样式，可以控制网页中文本的行间距、大小、颜色，统一网站的整体风格。（3）CSS文件可以用任何文本工具进行开发。（4）CSS不是取代HTML语言，而是HTML语言很好的补充，可以弥补HTML在网页格式化功能上的不足。（5）通过单个CSS样式表可以控制多个文档的布局。 行内样式表（style属性） 行内样式示例 这个页面是红色的 内部样式表（style标记） 内部样式示例 body background-color: #FF0000; 这个页面是红色的

15、外部样式表（链接外部一个样式表文件） 链接外部样式表是使用频率最高也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为不同文件。外部样式表就是将一系列CSS样式放在一个扩展名为.css的外部文件中 。 例如，样式表文件命名为style.css，并存放于名为style的文件夹中。style.css的内容如下：hr color: blue;p margin-left: 20px;body background-image: url（images/back.gif）; 在一个HTML文档中引用外部样式表文件style.css，具体如下。 格式： 注意：要在href属性中给出样式表文件的路径

16、。这行代码必须被插入到HTML代码的头部和之间。 选择器的种类 （1）标记选择器 CSS标记1 CSS标记的正文内容1 CSS标记2 CSS标记的正文内容2 CSS标记3 CSS标记的正文内容3 CSS标记4 CSS标记的正文内容4说明：将上面的h2标题改为红色、幼圆字体 ？ 类选择器。类选择器是指为一类标记定义样式。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。 在CSS中，类选择器以一个点号显示，例如： .center text-align: center.important color:red;This heading is very

17、important.This paragraph is very important.This is a paragraph.This is a paragraph.This is a paragraph. ID选择器 #intro font-weight:bold;This is a paragraph of introduction.This is a paragraph.This is a paragraph.1字体属性（1）font-family：用于为选择器选择一组字体，如宋体、黑体等。（2）font-size：用于设置网页中文字的大小，如9pt、12px等。（3）font-styl

18、e：设置字体风格。Normal表示普通，italic表示斜体。（4）font-weight：设置字体粗细，如normal、bold（加粗）等。 颜色和背景属性（1）color：定义文字的颜色，如red、#00ff3d。（2）background-color：定义元素的背景色。（3）background-image：定义元素的背景图像。例如，url（back.jpg）。（4）background-repeat：指定图像的重复方式。例如，repeat-x，水平平铺 文本与边框属性（1）text-decoration：文字修饰。例如，underline，下划线。（2）line-height：行高。（3）text-align：定义对齐方式。（4）letter-spacing：定义字符之间的间隔。（5）border：定义边框。（6）border-col