Download presentation
Presentation is loading. Please wait.
1
Web应用开发
2
HTML 什么是HTML？ HTML 指超文本标记语言。 HTML 文件是包含标记/标签的文本文件。
这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件能通过简单的文本编辑器来创建。
3
HTML文档的结构 HTML语言的基本结构 <HTML> <HEAD><TITLE> 这是标题部分。
</TITLE></HEAD> <BODY> 你好，这是正文部分！ </BODY> </HTML>
4
HTML标记 HTML文档标记 HTML文件头标记 HTML文件主体标记 格式：<HTML>…</HTML>
功能：标志文档开始和结尾的标记 HTML文件头标记 格式：<HEAD>…</HEAD> 功能：用于包含文件的基本信息 HTML文件主体标记 格式：<BODY>…</BODY> 功能：文件主体标记 <HTML> <HEAD> 头部信息 </HEAD> <BODY> 正文部分 </BODY> </HTML>
5
HTML标记 HTML标记 HTML 标记被 < 和 > 符号包围。
HTML 标记是成对出现的，例如 <b> 和 </b>。 位于起始标记和终止标记之间的文本是元素的内容。 HTML 标记对大小写不敏感，<b> 和 <B> 的作用是相同的。 HTML 标记可以包含属性，各属性之间以空格分隔。
6
设置<BODY>的属性 background=URL bgcolor=colorvalue text=colorvalue
标记属性 功能 设置网页的背景图片 设置网页的背景颜色 设置文本的颜色 link=colorvalue 设置尚未被访问过的超文本链接的颜色，默认为蓝色 vlink=colorvalue 设置已被访问过的超文本链接的颜色，默认为紫色 alink=colorvalue 设置超文本链接在被单击的瞬间的颜色，默认为红色 bgproperties =fixed 设置背景是否随滚动条滚动 leftmargin=size 设置网页左边的空白 topmargin=size 设置网页上方的空白 margingwidth=size 设置网页空白的宽度 marginheight =size 设置网页空白的高度 background=URL bgcolor=colorvalue text=colorvalue
7
HTML格式化 Html 字体格式的设置 <html> <body bgcolor=gray>
<b>文本加粗标记</b><br> <i>文本斜体标记</i><br> <u>文本下划线标记</u><br> <s>文本删除线标记</s><br> </body> </html> 文本加粗标记 文本斜体标记 文本下划线标记 文本删除线标记
8
HTML格式化 字体设置标记 格式：<FONT>…</FONT> 功能：设置字体格式标记
属性：可用于设置字体的大小、颜色、字型等 标记属性 功能 size=size 设置文字的大小 face=fontstyle 设置字体 color=colorvalue 设置文字的颜色 <font face="verdana" color="green">This is some text!</font>
9
HTML格式化 标题标记 段落标记 预定义格式标记
格式：<H1>…</H1>，<H2>…</H2>…<H6>…</H6> 功能：设置各种大小不同标题的标记 段落标记 格式：<P>…</P> 功能：设置段落标记 预定义格式标记 格式：<PRE>…</PRE> 功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容
10
标题标记 例： <HTML> <HEAD> <TITLE> 标题示例! </TITLE>
<BODY text="#0000ff" > <H1>hello world!</H1> <H2>hello world!</H2> <H3>hello world!</H3> <H4>hello world!</H4> <H5>hello world!</H5> <H6>hello world!</H6> </BODY> </HTML>
11
段落标记与预定义格式标记 例： <HTML> <HEAD> <TITLE>显示<p>与<pre>的区别</TITLE> </HEAD> <BODY> <P> 春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </P> <PRE> </PRE> </BODY> </HTML> & & < < > > " " 春晓 11
12
加入超级链接 格式：<A>…</A> 功能：在当前页和其他页间建立超链接 属性： 标记属性 功能 给定链接目标的位置
设置显示链接目标的框架， 命名锚，用于跳转到页面的某一位置 tabindex=num 设置Tab键的顺序 accesskey=char 设置快捷键 href=URL target=FrameTarget target=“_blank”新窗口打开 name=Lable
13
加入图像 插入图像 标记：<IMG> 属性： 标记属性 功能 通过URL给出图像来源的位置，不可缺省 width=size
设置图像宽度 height =size 设置图像高度 alt= txt 设置在图像未载入前图片位置显示的文字 border= size 设置图像边框，缺省为0 align=alignstyle 对齐方式。取值：top，middle，bottom，left，right hspace=size 设置图片左右边沿空白 vspace=size 设置图片上下边沿空白 src =URL
14
DIV和布局 是一个块级元素。这意味着它的内容自动地开始一个新行 和表格相比较，结构更为清楚 实现内容和结构的分离 分区显示标记
格式：<DIV>…</DIV> 功能：分区显示标记
15
关于DIV 国外近70%以上的网站采用div布局开发，90%以上的新网站均是DIV布局。
16
HTML格式化 例： <HTML>
<HEAD><TITLE>标记的使用</TITLE></HEAD> <BODY> <！--注释 本程序的功能是： 制作简单网页熟悉基本标记的使用！ --> <P align=center>三种标记的使用！</P> <HR> <DIV align=center>我在中间！<BR>中间</DIV> <DIV align=left>我在左边！<BR>左边</DIV> <DIV align=right>我在右边！<BR>右边</DIV> </BODY> </HTML>
17
实验 试验一、完成个人主页（静态网页） 完成这个实验，你需要学习： HTML/XHTML (+CSS)
实验要求：有图片，有几个超链接。内容自定，比如自我简介。 1.首先登陆 3. 上传个人主页请创建目录 public_html, 主页的第一个文件是index.html 4. 别人访问您的主页时, 地址是 其中YourID是您的登录名
18
验收方式： 新建一个txt文件文件命名为: PBxxxxx-张三-静态网页.txt txt文件内容如下： 姓名：王** 学号：PBxxxxxxxx 个人主页网址： 截止日期：10月28日 23:59
Similar presentations
