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