网页html代码详解.ppt

第2章HTML语言 本章要点 HTML的基础知识常用HTML标记XHTML 2 1HTML简介 HTML HyperTextMarkupLanguage 称为超文本标记语言 是一种描述文档结构的标记语言 它是一种应用非常广泛的网页格式 也是最早被用来显示Web页的语言之一 它与操作系统平台的选择无关 只要有浏览器就可以运行HTML文档 显示网页内容 HTML文档类似于 txt文本文件 不同的是 文档里还包含一种被称为标记的符号 2 1 1标记的格式 1 标记的功能控制网页的显示方式2 标记的构成由 及括在其中的命令字符串组成双标记 成对出现 如 单标记 如 2 1 1标记的格式 3 标记的使用方法 1 文本或超文本 2 文本或超文本例 你好 3 2 1 1标记的格式 书写HTML代码时应注意以下几点 1 HTML标记及属性中字母不区分大小写 如与对浏览器来说是完全相同的 2 标记名与左尖括号之间不能留有空白 如是错误的 3 属性要写在开始标记的尖括号中 放在标记名后 并且与标记名之间要有空白 多个属性之间也要有空白 属性值最好用单引号或双引号引起来 引号一定要是英文的引号 不能是中文引号 4 结束标记要书写正确 不能忘掉斜杠 2 1 2HTML文档结构 表2 1html文件构成骨架 2 1 2HTML文档结构 1 文件头部 之间定义 内容可包括标题名 文本文件地址 创作者信息等网页信息说明 文件头部还可包括一些其他标记 定义网页的标题 说明一些与文档相关的信息 如作者 关键内容 所用语言等 2 1 2HTML文档结构 2 文件主体位于头部之后 在 之间定义 定义了网页上显示的主要内容和显示格式 文件主体内可包括众多其他标记 2 1 2HTML文档结构 标记常用属性 background 设置网页背景图案 例如 bgcolor 设置网页背景色 例如 text 设置文本颜色 默认黑色 link 设置尚未被访问过的超文本链接的颜色 vlink 设置已被访问过的超文本链接的颜色 2 1 2HTML文档结构 3 注释格式 注释以 结束 注释的内容会被浏览器忽略 利用注释可以为HTML文档的不同部分加上说明 方便日后修改 也可以利用注释为HTML文档加上版权声明 注释可有多行 2 1 3HTML的制作 制作HTML文档需要两个基本工具 一个HTML编辑器 一个Web浏览器 HTML编辑器可分为两类 基于文本或代码的编辑器和所见即所得 WYSIWYG 编辑器 前者在创建文档时只能看到HTML代码 后者在编辑时即显示出类似于最终浏览器窗口显示的结果 Web浏览器用来浏览HTML文档 在Windows操作系统上 常用的浏览器是MicrosoftInternetExplorer 也常简称为IE 2 1 3HTML的制作 用记事本制作网页的步骤如下 1 打开记事本 2 在记事本中输入代码 我的第一个网页这是我用记事本做的第一个网页 我会努力学好HTML 2 1 3HTML制作工具 3 保存文件 HTML文件的扩展名为 htm html aspx或asp 因为有些Web服务器对中文文件名不能很好支持 所以文件名中尽量不要使用汉字 4 用浏览器打开上步保存的文件 即可看到如图2 1所示的页面 图2 1第一个网页 2 2常用HTML标记 本节分类介绍常用的HTML标记及其常用属性 其它标记的详细情况请参考相关书籍 2 字体标记4 图像标记6 表格标记8 其他标记 排版标记3 列表标记5 链接标记7 表单标记 2 2 1排版标记 1 段落标记用于分段 和之间的文字在同一段落 并使前段与后段之间加一空白行 结束标记可以省略 下一个开始意味着上一个结束 的常用属性align 用来设定段落的对齐方式 可取属性值有 left 左对齐 center 居中对齐 right 右对齐 2 2 1排版标记 2 强制换行称为换行标记 在网页设计中比较常用 它的作用就是换行 属于单标记 没有结束标记 且不包含任何属性 3 预格式化标记称为预格式化标记 它的作用是按原始代码的排列方式显示内容 通常情况下 浏览器显示时会忽略内容中的空白及换行 而与之间的空白及换行会被保留 2 2 1排版标记 4 水平线标记称为水平线标记 可以在页面中产生一条水平线 没有结束标记 的常用属性有 align 对齐方式 属性值有left center right width 长度 属性值可以是绝对值 像素 或相对值 百分比 size 粗细 属性值为整数 单位为像素 color 颜色 例 2 2 1排版标记 5 称为居中标记 可以使标记的内容居中显示 使用时需要结束标记 6 是块定义标签 用于定义一个块的风格 div要有开始标签和结束标签当要在许多段落中设置对齐方式时 常用标记和align属性 如 文本或图像 2 2 1排版标记 例2 2 图2 2排版标记 2 2 2字体标记 1 标题格式 标题 n可取1 6之间的整数值每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行 由到字体依次变小 可用属性设置标题的对齐方式 2 2 2字体标记 2 标记格式 文本常用属性 face 用来设定文本的字体 属性值为逗号隔开的字体列表 如果浏览器所在机器上没有安装指定的任何一种字体 则以浏览器默认字体显示 所以使用时最好不使用特殊字体 2 2 2字体标记 size 用来设定文本的大小 属性值可以是绝对的或相对的 如size 5 是绝对的 表示文本以5号字显示 size 2 是相对的 表示文本在原先大小的基础上再增大2级 size属性可取1 7之间的整数值 color 设定文本的颜色 2 2 2字体标记 3 标记为粗体标记 与之间的文本产生加粗效果 为斜体标记 与之间的文本产生斜体效果 为加下划线标记 与之间的文本显示时会加底线 为加删除线标记 与之间的文本显示时会加删除线 注 这四个标记都是双标记 使用时如果忘掉结束标记 则开始标记对后面的所有文本都起作用 2 2 2字体标记 图2 3字体标记 例2 3 2 2 3列表标记 1 无序列表与定义项目列表的语法为 项1项2 的常用属性只有一个type 用来设定列表项前面出现的符号 可取属性值有 disc 列表项前面加上符号 circle 列表项前面加上符号 square 列表项前面加上符号 2 2 3列表标记 2 有序列表与定义编号列表的语法为 项1项2 2 2 3列表标记 的常用属性有 type 用来设定列表的编号形式 可取属性值有 1 用阿拉伯数字1 2 3 编号 a 用小写英文字母a b c 编号 A 用大写英文字母A B C 编号 i 用小写罗马字母 编号 I 用大写罗马字母 编号 start 用来设定列表开始编号的位置 不论采用何种编号形式 属性值都为整数 如start 3 表示第一项从第3的位置开始编号 2 2 3列表标记 3 标记用来标记列表中的一项 需同或一起使用 它的属性有 type 用来设定列表项的符号 如果用里 属性取值为disc circle或square 如果用在里 则属性取值为1 a A i或I value 此属性仅当用在里有效 属性值为一整数 用来设定当前项的编号 其后的项目将以此值为起始数目递增 前面各项不受影响 2 2 3列表标记 例2 4 图2 4列表标记 2 2 4图像标记 1 图像文件的格式常用图片格式 png jpeg gif bmp 2 加入图像格式 常用属性 src 图像文件 alt 替代文本 height 高度 width 宽度 border 边框宽度 vspace 垂直边距 hspace 水平边距 2 2 4图像标记 align 图像与文本的对齐方式 可取值为 top 文本与图像顶部对齐 middle 文本与图像中央对齐 bottom 文本与图像底部对齐 left 图像居左 right 图像居右 例 2 5 2 2 4图像标记 绝对路径与相对路径 绝对路径指定文档或文件的完整地址 相对路径相对路径又分为根相对路径和文档相对路径 根相对路径总是以站点根目录 为起始目录 写起来比较简单 文档相对路径是以当前文件所在路径为起始目录 进行相对的文件查找 2 2 4图像标记 文档相对路径的几种形式 同一个目录中的文件 如果源文件和目标文件在同一个目录里 直接写目标文件名即可 表示上级目录 表示源文件所在目录的上一级目录 表示源文件所在目录的上上级目录 以此类推 表示下级目录 直接写下级目录文件的路径即可 2 2 4图像标记 例2 6 假设有如图2 5所示的目录结构 其中root web a b c为文件夹 t htm 1 gif 2 gif等为相应文件夹中的文件 怎样在t htm页中分别插入1至5这五个图片 图2 5目录结构 2 2 4图像标记 使用文档相对路径在t htm中分别插入5幅图片 图2 5目录结构 好处 在站点内 通常都采用文档相对路径 便于站点的移植 2 2 5链接标记 定义链接的语法格式 文本或图片常用属性 href 链接的目标 指定一个URL作为有效的链接资源的地址 name 锚点的名字 target 目标窗口 保留目标名有 blank parent top self 例 2 7 2 2 5链接标记 全局链接与局部链接如果指定的目标文件存放在外部网站 本服务器以外 只能使用绝对路径 这种与本服务器以外的文件的链接称为全局链接 如果目标文件存放在本地服务器 称为局部链接 局部链接可以使用绝对路径 但建议最好使用相对路径 2 2 5链接标记 相对路径的几种形式 同一个目录中文件的链接例 源文件info html 在info html里点击 主页 链接到目标文件index html 假设info html路径是 c Inetpub wwwroot sites blabla info html假设index html路径是 c Inetpub wwwroot sites blabla index html在info html加入index html超链接的代码 主页 2 2 5链接标记 表示上级目录例 假设info html路径是 c Inetpub wwwroot sites blabla info html假设index html路径是 c Inetpub wwwroot sites index html在info html加入index html超链接 主页 2 2 5链接标记 例 假设info html路径是 c Inetpub wwwroot sites blabla info html假设index html路径是 c Inetpub wwwroot index html在info html加入index html超链接 主页 2 2 5链接标记 例 假设info html路径是 c Inetpub wwwroot sites blabla info html假设index html路径是 c Inetpub wwwroot sites wowstory index html在info html加入index html超链接 主页 2 2 5链接标记 表示下级目录例 假设info html路径是 c Inetpub wwwroot sites blabla info html假设index html路径是 c Inetpub wwwroot sites blabla html index html在info html加入index html超链接 主页 2 2 5链接标记 的几种用法 1 链接网页 文本或图像2 链接命名锚点 字符串value值即锚名 是定义的定位位置名 热点文本点击 热点文本 链接到锚名所指定的位置例top例 2 8 2 2 5链接标记 3 链接非Web数据 简历4 图像链接 5 电子邮件链接 联系 2 2 6表格标记 表格现已成为对文本和图形进行布局的强有力的工具 HTML中一个表格通常由 三个标记来定义 分别表示表格 行 单元格 在对表格进行设置时 可以设置整个表格或表格中的行或单元格的属性 它们优先顺序为 单元格优先于行 行优先于表格 2 2 6表格标记 1 基本格式 表项1表项2 表项1表项2 2 2 6表格标记 1 标记整个表格始于而终于 是一个容器标记 等只能在它的范围内使用 常用的属性有 width n n 表格宽度 height n 表格高度 border n 表格边框粗细 bordercolor 表格边框颜色 2 2 6表格标记 bgcolor 表格背景颜色 background 表格背景图像 cellpadding 边距 表单元线和单元格内数据之间的距离 cellspacing 间距 表单元线与边框间的空白 align left right center 表格水平对齐方式 rules 设定有无表格线 frame 设定有无边框 2 2 6表格标记 2 标记定义表格行 是单元格 或 的容器 常用属性有 align left right center 这一行单元格中内容的水平对齐方式 valign top middle bottom 用来设定这一行单元格中内容的垂直对齐方式 bgcolor 这一行的背景颜色 2 2 6表格标记 3 标记单元格标记 使用时要放在与之间 常用属性有 background 背景图像 bgcolor 背景颜色 align 水平对齐方式 valign 垂直对齐方式 width 宽度 height 高度 colspan 跨列数目 rowspan 跨行数目 2 2 6表格标记 2 表题使用标记给表格添加表题 并使用align属性定义表题的位置 格式 表题 2 2 6表格标记 3 表头使用标记可在表的第1行或第1列加表头 格式 表项1表项2 表项1表项2 例2 9 表项1表项2 表项1表项2 2 2 6表格标记 4 单元格的合并 1 合并行表项或表项x为垂直方向上合并的行数 2 合并列表项或表项x为水平方向上合并的单元格数 2 2 6表格标记 图2 7表格标记 例2 10 2 2 6表格标记 图2 6表格标记 例2 11 2 2 7表单标记 表单是用户与网站进行交互的主要方式 它的作用是从访问Web站点的用户那里获取信息 访问者可以使用诸如文本框 列表框 复选框以及单选按钮之类的表单对象输入信息 然后单击某个按钮提交这些信息 2 2 7表单标记 1 标记格式 表单对象 文本框选择按钮列表框按钮 2 2 7表单标记 标记常用属性 action 表单数据的处理手段 method 表单数据传输方法 取值为get或post get 表单数据附加到URL中 post 表单数据嵌入HTTP请求中 2 2 7表单标记 2 表单对象 1 文本框用于单行文本的输入 格式 常用属性 name value size maxlength等 2 密码框格式 常用属性 name value size maxlength等 2 2 7表单标记 3 单选按钮格式 常用属性 name value checked等 注 同一组中所有单选按钮的name属性必须设置相同 4 复选框格式 常用属性 name value checked等 value属性用来设置当用户选中该项后 表单所提交的值 2 2 7表单标记 5 按钮提交按钮 常用属性 name value等 重置按钮 常用属性 name value等 普通按钮 常用属性 name value等 图像按钮 常用属性 name src width height alt等 2 2 7表单标记 6 列表框格式 选项1选项2 2 2 7表单标记 的属性 name size multiple等 size没设置或设为1 为下拉列表框 size设置大于1 为列表框 multiple不用赋值 若加入标记中 则列表框可选多项 的属性 value selected等 2 2 7表单标记 7 文本区域 可输入多行文本 格式 文本常用属性 name rows cols wrap等 2 2 7表单标记 例2 12 图2 8表单举例 HTM