web基础教程之HTML篇v1.0.ppt

1、课程名称 web 基础课程(html),讲师：梁柱 重庆工业职业技术学院,开篇,欢迎大家和我一起学习Web基础 Web基础内容： HTML、CSS 、div+css布局、JavaScript 要点安排：,HTML CSS样式表 DIV+CSS布局 4 JavaScript,HTML简介,什么是 HTML 文件？ HTML 指超文本标签语言 Hyper Text Markup Language HTML 文件是包含一些标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建。 fi

2、rst.html,HTML简介,Blog,HTML标签,HTML 标签是用来标记 HTML 元素的。 HTML 标签被 符号包围。 这些包围的符号叫作尖括号。 HTML 标签是成对出现的。例如 和 位于起始标签和终止标签之间的文本是元素的内容。 HTML 标签对大小写不敏感， 和 的作用的相同的。,HTML注释,注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。 注释： 增加代码的可读性，对日后的修改有很大的帮助 comment.html,HTML结构,HTML文件的所有内容都应该包含在标记中 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编

3、码、标题等。 主体则包含了文件的主体内容 我们先来看一幅图,HTML简介,标签：,Html头部,头元素内部的标题信息不会显示在浏览器窗口中。 根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：, , , , 和 。 元素可规定页面中所有链接的基准 URL 元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等 提示：请记住始终为文档规定标题！,HTML主体,HTML主体是HTML页面中最终要显示出来的内容部分，主体应该包含在中 可以在主体中 (1)输出文本，文本链接 (2)插入图片，图片链接 (3)表格 (4)表单 (5)框架等等。,HTML属性,属性为H

4、TML提供附加信息 属性总是以名称/值对的形式出现，比如：name=value 属性总是在 HTML 元素的开始标签中规定。 始终为属性值加引号,属性,背景颜色bgcolor=red” 可以，也可以采用#rrggbb的形式，基本#号后面的直接写颜色英文名RGB各色彩的深度 背景图片backgroundback-ground.gif” 给出图片文件位置，如图片小于页面时，将循环填充 背景音乐 注意：这是一个单独标记，要放到中使用 bodyproperty.html,HTML文字,标题字：标题字 #=16 字体大小 属性：size 字体大小 字体颜色 属性：color 字体颜色 字体家族 属性：f

5、ace 幼圆字体 引申：段落标签和换行标签,HTML链接,链接： HTML使用超级链接来连接到网络上的其他页面 链接标签： 页面显示文本 Href属性（链接页面地址） href = “所要链接到的页面地址” 在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。,HTML图片,标记用来在页面中插入图片，其语法形式： src 指明图片URL地址 alt 在图象位置显示的文字 图片位置： align 定值为left,center,right,top, middle,bottom 图片边框： border 设定图像边的宽度 border例子：reset.html,HTM

6、L链接图片,图片作为链接： 路径问题： 中软 网页1.html 前者为绝对路径，后者为相对路径。,HTML路径,相对路径：资源路径与你打开页面有关联的路径 绝对路径：资源路径与你打开页面无关的路径叫 如果当前页面与引用资源在同一文件夹内则直接写资源名称 如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称/资源名称 如果引用资源在当前文件夹上一级的文件夹内则需：./资源名称 如果引用资源在当前文件夹上两级的文件夹内则需：././资源名称,HTML表单,什么是表单？ HTML表单:一个能够包含表单元素的区域 表单标签：表单元素,HTML表单,表单的作用：动态网页技术中，用户与服务器的 交

7、互就是通过表单来完成的,因此说表单的作用是 十分重要的。 表单的结构： （1） （2） （3） 提交与重置（重要） Reset Submit,HTML表单输入类型,文本框 text 文本域 textarea 密码 Password 隐藏域 hidden 单选框 radio 复选框 Checkbox 下拉列表 Select option属性 文件打开 file,HTML表单,前面：两个特殊的按钮 Submit、Reset 普通按钮：也是表单中一个重要元素button 按钮标签： ,HTML表单,重点： 两个特殊的按钮 提交按钮 重置按钮 注意：提交按钮必须配合form的action属性使用,练习

8、,练习： 表单的制作 form.html,HTML表格,表格语法 - 定义表格 - 定义表行 - 定义表元 表格例子:画一个三行两列的表格：table.html 注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML表格,表格头标签（表格头位于表格的内部）： 头内容 注意： 标签相当于一个标签，用法也相同只不过格式化字体 表格标题标签（表格标题位于表格的上部）： My Caption 注意： 标签放在的下边，第一个的上边,HTML表格,美化表格属性：border,bgColor,background 表格大小属性：width,height 两个易混的属性：cellspacing,

9、 cellpadding 合并表格的属性：colspan, rowspan 表格位置的属性：align,valign 例子：beautifulTable.html,HTML表格,总结：表格在页面上最主要的作用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中 发展情况：纯表格已经逐渐被淘汰 div+css在近几年中占有主导地位 表格+css由于其兼容性良好正逐渐又成为主流。,HTML列表,无序列表： 无序列表是一个项目的序列。 各项目前加有标记：通常是黑色的实心小圆圈 无序列表以标签开始。 每个列表项目以开始。 例子：ulexample.html,H

10、TML列表,有序列表 有序列表也是一个项目的序列。 各项目前加有数字作标记。 有序列表以标签开始。 每个列表项目以开始。 属性type可以指定为A、a、1、i、I 例子：olexample.html,HTML列表,自定义列表 自定义列表不是一个项目的序列，它是一系列条目和它们的解释。 自定义列表以标签开始，自定义列表条目以开始，自定义列表的释义以开始。 例子：dlexample.html 总结：列表在我们后面的div+css布局会经常用到，所以大家认真对待哦！,HTML框架,框架（frameset）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,HTML框架,加入框架的页面不需要元素，使用frameset 框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns