html网页制作 第二讲

HTML第二讲文字标签属性——1•文字属性标记–1.文字颜色•指定颜色fontcolor=#.../font•#=RRGGBB16进制数码例：01.htm文字标签属性——2•文字属性标记–2.文字字体•fontface=“#,#,...,#”.../font#=客户端可获得的字体02.htm文字标签属性——3•文字属性标记–3.文字大小•fontsize=#.../font•#=1,2,3,4,5,6,7or+#,-#例：03.htm文字标签属性——4•文字属性标记–4.文字标题–h#.../h#•#=1,2,3,4,5,6例：04.htm文字布局•行的控制–段(Paragraph)(可以看作是空行)p–空白占位符 –例：05.htm文字布局•行的控制•HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即br元素。br元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。br元素不是成对出现的。例：06.htm–不换行nobr07.htmHTML文字与段落格式控制body……i倾斜文本/ib粗体文本/bu下划线文本/us删除线文本/s……/body例：08.htm、09.htm、10.htm、11.htm(综合练习)基本组成部分—HTML注释•HTML文档可以插入注释。注释内容不会在浏览器窗口显示•HTML注释的格式为：!--注释内容--!--多行注释内容--例：12.htm文字的对齐hnalign=#.../hn(n=1,2,3,4,5,6)palign=#.../p(#=left,center,right)例：13.htm文字的分区显示•divalign=#.../div(#=left,center,right)例：14.htm3.HTML段落与分行控制•居中---center元素–center元素是一个独立的使所标记的字符居中的元素。它的作用与使用p元素里的align=“center”类似•例如：center居中段落/center15.htm3.HTML段落与分行控制•标尺线hrsize=#：设定线宽hrwidth=#：设定线长hralign=#：设定对齐方式#=left,righthrcolor=#：设定线的颜色例：16.htm3.HTML的段落与分行控制•无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3.HTML的段落与分行控制•无序列表元素—2无序列表是由ul和li元素定义的:ullisports/lilifood/lilidrink/lilifriends/li/ul例：17.htm3.HTML的段落与分行控制•无序列表元素—3–无序列表的默认符号是圆点。ul元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）–例：18.htm3.HTML的段落与分行控制•有序列表元素—1有序列表由ol和li定义:ollisports/lilidrink/lilifriends/li/ol例：17.htm3.HTML的段落与分行控制•有序列表元素—2ol元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号例：19.htmol元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义ol元素的start属性例：20.htm4.超级链接—普通超级链接1•超级链接是整个应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接—普通超级链接2超级链接是用锚元素a定义的•在a元素下，有元素属性href,href的属性值为一个URL地址•如：ahref=“”指向学院的超级链接/a•如：ahref=“29.htm普通超级链接/a例：21.htm4.超级链接—E-mail超级链接•超级链接可以指向E-mail地址•如：ahref=“mailto:[e-mail]指向E-mail地址的超级链接/a例：22.htm4.超级链接—新开链接窗口•开一个新的(浏览器)窗口(TargetWindow)ahref=URLtarget=“_blank.../a例：26.htm4.超级链接—去除下划线•去掉超级连接的下划线：style=“text-decoration:none”例：25.htm4.超级链接——其他超级链接•应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非应用。我们可以类似的创建指向Ftp等的超级链接;•指向其他Internet应用的超级链接不是我们掌握的重点。4.超级链接——锚点(书签)1•aname=aa•ahref=#aa指向本页面锚点aa的超级链接/a例：23.htm•ahref=“23.htm#top”指向23页面的锚点top的超级链接/a例：24.htm练习：手写代码实现•链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：27.htmHTML对图片的控制--1•基本语法:•imgsrc=“图片名称”–引用图片必须用img元素标志。img元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。–src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：28.htmHTML对图片的控制--2•所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。•定义图片替代文本的方法是：–imgsrc=“图片名称”alt=“这是一张图片”例：28.htmHTML对图片的控制--3•图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。–定义图片的显示大小的方法是：imgsrc=sample.jpgwidth=100height=100–width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：29.htmHTML对图片的控制--4•图片的边框–我们可以为一幅图片加一个边框以突出显示：–imgsrc=sample.jpgborder=2•border的属性值为象素数例：30.htmHTML对图片的控制--5•图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：–imgsrc=“sample.jpg”align=“left”–imgrc=“sample.jpg”align=“right”例：31.htmHTML对图片的控制--6•图片的对齐方式定义图片的垂直对齐方式：imgsrc=sample.jpgalign=topimgsrc=sample.jpgalign=middleimgsrc=sample.jpgalign=bottom对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：32.htmHTML对图片的控制--7•定义图片与左、右的文本之间的间距–图片在显示时，与左右的文本之间可以有一定的间距imgsrc=sample.jpghspace=5vspace=5–Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：33.htmHTML对图片的控制--8•图象的超级链接–图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：ahref=“”imgsrc=sample.jpg/a–所以，所谓超级链接实际上就是用a元素标志一个图象的引用;例：34.htmHTML对图片的控制--9•图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。HTML对图片的控制--10•图象映射（只要求理解标记含义）–图象映射由map定义。map有一个基本属性是name。Name给图象映射命名，这个命名将会被img元素用usemap属性引用。所以，图象上的图象映射实际上是对map定义的映射的一个引用。–map在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形)HTML对图片的控制--11•图象映射实例（35.htm）imgsrc=bear.jpgusemap=#Mapmapname=“Mapareashape=rectcoords=46,29,253,164href=#areashape=circlecoords=76,510,59href=#areashape=polycoords=219,482,253,448,310,462,297,527,220,523href=#/map