《潭州教育java-HTML概述与基本标签.ppt》由会员分享,可在线阅读,更多相关《潭州教育java-HTML概述与基本标签.ppt(35页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML概述与基本标签概述与基本标签课程整体目标理解HTML并掌握常用标签理解CSS并掌握常用的样式属性掌握使用Dreamweaver管理站点理解JavaScript并掌握基本语法理解DOM并掌握相关对象理解BOM并掌握相关对象什么是网页?什么是网页?定义:构成网站的基本元素 格式:分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx.aspHTML:用于制作网页的超文本标记语言(Hyper Text Mark-up Language)站点站点 网页和相关资料在服务器上存放的集合我的站点我的站点网页网页图片图片MP3静态网页和动态网页静态网页不
2、能互动交流手动修改开发成本低,维护成本高动态网页交互性 自动更新因人因时而变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网页的主体结构:内容
3、:包含网页中显示的文本、图像和链接等欢迎来到潭州教育.欢迎来到潭州教育什么是标记及其属性?什么是标记?定义:Html命令称为标记(标签)作用:用于控制Html文档的内容和外观分类:单独标签:,成对标签:标记的属性作用:修饰或进一步制定信息。如颜色,对齐方式,高度,宽度等 标签属性属性值学习 HTML 欢迎来到 HTML 世界标签及其属性标签 属性 bgcolor=“”2种方法获取颜色值标签 属性 align=“”取值范围(left,right,center)标签 Html语言注释图片及路径标签 作用:显示图片属性 src=“”(相对路径,绝对路径)绝对路径目标文件的完整路径范例:http:/
4、C:/Web/index.html相对路径由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系 范例:web/article/01.htm 超链接文档的任何部分(如文本、页面、表单、动画或图像等)都可用作超级链接超级链接可用于指向页面的特定部分或网站的不同页面标签作用:超级链接属性 href=“”本章目标了解Web和HTML的关系理解HTML标签在Web网页中的作用掌握HTML文档的结构掌握常用的HTML标签Web概述Web,又称为WWW,英文全称为World Wide Web,翻译为中文一般为万维网。它是借助于互联网运行的一种服务。超文本HyperTextWeb服务器Web Serve
5、rWeb浏览器Web Browser统一资源定位符URL 超文本传输协议HTTP超文本标记语言HTMLWeb概述_超文本Web概述_Web服务器Web概述_Web浏览器HTML超文本标记语言 HTML:HyperText Markup LanguageXHTML 1.0或者HTML 4.01 W3C www.w3.orgTim Berners-Lee标记标记:标签,Tag文本或其他标记 HTML文档结构网页标题我的第一个网页文档常用的HTML标签 大纲级别标题标签 到 图像标签 超链接标签 元数据标签 水平分隔线标签 大纲级别标题标签 生成大纲级别的标题文字,有助于对文档的内容进行层次化组织。
6、This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6图像标签 生成图像含GIF动画应用于网页文档的图像文件的格式,一般使用gif、jpg、png格式。图像标签的属性属性意义src图像文件的地址。alt图像的替代文字,当图像不能正常显示时,将显示此文字。width图像的显示宽度。height图像的显示高度。超链接标签 用于导航超链接标签的href属性通过使用 href 属性,创建指向另外一个文档的链接。想看我拍的郁金香,请点击这里。超链接标签的热
7、点超链接表现为什么形式?文字、图片点击右侧的链接,可以去新浪网首页。超链接标签的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.元
8、数据标签 元数据:描述数据的数据。元数据是描述网页基本信息的数据,如网页的作者或针对搜索引擎的网页关键字。元数据也可用以表示HTTP响应头,用于控制浏览器的特定行为。应出现在中。元数据标签的name和content属性对 描述网页的元数据博客园-开发者的网上家园元数据标签的http-equiv和content属性对表示HTTP响应头数据,可以控制浏览器的一些特定行为。使用meta表示HTTP响应头水平分隔线标签 从视觉上将文档的内容分成上下几个部分 这里是文档的上半部分这里是文档的下半部分 水平分隔线标签的属性属性意义align水平对齐方式,值可为left,center,right,默认为center。width水平分隔线的宽度,可使用px像素单位,或%百分比。size水平分隔线的粗细,即高度,可使用px像素单位,或%百分比。noshade设置水平分隔线为纯色没有阴影。总结Web是运行在互联网上的一种服务,它以网页的方式让浏览者获取信息。HTML是制作Web网页的语言,它用标签告诉浏览器网页的结构和内容。是网页源代码中最外层的标签。网页一般由头部和正文两部分组成,头部的标签是,正文的标签是。网页的头部可以有标题标签和元数据标签。网页正文内部的网页元素常用的有超链接,图像,大纲级别的标题至,段落,水平分隔线。