《《块元素和内联元素》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《块元素和内联元素》PPT课件.ppt（30页珍藏版）》请在金锄头文库上搜索。
1、教师：教师： 金星金星电话：电话：18971142771 18971142771 2011 2011 年年 09 09 月月复习：变成网页教师节的启示我渴望智慧和力量，上天却给问题，让我解决；我渴望财富，上天却给体力和头脑，让我工作；我渴望勇气，上天却给危险，让我克服；我渴望顺心，上天却改变环境，让我被迫忍耐；我渴望爱，上天给了一个碰到麻烦的人，让我去关怀；我没得到任何想要的东西，但是我却得到了一切需要的东西。2第第二二讲讲 内联元素和块元素内联元素和块元素本讲知识点：本讲知识点： (1)掌握网页设计的思维方法掌握网页设计的思维方法 (2)理解内联元素和块元素，在设计时灵活运用理解内联元素和块
2、元素，在设计时灵活运用重点：重点：内联元素和块元素内联元素和块元素难点：难点：设计网页的思维过程设计网页的思维过程3认识HTML中的“HT”Markup标记。“hypertext”超链接。看看加入了链接完善后的页面DIY4超链接5了解属性 .内容. .内容. 属性：关于内容的附加信息也叫元信息（meta-information）：金星金星6属性语法：严谨=安全 elixirs属性名：属性名：属性名：属性名：hhypertext ypertext refreference (erence (超链接超链接超链接超链接)属性值，引号不能丢！属性值，引号不能丢！属性值，引号不能丢！属性值，引号不能丢！
3、7没有傻问题我能像刚才那样自己创建一个标签和它的属性吗？不能，你能给英语添加一个单词吗？需要浏览器支持谁决定元素(标签或属性)是否被支持？w3c，万维网联盟，www.w3.org 。图像也可以点击吗？嵌套就可以！如8小练习给elixir.html增加一个回到主页面的链接9组织文件夹保持网站整洁！loungeloungelounge.htmllounge.htmlimagesimages所有图片文件所有图片文件所有图片文件所有图片文件beveragesbeverageselixir.htmlelixir.htmlaboutaboutdirections.directions.htmlhtml10
4、相对路径的表示beverages/elixir.htmlelixirs首先，进入首先，进入首先，进入首先，进入beveragesbeverages文件夹文件夹文件夹文件夹用正斜杠用正斜杠用正斜杠用正斜杠/区分路径的各区分路径的各区分路径的各区分路径的各部分。部分。部分。部分。最后写文最后写文最后写文最后写文件名件名件名件名11用文件夹来管理创建文件夹结构为了便于共享，图片等资源会放一个文件夹。html文件按照内容分类放在不同文件夹。链接时用相对路径。 .读读“点点点点”，代表父目录，代表父目录不是反斜杠哦！不是反斜杠哦！不是反斜杠哦！不是反斜杠哦！12没有傻问题如果要上溯两层目录怎么办？“./
5、./ 继续 ”上溯的限度是多少？一直到你的网站根目录为止。下探有限度吗？最多256层。但是那样你的网站结构就过于复杂了13作业1修复网页中的链接和图片DIY14小结当你需要链接时，使用元素元素的内容是链接的标签，浏览器也有默认样式。内容可以是文字或图像。试一试用图像来链接。“.”表示父目录，一般站内链接用相对路径，站外用网址。15网页设计方法：概念到蓝图16从缩略图变成网页使用等标注内容加入变成网页看看成果17完善网页：标注引用我们发现Tony引用了老子的话。元素，用来标记网页中的“引用”。18 块引用！它有什么特点呢？我们必须要试一试！看，Tony引用了一段广告：Passing cars,
6、When you cant see, May get you, A glimpse, Of eternity.注意：块引用也会被看成一个段落，所以，要放在的外面。引用一整段话时19没有傻问题如果我要引用多段话怎么办呢？每段用一个如果我想看见引用产生斜体的效果，可以不用，而直接用吗？HTML是用来标记结构的，除非它既是引用，又是需要强调的重点。20认识块元素和内联元素块：特立独行 内联：随波逐流 一个专门用于换行的元素。简写成概念：空元素21Tony的旅游地点列表Tony的行程: 1、Walla Walla, WA, 2、Magic City, ID,3、Bountiful, UT,4、Last
7、 Chance, CO,5、Why, AZ6、Truth or Consequences, NM.22多项选择为什么不使用来做列表？A.HTML有一个专门的列表元素，如果使用它，浏览器就会知道尽可能以最佳方式处理它。B.元素代表文本段落而不是列表。C.它可能看起来不像列表，而像一堆标了号的段落。D.如果你想改变列表的顺序，或者插入新项目，就必须重新编号，会很麻烦。23无序列表用ul和li标签嵌套实现 Walla Walla, WA Magic City, ID Bountiful, UT Last Chance, CO Truth or Consequences, NM Why, AZ 24列
8、表元素和有序列表：list item 用法：内容：ordered list有序列表：unordered list 小作业：还有一种，自定义列表，使用和标签，请查阅网上学习资料，自己写一个这样的列表！25没有傻问题和必须一起使用吗？是的，li表示列表项目，而ol则把它们组成一组。我可以在列表里面嵌套另一个列表吗？可以！就像其他的元素嵌套一样，把另一个列表嵌入标签的内容中。究竟什么可以嵌套进什么？有一般规律吗？这是HTML最难理解的要点之一。26网页中的字符实体它们怎样在网页中显示？>&最后的“;”一定要！http:/ 27小作业：破译密码公安局收到一段密码：Theres going to be an evil henchman meetup next month at my underground lair in Ð ετöìτ.Come join us!28要点计划好网页的结构，绘制略图，最后写HTML。用大的块元素来创建网页，然后用内联元素修饰。记住无论什么时候，用最能匹配内容含义的元素。都是块元素。是一个“空元素”，是内联元素。29再会！下一讲：处理网页中的媒体30
