HTML基础ppt课件.ppt

第1章HTML基础 1 第1章HTML基础 1HTML文档结构2HTML基本标记的使用3超链接标记4HTML表格5HTML表单 2 1HTML文档结构 在互联网中传送的文档 绝大部分使用超文本标记语言编写 这些文档称为HTML文档 在基本HTML文档中 只允许两种元素存在 一种是HTML标记 另一种则是普通文本 3 1HTML文档结构 HTML文档的组成结构如下 4 1HTML文档结构 一个完整的HTML文档通常由以下三部分组成 1 HTML标记格式 2 头部信息格式 3 文本主体格式 5 1HTML文档结构 1 HTML标记 这是定义HTML文档开始与结束的标记 也是HTML文档中最先出现的标识 表明这个文件的内容是用HTML语言来实现的 它必须成对出现 分别表示HTML文件的起始和结束 在容器标记中又包括以下和两个部分 6 1HTML文档结构 2 头部信息 这一部分用来说明文档标题以及该页面的其他信息 它构成HTML文档的开头部分 在此标记对之间可以使用 等标记 这些标记都是描述HTML文档相关信息的标志 标志对之间的内容是不会在浏览器的框内显示出来的 但是其内容应该尽量简短 7 1HTML文档结构 3 文本主体 这部分说明HTML文件的主体内容 在浏览器的客户区中显示 这是页面开发者的编写HTML文档的主要部分 8 1HTML文档结构 对于HTML标记的约定 超文本标记是用一对尖括号 括起来的文本串 例如第一行的 超文本标记一般成对出现 用带 的标记结束 如 成对出现的超文本标记也称容器元素 有些标记只有起始标记而没有结束标记称空元素 如 超文本标记可以忽略字母的大小写 构成容器元素的一对标记可以写在不同行 标记属性的相对位置不受限制 但属性必须出现在起始标记里 9 编写HTML文档的方法 HTML文档是一个纯文本文件 可以使用任何文本编辑器编写保存 例 新建一个html文件 10 2HTML基本标记的使用 2 1head容器的标记2 2body容器的标记 11 2 1head容器的标记 标记主要用来提供网页文件的整体信息 包括标题栏名称 文件的网址 所采用的文档编码等 标记用来告知浏览器这是文件标题的开头 最后使用标记告知浏览器这是文件标题的结束点 12 2 1head容器的标记 HTML文档的head是一个容器元素 在head容器元素中允许出现以下元素 1 title元素2 link元素3 meta元素4 base元素5 script元素 13 2 1head容器的标记 1 title元素格式 标题文字title元素包含文档的标题 它不显示在浏览器窗口中 只显示在浏览器标题栏中 在起始标志 和结束标志 间 可以放入简述文档内容的标题 如果没有title元素 浏览器的标题栏将显示网页的文件名 14 2 1head容器的标记 2 link元素格式 link元素在当前文档和另一文档之间建立链接关系 href属性指向相关的文档 rel属性描述了当前文档与被连接文档的关系 type属性描述被连接文档的类型 表示链接一个外部CSS文件default css如下 15 2 1head容器的标记 3 meta元素格式 meta元素用来描述当前网页的元信息 通常用来为搜索引擎robots定义页面主题 或者是定义用户浏览器上的cookie 它可以用于鉴别作者 设定页面格式 标注内容提要和关键字 还可以设置页面的自动刷新时间间隔 秒 等 16 一些有关metal元素的例子 1 设置搜索引擎关键字2 设置网页编码3 刷新页面 17 2 1head容器的标记 4 base元素格式 base元素指定一个显式URL用于解析对于外部源的链接和引用 如图像和样式表 当用户使用相对URL请求文档时 超链接也会正确地执行 Target指定文档中所有链接的默认窗口 该属性主要用在使用框架结构的网页中 使用框架结构 同一浏览器窗口中可以容纳多个网页 同时在若干不同的框架窗口中显示 18 2 1head容器的标记 5 script元素格式 脚本语言代码段script元素在文档中放置一个脚本 这个元素可以在HTML文档的head或body中出现 脚本可以在script元素中或外部文件中被定义 19 2 2body容器的标记 标记是HTML文件最重要的部分 它是一个容器元素 包含在其中的内容将显示在浏览器的主窗口中 20 容器元素中可以包含下表中的常用元素 21 2 2body容器的标记 在HTML中 需要使用元素的属性对页面进行一个整体的规划和设置 例如页面的背景颜色 背景图案 页面留白以及大部分文字的颜色等等 例如在百度搜索引擎的主页中 其元素的定义如下 22 body元素本身的属性可以分为3类 如下表所示 23 2 2 html这是我的第一个html程序 我很高兴哦 这个程序简单了点 学习嘛 要一步一步地来 不着急 24 3超链接标记 HTML用来表示超链接 英文叫anchor 一个链接的基本格式如下 链接文字表示一个链接的开始 表示链接的结束 可指向任何一个文件源 网页 图片 影视文件等 href属性则表示这个链接文件的路径 链接分为本地链接 URL链接和目录链接 25 3超链接标记 超链接标记的几个常用属性 1 target属性 网易首页2 title属性 网易首页3 name属性 第一章第二章4 链接到email地址 联系网易 26 3 1本地链接 对同一台机器上的不同文件进行的连接称为本地链接 它使用UNIX或DOS系统中文件路径的表示方法 采用绝对路径或相对路径来指示一个文件 1 以绝对路径表示 文件的链接 2 以相对路径表示 文件的链接IP地址 27 3 2URL链接 URL是英文UniformResourceLocators 统一资源定位器 的缩写 是专为标识Internet网上资源位置而设的一种编址方式 通过它可以以多种通讯协议与外界沟通来存取信息 URL地址一般由三部分组成 例如 28 Internet上的通讯协议通常包括以下几种 29 3 3目录链接 目录链接可以直接指到某一个文件的上部 下部或中央部分 其制作方法是 在各种链接的各个要素中 首先把某段落设置为链接位置 使用name属性 它可以跳转到一个文件的指定位置 格式1 然后 设定一个href指向此链接部分的文件 格式2 链接文字 30 使用本地链接互联网HTML简介多样化和统一性互联网互联网是网络的网络 也就是说 计算机网络可以跨越国家甚至全球的范围连接到其他网络 世界上所有的计算机都可以通过TCP IP传输协议绑定在一起 HTML简介超文本标记语言是Web用来创建和识别文档的标准语言 虽然它不是标准通用标记语言 SGML 的子集 但与它有着某种程度上的关联 SGML是一种文档格式语言表示方法 多样性和统一性万事万物都离不开多样性和统一性这样一条基本准则 也就是说 所有的事物都可以融合成一个整体 同时 又保持自己独特的与众不同的一面 站点的独特性恰恰来源于它的一致性 颜色 字体 分栏布局以及其他设计元素应在站点的每个部分都保持一致 关于我们联系我们 31 4HTML表格 表格中所有行和列及单元格中的内容必须被包含在一对和标记中 其基本结构如下 32 row1 cell1row1 cell2row2 cell1row2 cell2 33 4 1表格定义标记 1 表格的标题表格标题的位置 可由align属性来设置 其位置分别由表格上方和表格下方 设置标题位于表格上方 设置标题位于表格下方 34 4 1表格定义标记 2 元素元素表示表格中的行标记 表格中的每一行都必须包含在一对标记中 行标记的一般形式是 在标记中有两个属性 align指定该行中单元格的对齐方式 如左对齐 居中以及右对齐 bgcolor指定该行的背景颜色 35 4 1表格定义标记 3 元素单元格是表格的基本组成元素 一个td元素表示表格中的一个单元格 包含在元素内的多个元素构成表格的一行 单元格的一般形式是 36 4 1表格定义标记 3 元素在标记中的属性如下 width指定单元格的宽度 height指定单元格的高度 align指定单元格水平对齐方式 valign指定单元格垂直对齐方式 bgcolor指定单元格的背景颜色background指定单元格的背景图案rowspan指定单元格的行跨度colspan指定单元格的列跨度 37 4 2表格属性的设置 1 表格的大小一般情况下 表格的总长度和总宽度是根据各行和各列的总和自动调整的 如果我们要直接固定表格的大小 可以使用下列方式 width和height属性分别指定表格一个固定的宽度和长度 n1和n2可以用像素或百分比来表示 例如定义一个长为200像素 宽为100像素的表格 38 4 2表格属性的设置 2 表格的边框边框是用border属性来设定的 它表示表格的边框风格 将border设成不同的值 有不同的效果 在作为布局使用时往往取默认值 0 即不显示表格的边框 在 1时 表格边框显示成三维的状态 书写格式为 39 4 2表格属性的设置 3 单元格间距单元格与单元格之间的线为格间线 它的宽度可以使用中的cellspacing属性加以调节 格式为 表示要取用的像素值还可以在中设置cellpadding属性 用来规定内容与格线之间的宽度 格式为 表示要取用的像素值 40 4 2表格属性的设置 4 表格内文字的对齐方式表格中数据的排列方式有左右排列和上下排列两种 左右排列由align属性来设置 上下排列则由valign属性来设置 格式参照标记 为left center right之一 为top middle bottom之一 41 4 2表格属性的设置 5 单元格的合并利用td的rowspan和colspan属性可以把单元格合并rowspan n 合并其下面n 1个单元格colspan n 合并其右测n 1个单元格 42 43 5HTML表单 5 1表单标记结构5 2单行文本框和多行文本框5 3命令按钮5 4单选按钮5 5复选框5 6下拉列表框5 7隐藏域 44 5 1表单标记结构 HTML表单 Form 是HTML的一个重要部分 主要用于采集和提交用户输入的信息 表单在Web网页中用来给访问者填写信息 从而能获得用户信息 使网页具有交互的功能 HTML表单标记的基本结构如下 表单主体 45 5 2单行文本框和多行文本框 单行文本框允许用户输入一些简短的单行信息 比如用户姓名 密码等 格式如下 46 请输入你的姓名 47 5 2单行文本框和多行文本框 多行文本框主要用于输入较长的多行文本信息 格式如下 48 请提宝贵意见 49 5 3命令按钮 命令按钮通常用于完成一定的操作 这由按钮的type属性值而确定 格式如下 type属性指定按钮的类型 其值有三种 值为 Submit 表示将表单的信息提交给表单的action所指向的文件来处理 值为 Reset 表示清除表单的数据 值为 Button 为一般按钮 不产生任何操作 value属性值是显示在按钮上的文字 50 用户名 密码 51 5 4单选按钮 使用单选按钮 让用户在一组选项里只能选择一个 格式如下 52 苹果桔