internet与网页设计(html)课件_第1页
internet与网页设计(html)课件_第2页
internet与网页设计(html)课件_第3页
internet与网页设计(html)课件_第4页
internet与网页设计(html)课件_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML语言

HTML（HyperTextMarkupLanguage）是一种标记语言，用来创建与系统平台无关的文档。HTML是标准通用化语言SGML的一种应用。1.6.1HTML文件的语法表示HTML的最新版本是4.01。HTML页面是由许多元素组成的文本文件，保存为扩展名为.htm(windows).html(unix)的文件。HTML以标记标识及排列各元素。标记的一般格式为<元素属性1="属性值1"属性2="属性值2">显示内容</标记名>。标记允许嵌套，标记名是大小写无关的，最好都用小写。HTML文档的结构<HTML><HEAD><TITLE>我的第一个HTML文件</TITLE><H1>文件头</H1></HEAD><BODY><P>HTML还是很好学的</P><P>我的第一个网页</P></BODY></HTML>头主体HTML文件示例文件源代码如下：<HTML><HEAD><TITLE>我的第一个HTML文件</TITLE><H1>文件头</H1></HEAD><BODY><P>HTML还是很好学的</P><P>我的第一个网页</P></BODY></HTML>HTML文件示例（续）该代码描述的HTML文档的显示效果图如下：HTML文件的基本结构

HTML文件通常由5个主要的元素构成。HTML文件的基本结构如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Final//EN"><html><head><title>HTML文件标题</title></head><body>HTML文件内容</body></html

><!DOCTYPEHTMLPUBLIC"-//W#C//DTDHTML4.0Final//EN">表示HTML的DTD(DocumentTypeDefinition)版本信息,可选。<html>…</html>设置HTML文件的开始和结束,可选。<head>…</head>设置HTML文件的一些信息，如标题、层叠样式表单、脚本程序等。<title>…</title>设置HTML文件的标题。可在浏览器窗口标题栏显示。可以添加到浏览器的收藏夹内。<body>…</body>设置HTML文件的主体内容,可选。HTML文件的基本标记

1.

设置元数据：<meta>，这些信息可被Web搜索引擎、Web服务器和其他应用程序利用，应放在<head>…</head>内。可设以下属性：name指定某一个特性的名称，例如author。content指定name所指定的特性的值。http-equivHTTP协议的题头名。charset字符编码集。例如：<metaname="author"content="John"charset="gb2312"><metaname="keywords"content="game,design,movement"><metaname="refresh"content="1"><metahttp-equiv="expires"content="Tue,20Aug199614:25:27GMT">refresh指定该页面的刷新时间，做Web聊天室时常用。http-equiv可以使Web服务器在HTTP响应时生成相应的HTTP题头。

2.

设置层叠样式表单：<style>…</style>，详细内容见CSS一节。

3.设置脚本：<script>…</script>，内容是一段脚本程序。如果是全局变量或函数的定义，最好放在<head>…</head>之间。可设如下属性：language可以设为javascript、jscript、vbscript等。

4.设置注释：<!--…-->，浏览器不解释显示其中的内容。例如：<!--本句不会被解释显示-->5.设置主体：<body>…</body>，所有要显示的页面元素都要包含在主体内。可设以下属性：

bgcolor设置页面背景颜色。HTML中的颜色值以6位十六进制数#rrggbb表示，分别表示红、绿、蓝三原色；或者用以下单词表示：aqua、black、blue、fuchsia、gray、lime、marroon、navy、olive、purple、red、silver、yellowbackground设置页面的背景图片的URL。bgproperties取fixed值时设置背景不随滚动条滚动，不设此属性时背景随滚动条滚动。text设置页面非超链接文字基本颜色。例如：<bodybgcolor="#ffffff"background="litchi.jpg"bgproperties="fixed"text="#00ff00">…</body>

6.设置超链接：<a>…</a>。解释：a（anchor，锚），href（hypertextreference）。可设以下属性：

href设置URL，格式为"[:port]/path/"http可以换成其他协议，例如等。也可以使用相对路径（相对于本网页路径的文件路径）。链接的目标可以为任何类型的文件（例如可以为音视频文件）。目标文件如果不能显示，就会出现下载对话框。target显示链接的窗口或框架，可取以下值：_blank在新窗口中打开超链接_self在本窗口或本框架中打开超链接_parent在上一级框架中打开超链接_top在整个浏览器窗口中打开超链接

name其值为锚点的标识例如：<ahref=target=“_blank”>兰州大学</a><ahref=“mailto:”>蔡川</a><aname="anchorname"></a>，功能是设置超链接的定位点。<ahref="#anchorname">jumptopoint</a>，功能是跳转到URL指定的页面中标有<aname="point">…</a>的地方。

7.设置水平线：

