HTML教程(最全的图文并茂教程)

1、HTML网页制作,1：HTML简介 2：HTML常用标签介绍 3：表单布局 4：表格布局 5：框架布局 6：CSS样式表 7：使用Dreamweaver制作网页,HTML简介,HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具,HTML文档的基本结构,HTML文档的结构, 我的第一个网页 Hello World! ,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包括标题和其他说明信息，包括在 标签内,这部分包含文本、图像和链接

2、，它包括在 标签内,网页的摘要信息,网页摘要信息利于浏览器解析和搜索引擎搜索： 使用标签, 搜狐-中国最大的门户网站 , , ,使用标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述,提供搜索关键字和内容描述信息，方便搜索引擎的搜索,HTML页面中的块和行,HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计,块级： 块内包含多行,行级：包括文字、图片等,块级标签,根据使用场合，块级标签又细分为： 基本块级标签 常用于布局的块级标签 标题标签, 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题

3、 ,h1最大 h6最小 前后隔行,标题 标题,基本块级标签段落,段落标签, 北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 ,前后换行，类似教材中的段落,基本块级标签水平线,水平线标签, 北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 ,横线用于内容分割,单个标签的闭合形式,常用于布局的块级标签有序列表,有序列表标签, 注册步骤： 填写信息 收电子邮件 注册成功 ,有序列表, 列表项1 ,常用于布局的块级标签无序列表,无序列表标签, 新人上路指南 如何激活会员名？ 如何注册贵美会员？ 注册时密码设置有什么要求？ 贵美认证 ,无序列表, 列表项1 ,常用于布局的块

4、级标签描述标签,定义描述标签, 咖啡 一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 可以提神，刺激神经。 ,这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合, 标题 描述1 ,常用于布局的块级标签描述标签, 图片的HTML代码（后续讲解） 商品名称：灿坤蒸气电熨斗 商品价格：388元 商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计 ,用定义描述标签实现图文混编的效果,文字有一定的缩进,常用于布局的块级标签表格,表格 百度 新浪 ,-表格 -行 -列（单元格）,常用于布局的块级标签表单,表单,一般和table使用： . . . , ,常用于布局的块

5、级标签div层,分区标签 ,div标签可内嵌到等标签内，作为普通块状元素使用,一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用, 新人上路 div其实就是一个. ,小结,请说出实际开发常用的4种块状结构是什么？,1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单,行级标签图像标签,图像标签, ,为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字,行级标签范围标签,范围标签 ：显示某行内的独特样式

6、, 商品价格:仅售10元 ,文本等行级内容,设置红色、大号字突出显示,行级标签换行标签,换行标签 , 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。 北京欢迎你，在太阳下分享呼吸 在黄土地刷新成绩。 北京欢迎你，像音乐感动你 让我们都加油去超越自己。 ,和的区别： 前后不换行,为什么需要W3C标准,W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMASc

7、ript ,制定统一的web标准,W3C,Netscape的图标,W3C提倡的Web结构,不规范的示例,一级主题 一级主题阐述文字 二级主题 二级主题相关文字 项目列表1 项目列表2 项目列表3,存在问题： 1、内容和表现没分离，后期很难维护和修改 2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索,W3C提倡的Web结构,规范的示例,一级主题1 一级主题阐述文字 二级主题 二级主题阐述文字 项目列表1 项目列表2 项目列表3 ,W3C提倡的Web结构： 1、内容（结构）和表现（样式）分离 2、HTML内容结构要求语义化,XHTML 1.0基本规范, body部分内容 ,标签名和属性名

8、称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明,1、声明必须位于文档的最前面 2、三种级别：Strict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型）,练习1,需求说明： 实现简单的商品购买页,练习2,注意HTML结构的语义化，遵守XHTML1.0基本规范,需求说明： 实现商品促销页,超链接,超链接-实现页面间的导航,链接文本或图像,链接地址（目标）,超链接, 灿坤蒸气电熨斗 ,链接在新窗口中打开, 链接热点文本或图像,链接路径, 上级目录 上上级目录 ,相对地址：相对于当前目录的地址，常用 绝对地址：指向目

9、标地址的完整描述 ，少用,上级目录：./,上上级目录：././,登录 搜狐,登录,超链接的三类应用场合, 免费注册 登录 ,页面间链接 锚链接 功能性链接,常用于网站导航,相对路径,超链接的三类应用场合,实现锚链接 1、定义标记（锚）： 目标位置 2、设置链接到标记位置：当前位置, 明星专区 明显专区内容 ,定义标记,设置链接到标记位置,A.页面内的锚链接,适用于页面内容较多，超过一屏的场合,超链接的三类应用场合,实现锚链接,标记所在页. 明星专区 ,B.页面间的锚链接,链接页. 明星体验：明星专区 ,超链接的三类应用场合,功能性链接 邮箱、QQ链接等, 站长信箱 ,注释, 被注释掉的行将不显

10、示 - 正常显示行1 正常显示行2 ,用于增加代码的可读性，不显示,注释,特殊符号,特殊符号 空格：, COPYRIGHT 北京市贵美商城有限公司 ,1、因为等符号在HTML中已使用，所以必须用其他符号来代替 2、都以分号结束（；）,表单的应用,表单的典型应用,用户登录/注册,收集用户反馈信息,提供搜索工具,常见的表单元素,单行文本框(text),单选按钮(radio),复选框(checkbox),下拉列表(select),重置按钮 (reset),提交按钮(submit),密码框(password),文本域(textarea),表单基本语法, 文本框、按钮等表单元素 ,指定提交后，由服务器上

