《web基础教程之html篇v1.0》由会员分享，可在线阅读，更多相关《web基础教程之html篇v1.0（38页珍藏版）》请在金锄头文库上搜索。
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 文件可以通过简单的文本编辑器来创建。fir
2、st.html,,HTML简介,Blog,XHTML,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.html,HTML结构,HTML文件的所有内容都应该包含在标记中 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容我们先来看一幅图,,HTML简介,标签：,Html头部,头元素内部的标题信息不会显示在浏览器窗口中。 根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：, , , , 和 。元素可规定页面中所有链接的基准 URL元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等 提示：请记住始终为文档规定标题！, 标签, 声明位于文档中的最前面的位置，处于
5、标签之前。此标签可告知浏览器文档使用哪种 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
6、提供附加信息 属性总是以名称/值对的形式出现，比如：name=“value“ 属性总是在 HTML 元素的开始标签中规定。 始终为属性值加引号,属性,背景颜色bgcolor=“red”可以，也可以采用#rrggbb的形式，基本#号后面的直接写颜色英文名RGB各色彩的深度 背景图片background“back-ground.gif”给出图片文件位置，如图片小于页面时，将循环填充 背景音乐注意：这是一个单独标记，要放到中使用 bodyproperty.html,HTML文字,标题字：标题字 #=16 字体大小 属性：size字体大小 字体颜色 属性：color字体颜色 字体家族 属性：face幼
7、圆字体 引申：段落标签和换行标签,,HTML链接,链接： HTML使用超级链接来连接到网络上的其他页面 链接标签： 页面显示文本 Href属性（链接页面地址）href = “所要链接到的页面地址”在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。,HTML图片,标记用来在页面中插入图片，其语法形式：src 指明图片URL地址alt 在图象位置显示的文字图片边框：border 设定图像边的宽度 border例子：reset.html,HTML链接图片,图片作为链接：路径问题： 中软 网页1.html 前者为绝对路径，后者为相对路径。,,HTML路径,相对路径：资
8、源路径与你打开页面有关联的路径 绝对路径：资源路径与你打开页面无关的路径 如果当前页面与引用资源在同一文件夹内则直接写资源名称 如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称/资源名称 如果引用资源在当前文件夹上一级的文件夹内则需：/资源名称 如果引用资源在当前文件夹上两级的文件夹内则需：/资源名称,,HTML表单,什么是表单？ HTML表单:一个能够包含表单元素的区域 表单标签：表单元素,HTML表单,表单的作用：动态网页技术中，用户与服务器的交互就是通过表单来完成的,因此说表单的作用是十分重要的。 表单的结构：（1）（2）（3）提交与重置（重要）Reset Submit,HT
9、ML表单输入类型,文本框 text 文本域 textarea 密码 Password 隐藏域 hidden 单选框 radio 复选框 Checkbox 下拉列表 Select option属性 文件打开 file,HTML表单,前面：两个特殊的按钮 Submit、Reset 普通按钮：也是表单中一个重要元素button 按钮标签：,,HTML表单,重点： 两个特殊的按钮提交按钮重置按钮注意：提交按钮必须配合form的action属性使用,练习,练习：表单的制作 form.html,HTML表格,表格语法- 定义表格- 定义表行- 定义表元 表格例子:画一个三行两列的表格：table.html
10、 注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML表格,表格头标签（表格头位于表格的内部）： 头内容 注意： 标签相当于一个标签，用法也相同只不过格式化字体 表格标题标签（表格标题位于表格的上部）： My Caption 注意： 标签放在的下边，第一个的上边,HTML表格,美化表格属性：border,bgColor,background 表格大小属性：width,height 两个易混的属性：cellspacing, cellpadding 合并表格的属性：colspan, rowspan 表格位置的属性：align例子：beautifulTable.html,HTML表格
11、,总结：表格在页面上最主要的作用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中 发展情况：表格已经逐渐被淘汰div+css已经成为主流。,HTML列表,无序列表： 无序列表是一个项目的序列。 各项目前加有标记：通常是黑色的实心小圆圈 无序列表以标签开始。 每个列表项目以开始。 例子：ulexample.html,HTML列表,有序列表 有序列表也是一个项目的序列。 各项目前加有数字作标记。 有序列表以标签开始。 每个列表项目以开始。 属性type可以指定为A、a、1、i、I例子：olexample.html,HTML列表,自定义列表 自定义列表不
12、是一个项目的序列，它是一系列条目和它们的解释。 自定义列表以标签开始，自定义列表条目以开始，自定义列表的释义以开始。 例子：dlexample.html 总结：列表在我们后面的div+css布局会经常用到，所以大家认真对待！,HTML框架,框架（frameset）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,HTML框架,加入框架的页面不需要元素，使用frameset 框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积,HTML框架,左右分(垂直分栏)：上下分(水平分栏)：例子：frameset1.htmlframeset4.html,HTML框架,noframe用法 当浏览器不支持框架时，显示提示信息 请换有支持Frame功能的浏览器 iframe用法不需要一个单独的页面存放框架.灵活性好.,
