HTML基础知识整合

1、HTML简介简介mHTML：Hyper Text Markup Language1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用目前网页中常用HTML基本结构基本结构mHTML网页基本结构 我的第一个网页我的第一个网页 我的第一个网页我的第一个网页网页头部网页头部主体部分主体部分标签标记着标签标记着 HTML 文档的开始和结束文档的开始和结束网页基本信息网页基本信息

2、3-1mDOCTYPE声明无标题文档无标题文档Strict（严格类型）（严格类型）Transitional（过渡类型）（过渡类型）Frameset（框架类型）（框架类型）网页基本信息网页基本信息3-2m标签家用电器排行榜家用电器排行榜网页基本信息网页基本信息3-3m标签meta http-equiv=Content-Type content=text/html; charset=gb2312”搜索关键字搜索关键字内容描述内容描述网页字符编码网页字符编码W3C标准结构标准01表现标准02行为标准03网页的基本标签网页的基本标签6-1m标题标签mmmmmm一级标题一级标题二级标题二级标题三级标题三

3、级标题四级标题四级标题五级标题五级标题六级标题六级标题演示示例演示示例2：标题标签：标题标签网页的基本标签网页的基本标签6-2m段落标签m标题标题1段落段落1段落段落2。演示示例演示示例3：段落标签：段落标签网页的基本标签网页的基本标签6-3m换行标签m北京欢迎你北京欢迎你 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。有勇气就会有奇迹。 北京欢迎你，为你开天辟地北京欢迎你，为你开天辟地 演示示例演示示例4：换行标签：换行标签网页的基本标签网页的基本标签6-4m水平线标签m北京欢迎你北京欢迎你 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！ 有勇

4、气就会有奇迹。有勇气就会有奇迹。 北京欢迎你，为你开天辟地北京欢迎你，为你开天辟地 演示示例演示示例5：水平线标签：水平线标签网页的基本标签网页的基本标签6-5m字体样式标签m加粗：m斜体：徐志摩人物简介徐志摩人物简介 1910年入杭州学堂年入杭州学堂 1918年赴美国克拉大学学习银行学年赴美国克拉大学学习银行学 演示示例演示示例6：字体样式标签：字体样式标签网页的基本标签网页的基本标签6-6m注释和特殊符号特殊符号特殊符号字符实体字符实体示例示例空格空格 百度百度 | 新浪新浪大于号大于号()>如果时间如果时间&gt

5、;晚上晚上6点，就坐车回家点，就坐车回家小于号小于号()<如果时间如果时间<早上早上7点，就走路去上学点，就走路去上学引号引号()"W3C规范中，规范中，HTML的属性值必须用成对的的属性值必须用成对的"引起来引起来版权符号版权符号 ©© 版权所有版权所有图像标签图像标签图像标签图像标签图像地址图像地址图像的替代文字图像的替代文字语法语法鼠标悬停提示文字鼠标悬停提示文字图像宽度图像宽度图像高度图像高度链接标签链接标签链接文本或图像链接文本或图像链接路径链接路径链接在哪个窗口打开链接在哪个窗口打开

6、语法语法无漂白薄皮核桃无漂白薄皮核桃常用值：常用值：_self、_blank文本超链接文本超链接图像超链接图像超链接示例示例target 的取值的取值常用的超链接常用的超链接3-1m页面间链接m从一个页面链接到另外一个页面m锚链接m功能性链接常用的超链接常用的超链接3-2m锚链接m从A页面的甲位置跳转到本页中的乙位置m从A页面的甲位置跳转到B页面中的乙位置m创建步骤m创建跳转标记m创建跳转链接乙位置乙位置甲位置甲位置m锚链接m从A页面的甲位置跳转到本页中的乙位置m从A页面的甲位置跳转到B页面中的乙位置m创建步骤m创建跳转标记m创建跳转链接乙位置乙位置常用的超链接常用的超链接3-3m功能性链接m

