1、第一课 HTML基础,ITANY,本课程的主要内容,HTML的基本语法和常用标记 超链接、表格、表单、框架等标记 CSS常用样式、选择器、布局模型 层的应用,本章目标,HTML的基本语法和常用标记 超链接标记 表格标记 表单标记 框架标记,第一部分,HTML的基本语法和常用标记 超链接标记 表格标记 表单标记 框架标记,HTML简介,HTML 是一种标记语言 使用 HTML 标记和元素，可以： 控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 创建联机表单，收集用户的信息、执行事务等等 插入图片和动画,HTML文档结构,HTML,第一个网页这是我的第一个网页,H
2、EAD,BODY,基本HTML的构成,HTML,HEAD,BODY,meta,style,title,DIV,TABLE,SPAN,STYLE,SCRIPT,IFRAME,FORM,input type=“image”,input type=“button”,input type=“submit”,input type=“reset”,input type=“hidden”,input type=“file”,input type=“text”,input type=“radio”,input type=“checkbox”,link rel=“” type=“”,script type=“t
3、ext/”,select size/multiple,textarea,fieldset,label,button type=“button”,button type=“submit”,button type=“reset”,HTML语言基本要求,HTML 标记用于标记 HTML 文档的开始和结束, . . . ,HTML 标记的格式组成：,元素 - 标识标记,属性 - 描述标记,值 - 分配给属性的内容,HTML特殊字符,HTML以自己特有的标记描述数据展现形式 若要在页面显示这些特殊的标记符，就要使用HTML特殊字符 常用特殊字符： （）,基本HTML标签,标题标记：、 段落级标记： 块标
4、记：、 列表：、 水平线标记： 字体标记： 图像标记： 多媒体标记： 注释标记：,标题标记,可显示到六种大小的标题，为最大，为最小,HTML 简介 HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介,段落级标记,标记可以让文本以预定义的格式显示, 汉普蒂邓普蒂坐在墙上汉普蒂邓普蒂摔了一大跤 国王所有的马和所有的人 也无法再把汉普蒂邓普蒂拼起来 ,块标记,可以定义跨段落的内容块； 定义段落内的内容块,第1部分元素用于组织元素DIV通常用于块级元素第2部分这是第二部分您觉得有意思吗？第二部分向右对齐。公共格式应用于这一部分中的所有元素 ,无序列表,带有符号前缀的项
5、目列表，包含在 内，列表中的每项都使用进行标记 符号前缀有：disc、square、circle,学习 HTML星期一星期二星期三星期四星期五,有序列表,带有序号前缀的项目列表，包含在 标记内 序号可以是字母、阿拉伯数字、罗马数字，可以自定义起始值,星期一星期二星期三星期四星期五,水平线标记,用于在网页上的显示一条水平线，可以指定size（大小）、color（颜色）、width（宽度）等属性,字体标记,用于控制文本在网页上的显示外观，可以指定size（大小）、color（颜色）和face（字体）等属性。,我的第一个HTML文档这将会是一种很有趣的体验 ,图像标记,用于将图像插入到HTML文档中
6、，语法为： 可设置ALIGN属性用于调整图像相对于周围文本的对齐方式,插入图像底部对齐图2.15：示例15的输出结果 顶部对齐居中对齐 ,多媒体标记,用于在页面中显示flash、avi、mp3等格式的多媒体文件 语法： 示例： ,注释标记, 在HTML中写注释是一个很好的习惯，尤其是复杂的页面设计,第二部分,HTML的基本语法和常用标记 超链接标记 表格标记 表单标记 框架标记,URL与路径,统一资源定位符（URL，英语 Uniform / Universal Resource Locator 的缩写）也被称为网页地址，是因特网上标准的资源的地址（Address) URL的一般格式为(带方括号
7、的为可选项)：,protocol :/ hostname:port / path / ;parameters?query#fragment,相对路径：,/sub/ file.gif ./parent.html /index.htm,绝对路径：,http:/ file:/d:/files/xx.zip,超级链接,1、职 位： 关于可申请的职位2、培训资源： 本学院美术学位的培训资源 请单击此处查看视频3、联 盟： 我们有许多联盟,链接类型,- - - - - - -,- - - - - - -,- - - - - - -,- - - - - - -,- - - - - - -,- - - - -
8、 - -,- - - - - - -,- - - - - - -,- - - - - - -,- - - - - - -,Web站点1,Web站点2,链接语法,语法： Hypertext 使用示例： TARGET取值：_blank、_parent、_top、_self、自定义,链接到其它文档,使用链接本页的所有内容都讲述关于如何创建到文档的链接单击此处查看文档2,文档2这是文档2。单击文档1中的超链接后将显示本页。返回,链接到当前文档的指定位置,使用链接互联网HTML简介多样化和统一性互联网互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可
9、以通过TCP/IP传输协议绑定在一起。HTML简介超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。多样性和统一性万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 ,单击,链接到其它文档的指定位置,互联网HTML简介多样性和统一性 ,单击,第三部分,HTML的基本语法和常用标记 超链接标记 表格标记 表
10、单标记 框架标记,网页中的表格,表格相关标记,表格示例, 表格示例首列尾列单元格1单元格2,单元格合并,在 或 标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如COLSPAN=3表示跨3列。 在 或 标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如ROWSPAN=3表示跨3行。,表格属性,BORDER属性定义表格边框大小，默认为0 CELLSPACING 属性定义单元格之间的间距（以像素为单位）。 CELLPADDING 属性定义表的单元格边界与单元格内容之间的间距 （以像素为单位） 。 ,单元格属性,ALIGN：单元格内容水平对齐方式，可取：LEFT、CENT
11、ER、 RIGHT VALIGN：单元格内容垂直对齐方式，可取TOP、MIDDLE、BOTTOM COLSPAN：设置单元格所跨的列数，例如COLSPAN=3表示跨3列。 ROWSPAN：设置单元格所跨的行数，例如ROWSPAN=3表示跨3行。,第四部分,HTML的基本语法和常用标记 超链接标记 表格标记 表单标记 框架标记,一个标准的表单,表单语法,语法：例：, .表单内容. ,属性说明,表单元素,：大多数表单元素都是此标记，如：文本框、密码框、单选、复选、按钮等 、：下拉列表框 ：文本区,表单元素属性,第五部分,HTML的基本语法和常用标记 超链接标记 表格标记 表单标记 框架标记,框架,
12、框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。 例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。,FRAMESET 元素,使用 FRAMESET 创建框架 其属性有： Rows Cols 注意：不要与同时出现,FRAME 元素,FRAME 元素的属性包括： Name Src Noresize Scrolling Frameborder Marginwidth Marginheight,嵌套的框架集,嵌套框架,NOFRAMES 元素,未显示框架。请单击这里 查看无框架版本,内嵌框架,IFRAME属性 Name Width Height,示例,很有趣吧。你已经对框架有所了解。上面是一个内嵌框架。 ,总结,掌握HTML的基本语法和常用标记 掌握超链接标记、表格标记、表单标记框架标记 掌握以上标记的常用属性 理解特殊字符的使用,谢谢！,
