第二章HTML基础知识

Web程序设计主讲：白萍2014-2第二章HTML基础Web1.什么是HTML？2.HTML常用标签3.HTML的应用HTML是用来描述网页的一种语言•HTML指的是超文本标记语言（HyperTextMarkupLanguage）•HTML不是一种编程语言，而是一种标记语言。•标记语言是一套标记标签•HTML使用标记标签来描述网页HTML虽然有很多工具可以自动生成HTML标签，但很多时候需要手动修改，因此必须牢记HTML语言及常用标签1.什么是HTML？！（X）HTML书写基本原则1.HTML标签是由尖括号包围的关键词，比如html；2.HTML标签是成对出现的，比如b和/b（开始标签、结束标签）；单标签也必须封闭，比如br/;切忌不要出现交叉闭合的情况；3.标签及属性全部采用小写字母；4.属性值必须用双引号括起来；4.适当缩进，增加文档可读性；5.适当增加注释，增加文档可读性，比如!--这是一段注释，注释不会在浏览器中显示。--2.HTML常用标签AHTML文档(网页)基本结构htmlheadtitle/title/headbody/body/htmlHTML文档包含HTML标签和纯文本网页中标记须包含在html/html之间head/head是网页头部标识title/title是head标记的一部分，用于标识窗口标题浏览器正文需显示的内容包含在body/body之间2.HTML常用标签A示例htmlheadtitleHTML文档基本标记演示/title/headbody这是一个HTML文档基本标记演示效果!/body/html2.HTML常用标签A文档类型----DOCTYPE!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01Transitional//EN”“”!DOCTYPE声明位于文档中的最前面的位置，处于html标签之前。它可告知浏览器文档使用哪个HTML版本。浏览器将明白如何寻找匹配此公共标识符的DTD（文档类型定义）。如果找不到，浏览器将使用公共标识符后面的URL作为寻找DTD的位置。2.HTML常用标签A文档类型----DOCTYPEHTML4.01规定了三种文档类型：Strict（严格版本）、Transitional（过渡版本）以及Frameset（基于框架）。2.HTML常用标签ADOCTYPE----HTMLStrictDTD该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素（比如font），不允许框架集（Framesets）。与层叠样式表(CSS)配合。!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN常用标签ADOCTYPE----HTMLTransitionalDTD该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架集（Framesets）。!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN常用标签ADOCTYPE----FramesetDTD该DTD等同于HTML4.01Transitional，但允许框架集内容。!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Frameset//EN常用标签A首部的辅助性标签----metameta标签位于head/head之间，提供用户不可见信息。meta标签有两大属性：HTTP标题信息(http-equiv)和页面描述信息(name)。http-equiv类似于HTTP的头文件作用，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。name通常用来为搜索引擎robots定义页面主题、作者、内容提要、关键字；还可以设置进行刷新的时间间隔等。格式：metahttp-equiv/name=参数content=参数变量值（1）meta两大属性---http-equiv1.Content-Type页面类型及语言2.Refresh页面刷新的时间3.Expires页面在缓存中的过期时间4.Pragma网页不保存在缓存中，每次访问都刷新页面，这样设定，访问者无法脱机浏览http-equivmetahttp-equiv=“Content-Type”content=“text/html;Charset=gb2312”/建议采用utf-8编码方式通用:UTF-8简体中文:gb2312繁体中文：big5日文:iso-2022-jp韩文:ks-c-56011.Content-Type页面类型及语言2.Refresh页面刷新的时间3.Expires页面在缓存中的过期时间4.Pragma网页不保存在缓存中，每次访问都刷新页面，这样设定，访问者无法脱机浏览http-equivmetahttp-equiv=“Refresh”content=“30”/网站30秒后刷新显示metahttp-equiv=“Refresh”content=“5;url=”/网站停留5秒后，跳转到新的URL网址（1）meta两大属性---http-equiv1.Content-Type页面类型及语言2.Refresh页面刷新的时间3.Expires页面在缓存中的过期时间4.Pragma网页不保存在缓存中，每次访问都刷新页面，这样设定，访问者无法脱机浏览http-equivmetahttp-equiv=“Expires”content=“30”/表示网页30秒后过期，需到服务器上重新下载metahttp-equiv=“Expires”content=“Wed,26Feb201008:21:57GMT”/表示网页在此时间后过期，必须使用GMT时间格式（1）meta两大属性---http-equiv1.Content-Type页面类型及语言2.Refresh页面刷新的时间3.Expires页面在缓存中的过期时间4.Pragma网页不保存在缓存中，每次访问都刷新页面，这样设定，访问者无法脱机浏览http-equivmetahttp-equiv=“Pragma”content=“no-cache”/网页不存入缓存。（1）meta两大属性---http-equiv禁止浏览器缓存页面metahttp-equiv=“Pragma”content=“no-cache“/metahttp-equiv=Cache-Controlcontent=no-cache“/metahttp-equiv=Expirescontent=0“/1.Keywords供搜索引擎搜索的页面关键字2.Description网站主要内容3.Robots告诉机器人哪些页面需要索引4.Author、Copyright、Generator标注网页的作者、版权、编辑器的说明namemetaname=“Keywords”content=“Html,Web”/metaname=“Description”content=“本网站主要用于HTML初学者学习之用”/（2）meta两大属性---name1.Keywords供搜索引擎搜索的页面关键字2.Description网站主要内容3.Robots告诉机器人哪些页面需要索引，哪些页面不需要索引4.Author、Copyright、Generator标注网页的作者，版权，编辑器的说明namemetaname=“Robots”content=“all”/all（默认）可检索文件及页面上的链接，none，index仅检索文件，noindex，follow可检索页面上链接，nofollow。metaname=“Author”content=“baiping”/metaname=“Copyright”content=“baiping”/metaname=“Generator”content=“Editplus”/（2）meta两大属性---namebody1.bgcolor网页的背景颜色2.background网站的背景图片3.text网页内文本颜色4.linkalinkvlink超链接文字颜色、按下时超链接文字颜色，访问后超链接文字颜色bodybgcolor=“#dcdcdc”background=“bg.jpg”text=“#556B2F”#dcdcdc也可用颜色名称替代，如red，也可用rgb(R,G,B)来表示，每个颜色分量取值范围0-255。2.HTML常用标签2.HTML常用标签B基础标记h1/h1h6/h6p/pbr/center/centerh1/h1称为标题字体，从1到6，字体由大到小。独立一行P称为段落标记。可将标记间内容自动组成一个完整段落。属性：align对齐方式palign=“center”centerleftrightbr/换行标记center为居中标记2.HTML常用标签font/fontb/bstrong/strongi/iu/ufont标记用于设置字体。属性：face字体类型，size字体大小，color字体颜色。fontface=“宋体”size=“7”color=“red”b和strong设置字体加粗b粗体字/bi设置字体倾斜u设置字体带下划线1.href超链接跳转的网址2.Target超链接显示的视窗3.name定义锚点超链接标签a/aahref=“”target=“_blank”百度/aaname=“test”test位置/aahref=“#test”跳到test位置/atarget:_self、_blank、_top、_parent也可指定框架的名称。2.HTML常用标签2.HTML常用标签图像标签img/img用于标识图像。属性：src图像源，alt不显示时提示文字，width图像宽度，height高度，border边框。imgsrc=“../image/pic.jpg”alt=“产品展示”width=“100px”height=“100px”border=0/1.src多媒体文件位置2.autostart是否自动播放音乐3.loop是否自动反覆播放或次数，4.hidden是否隐藏。5.volume音量的大小，数值是0到100之间。6.widthheight设定控制画面的宽度和高度。多媒体标签embed/embed/是用于插入各种多媒体，文件格式可以是midi、wav等。embedsrc=your.midautostart=trueloop=truehidden=true/2.HTML常用标签2.HTML常用标签tablecaption/captiontbodytrth…/th/trtrtd…/tdtd…/td/trtr……/tr/tbody/tabletable表格标记caption表格标题列，提供一行标题列。tbody表格主题部分内容tr表格行标记td列标记table常用属性width表格宽度height表格高度border表格边框宽度cellspacing单元格间距