7、电子邮件mQQmMSN 联系我们联系我们示例示例联系客联系客列表列表 表格和表格和Html框架的使用框架的使用Html 列表列表mHTML有三种列表形式：排序列表(Ordered List)；无序序列表(Unordered List)；定义列表(Definition List)。m排序列表排序列表(Ordered List) 排序列表中，每个列表项前标有数字，表示顺序。由开始，每个列表项由开始。Html 列表列表m无序列表无序列表(Unordered List) 无序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。由开始，每个列表项由开始。Html 列表列表m定义列表定义

8、列表 定义列表由开始。术语由开始，英文意为Definition Term。术语的解释说明，由开始，里的文字缩进显示。Html 列表列表 不同类型不同类型(Type)的排序列表的排序列表 如何用Type属性设置排序列表项前的符号 Html 列表列表m不同类型不同类型(Type)的不排序列表的不排序列表 如何用Type属性设置不排序列表项前的符号。Html 列表列表 嵌套的列表嵌套的列表 列表里可以含有子列表。通常用这种嵌套的列表，反映层次较多的内容表格基础与布局表格基础与布局基本语法基本语法 单元格内容表格表格中的一行. - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)带

9、着求知好学的态度，超越自己，完善自己。表格的边框及尺寸表格的边框及尺寸m设置边框m设置表格的宽和高m单元格之间间隙m#=value内容与单元格边框距离带着求知好学的态度，超越自己，完善自己。表格相关颜色设置表格相关颜色设置m表格边框颜色设置m 背景颜色设置m背景图片设置m亮边框的颜色m 暗边框的颜色带着求知好学的态度，超越自己，完善自己。表格的合并表格的合并m1、跨多列的单元格 合并列m2、跨多行的单元格 合并行m#为合并的单元格数量带着求知好学的态度，超越自己，完善自己。表格对齐表格对齐malignm #=left、rightm表格相对于网页的位置m #=left, center, righ

10、t m内容相对于单元格的位置带着求知好学的态度，超越自己，完善自己。HTML表格补充表格补充m划分表格结构的三个标签：m（表首）,（表主体）,（表尾）m目的：对表格的各部分的属性进行统一的设置，而不用单一逐个设置m注：文字、图片、多媒体等内容只能放或里面带着求知好学的态度，超越自己，完善自己。注意事项注意事项m1、表格标记必须要有、或者（表头标签）m2、表格内容必须写在(或th)标签之内带着求知好学的态度，超越自己，完善自己。表格布局原则表格布局原则m网页结构是由一些矩形有机组成的，所有的内容都是放在矩形内的。这些矩形我们可以用表格来代替表格布局的最基本原则。m网页在浏览器中宽度是一定的，若无

11、限制的放置文字、图片、多媒体等内容，就不能控制好这些内容的位置，可以将内容放在表格的单元格里，只要把表格的形状设置好了，内容也定位好了表格布局的直观原因。m表格布局的两个技术：m表格嵌套：分清楚表格的两种功能：结构布局(安排页面排版)，内容容器(组织和显示信息) 。m口诀能独立就独立，能成行就不列m自适应：口诀外像素，内百分带着求知好学的态度，超越自己，完善自己。Html框架框架m使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。mFramesetm决定如何划分Frame。有cols属性和rows属性。使用cols属性，表

12、示按列分布Frame；使用rows属性，表示按行分布Frame。Html框架框架 列分frame 如何在浏览器里同时显示三个网页，三个网页是按列分布的。 行分frame 如何在浏览器里同时显示三个网页，三个网页是按列分布的。 混合frameset 既用到了cols属性，又用到了rows属性，将Frame进行灵活分布。Html框架框架 Frameset中的noresize属性 使用Noresize属性可以确保Frame的大小。如果不使用noresize属性，你可以用鼠标移动Frame的边界，来改变Frame的大小，如果设置了noresize属性，就不能移动边界了。 Frame用于导航 如何建立一个用于导航的Frame。这个导航Frame包含一个HTML，这个HTML（代码如下）包含了一个网页列表。点击网页列表中的任何一项，就会在第二个Frame中显示点击中的网页。 Iframe的使用 如何在一个HTML文件里用iframe嵌入一个网页。HTML小结小结m标签:由包含起来的表示一定含义的html单元，分为双标签、单标签。m标签属性:用来表示该标签的具体功能或者某一具体的性