1、Advanced HTML HTML深入学习,课程目的,以项目为依托，全面介绍与创建静态网页有关的HTML和CSS知识，使学员能制作外观简单的HTML页面。 讲解怎样通过JavaScript对页面进行处理。 为开发网站、开发B/S系统打好基础,课程目标,理解什么是HTML、CSS、JavaScript 理解并掌握HTML语言中的各种标记； 理解CSS样式表的作用和意义； 理解javascript的基本知识； 掌握使用dreamwaver等工具开发静态网站项目；,学习目标,了解HTML概念 掌握HTML文件基本结构以及元素 熟悉HTML 标记以及说明 掌握HTML 文本格式 掌握表单标记 熟悉H
2、TML框架,HTML的概念,什么是HTML,HTML全名Hyper Text Markup Language 中文意思为超文本标记语言。 HTML文件是一个包含有HTML标记的文本文件。 HTML标记告诉Web浏览器如何显示网页。 HTML文件必须是一个htm或html扩展名的文件。,HTML文件基本结构,HTML文件的基本结构,说明：打开任何一个html网页，源代码都会有这四个关键词，html、head、title、body。,编写第一个网页,网页标题网页的内容,HTML元素,什么HTML是元素,HTML元素格式,HTML元素示例,元素名,元素内容,HTML元素属性 bgcolor：“bac
3、kgroundcolor”意为背景色，这里背景色为红色（red）,HTML标记,HTML标记的特点 是用来组成HTML元素的。 使用两个尖括号“”括起来。 一般是双标记：前者是起始标记，后者为结束标记。 两个标记之间的文本是HTML元素的内容。 单独使用就能完整地表达意思的标记称为“单标记”。 HTML标记对大小写不敏感,与是相同的。,双 标 记,单 标 记,HTML标记分类,HTML标记可以分为：,常用标记,文档标记,排版及列表标记,常用标记,字体标记,常用标记,Head元素,Head元素是网页文件html源代码中，位于html标记和之间的元素，主要用来标明网页文件的文档标题、搜索引擎登录的
4、内容和其它不属于文档内容的信息。,Title元素 Meta元素 Scrpit元素,Base元素 Link元素 Style元素,Title元素,Title 元素仅可在 Head 元素内使用。位于 Title 开闭标签之内的文本都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。,“欢迎使用 Internet Explorer!”,Meta元素,有利于网页被搜索引擎搜集用来标记搜索引擎在搜索你的页面时所取出的关键词。同时可以用来标记文档作者。 可以标记你的页面的解码方式 http-equiv =“” 为HTTP响应的标题头，content=“” META信息的具体内容，ch
5、arset=“GBK”采用简体中文编码。 可以实现网页自动刷新 refresh是实现刷新，content=“3;URL=http:/”代表3秒钟后跳转到地址为“”的网页。,Body元素,元素中有下列元素属性：,HTML 文本格式,Html文本格式是指定用于渲染Html文档所包含文本的新字体、大小和颜色等属性。,文字颜色,蓝色,文字字体,宋体,文字大小,文字标题,三号字,文字标题,文字布局,*行的控制 *文字控制 *对齐方式 *分区显示,HTML超链接,超链接本质上属于一个网页的一部分，它是一种同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。超链接通常是通过获取所
6、要链接对象的路径或者URL地址来实现页面转换的，语法如下：属性href的值可以是路径：C:Documents and SettingsAdministratora.htm URL地址：http:/ (C:example) 下的页面，格式 或,链接到同一目录 (C:html) 下的页面，格式 或 ,C:html 目录,C:other目录,绝对和相对路径名,绝对路径名,相对路径名,超链接定位,指向具体网站,超链接定位,指向E-mail的超链接,关键字mailto:标注该链接指向email地址,超链接定位,打开新链接窗口,属性target是打开目标窗口的基本结构,HTML图像标记,Img标记的基本语
7、法,Img标记的常用属性,HTML表格, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。,Table表格标记,HTML表格,行,列,表头/列标题,在HTML文档中使用表格来存放网页上的文本和图像,控制网页布局。,单元格,表格基本结构,边框,HTML表格,表格常用的属性,表 格 示 例,HTML表单,表单允许客户端的用户以标准格式向服务器提交数据。 表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT
8、或 SELECT。 查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据，服务器上的脚本会处理这些数据。,输入你的姓名: 喜爱的冰淇淋口味:巧克力草莓香草,Form表单标记,表单常用的属性,Input标记,button checkbox file,hidden image password,radio reset submit,text,表 单 示 例,Text文本框,文本框常用的属性,Button按钮,按钮常用的属性,Checkbox复选框,复选框常用的属性,RadioButton单选框,单选框常用的属性,Select下拉列表,下拉列表常用的属性,Hidden隐藏文本域,隐藏域常用的
9、属性,Image图像域,图像域常用的属性,File文件上传,文件上传框常用的属性,文本框用输入控件input元素写在之间。 说明： ?：文本框的名字 ;*：text/password *：默认值;*：长度,基本结构，一组单选框每个单选框的name值一定要相同,复选框，type=checkbox表示使用复选框，checked表示被选择。,要成对出现。 rows是行，cols是宽度，放在之间,下拉列表select元素，在select中填写option，包含若干个option, 每个option有一个唯一的value值,表单标签中必须设置enctype =“multipart/form-data“来
10、确保文件被正确编码, 表单的传送方式必须设置成post。 当需要上传文件时，输入控件类型为file。,HTML表单,HTML框架,Frameset 决定如何划分Frame。 cols属性表示按列分布Frame。 rows属性表示按行分布Frame。 Frame 用 这个Tag设定网页。 src属性值就是网页的路径和文件名。,HTML框架示例,小 结-1,HTML 全名为Hyper Text Markup Language ，中文意思为超文本标记语言。 HTML文件是一个包含有HTML标记的文本文件。 HTML标记告诉Web浏览器如何显示网页。 HTML文件必须是一个htm或htm扩展名的文件。 HTML 文件就是由许多HTML 元素构成的。,小 结-2,HTML的元素格式是：元素内容。 HTML标记是用来组成HTML元素的;用两个尖括号”括起来;一般是双标记,起始标记, 和结束标记; 对大小写不敏感。,
