web基础教程之HTML篇v.ppt

课程名称web基础课程(html),讲师：喻辉中软培训中心邮件：yuhui,开篇,欢迎大家和我一起学习Web基础Web基础内容：HTML、CSS、div+css布局、JavaScript要点安排：,HTMLCSS样式表DIV+CSS布局4JavaScript,HTML简介,什么是HTML文件？HTML指超文本标签语言HyperTextMarkupLanguageHTML文件是包含一些标签的文本文件。这些标签告诉WEB浏览器如何显示页面。HTML文件必须使用htm或者html作为文件扩展名。HTML文件可以通过简单的文本编辑器来创建。first.html,HTML简介,Blog,XHTML,XHTML指可扩展超文本标识语言ExtensibleHyperTextMarkupLanguageXHTML的目标是取代HTMLXHTML是一个W3C标准XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行XHTML在我国有个通俗的名称:DIV+CSS,学习HTML&XHTML的方法,学习XHTML不需要任何基础!阅读XHTML教程以及其中的实例当然是学习XHTML的好办法，但是仅仅如此是绝对不够的。在学习的过程中，你可以找一些你以前比较喜欢浏览的站点，看看他们在实际的网站设计过程中是如何使用XHTML的。你只需要点击浏览器工具栏上的“查看”按钮，再选择“查看源文件”，就可以看到该页的代码了只有不断的实践练习,你的水平才能提高!,HTML标签,HTML标签是用来标记HTML元素的。HTML标签被符号包围。这些包围的符号叫作尖括号。HTML标签是成对出现的。例如和位于起始标签和终止标签之间的文本是元素的内容。HTML标签对大小写不敏感，和的作用的相同的。,HTML注释,注释标签用于在HTML源码中插入注释。注释会被浏览器忽略。注释：增加代码的可读性，对日后的修改有很大的帮助comment.html,HTML结构,HTML文件的所有内容都应该包含在标记中HTML语言在结构上分为两部分，即头部和主体。头部描述浏览器所需要的一些信息，如文件编码、标题等。主体则包含了文件的主体内容我们先来看一幅图,HTML简介,标签：,Html头部,头元素内部的标题信息不会显示在浏览器窗口中。根据HTML标准，仅有几个标签在HTML的头部分是合法的。它们是：,和。元素可规定页面中所有链接的基准URL元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等提示：请记住始终为文档规定标题！,标签,声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范该标签可声明三种DTD类型，分别表示严格版本(Strict)、过渡版本(Transitional)以及基于框架(Frameset)的HTML文档注意:标签没有结束标签！,HTML实例,XHTMLStrictDTDXHTMLTransitionalDTDXHTMLFramesetDTD,HTML主体,HTML主体是HTML页面中最终要显示出来的内容部分，主体应该包含在中可以在主体中(1)输出文本，文本链接(2)图片，图片链接(3)表格(4)表单(5)框架等等。,HTML属性,属性为HTML提供附加信息属性总是以名称/值对的形式出现，比如：name=value属性总是在HTML元素的开始标签中规定。始终为属性值加引号,属性,背景颜色bgcolor=red”可以，也可以采用#rrggbb的形式，基本#号后面的直接写颜色英文名RGB各色彩的深度背景图片backgroundback-ground.gif”给出图片文件位置，如图片小于页面时，将循环填充背景音乐注意：这是一个单独标记，要放到中使用bodyproperty.html,HTML文字,标题字：标题字#=16字体大小属性：size字体大小字体颜色属性：color字体颜色字体家族属性：face幼圆字体引申：段落标签和换行标签,HTML链接,链接：HTML使用超级链接来连接到网络上的其他页面链接标签：页面显示文本Href属性（链接页面地址）href=“所要链接到的页面地址”在何处打开页面中所有的链接。可通过在每个链接中使用target属性来覆盖此属性。,HTML图片,标记用来在页面中插入图片，其语法形式：src指明图片URL地址alt在图象位置显示的文字图片边框：border设定图像边的宽度border例子：reset.html,HTML链接图片,图片作为链接：路径问题：中软网页1.html前者为绝对路径，后者为相对路径。,HTML路径,相对路径：资源路径与你打开页面有关联的路径绝对路径：资源路径与你打开页面无关的路径如果当前页面与引用资源在同一文件夹内则直接写资源名称如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称/资源名称如果引用资源在当前文件夹上一级的文件夹内则需：./资源名称如果引用资源在当前文件夹上两级的文件夹内则需：././资源名称,HTML表单,什么是表单？HTML表单:一个能够包含表单元素的区域表单标签：表单元素,HTML表单,表单的作用：动态网页技术中，用户与服务器的交互就是通过表单来完成的,因此说表单的作用是十分重要的。表单的结构：（1）（2）（3）提交与重置（重要）ResetSubmit,HTML表单输入类型,文本框text文本域textarea密码Password隐藏域hidden单选框radio复选框Checkbox下拉列表Selectoption属性文件打开file,HTML表单,前面：两个特殊的按钮Submit、Reset普通按钮：也是表单中一个重要元素button按钮标签：,HTML表单,重点：两个特殊的按钮提交按钮重置按钮注意：提交按钮必须配合form的action属性使用,练习,练习：表单的制作form.html,HTML表格,表格语法-定义表格-定义表行-定义表元表格例子:画一个三行两列的表格：table.html注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML表格,表格头标签（表格头位于表格的内部）：头内容注意：标签相当于一个标签，用法也相同只不过格式化字体表格标题标签（表格标题位于表格的上部）：MyCaption注意：标签放在的下边，第一个的上边,HTML表格,美化表格属性：border,bgColor,background表格大小属性：width,height两个易混的属性：cellspacing,cellpadding合并表格的属性：colspan,rowspan表格位置的属性：align例子：beautifulTable.html,HTML表格,总结：表格在页面上最主要的作用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中发展情况：表格已经逐渐被淘汰div+css已经成为主流。,HTML列表,无序列表：无序列表是一个项目的序列。各项目前加有标记：通常是黑色的实心小圆圈无序列表以标签开始。每个列表项目以开始。例子：ulexample.html,HTML列表,有序列表有序列表也是一个项目的序列。各项目前加有数字作标记。有序列表以标签开始。每个列表项目以开始。属性type可以指定为A、a、1、i、I例子：olexample.html,HTML列表,自定义列表自定义列表不是一个项目的序列，它是一系列条目和它们的解释。自定义列表以标签开始，自定义列表条目以开始，自定义列表的释义以开始。例子：dlexample.html总结：列表在我们后面的div+css布局会经常用到，所以大家认真对待！,HTML框架,框架（frameset）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,HTML框架,加入框架的页面不需要元素，使用frameset框架结构标签（）定义如何将窗口分割为框架每个frameset定