HTML教学课件

第2章超文本标记语言HTML网页设计与制作教程2.2文字和段落标记2.3列表标记2.1HTML文件的基本结构2.4图片标记目录2.5表格标记2.6超链接标记2.7表单标记2.8框架标记2.1HTML文件的基本结构2.1.1HTML概述2.1.2HTML语法2.1.3HTML文件的基本结构2.1.1HTML概述HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。HTML是一种语言，但并不算是“程序”语言。HTML文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。2.1.2HTML语法标记受标记影响的内容/标记标记属性1=属性值属性2=属性值…受标记影响的内容/标记例如，可以用字体标记FONT的字号属性size指定文字的大小，HTML语句如下：FONTsize=1本行字将以较小字体显示/FONT2.1.3HTML文件的基本结构HTMLHEADTITLE网页的标题/TITLE/HEADBODY文档主体，正文部分/BODY/HTML2.1.3HTML文件的基本结构1.HTML文件头2.HTML文件主体1.HTML文件头①TITLE标记：TITLE标题名/TITLE②META标记：给浏览器、搜索引擎或其他应用程序提供本HTML文件的有关信息（如作者，终止日期，关键词列表等等）。META标记的格式为：METAname=”选项名”http-equiv=”选项名”content=”字符串”name属性主要用于描述网页，其常用的选项有GENERATOR、Keywords、description、robots、author等。GENERATOR用来说明制作本网页所用的编辑工具，Keywords用来告诉搜索引擎本网页的关键字是什么，description用来告诉搜索引擎本网页的主要内容，robots用来告诉搜索机器人那些页面需要索引，哪些页面不需要索引，author用来标注网页的作者。http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，其常用的选项有Content-Type、Expires、Refresh等等。Content-Type用以说明网页所使用的字符集；Expires用于设定网页的到期时间；一旦网页过期，必须到服务器上重新传输；Refresh用于自动刷新并指向新页面。Name属性和http-equiv属性不能在同一个标记中使用。Content属性则根据name选项或http-equiv选项的定义来决定此项填写什么样的字符串。例如：METAname=”keywords”content=”science,education,culture,politics,economics,relationships,entertainment,human”向搜索引擎说明本网页的关键词。METAname=”description”content=”Thispageisaboutthemeaningofscience,education,culture。”告诉搜索引擎本网站的主要内容。METAhttp-equiv=”Content-Type”content=”text/html”charset=”gb_2312-80”通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。METAhttp-equiv=”Refresh”content=”2”url=””可以使当前网页在2秒后自动转到北京化工大学北方学院的主页（）去，这就是META的刷新作用，在Content中，2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。如果网页地址就是本页的地址，那么就是自动刷新。使用META标记，还可以在进入网页或者离开网页时实现动画效果。例如METAhttp-equiv=”Page-Enter”content=”revealTrans(duration=5,transition=9)”的意思是，进入本页面（http-equiv=”Page-Enter”）时，页面将按水平百叶窗（transition=9）的形式展开，整个展开过程历时3秒（duration=3）。METAhttp-equiv=”Page-Exit”content=”revealTrans(duration=5,transition=2)”的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。2.HTML文件主体HTML文件主体标记的格式为：BODYbackgrongd=”文件名”bgcolor=”颜色值”text=”颜色值”link=”颜色值”vlink=”颜色值”alink=”颜色值”网页的内容/BODYBackground：设置网页的背景图像；Bgcolor：设置网页的背景色；Text：设置文本的颜色Link：设置尚未被访问过的超文本链接的颜色；Vlink：设置已被访问过的超文本链接的颜色；Alink：设置超文本链接在被访问瞬间的颜色。颜色的表示方法①以命名方式定义常用的颜色，如RED、blue等。②以RGB值表示，如#FF0000表示red，#0000ff表示blue。常用16种色彩的英文名和RGB值对照预定义色彩RGB值预定义色彩RGB值Aqua#00FFFFgray#808080Navy#000080silver#C0C0C0Black#000000green#008000Olive#808000teal#008080Blue#0000FFlime#00FF00Purple#800080yellow#FFFF00Fuchsia#FF00FFmaroon#800000Red#FF0000white#FFFFFF例2-1一个简单的HTML文件HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODY我是中国人，我热爱我的祖国。/BODY/HTML2.2文字和段落标记2.2.1标题文字标记2.2.2文字标记2.2.3段落标记2.2.1标题文字标记Hn标题文字标记的格式为：Hnalign=对齐方式标题文字/Hn属性n用来指定标题文字的大小，可以取1～6的整数值，取1时文字最大，6时文字最小。在一个标题行中无法使用不同大小的字体。属性align用来设置标题在页面中的对齐方式，有left（左对齐）、center（居中）和right（右对齐）三种选择。例2-2用Hn设置标题HTMLHEADTITLE设置标题/TITLE/HEADBODYH1第1级标题——H1/H1H2align=left第2级标题——H2/H2H3align=center第3级标题——H3/H3H4align=right第4级标题——H4/H4/BODY/HTML2.2.2文字标记FONT文字标记的格式为：FONTsize=数字face=字体名color=颜色被设置的文字/FONT①属性size用来设置文字的大小。数字的取值范围从1～7，size取1时文字最小，取7时文字最大。②属性face用来设置字体。如黑体、宋体、楷体_GB2312、仿宋_Gb312、隶书、TimesNewRoman等。③属性color用来设置文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，参见表2-1。例2-3用FONT设置文字的大小、字体和颜色。HTMLHEADTITLE用FONT标记设置文字大小、字体和颜色/TITLE/HEADBODY普通文字brFONTsize=11号字/FONTFONTsize=77号字/FONTbrFONTsize=4face=宋体宋体4号字/FONTFONTsize=3face=华文彩云华文彩云3号字/FONTbrFONTcolor=red红色/FONTFONTsize=6face=隶书color=#0000FF蓝色隶属6号字/FONT/BODY/HTMLB受影响的文字/B粗体I受影响的文字/I斜体U受影响的文字/U加下划线TT受影响的文字/TT标准打印机字体BIG受影响的文字/BIG大型字体SMALL受影响的文字/SMALL小型字体BLINK受影响的文字/BLINK闪烁效果SUB受影响的文字/SUB下标SUP受影响的文字/SUP上标STRIKE受影响的文字/STRIKE加删除线表2-2设置各种字型的标记例2-4设置字型HTMLHEADTITLE设置字型/TITLE/HEADBODY普通文字B加粗字/BI斜体字/IU加下划线/UBIG大型字体/BIGSMALL小型字体/SMALLSTRIKE加删除线/STRIKEBRXSUP2/SUP+YSUP2/SUP=ZSUP2/SUP/BODY/HTML2.2.3段落标记1.强制换行标记2.强制换段标记3.设置段落标记4.水平线1.强制换行标记BR强制换行的格式为：文字BR例2-5强制换行标记的使用HTMLHEADTITLE强制换行标记的使用/TITLE/HEADBODY登鹤雀楼白日依山尽黄河入海流欲穷千里目，更上一层楼。brB登鹤雀楼/BBR白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。br/BODY/HTML2.强制换段标记段落标记P放在一段文字的末尾，就定义了一个新段落的开始。P标记不但能使后面的文字换到下一行，还可以是两段之间留一空行。由于一段的结束意味着新一段的开始，所以使用P也可省略结束标记。强制换段标记的格式为：文字P强制换段标记可以看作两个强制换行标记BRBR3.设置段落标记设置段落标记的格式为：Palign=对齐方式文字/P其中属性align用来设置段落的对齐方式，可以为left、center或right，分别表示段落左对齐、段落居中、段落右对齐。默认为left。例2-6段落标记的使用。HTMLHEADTITLE段落标记的使用/TITLE/HEADBODYP登鹤雀楼/PPalign=center白日依山尽，br黄河入海流。/PPalign=right欲穷千里目，br更上一层楼。/P/BODY/HTML4.水平线水平线标记的格式为：HRalign=”对齐方式”size=”横线粗细”width=”横线长度”color=”横线颜色”noshade。Align属性：设定线条放置的位置，可选择left、right或center。Size属性：设定线条厚度，以像素作单位，默认为2。Width属性：设定线条长度，可以是绝对值或相对值，默认值为100%。Color属性：设定线条颜色，默认为黑色。Noshade属性：设定线条为平面显示（没有三维效果），若缺省，则有阴影或立体效果。例2-7水平线标记的使用HTMLHEADTITLE水平线标记的使用/TITLE/HEADBODYHRHRalign=rightsize=2width=70%color=#0000FFnoshadeHRalign=centersize=6width=70color=#008000/BODY