网页编程技术-全套PPT课件.pptx

第1章HTML基础本章重点▲掌握HTML文件的基本结构▲掌握HTML基本标记的含义、用法及属性设置▲利用HTML标记创建网页中的基本元素1.1HTML简介HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写HTML不是一种编程语言，而是一种标记语言（MarkupLanguage）标记语言都会提供一套标记标签（MarkupTags）HTML用标记标签来设计网页图片：IMGSRC=文件名文字格式：FONTSIZE=2COLOR=#00FFFF文字/FONT超链接：AHREF=文件名/A声频：EMBEDSRC=声音地址AUTOSTART=true视频：EMBEDSRC=视频地址AUTOSTART=true1.2HTML文件的基本结构一个完整的HTML文档是由一系列的元素和标签组成的，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。范例代码1.2.htmlhtmlheadtitleHTML文件的基本结构/title/headbody这是一个网页！/body/html1.2.2HTML的使用要点（1）“”和“”是HTML任何标签的开始和结束。例：body/body（2）标签与标签之间可以嵌套。例：centera大连工业大学/a/center（3）HTML的标签和属性名不区分大小写。例：htmlHTMLHtml三个标签是一致的。（4）HTML代码中任何回车和空格在显示时不起作用（显示空格为“nbsp;”）。为了使代码清晰，建议不同的标签之间用回车换行编写。（5）HTML标签中可以放置各种属性。例：h1align=center标题1/h1（6）在HTML源代码中的注释。!--要注释的内容--注释语句只出现在源代码中，不会在浏览器中显示。1.2.3HTML的标签及属性基本语法：成对标签标签名属性1=值属性2=值属性3=值…内容/标签名单独标签标签名属性1=值属性2=值属性3=值…范例代码1.3.htmlhtmlheadtitle世侨国贸公寓/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312styletype=text/css!—p,td{font-size:9pt;line-height:16px}.style1{color:#FFFFFF}--/style/headbodybgcolor=#FFFFFFtext=#000000leftmargin=0topmargin=0marginwidth=0marginheight=0…/body/html代码分析body标签中属性bgcolor的含义是定义页面的背景色，值为#FFFFFF表示白色，属性text表示页面中文字的颜色，值为#000000表示黑色。1.3HTML的基本标签1.3.1头部标签标签描述title…/title设定显示在浏览器上方的标题内容meta有关文档本身的元信息，例如关键字、描述等style…/style设定CSS层叠样式表的内容link设定外部文件的链接script…/script设定页面中程序脚本的内容1.3.2内容标签属性描述text设定页面的文本颜色link设定链接文本的颜色vlink设定活动链接的颜色，即按下鼠标左键时连接文本所显示的颜色alink设定已访问过的链接文本的颜色bgcolor设定页面的背景颜色background设定页面的背景图像leftmargin设定页面的左边距topmargin设定页面的上边距1.3.3格式标签标签描述!--…--注释标签br换行标签，单独标签不需要有结束标签p…/p分段标签，并自动换行div…/div定位标签hr水平线标签1.3.4字体标签标签描述h##级标题标签font字体标签b设置粗体字i设置斜体字u设置下划线sup设置文本为上标格式sub设置文本为下标格式tt设置打字机风格字体的文本em以强调形式格式化文本，通常显示为斜体address格式化地址信息，将文本设置为斜体字strong格式化需强调显示效果的文字，通常显示为斜体+粗体pre将文字排版按原格式显示，即把原文件中的空格、回车、换行等表现出来1.3.5超链接标签属性描述例子href指定链接地址ahref=””name给链接命名aname=”abc”title给链接提示文字atitle=”百度”target指定链接的目标窗口atarget=”_