web技术html语言报告

1第十讲web技术--html语言2本章要点10.1html文档结构10.2html文档的标记和属性10.3列表10.4图片10.5背景图片与背景颜色10.6超链接10.7表格310.1html文档结构1html概况一般情况下，HTML文件的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式HTML语言使用标记对的方法编写文件，它通常使用标记名………/标记名或标记名………/标记名来表示标记的开始和结束.在Html文档中这样的标记对一般是成对使用的.42HTML文件的结构超文本文档分文档头和文档体两部分文档头:对文档进行一些必要的定义,不显示在Web页中文档体:要显示的各种文档信息.一般结构：HTMLHEAD头部信息/HEADBODY文档主体，正文部分/BODY/HTML5创建1个简单的示例6（1）单标记只需单独使用就能完整地表达意思，这类标记的语法是：标记名称。XHTML的写法是单标记名称/。比如：BR,它表示换行；br/用“”和“”括起来的符号，我们称它为标记或标签(tag)（2）双标记它由“始标记”和“尾标记”两部分构成，必须成对使用其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能而尾标记告诉Web浏览器在这里结束该功能。始标记名前加一个斜杠（/）即成为尾标记。这类标记的语法是：标记内容/标记..10.2html文档的标记和属性1标记7（3）标记属性许多单标记和双标记的始标记内可以包含一些属性，其语法是：标记属性1=值1属性2=值2…/标记属性是可选的，属性也可以省略而采用默认值例如：fontcolor=#ff00ffface=宋体size=3字体设置/font..8注意作为一般的原则，大多数属性值不用加单/双引号但是包括空格、％号，＃号等特殊字符的属性值必须加入单/双引号为了好的习惯，提倡全部对属性值加双引号或单引号。如：fontcolor=#ff00ffface=宋体size=3.../font输入标记时，一定不要在“”与标记名之间输入多余的空格，也不能在全角输入状态下输入这些标记及属性标记和属性不区分大小写有些标记需要嵌套在其他标记中才有效..9主要是被浏览器所用,不会显示在网页的正文内容里搜索引擎也会查找网页中的head信息1.作用2.常用头部信息标记title.../title显示在浏览器标题栏(2)链接(link)标记建立和外部文件的链接。示例代码如下：linkrel=stylesheethref=mainstyles.csstype=text/css..2文档头部(1)文档标题标记102.常用头部信息标记(3)样式(style)标记设置网页的内部样式表(internalstylesheet)。示例代码如下：headstylebody{background-color:white;color:black;}h1{font:18ptarialbold;}/style/head.11一.换行标记br换行标记是个单标记，也叫空标记，不包含任何内容，在html文件中的任何位置只要使用了br标记，当文件显示在浏览器中时，该标记之后的内容将显示到下一行。htmlheadtitle换行示例/title/headbody无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。br有换行标记：br登鹳雀楼br白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。/body/html.3文本段落修饰•换行标记br12二.换段落标记p及属性[1/2]由p标记所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。可以单独使用，也可以成对使用。单独使用时，下一个P的开始就意味着上一个P的结束。良好的习惯是这样使用：p/。格式：P或P/Palign=参数/其中,align是p标记的属性,有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式..•换段落标记p及属性13例htmlheadtitle测试分段控制标记/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/ppalign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=center而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲。/p/body/html.14在HTML文档中，有些字符没办法直接使用键盘上的字符表示有些字符被HTML语法规定使用，浏览器无法直接解析显示。为防止代码混淆，必须用一些代码来表示它们格式:&代码名称;.•特殊字符15七.注释标记在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识注释内容并不会在浏览器中显示出来注释标记的格式：!--注释的内容--.•注释标记16八.文字字体标记[1/4]hn标记用于设置网页中的标题文字，被设置的文字将以粗体的方式显示在网页中（n=1/2/3/4/5/6）标题标记的格式：hnalign=参数标题内容/hn说明：hn标记是成对出现的hn标记共分为六级，在h1.../h1之间的文字就是第一级标题，是最大最粗的标题；h6.../h6之间的文字是最后一级，是最小最细的标题文字align属性用于设置标题的对齐方式，其参数为left（左），center（中)，right(右）hn本身具有换行的作用，标题总是从新的一行开始.•标题文字标记hn.17FONT标记用于控制文字的字体，大小和颜色格式：fontface=值1size=值2color=值3文字/font•文字格式控制标记FONT说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体size属性的取值为1~7，默认为3。也可以用“+”或“-”来设定字号的相对值color属性的值为：rgb颜色“#nnnnnn”或颜色的名称..18在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。粗体标记b放在b与/b标记之间的文字将以粗体方式显示斜体标记i放在i与/i标记之间的文字将以斜体方式显示下划线标记u放在u与/u标记之间的文字将以下划线方式显示.•特定文字样式标记.19•何谓列表列表列表列表项列表项10.3列表1无序列表20ul:unorderedlist无序清单就是在每一项前面加上●、○、■等符号，故称符号清单语法：ultype=squareli….li…./ul•ul无序清单标记其中：type设定符号款式，其值有三种，如下:type=disc时,项符号●(默认值)type=circle时,项符号○type=square时,项符号■•单标记li表示列表中的一个项目•另,li：listitem21UL使用举例(1)例如：ultype=circleliCliD/ul(2)注意：li也可以有type属性，由于ul及li都有type这个参数，但由于li嵌套在ul中，所以如果都有type时，以li的type值设置，例如ultype=circlelitype=squareClitype=discD/ul22ol:orderedlist有序清单就是在每一项前面加上如1、2、3等序数符号，又称编号清单语法：oltype=...start=...li….livalue=...…./ol•ol有序清单标记(1)type设定序数款式，其值有五种:type值款式11,2,3,...aa,b,c,...AA,B,C,...ii,ii,iii,...II,II,III,...(2)start设定序数从多少开始,默认为1(3)value设定该项序数2有序列表23oltype=Istart=2liAliB/ol•举例oltype=ali第1项livalue=3第2项li第3项/ol241.语法imgsrc=图片文件的URL/.img是单标记只包含属性，并且没有结束标记说明:图片不是插入到HTML中，而是指明图片的URL浏览器还要单独根据URL去获取图片来显示假如某个HTML文件包含10个图像，那么为了正确显示这个页面，需要加载11个文件加载图片是需要时间的在HTML中，图片由img标签定义.10.4图片252.图片的加载.每个图片都由浏览器独立地去网站服务器上获取，俗称加载。共10次Q:使用什么协议？整个页面要先加载1次A:http263.源属性srcsrc指source源属性的值是图像的URL地址URL指存储图像的位置。如果名为boat.gif如果名为boat.gif的图像位于目录中，那么其URL为图片URL的2种指向站内图片:来源于本网站站外图片:来源于其他网站，相当于“盗用”.不仅仅是图片，也包括其他网页资源(音视频、动画、CSS文件、js文件等271.body背景图片标记background(1)基本语法bodybackground=“背景图片文件的URL”.注意：图片的URL必须设置正确,要不然会达不到你预计的图片背景效果小于网页窗口的背景图片会被平铺，填满整个窗口小背景图片有利于加载确实要用背景图片的话必须要认真设计一番.10.5背景图片与背景颜色282.body背景颜色标记bgcolor(1)基本语法背景颜色属性将背景设置为某种颜色.属性值可以是十六进制数、RGB值或颜色名.bodybgcolor=“#000000”.bodybgcolor=“rgb(0,0,0)”.bodybgcolor=“black”..291.超级链接概念指页面对象之间的链接关系网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体使浏览者能快速地访问到想要访问的页面。2.超级链接构成由两个端点（也称锚）及一个方向构成。将开始位置的端点称作源端点（或源锚）将目标位置的端点称作目标端点（或目标锚）链接就是由源端点指向目标端点的一种跳转目标端点可以是任意的网络资源目标锚.10.6超链接源锚301.概述URL：每个网页文档都有一个唯一的地址，称作统一资源定位器(URL)每一个文件都有自己的存放位置和路径理解源端点到要链接的那个目的端点之间的路径关系是创建链接的根本.超级链接的路径312.绝对路径包括完整的协议名称,主机名称,文件夹名称和文件名称其格式为：通讯协议://服务器地址:通讯端口/文件位置....../文件名例如：含义:表明采用http从名为相对路径表述源端点同目标端点之间的相互位置目标锚与源锚的位置密切相关有3种相对关系：(1)目标锚和源锚在同一路径下：直接使用目标锚名字要求：在21.htm中链接到22.htm则可以直接使用“22.htm”.33有3种相对关系：(2)目标锚位于源锚所在目录的子目录