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