web实用网页设计方法HTML-2

Web实用网页设计方法WebWeb实用网页设计方法实用网页设计方法杨巍[e-mail]tiontoHTMLHTML2Web实用网页设计方法AgendazIntroductiontoHTMLz创建网页的基本对象zHTMLListzHTMLImagezHTMLLinkzHTMLTablezHTMLFramezHTMLFormzHTMLHead3Web实用网页设计方法HTML简介„目标本章旨在简要介绍HTML的相关概念、基本结构，应该掌握如下知识：1）了解HTML的概念2）了解HTML的基本结构3）理解HTML的标签、属性学时：0.2学时教学方法：讲授ppt＋课堂演示4Web实用网页设计方法HTML„HTML„超文本标签语言HyperTextMarkupLanguage„以htm或者html为扩展名„包含标签的文本文件„通过浏览器解析标签来显示页面marqueebehavior=alternatefontsize=30color='red'HelloHTML!/font/marquee5Web实用网页设计方法HelloWorldhtmlheadMyfirstHTMLpage!/headbodyThisisanormalHTMLdocument.BackinHTMLagain./body/htmlhtmlheadMyfirstHTMLpage!/headbodyThisisanormalHTMLdocument.BackinHTMLagain./body/htmlFirstPage.html6Web实用网页设计方法htmlheadtitledisplayedinbrowser'scaption/title/headbodyVisibletext/body/htmlHTML基本结构„HTML文件„文档头„正文htmlheadtitledisplayedinbrowser'scaption/title/headbodyVisibletext/body/html7Web实用网页设计方法HTML标签„HTML文档„HTML标签及内容组成的文本文件„标签„尖括号()对与其中的字符序列„通常成对出现——起始标签和结束标签„大小写无关marqueebehavior=alternatefontsize=30color='red'HelloHTML!/font/marqueemarqueebehavior=alternatefontsize=30color='red'HelloHTML!/font/marquee8Web实用网页设计方法bThistextisbold/bHTML标签„HTML元素„空标签起始标签结束标签元素内容9Web实用网页设计方法HTML标签„HTML标签属性„控制标签的显示效果„标签可以设置一个或多个属性„设置在起始标签后面，且位于尖括号之内marqueebehavior=alternatefontsize=30color='red'HelloHTML!/font/marquee属性名=属性值10Web实用网页设计方法HTML标签„强调„标签名与属性之间必须用空格分隔„属性与属性之间必须用空格分隔„HTML标签，属性名与属性值都是大小写不敏感的„建议标签名，属性和属性值采用小写11Web实用网页设计方法HTML编辑器„HTML编辑器„简单文本编辑器即可，可在纯文本中编写代码„使用专门的HTML编辑软件来编写HTML文件，HTML标签都可以自动生成„FrontPageEditor„Dreamweaver12Web实用网页设计方法HTML的全局架构标签„文档类型定义(DocumentTypeDefinition,DTD)„文档类型标签!DOCTYPE„指定了当前网页文件所使用的HTML语言版本及定义该语言版本的规范文件的位置!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN实用网页设计方法HTML规范与版本„不同的浏览器之间存在不兼容问题„方言„制定HTML规范和标准„W3C(联盟)„目前的版本„HTML4.01„XHTML14Web实用网页设计方法练习——第一个网页„利用Dreamweaver创建一个新的网页，并起名为hello.html„浏览网页，查看效果„修改网页的标题栏信息„为网页增加页面内容15Web实用网页设计方法AgendazIntroductiontoHTMLz创建网页的基本对象zHTMLListzHTMLImagezHTMLLinkzHTMLTablezHTMLFramezHTMLFormzHTMLHead16Web实用网页设计方法创建网页的基本对象„目标本章旨在简要介绍HTML的各种常用标签，应该掌握如下知识：1）使用各种基本标签完成简单页面学时：2.5学时教学方法：讲授ppt＋课堂演示17Web实用网页设计方法创建网页的基本对象„网页主要由三部分组成„文本„网页的文字„图片„图片格式JPG,BMP,GIF,PNG„超链接18Web实用网页设计方法练习„在hello.html网页上，输入如下内容，最终在页面上显示如下效果„见line.html19Web实用网页设计方法p标签„p„段落使用p标签进行定义„HTML会自动在段落前后添加一个额外的空行20Web实用网页设计方法HTMLParagraphhtmlheadtitleTitleofpage/title/headbodyThisisaheading.Thisismyfirsthomepage.bThistextisbold/bpThisisanotherparagraph./pend/body/htmlnewline.html21Web实用网页设计方法br/标签„br/„当你打算结束一行，而又不想开始一个新段落时„br/强制的换行„br/空白标签22Web实用网页设计方法HTMLLineBreakshtmlheadtitleTitleofpage/title/headbodyTobreakbr/linesbr/inabr/paragraph,br/usethebrtag.br/Tobreakplines/pinapparagraph,/pusetheptag./body/htmlnewlinebr.html23Web实用网页设计方法符号和特殊字符„符号和特殊字符„、、&，对于一些无法通过键盘输入的符号„转义字符„一个&，一个实体名称，以及一个分号(;)„一个&，#和一个实体编号,以及一个分号(;)„实体对大小写敏感24Web实用网页设计方法符号和特殊字符25Web实用网页设计方法符号和特殊字符26Web实用网页设计方法练习„练习——在页面中显示如下内容„见entities.htmlIlikeapple&orange!Ilikehtml!Ilikechina!'Ilikechina!'Thisbookprice¥5!27Web实用网页设计方法HTMLHeadings„h1toh6„标题使用h1至h6标签进行定义„h1定义最大的标题„h6定义最小的标题。„浏览器会自动在标题前后添加一个额外的空行„标题字体标记显示黑体字28Web实用网页设计方法HTMLHeadingshtmlheadtitleTitleofpage/title/headbodyh1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3h4Thisisaheading/h4h5Thisisaheading/h5h6Thisisaheading/h6/body/htmlHeaderelementsdefineheadinglevelshead.html29Web实用网页设计方法HTMLComments„HTMLComments„注释标签用于在HTML源码中插入注释„注释会被浏览器忽略!--Thisisacomment--30Web实用网页设计方法HTMLLists„列表„无序列表unorderedlist„标有圆点的列表„有序列表orderedlist„有数字的列表„自定义列表definitionlist„普通的列表31Web实用网页设计方法HTMLLists„无序列表„无序列表是一个项目的列表，此列项目使用粗体圆点进行标记„例如zCoffeezMilk„无序列表始于ul标签„每个列表项始于li标签32Web实用网页设计方法htmlbodyh4AnUnorderedList:/h4ulliCoffee/liliTea/liliMilk/li/ul/body/htmlulist.htmlHTMLLists33Web实用网页设计方法HTMLLists„有序列表„有序列表也是一列项目，列表项目使用数字进行标记„例如1.Coffee2.Milk„有序列表始于ol标签„每个列表项始于li标签34Web实用网页设计方法htmlhead/headbodyh4AnOrderedList:/h4olliCoffee/liliTea/liliMilk/li/ol/body/htmlolist.htmlHTMLLists35Web实用网页设计方法htmlbodyh4AnOrderedList:/h4olliCoffee/liliTea/liliMilk/li/olh4TheOrderedListContinue:/h4olstart=4liApples/liliBananas/liliLemons/li/ol/body/htmlolistchange.html36Web实用网页设计方法HTMLLists„定义列表„自定义列表不仅仅是一列项目，而是项目及其注释的组合„自定义列表以dl标签开始„每个自定义列表项以dt开始„每个自定义列表项的定义以dd开始37Web实用网页设计方法htmlbodyh4AnDefinitionList:/h4dldtCoffee/dtddBlackhotdrink/dddtMilk/dtddwhitecolddrink/dd/dl/body/htmldlist.htmlHTMLLists38Web实用网页设计方法练习„各种列表可以相互嵌套„例如，见nestedlist.htmlAnestedList:zCoffeezTea{Blacktea{GreenteazMilk39Web实用网页设计方法HTMLLinks„超文本链接指针„将整个Web网络连接起来„HTML使用超级链接与网络上的另一个文档相连„指向网络上的任何资源„例如新浪网40Web实用网页设计方法HTMLLinks„a用来创建锚„href属性用于定位需要链接的文档„锚的开始标签和结束标签之间的文字被作为超级链接来显示ahref=urlTexttobedisplayed/a41Web实用网页设计方法HTMLLinkshtmlbodypahref=