课程名称 web 基础课程(html),讲师：喻辉 中软培训中心 邮件：yuhuichinasofti.com,www.csst.com.cn,开篇,欢迎大家和我一起学习Web基础 Web基础内容：HTML、CSS 、div+css布局、JavaScript 要点安排：,HTML CSS样式表 DIV+CSS布局 4 JavaScript,www.csst.com.cn,HTML简介,什么是 HTML 文件？ HTML 指超文本标签语言Hyper Text Markup Language HTML 文件是包含一些标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建。first.html,www.csst.com.cn,HTML简介,Blog,XHTML,XHTML指可扩展超文本标识语言 Extensible HyperText Markup Language XHTML 的目标是取代 HTML XHTML 是一个 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语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容我们先来看一幅图,www.csst.com.cn,HTML简介,标签：,Html头部,头元素内部的标题信息不会显示在浏览器窗口中。 根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：, , , , 和 。元素可规定页面中所有链接的基准 URL元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等 提示：请记住始终为文档规定标题！, 标签, 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范 该标签可声明三种 DTD 类型，分别表示严格版本(Strict )、过渡版本(Transitional )以及基于框架 (Frameset )的 HTML 文档 注意: 标签没有结束标签！,HTML实例,XHTML Strict DTDXHTML Transitional DTDXHTML Frameset DTD,HTML主体,HTML主体是HTML页面中最终要显示出来的内容部分，主体应该包含在中 可以在主体中(1)输出文本，文本链接(2)图片，图片链接(3)表格(4)表单(5)框架等等。,HTML属性,属性为HTML提供附加信息 属性总是以名称/值对的形式出现，比如：name=“value“ 属性总是在 HTML 元素的开始标签中规定。 始终为属性值加引号,属性,背景颜色bgcolor=“red”可以，也可以采用#rrggbb的形式，基本#号后面的直接写颜色英文名RGB各色彩的深度 背景图片background“back-ground.gif”给出图片文件位置，如图片小于页面时，将循环填充 背景音乐注意：这是一个单独标记，要放到中使用 bodyproperty.html,HTML文字,标题字：标题字 #=16 字体大小 属性：size字体大小 字体颜色 属性：color字体颜色 字体家族 属性：face幼圆字体 引申：段落标签和换行标签,www.csst.com.cn,HTML链接,链接： HTML使用超级链接来连接到网络上的其他页面 链接标签： 页面显示文本 Href属性（链接页面地址）href = “所要链接到的页面地址”在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。,HTML图片,标记用来在页面中插入图片，其语法形式：src 指明图片URL地址alt 在图象位置显示的文字图片边框：border 设定图像边的宽度 border例子：reset.html,HTML链接图片,图片作为链接：路径问题： 中软 网页1.html 前者为绝对路径，后者为相对路径。,www.csst.com.cn,HTML路径,相对路径：资源路径与你打开页面有关联的路径 绝对路径：资源路径与你打开页面无关的路径 如果当前页面与引用资源在同一文件夹内则直接写资源名称 如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称/资源名称 如果引用资源在当前文件夹上一级的文件夹内则需：/资源名称 如果引用资源在当前文件夹上两级的文件夹内则需：/资源名称,www.csst.com.cn,HTML表单,什么是表单？ HTML表单:一个能够包含表单元素的区域 表单标签：表单元素,HTML表单,表单的作用：动态网页技术中，用户与服务器的交互就是通过表单来完成的,因此说表单的作用是十分重要的。 表单的结构：（1）（2）（3）提交与重置（重要）Reset Submit,HTML表单输入类型,文本框 text 文本域 textarea 密码 Password 隐藏域 hidden 单选框 radio 复选框 Checkbox 下拉列表 Select option属性 文件打开 file,HTML表单,前面：两个特殊的按钮 Submit、Reset 普通按钮：也是表单中一个重要元素button 按钮标签：,www.csst.com.cn,HTML表单,重点： 两个特殊的按钮提交按钮重置按钮注意：提交按钮必须配合form的action属性使用,练习,练习：表单的制作 form.html,HTML表格,表格语法- 定义表格- 定义表行- 定义表元 表格例子:画一个三行两列的表格：table.html 注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML表格,表格头标签（表格头位于表格的内部）： 头内容 注意： 标签相当于一个标签，用法也相同只不过格式化字体 表格标题标签（表格标题位于表格的上部）： My Caption 注意： 标签放在的下边，第一个的上边,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 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积,HTML框架,左右分(垂直分栏)：上下分(水平分栏)：例子：frameset1.htmlframeset4.html,HTML框架,noframe用法 当浏览器不支持框架时，显示提示信息 请换有支持Frame功能的浏览器 iframe用法不需要一个单独的页面存放框架.灵活性好.,