Html基础教材

—超文本标记语言课程大纲第一章：WEB基础知识第二章：HTML入门基础第三章：TABLE布局第四章：表单标签第五章：常用工具介绍本章内容提示：静态门户网站导入Web与Internet的关系Web的工作原理动态Web开发技术第一章WEB基础知识导入静态门户网站案例第一章WEB基础知识第一节静态门户网站导入top导航footInternet介绍Web实质HTTP协议介绍WEB与Internet的关系第一章WEB基础知识第二节WEB与Internet的关系Internet介绍Internet是一个全球性的计算机互联网络，中文名称有“因特网”、“国际互联网”、“网际网”、“交互网络”等。英特网主要提供以下服务第一章WEB基础知识第二节WEB与Internet的关系其他文件传输FTP电子公告牌BBS万维网Web实质Web又称做万维网或环球网，是（WorldWideWeb）的简称。Web的功能•发布信息•搜索和浏览文本和图片信息•在线播放音、视频文件•发表观点•电子购物第一章WEB基础知识第二节WEB与Internet的关系Web实质Web是基于Internet的一个多媒体信息服务系统•它基于客户/服务器模式，整个系统由Web服务器、浏览器（Browser）和通信协议等三部分组成•通信协议采用的是HTTP协议•协议HTTP协议是超文本传输协议（HypertextTransferProtocol）的简写，HTTP协议处于TCP/IP协议簇的应用层第一章WEB基础知识第二节WEB与Internet的关系HTTP协议介绍HTTP是基于客户/服务器模式且是面向连接的HTTP能够传送任意类型数据对象HTTP连接是一种一次性连接，每次连接只处理一个请求HTTP是一种无状态协议，即服务器不保留与客户交易时的任何状态HTTP的默认TCP端口是80第一章WEB基础知识第二节WEB与Internet的关系WEB与Internet的关系Web是运行在Internet之上最流行的应用之一，Internet为Web提供了网络环境Web的出现，极大地推动了Internet的普及与推广第一章WEB基础知识第二节WEB与Internet的关系基本原理概述在Web服务器上，主要以网页（HomePage）的形式来发布多媒体信息网页采用超文本标记语言HTML（HyperTextMarkupLanguage）来编写当浏览器软件连接到Web服务器并获取网页后，通过对网页HTML文档的解释执行将网页所包含的信息显示在用户的屏幕上基本组织形式Web是一个超文本文件的集合超文本文件是Web的基本组成单元，也称为网页或HTML文档、Web页等，通常是以.html或.htm为后缀的文件Web页之间通过超文本中的超级链接组织在一起第一章WEB基础知识第三节WEB工作原理Web实质以及工作原理第一章WEB基础知识第三节WEB工作原理输入网址requesthttp协议动态WEB概述什么是动态WEB•能够动态地安排Web页面元素的显示方式•Web页具有动态交互性。用户可以提交信息，服务器可以根据用户提交的信息动态生成返回页面•动态Web使得人们可以建立基于浏览器的信息系统，这是电子商务实施的平台第一章WEB基础知识第四节动态WEB开发技术客户端技术作用描述•自动控制包含在网页中的HTML元素，以实现一些动态效果。（比如让文字走动）•响应用户鼠标和键盘消息•根据用户的软硬件环境决定页面的显示（比如浏览器的版本）第一章WEB基础知识第四节动态WEB开发技术主要客户端技术VBScriptJavaScript第一章WEB基础知识第四节动态WEB开发技术主要服务器端技术描述•用户信息的收集和登记•用户访问行为的记录•根据用户提交的请求和查询关键字访问数据库并以HTML页面的方式返回结果第一章WEB基础知识第四节动态WEB开发技术主要服务器端技术ASP（ActiveServerPage）PHP（HypertextPreprocessor）JSP（JavaServerPage）第一章WEB基础知识第四节动态WEB开发技术入门基础本章内容提示：HTML概述html标签head标签body标签文字版面的排版超链接建立列表图像的处理网页动画和多媒体效果HTML概述HTML语法的起源•HTML是一种标记语言，起源于SGML（StandardGeneralizedMarkupLanguage）标准的通用标记语言•HTML由TimBerners-Lee和同事NanielW.Connolly在瑞士日内瓦的欧洲粒子实验室发明，伴随着WEB一起诞生。第二章HTML入门基础第一节html概述HTML概述HTML的相关术语•标记：标记是用尖括号包围的单词,很多标记是成对的，一个是开始标记,一个是结束标记（单词前加/）•元素：每一对尖括号包围的部分，比如p/p之间包含的部分就叫p元素•属性：属性为HTML元素提供附加信息，其总是以名称/值对的形式出现，比如：name=“value”,并在HTML元素的开始标签中规定。第二章HTML入门基础第一节html概述HTML基本语法一般来说，HTML的语法有三种表达方式，如下：•标记内容/标记•标记属性1=参数1属性2=参数2…内容/标记•标记第二章HTML入门基础第一节html概述HTML基本语法标记内容/标记•大多数标记是封闭类型的，它们成对出现，在内容的前面是一个标记，而在内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对内容的控制。•对于此种类型的标记，请谨记封闭标记。第二章HTML入门基础第一节html概述strong粗体/strongHTML基本语法标记属性1=参数1属性2=参数2…内容/标记•可以通过对标记的某个属性设置值，如果有多个属性，可使用空格隔开。第二章HTML入门基础第一节html概述trcolspan=“2”rowspan=“3”3行2列/trHTML基本语法标记•此标记没有结束标记，比如换行标记：br.第二章HTML入门基础第一节html概述pThisbrisaparabrgraphwithlinebreaks/pHTML文档结构一个HTML文档可以看成由以下三个部分构成：•版本信息•文件头由head/head标记标识•文档主体部分由body/body标记标识第二章HTML入门基础第一节标签介绍HTML....../HTML此元素可告知浏览器其自身是一个HTML文档。html与/html标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由head标签定义，而主体由body标签定义。第二章HTML入门基础第二节HTML标签HTML文档结构head/head•head元素包含了与当前文档相关的信息，如文档的标题、关键字（如果该文档希望被搜索引擎搜索到，此部分信息很重要）、以及一些和文档内容无关仅对文档本身进行说明的数据信息。•head标签里可以包含以下内容：title：标题元素base：文档基础目录元素meta：元数据元素script：脚本元素style：内部样式表的样式元素link：链接元素连接到外部样式表object：对象元素第二章HTML入门基础第三节head标签HTML文档结构head/head•head标签主要有以下三个属性Lang：语言Dir：文本方向Profile：元数据的URL第二章HTML入门基础第三节head标签HTML文档结构head/head•title/title标题元素的内容出现在浏览器顶部没有属性必需出现在head元素中且只能由一个标题元素第二章HTML入门基础第三节head标签HTML文档结构head/head•metameta是关于某个网页的基本信息搜索引擎对meta元素中数据进行搜索可以帮助访问者找到该网页第二章HTML入门基础第三节head标签HTML文档结构head/head•meta使用示例让网页可以按关键字被搜索引擎搜索到定时刷新让网页始终保持最新»浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。当反复浏览该页时，浏览器直接调用硬盘上的文件，而不是网上的，可以使用meta标签让浏览器强制调用网上最新版本。第二章HTML入门基础第三节head标签metaname=keywordscontent=这里写关键字metahttp-equiv=refreshcontent=10metahttp-equiv=Pragmacontent=no-cachebody....../body标签body元素定义文档的主体。body元素包含文档的几乎所有内容（比如文本、超链接、图像、表格和列表等等。）主要属性•background背景图像的URL•text文本的前景色•link链接的前景色•vlink已访问过的链接的前景色•alink活跃链接的前景色•bgcolor背景色•id、class为样式表设置的标识属性•title提示文字（与tilte元素不同）•style样式信息第二章HTML入门基础第四节body标签body....../body第二章HTML入门基础第四节body标签BODYbgcolor=red这是body内容的标题/BODY换段落标签pp标签里可以嵌套其它块元素、内联元素、文本等内容可以包含以下属性：•id、class：和样式表结合使用，给文档中的某一段落赋以唯一的标识•lang、dir：语言和文本方向•title：元素的标题，它的作用是设定当鼠标停留在该元素上时，出现的高亮提示文字•style：直接指定该元素的样式•align：对齐属性。建议不使用，因为该属性应该在样式表中给出第二章HTML入门基础第五节文字版面的排版换段落标签p