潭州教育javaHTML概述与基本标签.ppt

HTML概述与基本标签,课程整体目标,理解HTML并掌握常用标签 理解CSS并掌握常用的样式属性 掌握使用Dreamweaver管理站点 理解JavaScript并掌握基本语法 理解DOM并掌握相关对象 理解BOM并掌握相关对象,什么是网页?,什么是网页? 定义：构成网站的基本元素 格式：分为静态网页和动态网页 静态网页文件扩展名为.html或.htm 动态网页文件扩展名为.jsp或.aspx .asp HTML：用于制作网页的超文本标记语言(Hyper Text Mark-up Language),站点,站点 网页和相关资料在服务器上存放的集合,静态网页和动态网页,静态网页 不能互动交流 手动修改 开发成本低，维护成本高 动态网页 交互性 自动更新 因人因时而变,Html超文本标记语言,Html（超文本标记语言） 定义：为网页创建和其它可在网页浏览器中看到的信 息设计的一种标记语言 历史 蒂姆.伯纳斯-李 为方便在万维网上共享文件创建HTML HTML 2.01995年11月 HTML 3.21996年1月14日 HTML 4.01997年12月18日 HTML 4.01（微小改进）1999年12月24日，W3C推荐标准,如何创建网页,网页的基本结构 网页以开始结束 两个主要的结构：head首部，body主体, ,如何创建网页,网页的头部 结构： 内容：, , CSS, Javascript 网页的主体 结构： 内容：包含网页中显示的文本、图像和链接等, , 欢迎来到潭州教育 . . , , 欢迎来到潭州教育 ,什么是标记及其属性?,什么是标记? 定义：Html命令称为标记(标签) 作用：用于控制Html文档的内容和外观 分类： 单独标签:， 成对标签: 标记的属性 作用：修饰或进一步制定信息。 如颜色，对齐方式，高度，宽度等,标签,属性,属性值, 学习 HTML 欢迎来到 HTML 世界 ,标签及其属性,标签 属性 bgcolor=“” 2种方法获取颜色值 标签 属性 align=“” 取值范围(left,right,center) 标签 Html语言注释 ,图片及路径,标签 作用:显示图片 属性 src=“” (相对路径，绝对路径) 绝对路径 目标文件的完整路径 范例: /sport/ac_milan.gif C:/Web/index.html 相对路径 由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系 范例: web/article/01.htm,超链接,文档的任何部分（如文本、页面、表单、动画或图像等）都可用作超级链接 超级链接可用于指向页面的特定部分或网站的不同页面 标签 作用:超级链接 属性 href=“”,本章目标,了解Web和HTML的关系 理解HTML标签在Web网页中的作用 掌握HTML文档的结构 掌握常用的HTML标签,Web概述,Web，又称为WWW，英文全称为World Wide Web，翻译为中文一般为万维网。它是借助于互联网运行的一种服务。 超文本 HyperText Web服务器 Web Server Web浏览器 Web Browser 统一资源定位符 URL 超文本传输协议 HTTP 超文本标记语言 HTML,Web概述_超文本,Web概述_Web服务器,Web概述_Web浏览器,HTML超文本标记语言,HTML：HyperText Markup Language XHTML 1.0或者HTML 4.01 W3C Tim Berners-Lee,标记,标记：标签，Tag 文本或其他标记 ,HTML文档结构, 网页标题 我的第一个网页文档 ,常用的HTML标签,大纲级别标题标签 到 图像标签 超链接标签 元数据标签 水平分隔线标签,大纲级别标题标签 ,生成大纲级别的标题文字，有助于对文档的内容进行层次化组织。,This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6,图像标签,生成图像含GIF动画 应用于网页文档的图像文件的格式，一般使用gif、jpg、png格式。,图像标签的属性,超链接标签,用于导航,超链接标签的href属性,通过使用 href 属性，创建指向另外一个文档的链接。,想看我拍的郁金香，请点击这里。,超链接标签的热点,超链接表现为什么形式？文字、图片, 点击右侧的链接，可以去新浪网首页。 ,超链接标签的name属性,通过使用 name 属性，创建一个文档内部的书签 超链接指向页面中的某个具体位置，在超链接被点击时，浏览器将页面自动滚动到此位置。,超链接标签的name属性续, 查看第四章 查看第八章 Chapter 1 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla Chapter 7 This chapter explains ba bla bla Chapter 8 This chapter explains ba bla bla ,元数据标签,元数据：描述数据的数据。 元数据是描述网页基本信息的数据，如网页的作者或针对搜索引擎的网页关键字。元数据也可用以表示HTTP响应头，用于控制浏览器的特定行为。 应出现在中。,元数据标签的name和content属性对,描述网页的元数据, 博客园 - 开发者的网上家园 ,元数据标签的http-equiv和content属性对,表示HTTP响应头数据，可以控制浏览器的一些特定行为。, 使用meta表示HTTP响应头 ,水平分隔线标签,从视觉上将文档的内容分成上下几个部分,这里是文档的上半部分 这里是文档的下半部分,水平分隔线标签的属性,总结,Web是运行在互联网上的一种服务，它以网页的方式让浏览者获取信息。 HTML是制作Web