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属性（窗口子页面 ）, . . . . ,设置右

18、窗口名为：rightFrame, ,设置链接在右窗口中打开,窗口间的关联,target的其他用法 在新窗口中显示：_blank 在自身窗口中显示：_self 在上级窗口显示：_top 在父窗口显示：_parent,内嵌框架,需要使用多个文件，目录结构复杂 内嵌较为灵活，可以在网页的任何位置使用 可以作为模板，在本网站的多个页面复用,整个页面只有局部窗口引用sohu的内容,内嵌框架基本语法, ,和不同，放在标签内,指明引用的网页文件,内嵌框架属性,如何设置在内嵌窗口显示, 下边显示第三页 ,在内嵌窗口mainFrame显示链接内容,设置窗口名,如何实现？,练习1用框架分割多个窗口,需求说明： 根

19、据提供的子窗口页面素材,练习2实现页面复用,需求说明： 根据提供的素材实现,为什么使用CSS样式表,样式表能实现内容与样式的分离，方便团队开发 css garden ,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,为什么使用样式表,样式复用、方便网站的后期维护,同一网站共用同一样式，确保网站统一的风格,页面的精确控制，实现精美、复杂页面,CSS的用途,1、外观美化 2、布局、定位,CSS基本语法, 选择器（即修饰对象） 对象的属性1: 属性值1; 对象的属性2: 属性值2; ,标签声明标签内为CSS,多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值,li color:

20、 red; font-size: 30px; font-family: 隶书; ,选择器,样式规则,选择器的分类,标签选择器, li color:red; font-size:28px; font-family:隶书; 家用电器 ,标签选择器：用于修饰同类HTML标签的共性风格,选择器的分类, .bluecolor:blue; 家用电器 各类书籍 手机数码 日用百货 ,如果希望部分li标签采用其他样式，怎么办？,类选择器(class),定义样式，注意类名有点号,应用类样式，其他元素也可以使用,选择器的分类, #menu width:200px; background:#ccc; font:bo

21、ld 14px 宋体; 家用电器 ,ID选择器,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？,文本属性,行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-space （空白处理 ）,字符间距：5px 文本修饰：带下划线 空白处理：不断行,字体、字号： font（缩写形式） font-weight（粗细） font-size（大小） font-family（字体）,字体：宋体 颜色：红色 字号：12px 对齐：左对齐,文本属性, li font:

22、12px 宋体; text-align:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px; color:red; ,所有的默认样式： 字体、字号：宋体，12px 对齐方式：左对齐 行高：28px,首行标题样式： 字符间距：5px 空白处理：不换行 文本修饰：带下滑线,大字体样式： 字号：16px 颜色：红色,font字体样式的缩写形式,背景属性,背景属性： background （缩写形式） backg

23、round-color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量）,四类平铺效果,背景属性,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出现的水平和垂直位置坐标，实现各种拍偏移效果,设置背景图片、不重复平铺,各种偏移效果,背景属性的经典应用,图标截取-背景偏移量技术,利用background-position的坐标偏移量，从同一张背景图中截取菜单图标

24、,背景属性的经典应用,divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px; ; 购 帮助中心 登录,所有IDV标签设置为同一背景图、等宽,分别设置各图标的坐标偏移量,背景属性的经典应用,1 .设置三个标签（如div）的背景为同一图片背景,2 .考虑“购物车”、“帮助中心”图标的坐标偏移量是多少？,3 .考虑“登录”图标的坐偏移量是多少？,Y,X,O(0,0),列表属性,

25、列表（li）常用属性 list-style （列表风格）,list-style属性规定的列表风格,列表属性,列表属性的典型应用：导航菜单, li width:150px; color:red; font:28px 隶书; list-style:none; float:left; 购物车 ,设置列表为none去掉圆点,所有html标签都有的float浮动属性，此处用于横向排列,如何控制CSS样式,盒模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容 填充（也称内边距） 边框 边界（也称外边距）,如何控制CSS样式,样式控制思路,盒内样式修饰 盒子位置布局,盒内样式： 设置网页元素的颜色、

26、字体等外观,盒子位置布局：确定盒子所在的位置、和其他网页元素的关系,为什么需要盒子属性,盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性,盒子模型平面图,盒子模型三维立体图：注意背景色在背景图的下一层,什么是盒子属性,盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,margin外边距,可统一设置或四边分开设置 margin属性 margin

27、margin-top margin-right margin-bottom margin-left,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px;,分别代表什么含义？,border边框,border属性 border-color border-width border-style,border-top border-right border-bottom bord

28、er-left,border border-left ,修饰属性,四个方向,缩写形式,border,每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置,border-style: none; border: 1px solid red; border-right: 5px dotted blue;,分别代表什么含义？,使用border属性修饰表单, .textBorder border-width:1px; border-style:solid; 名字： 密码： ,细边框的样式,padding内边距,padding属性 padding padding-top p

29、adding-right padding-bottom padding-left,padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,元素的宽高及实际占位,元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,height: 40px,border-width-top: 20px,margin-top: 10px,右图图片的实际的高度是

30、多少？,padding-top: 5px,使用盒子属性布局元素,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？,图片背景色：#ff7300,页面背景色：#ccc,使用盒子属性布局元素, body margin:0px;padding:0px; background:#ccc; #logo width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; /水平居中 ,设置页面内容

31、（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,使用盒子属性实现DIV+CSS布局,如何实现注册页面的布局？,main：主体部分,footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤 1、分析页面的分块结构，形成HTML组织结构,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤 2、编写每个DIV块的CSS控制定位,#containe: 980px 、居中,#header： 13

32、6px;、背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性,浮动的三大显著特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是f

33、loat浮动属性,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none,超链接样式的特点,超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式,加链接后，图片/文本样式的变化,超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a