动态网页制作 第03讲HTML核心标记

网页设计与网站开发第三讲：HTML核心标记联系方式：[e-mail]主要内容•HTML标记的核心属性•HTML常用标记•超链接•图像主要内容•HTML标记的核心属性•HTML常用标记•超链接•图像核心属性•HTML核心属性核心属性有：id;class；style；title和dir五个；几乎绝大多数的HTML标记都有这些属性；而其它的属性则是某些标记所独有，如maxlength属性只有表单中的某些input标记所独有。核心属性•HTML核心属性--id为文档中的标记设置一个独一无二的名字；如：pid=firstparagraphThisisthefirstparagraphoftext./p为标记命名为firstparagraph，可以通过样式表来操作标记所包含的内容；如：styletype=text/css!--#firstparagraph{color:red;font-size:24px;}--/style思考：如何将p之间的文字替换?核心属性•HTML核心属性--id答案：采用DHTML技术。定义javascript方法：scriptlanguage=JavaScriptfunctionchangeText(){document.getElementById(firstparagraph).innerHTML=Haha,thefirstparagraphoftexthaschanged!;}/script调用javascript方法：ahref=javascript:changeText();ChangeText/a核心属性•HTML核心属性--class指定标记可能属于的样式类，不要求是独一无二的。如：pid=firstparagraphclass=importantThisisthefirstparagraphoftext./p样式类：styletype=text/css!--#firstparagraph{color:red;font-size:24px;}.important{background-color:yellow;}--/style核心属性•HTML核心属性--style用来为标记直接添加样式，也称为行内样式。pid=…style=border:1px;border-style:solid;Thisisthefirstparagraphoftext./p注意：尽管style属性可以将css规则非常方便的加入到一个标记中，但更可取的方法还是使用id或class属性与样式表关联起来。核心属性•HTML核心属性--title提供关于标记的提示文字。ptitle=introductoryparagraphThisisthefirstparagraphoftext./p核心属性•HTML核心属性--dir指定文字方向：ltr从左至右，rtl从右至左。pdir=rtlThisisthefirstparagraphoftext./ppdir=ltrThisisthefirstparagraphoftext./p核心事件•HTML核心事件在HTML文档中添加脚本可以形成更加动态的web。如上例中点击超链接的事件可以改为：ahref=#onclick=javascript:changeText();ChangeText/a其它常见的事件有：Onload，onunload，onmouseover，onmouseout等。例1：bodyonload=document.form1.text1.focus核心事件•HTML核心事件例2：ponmouseover=this.style.color='#FF0000'onmouseout=this.style.color='#0000FF'Thisisthefirstparagraphoftext./p注：this表示当前标记对象。主要内容•HTML标记的核心属性•HTML常用标记•超链接•图像常用标记•标题h1到h6h1最突出；h6最不突出；注意与title的区别。常用标记•段落和换行p:会自动产生一个空行；br:插入单个的回车或换行。特别用法：br的扩展，停止文本对图像的环绕。例：brclear=leftClear属性用于停止文本在图像周围的环绕；取值：Left:指定新的一行左边没有图像；Right:指定新的一行右边没有图像；All:指定新的一行两边都没有图像；None:默认值。常用标记•font指定所包含的文字的大小，颜色和字体；fontsize=+2color=#008000face=Arial包含的文字/font属性:size=1to7|+1to+6|-1to-6color=colorname|#RRGGBBface=fontname不推荐使用，因为可以通过样式来控制。常用标记•hrhr：水平分割线align：控制对齐方式(left,right,center,justify)noshade：显示一个实心的分界线size：控制分界线的尺寸大小width：控制分界线的宽度例：hralign=leftsize=2width=70%color=#0000FFnoshadenoshade设定线条为平面显示，默认为有阴影。思考：垂直线如何画常用标记•hr垂直线的两种画法：1.表格：tablewidth=1pxborder=0cellspacing=0cellpadding=0trtdheight=300bgcolor=#FF0000/td/tr/table2.图像：imgheight=300src=images/girl.gifwidth=1常用标记•div与span相同：都是块级元素；区别：div产生一个回车；如果仅仅想对几个单词甚至几个字符设置样式，最好的方式就是使用span；如：spanstyle=font-weight:bold;color:blue;lovely/spandivstyle=font-weight:bold;color:blue;lovely/div注意两者的区别。常用标记•pre预格式化标记预格式化标记；不忽略在此之间的空格、制表符与回车符等元素；pre天行健，君子以自强不息；地势坤，君子以厚德载物。/pre常用标记•文字格式标记b....../b：文字以粗体显示；i....../i：文字显示为斜体；u....../u：显示下划线；strike....../strike：中心线贯穿文字；em....../em：强调文字，通常用斜体；strong....../strong：特别强调的文字，通常用黑体；big....../big：使文字大小相对于前面的文字增大一级；small....../small：使文字大小相对于前面文字减小一级；sup....../sup：使文字成为前一个字符的上标；sub....../sub：使文字成为前一个字符的下标。常用标记•特殊字符转义符显示结果描述<小于号>大于号&&可用于显示其它特殊字符"引号®®注册©©版权™™商标 不断行的空白常用标记•无序列表标记ul:ul:无序列表li：列表项目每个条目以li标记开始;通常在显示出的各条目项前置一个圆点;例：ullitextlitext/ul常用标记•有序列表标记olol：有序列表；在每一个列表项的前面加上一个编号字符；字符可以是数字或字母。一般格式为：oltype=[1|a|A|i|I]start=#litextlitext/oltype属性来指定列表项前面的字符编号，其值为:1:（默认值）数字编号，如：“1、2、3…”a:小写的英文字母，如：“a、b、c…”A:大写的英文字母，如：“A、B、C…”i:小写的罗马字母，如：“i、ii、iii…”I:大写的罗马字母，如：“I、II、III…”主要内容•HTML标记的核心属性•HTML常用标记•超链接•图像超链接•简单实例1ahref=说明：1.href的含义；2.URL地址：外部URL:相对本地的URL:index.html;锚点：先用name定义一个锚点，在链接时指向它；指向一个目标：如e-mail和本地文件；3.a与u的下划线的区别。超链接•简单实例2链接到文件:ahref=html.ppt文件下载/a链接到邮件:ahref=mailto:[e-mail]联系/a相对路径:ahref=../../topic.htm返回目录/a锚点:使用户在较长的文档中跳转，方便地找到要阅读的内容。建立锚点：aname=name锚点文字/a链接指向已定义的锚点：ahref=#name文字/a超链接•链接的targettarget：决定链接源在什么地方显示；取值：_blank：新窗口打开；_parent：在父框架中打开，不常用；_self：默认值，不打开新窗口；_top：在整个窗口中打开，避免框架嵌套；用户自定义：多用于框架中。超链接•链接的外观bodylink=bluevlink=redalink=yellow其中：link：未访问过的链接的颜色（默认：蓝色）;vlink：已访问过的链接的颜色（默认：紫色）;alink：改变激活链接的颜色;详细的外观设计（通过样式）：a:link{color:blue;text-decoration:none;}a:active{color:red;backgroud-color:#FFFFCC;}a:visited{color:purpe;text-decoration:none;}a:hover{color:red;text-decoration:underline;}说明：text-decoration:none：去掉下划线主要内容•HTML标记的核心属性•HTML常用标记•超链接•图像图像•图像标记imgimg：把一幅图像放到网页中；格式：imgsrc=URLalt=textalign=topwidth=height=border=hspace=vspace=常用属性说明：src:指定图像的URL；alt:替换文本(如果浏览器不支持图像格式或找不到图像)；align：文本的当前行与图像在垂直方向上对齐方式，取值top/middle/bottom（默认）；width/height：指定图像显示的宽和高；hspace:图像左右两边的空白距离；vspace：图像上下两边的空白距离；border：边框尺寸；图像•图像标记举例举例1：设定上下左右空白位置imgsrc=girl.gifwidth=120height=200border=0alt=beautifulhspace=10vspace=20举例2：设定边框厚度imgsrc=girl.gifwidth=120height=200border=2alt=beautifulhspace=10vspace=20图像•图像作为超链接ahref=#imgsrc=girl.gifborder=0alt=beautiful/a注意：img和/a标记不要有空格，否则会出现“小尾巴”。交换图像实现：ahref=#imgsrc=normal.gifborder=0onmouseover=this.src='over.gif'onmouseout=this.src='de.gif'onmous