<hr>，可设以下属性：

align设置水平线的位置，align的参数有left、center、right。width设置水平线的宽度，可以用百分数，也可以用像素数。size设置水平线的粗细。color设置水平线的颜色。noshade无取值，设置为无阴影。例如：<hralign="center"width="100"size="5"color="#000000"noshade>

8链入图象的基本语法<imgsrc=#>#=图象的URL<imgalt=#>#=在浏览器尚未完全读入图象时，在图象位置显示的文字。<imgsrc="f.gif"alt="MYFACE:-)">

看详细点：9．标题字体<h#>...</h#>#=1,2,3,4,5,6<h1>今天天气真好！</h1>

今天天气真好！<h2>今天天气真好！</h2>

今天天气真好！<h3>今天天气真好！</h3>今天天气真好！<h4>今天天气真好！</h4>今天天气真好！<h5>今天天气真好！</h5>今天天气真好！<h6>今天天气真好！</h6>今天天气真好！10．设置基本字体：<basefont>，属性设置与下面的<font>完全相同，常用来设置缺省字体。

11．设置字体：<font>…</font>可设以下属性：size设置文字的大小，可取1、2、3、4、5、6、7。color设置文字的颜色。face设置文字的字体列表，第一种字体是首选的，如果用户机器上没有第一种字体，就用第二种字体显示，依次类推。如果列表中的字体都没有，就用用户机器上的默认字体显示。例如：<fontsize=“7”color=“ff0000”face=“楷体_GB2312,宋体”>兰州大学</font>

12．设置物理字体：<b>…</b>设置标记间的文字为粗体（boldface）。<i>…</i>设置标记间的文字为斜体（italics）。<u>…</u>设置标记间的文字带下划线（underline）。<sup>…</sup>设置标记间的文字为上标（superscript）。<sub>…</sub>设置标记间的文字为下标（subscript）。<s>…</s>设置标记间的文字带删除线（strike）。<tt>…</tt>设置标记间的文字为电传打字机体（typewriter）。例如无限风光在险峰<br><b>无限风光在险峰</b><br><i>无限风光在险峰</i><br><u>无限风光在险峰</u><br>无限风光<sup>在险峰</sup><br>无限风光<sub>在险峰</sub><br><s>无限风光在险峰</s><br><tt>无限风光在险峰</tt>

13．设置逻辑字体：<em>…</em>一般强调（emphasis），斜体<strong>…</strong>特别强调，黑体<code>…</code>表示外部程序代码，字体变细变轻<samp>…</samp>表示例子，字体变细变轻<kbd>…</kbd>用户键入的文字，字体变细变轻<cite>…</cite>表示一段引用的文字，斜体。多用于书名、电影名等。<small>…</small>字体变小<big>…</big>字体变大例如：无限风光在险峰<br><em>无限风光在险峰</em><br><strong>无限风光在险峰</strong><br><code>无限风光在险峰</code><br><samp>无限风光在险峰</samp><br><kbd>无限风光在险峰</kbd><br><cite>无限风光在险峰</cite><br>无限风光<small>在险峰</small><br>无限风光<big>在险峰</big>

14．设置字符实体：计算机的软硬配置可能让人无法通过简单方法输入Unicode字符。因此，SGML提供了一种与字符编码无关的机制，可以用来指定文档字符集中的任何字符。这种机制就是字符实体(characterentities)，用它可来表示一些保留字符，其中一种方式可采用命名字符引用（namedcharacterreference）,以“&”开始，以“;”结束。如："<"字符可用"<"表示；">"字符用">"表示；"&"可用"&"表示；无间断空格可用" "表示。

15．设置一个段落：<p>…</p>，将标记间的文字设置为一个新的段落。可设以下属性：align设置段落的对齐方式，可取left、center、right。例如：<palign="center">段落示列</p><p>这是第一段</p><p>这是新的一段</p>

16．设置居中显示：<center>…</center>，设置标记间的文本或图像居中显示。例如：<center>兰州大学</center>

17．设置换行符：<br>，强制进行换行操作。例如：第一行<br>新起一行移动的文本看看具体的例子22.设置无编号列表：<ul>…</ul>ul是unorderedlist的缩写。可设以下属性：type取值可以是disc、square、cicle作为列表符号。例如：<ultype="square"><li>第一项</li><li>第二项</li><li>第三项</li></ul>23.设置有编号列表：<ol>…</ol>

ol是orderedlist的缩写。可设以下属性：type取值可以是1、a、A、i、Istart指定序号的起始值，只能取数字。例如：<oltype="a"start="3"><li>第一项</li><li>第二项</li><li>第三项</li></ol>

