第三章 电子商务网站基础语言HTML..
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10 </BODY> 11</HTML>
图3-2 实际运行效果
高 手 点 拔 一、如何快速轻松学习HTML标记
二、如何查看网站的HTML代码
三、设置背景音乐 四、嵌入AVI视频文件 五、如何设定关键字
编写一个简单欢迎页面HTML代码， 要求有背景音乐，设有关键字 01 <html> 02 <head> 03 <title>鹤城欢迎你</title> 04 <meta name="keyword" contents="音乐，鹤城欢迎你，最美的音乐"> 05 </head>
（2）URL网络资源参数可为以下内容：
（3 ）NAME 属性 : 网页文件名">提示说明文字 用来设定书签的名称。 网页： <a1） href=" </a> （ <a>～ </a>标记为双标签。 网站: <a href="链接网址">提示说明文字</a> （4） target属性： 设定网页的放置位置。 下载文件：<a href="欲下载文件名">说明文字</a> target="framename” 只用于框架显示框窗 书签跳转： target="_self" 在本窗口中显示。 标记记号格式：<a name=“记号名”>.目标点..</a> target="_blank"或target="new" 在新的窗口中显示。 引用记号格式：<a href="URL#记号名">...链接文 target=“_top” 显示在没有框架窗口中 字...</a> target="_parent “ 。 当成文件上一级网页。
标 签
<table>...</table> 定义表格开始和结束 <th>...</th> 定义表头单元格。表格中的文字以粗体显示，也可以不 用此标签，<th>标签必须放在<tr>标签内 定义一行，行标记可以建立多组由<td>或<th>标签所定 义的单元格 定义列标记，一组<td>标记建立一列，<td>标签必须放 在<tr>标签内
表格对齐方式
表格的背景图片 表格的背景颜色 表格边框的宽度（以像素为单位） 表格边框颜色 表格边框明亮部分的颜色 表格边框昏暗部分的颜色 单元格之间的间距 单元格内容与单元格边界之间的空白距离的大小
四、表单的格式
1．表单标记概述
表单标识 表单域 表单按钮
二、表单的组成
表单标识
整个表单全部内容的起始与结束标记。 表单域是表单内部的主要内容，包含了文本 框、密码框、隐藏域、多行文本框、复选框、 单选框、下拉选择框和文件上传框等。 包括提交按钮、复位按钮和一般按钮
第
3章
电子商务网站的基础语言 HTML
一个人的成功，关键在于要脚踏实地，一步一步
地前进。一个网站的成功要从基础做起，才会慢慢发
展壮大。
Hao123的草根站长 李兴平
Hao123站长李兴平
第三章
电子商务网站的基础语言HTML
第一节 HTML基础知识 第二节 HTML的基本标记
第三节 HTML与XHTML
发送电子邮件：mailto:邮箱地址
三、表格标记
1．HTML中表格产生的过程
定义表格
定义行
定义列
利用 利用 <TABLE> <TR> . . . 重复”定义行””定义列” . .完成整个表格制作过程 .. . </TR> </TABLE> 标签 标签
利用 <TD> . . .. </TD> 标签
三、表格标记
制 作 实 务
09 </body> 10 </html>
第三章
电子商务网站的基础语言HTML
第一节 HTML基础知识 第二节 HTML的基本标记
应 知 应 会
第三节 HTML与XHTML 第四节 HTML标记总表
一、HTML的基本标记
标 签
<H1>到<H6> <font size=3>文字</font>
Bgcolor
设 置 背 景 色 彩
Text
设 置 非 可 链 接 字 色
link
可 链 接 文 字 的 色 彩
alink Vlink Background
正 被 点 击 可 链 接 色 彩 已 点 击 可 链 接 色 彩 设 置 页 面 背 景 图 像
二、HTML组成
友情提醒：网页中颜色的标识方法一般用十六进制表示，格式为 #rrggbb Rr 表示红色，gg表示绿色，bb表示蓝色。也可以使用颜色英文直 接表示，如red、green、blue、black、white、yellow等。
用于设置网页标题信息 用于在文档中嵌入样式表
1、头标记
<style>标记 <meta>标记
用来设置页面关键字、控 制页面缓存、刷新页面等 功能
• <head> • <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> • <title>HTML教学网</title> • <style type="text/css"> • <!-• .unnamed1 { • font-family: "宋体"; • font-size: 12px; • font-style: normal; • line-height: 18px; • font-weight: normal; • text-transform: none; • } • --> • </style> • </head>
三、HTML代码规范
1.每一个HTML文件由HTML标记开始，由/HTML标记结束； 2.HTML不区分大小写； 3．所有标记都必须放在“<>”之中；
4．HTML的任何标记都由“<”和“>”围起来，例如<P><I>；
5．在起始标记的标记名前“／”便是该标记的终止标记；
6．HTML标记有单标记和双标记两种
设定文字字体 将文字加粗 将文字变为斜体 将文字加下划线 分段标记 换行标记 显示一条水平分割线 图像标记
一、HTML的基本标记
（1）<font face="黑体"color="#00ff00" size=3> 设置字体为黑体，字色为绿色，字大小为3级。
应 知 应 会
（2）<a href="http：//www.qqhre.com">齐齐哈尔信息工程学校</a> 这是链接到齐齐哈尔信息工程学校（网址为：http：//www.qqhre.com）网站。 （3）<a href="login.htm">齐齐哈尔信息工程学校</a> 这是链接到本网站当前目录下的login.htm文件
06 <body> 07 <bgsound src="bjhyn.mid"> 08 这是一个非常简单的HTML，其中第一行的含义是HTML文档的开始；第二行的含义是头部
开始；第三行的含义是定义网页的标题是“鹤城欢迎你”；第四行的含义是设定关键字是“ 音乐，鹤城欢迎你，最美的音乐”；第五行的含义是头部结束；第六行的含义是体部开始； 第七行的含义是设定背景音乐是bjhyn.mid；最后两行依次是体部结束，HTML文档结束。
<font color="#6位16进制数 值">文字颜色</font>
<font face="字型名称">文字 </font> <b>加粗文字</b> <i>斜体文字</i> <U>下划线文字</U> <P> <Br> Hr IMG
设定文字颜色，如<font color="#00ff00">绿</font>，<font color="#000000">黑</font>
描 述
<tr>...</tr> <td>...</td>
表3-7 TABLE标签属性
属 性
Width Height 表格的宽度 表格的高度
描 述
Align
Background Bgcolor Border Bordercolor bordercolorlight bordercolordark Cellspacing Cellpadding
二、HTML组成
01 <HTML> 头 标 记 HTML标记 主 体 标 记 02 <HEAD>
这里只有 三言两语
03此处是网页的头部
04 </HEAD> 05 <BODY> 06 此处是网页的具体内容 07 </BODY> 08</HTML>
这里却是 洋洋洒洒
二、HTML组成
<title>标记
Get
通过附加在网址后面发送
post
<input type=″″> Type 定义一个输入框
通过打包发送
属性决定输入框的类型
〈input>标记中的属 性
属性 <input align=″″> <input name=″″> <input type=″″> 用途 用于设置表单的位置。左（left）右（right）居中（middle） 上（top）下（bottom) 设置输入框名称 输入数据类型，常见的数据类型有(1)text:单行文本 (2)textarea：多行文本(3)password：数据为密码，用星号 表示(4)checkbox：复选框(5)radio：单选按钮(6)submit： 提交按钮(7)reset：清除表单数据(8)button：普通按钮 (9)file：插入文件(10)hidden：隐藏按钮(11)image：插入 图像 用于设置输入默认值 设置图像文件的地址 选择框的默认选项
四、HTML使用案例
01 <HTML> 02 <HEAD> 03 <Title> 04 鹤城绿色食品网 05 </Title>
案 例 分 析
06 </HEAD>
07 <BODY> 08 09
图3-1 用记事本编辑HTML代码
鹤城既出航天员，又产国鸟，是个可以让梦想飞翔的地方。 <I>这便是美丽的齐齐哈尔，丹顶鹤的故乡</I>
描 述ຫໍສະໝຸດ Baidu
应 知 应 会
从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标 签会将字体变成粗体字，并且会自成一行。 <font size=1>（最小）到<font size=7>（最大），另外也可 写为：<font size=+1>文字内容</font>，其意思就是说：比预 设字大一级。当然也可以font size=+2（比预设字大二级）， 或是font size=-1（比预设字小一级），以一般而言，预设多 为3。
表单域
表单按钮
友情提醒：在HTML的所有标记中，动态网站编程涉及最多的 就是表单，而且多是实际动手键入代码，而非生成代码，所 以大家一定要掌握好这一部分内容。
二、表单的格式
<form action="单击确定后执行的网页" method="提交方法"> <input type=" " name=""> Action：指明了处理表单信息的文件 Method：是指发送表单信息的方式
（4）<img src="images/logo.jpg">
显示images目录下的logo.jpg图片。
二、链接标记
超链接是指从一个网页指向一个目标的连接关系
另一个网页
案 例 分 析
链接 目标
相同网页上的不同位置
其它
锚 标 目标点
图 片
邮 件 地 址
文 件
应 用 程 序
二、链接标记
1．链接标记格式 <a href="URL" name="书签的名称" traget="网页的放置位置">链接文字或图片 ...</a>
二、HTML组成 1、头标记 2、主体标记
我们见到的整个网 页中的内容全都在这 里面,所有页面的东东 全是body标记 的臣民
<body>……</body>
功能 格式
决定页面实际显示的内容
<body bgcolor=" " text=" " link=" " alink=" " Vlink=" " background=" ">
示例
<table border="1"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>高阳</td> <td>32</td> </tr> <tr> <td>张鹏</td> <td>33</td> </tr> </table>
图3-6 表格产生过程示例
表3-7 表格标记
第四节 HTML标记总表
一、概述
HTML是Hypertext Markup Language的缩写，即超文本标记语言，是WWW 的描述语言，是网页的“母语”。其扩展名是html或htm。
HTML不是程序设计语言
HTML特点 HTML是网页制作的标准语言 设计时要对代码进行手动调整
友情提醒：目前,除了HTML还有XML、XHTML，但HTML是最基础 的知识，是学习其它知识的必备基础，所以大家一定扎实学好 HTML。