11、哪个处理程序处理,指定向服务器提交的方法： 一般为post或get方法, post方法比较安全, 用户名： 密 ,表单输入元素：input,表单提交地址和方法的设置,表单元素基本格式,指定元素的类型，可为text、radio、submit等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中checked,表单各元素语法,文本框 密码框 按钮 单选按钮,普通按钮：button 提交按钮：submit 重置（清空）按钮：reset 图片按钮：image,表单各元素语法,复选框 文件域 列表框 多行文本框, , 文本内容 ,表单的高级用法,隐藏域 方便服务器端“记住

12、”客户端的信息、但又不希望客户看到的数据,. ,隐藏的客户代号信息：666，但客户端页面不显示,隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感,只读和禁用属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用,表单的高级用法, 欢迎阅读服务条款协议，贵美的权利和义务. 同意以上协议 ,1、用户不能修改协议 2、勾选“同意以上协议”，才允许点击“注册”按钮,练习简易求职表,“协议”只读，“提交”按钮禁用,用隐藏域提交求职者姓名“zhangsan”,需求说明： 使用表单制作简易求职表,表格的应用,

13、表格应用场合,论坛中应用表格,购物网站应用表格,门户网站应用表格,基本语法, 第1个单元格的内容 第2个单元格的内容 . 第1个单元格的内容 第2个单元格的内容 . , 定义行, 定义列,跨行、跨列, 学生成绩 张三 语文 98 数学 95 .代码同上两行. ,rowspan 跨2行,colspan 跨3列,表格高级应用,如何实现年终数据报表？,表格标题,页脚,表头,表格数据的分组标签、配合使用，对报表数据进行逻辑分组,表格高级应用, 年终数据报表 月份 收入（RMB） 1月 100 2月 80 平均月收入 196.67 总计 1180 ,标签对应报表的页眉,对应报表的数据主体,对应报表的页脚

14、,表格布局,表格布局的应用场合,图文布局，数据规则整齐,表单布局，同样要求数据规则整齐,图文布局的实现,实现步骤,图文布局的实现,实现步骤, 大学要求老师开网店 安全锤网上大热销 ,整个是5行2列的表格,实际布局时border=“0”隐藏边框,公告栏：跨2列,图片：跨4行,练习：贵美商品分类,需求说明 根据提供的素材实现,表单布局应用,实际页面中的登录表单布局,实际应用，需要几行几列的表格布局？,表单布局应用, 会员名: 代码同“会员名” ,整体布局：4行3列的表格,图片后的内容跨2列，内容用“空格”填充,图片按钮跨2列,小结,使用表格进行布局对显示数据有什么要求？实现思路是什么？,使用场合：

15、数据显示要求较为规整，符合表格布局的特点 布局的实现思路： 需要几行几列的表格？ 哪些单元格有跨行或跨列？ 编写表格代码实现,嵌套布局,如何用表格实现下图布局？,对于复杂的页面，如使用表格则必须采用多层嵌套,嵌套布局,嵌套表格布局的缺点： 代码量大 层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据 表格布局仅适用于： 规则的数据显示 表单页面,表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习）,框架的应用,页面的一个固定部分显示LOGO或公司信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的,产品 宣传,技术 论坛,客户

16、服务,框架的用途,框架的两类用途： 1、显示多窗口页面-使用框架集 2、页面复用使用内嵌框架,复用站内页面： head和foot部分,复用站外内容： 引用Google搜索引擎、显示sohu新闻等,框架的组成,文件1： top.html,文件2：left.html,文件3： right.html,多个页面文件组成,主文件： index.html,框架基本结构,创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件, ,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,引用各窗口要显示的网页文件,框架基本结构,纵

17、向分割窗口, 如浏览器不支持框架，才显示body内的内容 ,注意： 1、框架和body不能共存 2、为了兼容性，可以使用标签,窗口边框的宽度,将窗口分割成上中下3部分,推荐：将窗口子文件放在单独的文件中用于区分,框架基本结构,横向分割窗口, ,横向分为3个窗口,框架多窗口实现,典型的2行2列结构, ,scrolling属性：是否显示滚动条,如何实现？,2行2列的 窗口划分,窗口间的关联,如何实现左列导航，在右面显示相关页面？,使用标签的target目标窗口属性,窗口间的关联,实现窗口间关联的步骤 1、设置窗口名（框架主页） 2、设置的target属性（窗口子页面 ）, . . . . ,设置右窗口名为：rightFrame, ,设置链接在右窗口中打开,窗口间的关联,target的其他用法 在新窗口中显示：_blank 在自身窗口中显示：_self 在上级窗口显示：_top 在父窗口显示：_parent,内嵌框架,需要使用多个文件，目录结构复杂 内嵌较为灵活，可以在网页的任何位置使用 可以作为模板，在本网站的多个页面复用,整个页面只有局部窗口引用sohu的内容,内嵌框架基本语法, ,和不同，放在标签内,指明引用的网页文件,内嵌框架属性,如何设置在内嵌窗口显示, 下边显示第三页 ,在内嵌窗口mainFrame显示链接内容,设置窗口名,如何实