25.设置表格：<table>…</table>,可设以下属性：align设置表格位置，可以为left、center、right。width设置表格的宽度。height设置表格的高度。border设置表格外框的粗细。bordercolor设置表格外框的颜色。frame设置外边框，可以取如下值：box（显示全部边框），void（不显示边框），hsides（仅显示上下水平边框）。rules设置内边框，可以取如下值：all（显示所有内边框），rows（显示行分割线），cols（显示列分割线），none（不显示内边框）。cellspacing设置两个单元格之间的间距。cellpadding设置单元格内文字与单元格边框的间距。background设置表格的背景图像的URLbgcolor设置表格的背景颜色

<caption>…</caption>设置表格标题。可设以下属性：align可取top（标题在表格上方）、bottom（标题在表格下方）。<tr>…</tr>设置表格行。可设以下属性：（设置该行各单元格内容的对齐方式）bgcolor设置表格行的背景色。align设置水平对齐方式，可取left、center、right。valign设置垂直对齐方式，可取top、middle、bottom。<td>…</td>设置单元格内容，可设以下属性：width单元格宽度。height单元格高度。rowspan单元格占用表格行数。colspan单元格占用表格列数。background设置单元格背景图像bgcolor设置单元格背景色。

border设置单元格边框粗细。（不好用）align设置内容水平对齐方式，可选left、center、right。valign设置内容垂直对齐方式，可选top、middle、bottom。<th>…</th>设置表格头单元格内容，以粗体显示。可设属性同<td>…</td>。

例如：<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"bgcolor="#FFC4E1"bordercolor="#0000FF"><captionalign="top">电信学院学生名单</caption><trbgcolor="blue"><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>王大鹏</td><td>男</td><td>电子工程</td></tr><tr><td><fontcolor="red">李红艳</font></td><td>女</td><td>计算机科学与技术</td></tr><tr><td>张剑</td><td>男</td><td>自动化</td></tr></table>例如：<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"bgcolor="#FFC4E1"bordercolor="#0000FF"><tr><td>第一列第一栏</td><tdcolspan="2">第一列之第二栏及第三栏</td></tr><tr><tdrowspan="2">第二列及第三列之第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td></tr><tr><td>第三列第二栏</td><td>第三列第三栏</td></tr></table>

<frameset>可以嵌套。可设以下属性：rows纵向分割的多重框架的高度列表，可以是像素数、百分数，也可以用*号代替屏幕的剩余部分。高度之间以逗号分割。cols横向分割的多重框架的宽度列表。<frame>设置框架单元，可设以下属性：name框架名称src框架内显示文件的URLframeborder可取yes或1（有边框）、no或0（没有边框）scrolling可取yes（有滚动条）、no（无滚动）、auto（自动），缺省值为auto。noresize不可改变框架大小，无取值<noframe>…<noframe>设置不能显示框架时的显示文字。26.设置框架：<frameset>...</frameset>例如：<html><head><title>信息学院</title></head><framesetrows="20%,80%"><framename="frame1"src="top.htm"><framesetcols="20%,80%"><framename="frame2“src="left.htm“scrolling=nonoresize><framename="frame3"src="right.htm"noresize></frameset><noframe>您的浏览器不支持框架显示!</noframe></frameset></html>用来嵌入javaapplet。可设以下属性：nameapplet标识codebaseclass文件的基地址，不包含最终的class文件名。code相对于codebase的class文件路径，包含最终的class文件名。width显示区的宽度(像素)height显示区的高度(像素)altapplet不能显示时显示的替代文本align对齐方式，可取left、center、righthspace与周围内容的水平间距vspace与周围内容的垂直间距<paramname=参数名value=对应的参数值>设置外部控制参数。例如：<appletname="test"code="test.class"width="320"height="240"><paramname="text"value="thisisatest"></applet>

27.设置applet容器：<applet>…</applet>28.设置媒体容器：<embed></embed>(NETSCAPE)可嵌在网页内显示嵌入的对象。可用<param>设置外部控制参数，方式同<applet>…</applet>。<embed>可设以下属性：name设置嵌入的对象名称，以便脚本控制src设置嵌入的对象的URLpluginspage设置插件程序说明页的URLAlign嵌入的对象位置，可取left、right、top、middle、bottomwidth设置控制面板显示宽度height设置控制面板显示高度hidden可取true（不显示控制面板）、false（显示控制面板）autostart是否自动播放，可取true、falseloop设置是否循环播放，可取true、false例如：<embedsrc="music.mid"autostart="true"loop="true"hidden="false"></embed>29.设置媒体容器：<object>…</object>(W3C)可用<param>设置外部控制参数，方式同<applet>…</applet>。<object>可设以下属性：classid设置对象的标识codebase设置对象的代码基URLcodetype设置对象的媒体类型data设置数据文件的URLtype设置数据文件的媒体类型align对齐方式，可取left、right、top、

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论