第2章 HTML语言课件_第1页
第2章 HTML语言课件_第2页
第2章 HTML语言课件_第3页
第2章 HTML语言课件_第4页
第2章 HTML语言课件_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

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

文档简介

JavaScript课程开发组制作第2章HTML语言本章要点第2章HTML语言HTML的基本概念HTML文档的常用标签表单及表单元素框架标签的应用实例1：静态网页的编辑实例2：客户留言表单编辑实例3：框架编辑HTML页面2.1.1HTML的简介

2.1HTML的基本概念

HTML英文全称是HyperTextMarkupLanguage，直译为超文本标记语言。它是全球广域网描述网页内容和外观的标准。2.1.2HTML的结构

<html>

//文件开始标记

<head>

//文件头开始的标记……文件头的内容

</head>

//文件头结束的标记

<body>

//文件主体开始的标记……文件主体的内容

</body>

//文件主体结束的标记</html>//文件结束标记

演示2.1.3HTML的标记

通常有尖括号“<”、“>”以及其中所包容的标记元素组成。

<html>标记：HTML文档的第1个标记，它通知客户端该文档是HTML文档，类似地，结束标记</html>出现在HTML文档的尾部。<head>标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，</head>指明文档标题部分的结束。<body>标记：用来指明文档的主体区域，该部分通常包其它字符串，例如标题、段落、列表等。</body>指明主体区域的结束。在HTML中，结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套，也可以放置各种属性。标记是不区分大小写的，<Head>与<HEAD>的写法都是正确的。2.1.3HTML的标记

标记常用的形式：

单标记有一对标记构成

例如：换行标记<br>

水平分割尺<hr>双标记有一对标记构成

例如：<strong>第一</strong>标记属性标记的属性信息

例如：

<hrcolor="#FF0000"size="1"width="200">

其中，color属性表示颜色，size表示大小为1width表示宽度为200演示2.2.1<head>标签

2.2HTML的常用标签

<head>为文档的头标签。指html代码的<head>和</head>之间的内容。1）注释

<!---版权所有：淮安市维达科技有限公司--->2）网页显示字符集

简体中文：<metahttp-equiv="Content-Type"content="text/html;charset=gb_2312"/>3）网页制作者信息

<metaname="author"content="李四">4）网站描述

<metaname="description"content="电子屏幕制作专家">2.2.1<head>标签

5）搜索关键字<metaname="keywords"content="LED，字幕屏">6）网页的css规范<linkhref="style/style.css"rel="stylesheet"type="text/css">7）网页标题<title>欢迎访问淮安市维达科技有限公司！</title>8）自动跳转<metahttp-equiv="refresh"content="2;url=">9）调用Javascript<scriptlanguage="javascript"src="menu.js"></script>

2.2.2<body>标签

属性描述text设置页面文字颜色bgcolor设置页面的背景颜色link设置页面默认超链接的颜色alink设置鼠标单击时超链接的颜色vlink设置访问过的超链接的颜色background设置页面的背景图片bgproperties设置页面背景图片为固定，不随页面滚动topmargin设置页面上边距leftmargin设置页面左边距bottommargin设置页面下边距rightmargin设置页面右边距<body>为文档的主体。其他属性如下：2.2.3文字与段落1.标题标记<hn>

<h1>…</h1>第一级标题

<h2>…</h2>第二级标题2.换行<br>3.段落标记<p><p>为段落开始标记，</p>为结束标记，</p>是可以省略。

属性说明class文本的样式控制类dir文字方向title标题style行内样式信息align段落对齐方式2.2.3文字与段落4.文字的字体和样式

<font>标签的属性如表。

属性说明color字体颜色face字体名称Size字体大小HTML提供了一些标记来实现这些效果，常用的文字样式标记。属性说明示例<B>…</B>粗体HTML文本示例<I>…</I>斜体HTML文本示例<U>…</U>加下划线HTML文本示例<EM>…</EM>表示强调，一般为斜体HTML文本示例<strong>…</strong>表示强调，一般为粗体HTML文本示例2.2.3文字与段落5.水平分隔线标签<hr>

<hr>是水平线标签，是单标签，用于段落与段落之间的分隔，使文档结构清晰，使文字的编排更整齐。属性参数功能单位默认值size设置水平分隔线的粗细pixel2width设置水平分隔线的宽度pixel、%100%alignleftcenterright设置水平分隔线的对齐方式centercolor设置水平分隔线的颜色blacknoshade设置水平分隔线的3D阴影2.2.3文字与段落6.特殊字符

在HTML文档中，有些字符无法直接显示出来，例如“©”。使用特殊字符可以将键盘上没有的字符表达出来，HTML常见特殊字符及代码如表所示。

特殊字符字符代码数字代码<<<>>>&&&“""©©©®®®空格

2.2.4图片标签<img>网页中插入图片用单标签<img>，例如：<imgsrc="images/grjs.jpg"width="260"height="180"><img>标签属性如表所示。

属性描述src图像的URL的路径alt提示文字width宽度，通常只设为图片的真实大小以免是真height高度，通常只设为图片的真实大小以免是真align图像和文字之间的对齐方式值可以是top、middle、bottom、left、rightborder边框hspace水平间距vlign垂直间距2.2.4图片标签<img>示例2-1：书法家庄辉个人介绍项目演示<imgsrc="images/logo.jpg"width="800"height="65"><imgsrc="images/grjs.jpg"align="left"hspace="10px"width="260"height="180">

2.2.5播放音频与视频

网页中插入音视频使用标签<embed>，例如：<embedsrc=“音乐或视频文件地址“></embed><embed>标签属性如表所示。

属性含义src="filename"设定音乐文件路径autostart=true/false是否要音乐或视频文件传送完就自动播放，TRUE表示要，FALSE表示不要，默认为FALSEloop=true/false设定播放重复次数，Loop=6表示重复6次，TRUE表示无限次播放，FALSE表示播放一次即停止starttime="分：秒"设定乐曲的开始播放时间，如20秒后播放可写为starttime=00:20volume=0~100设定音量的大小。默认设置为系统的音量widthheight设置控制面板的大小hidden=true隐藏控制面板2.2.5播放音频与视频

示例2-2：插入音乐

项目演示<embedsrc=sound/gsls.mp3width=300height=100loop="false"></embed>

2.2.5播放音频与视频

示例2-3：插入视频

项目演示

<embedsrc="movie/1.wmv"width="448"height="408"></embed>2.2.5播放音频与视频

示例2-4：插入Flash动画项目演示<embedsrc="flash/banner.swf"width="996"height="185"loop="true"></embed>

2.2.6列表

1.无序列表<ul>

无序列表标签是<ul></ul>，无序列表指没有进行编号的列表，每一个列表项前使用<li>。<li>的属性type有三个选项：disc：实心圆；circle：空心圆；square：小方块。实例代码：<ul> <litype=disc>第一项</li>

<litype=circle>第二项</li>

<litype=square>第三项</li></ul>注意：

</li>可以省略2.2.6列表

2.有序列表<ol>

有序列表标签是<ol></ol>，有序列表指带有前后顺序的编号的列表。如果插入和删除一个列表项，编号会自动调整。顺序编号的设置是由<ol>的两个属性type和start来完成的。start=编号开始的数字，如start=2则编号从2开始，type=用于编号的数字、字母的类型，如type=a，则编号用英文字母。

type类型描述type=1表示列表项目用数字标号（1,2,3…）type=A表示列表项目用大写字母标号（A,B,C…）type=a表示列表项目用小写字母标号（a,b,c…）type=Ⅰ表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表项目用小写罗马数字标号（ⅰ,ⅱ,ⅲ…）2.2.6列表

2.有序列表<ol>

实例代码：<oltype=“A”start=2> <li>第一项</li>

<li>第二项</li>

<li>第三项</li></ol>注意：

</li>可以省略2.2.6列表

3.嵌套列表将一个列表嵌入到另一个列表中，作为另一个列表的一部分，称为嵌套列表。

<ultype=square>

<li>图像设计软件</li>

<ol><li>Photoshop</li><li>Illustrator</li><li>Freehand</li></ol><li>网页制作软件</li><li>动画制作软件</li>

<ol><li>Flash</li><li>LiveMotion</li>

</ol></ul>项目演示2.2.7表格

1.表格的基本结构

用HTML语言制作表格的基本结构是：<table>…</table>定义表格<caption>…</caption>定义标题<tr>…</tr>定义表行<th>…</th>定义表头<td>…</td>定义表元（表格的具体数据）

类型描述1数字A字母<table><caption>表格示意图<tr>…</tr><th>…</th><td>…</td>2.2.7表格

1.表格的基本结构

<table>属性

属性用途bgcolor设置表格的背景色border设置边框的宽度，若不设置此属性，默认值为0bordercolor设置边框的颜色bordercolorlight设置边框明亮部分的颜色（border的值大于等于1时才有用）bordercolordark设置边框昏暗部分的颜色（border的值大于等于1时才有用）cellspacing设置表格单元格之间的空间大小celpadding设置表格的单元格边框与其内部内容之间的空间大小width设置表格的宽度，单位用绝对像素值或总宽度的百分比1.表格的基本结构

<tablewidth="180"border="2"cellpadding="1"cellspacing="1">

<trbgcolor="#CCCCCC"> <th>姓名</th> <th>学号</th> <th>年龄</th></tr><tr> <td>王刚</td> <td>33081001</td> <td>20</td></tr><tr> <td>李明</td> <td>33081002</td> <td>21</td>

</tr></table>

2.2.7表格

2.表格的尺寸设置

一般情况下，表格的总长度和总宽度按需自动调整，如果需固定表格的大小，HTML代码为：

<tablewidth="n1"height="n2">width和height属性分别制定表格固定的宽度和高度，n1和我n2可以用像素来表示，也可以用百分比来表示。

一个宽为200像素、高为100像素的表格代码表示为：

<tablewidth="200"height="100">

一个宽为20%，高为10%的表格。代码为：

<tablewidth=“20%”height=“10%”>

2.2.7表格

3.表格内文字的对齐与单元格合并表格中数据的排列方式有两种，分别是水平和垂直排列。水平排列是用align属性来设置而垂直排列则由valign属性来设置水平排列的位置可分为三种：居左(left)、居中(center)、居右(right)垂直排列基本上比较常用的由4种：上齐（top）、居中（center）、下齐（bottom）和基线（baseline）设置<td>标签的colspan属性用来设置表格的单元格跨占的列数（缺省值为1）。设置<td>标签的rowspan属性用来设置表格的单元格跨占的行数（缺省值为1）。<tablewidth="327"border="1"><tr><tdwidth="76"rowspan="2">学生</td><tdwidth="69">姓名</td><tdwidth="79">学号</td><tdwidth="75"rowspan="2">共青团员</td></tr><tr><td>王刚</td><td>33081001</td></tr></table>

单元格合并2.2.8超链接

1.创建内部超链接

1.链接到同一目录中的网页文件链接到同一目录内的网页文件的格式为：<ahref="目标文件名.html">热点对象</a>注：目标文件名是链接所指向的文件。2.链接到下一级目录中的网页文件链接到下一级目录中网页文件的格式为：<aherf="子目录名/目标文件名.html">热点对象</a>3.链接到上一级目录中的网页文件链接到上一级目录中网页文件的格式为：<aherf="../目标文件名.html">热点对象

</a>4.链接到同级目录中的网页文件链接到同级目录中网页文件的格式：<ahref="../子目录名/目标文件名.html">热点对象</a>表示先退到上一级目录中，然后再进入到目标文件所在的目录。2.2.8超链接

2.创建文字超链接

可以使用“属性”面板的文件夹图标或超链接文本框创建从文字到其它文档的链接。创建文字超链接的方法如下。在“文档”窗口的设计视图中选择文字。打开“属性”面板，然后执行下列操作之一：单击“链接”文本框右侧图标，浏览并定位一个超链接文件。在“链接”文本框中输入文档的路径和文件名。使用“指向文件”按钮，将超链接目标指向“文件”面板中的页面超链接的基本结构：<ahref=“目标文件名.html”>文本对象</a>教师演示2.2.8超链接

3.创建图片超链接

1.图像超链接如果创建的是整个图像超链接，其方法大致和创建文字超链接一致，区别在于选中的超链接热点对象从原来的文字改变为图像。超链接的基本结构：<ahref=“目标文件名.html”>图像标签</a>2.图像热点超链接图像热点也叫图像地图或图像映射，是指在一幅图像中定义若干个区域（这些区域被称为热点），每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。教师演示2.3表单及表单元素

1.表单的定义表单是页面上的一块特定区域，这块区域有一对<form>标签定义，这一步有两作用：一方面，限定表单的范围，其它表单对象都要插入表单之中，单击“提交”按钮时，提交到服务器的也就是表单范围之内的内容；另一方面，携带表单的相关信息，如服务器端处理表单的脚本的程序位置，提交表单的方法，这些信息对于浏览者是看不到的，但是对于处理表单却有着重要的作用。2.3表单及表单元素

1.表单的定义基本语法：<formaction=urlmethod=get/postname=value>…</form>

语法解释：表单里的action就指明了处理表单信息的文件。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送（可以在地址栏中看到）。post则将表表单的内容通过http发送，在地址栏中看不到表单的提交信息。如果只是取得和显示数据，使用get；涉及到数据的保密和更新使用post。

2.3表单及表单元素

2.表单控件属性说明inputtype="text"单行文本输入框inputtype="password"密码输入框（输入的文字用*表示）inputtype="radio"单选框inputtype="checkbox"复选框select列表框textarea多行文本输入框inputtype="submit"将表单内容提交给服务器的按钮inputtype="reset"将表单内容全部清除，重新填写的按钮表单常用控件2.3表单及表单元素

2.表单控件表单定义的基本语法：<input属性1属性2…>属性说明name控件名称type控件的类型，如radio、text等align指定对齐方式，可取top、bottom、middlesize指定控件的宽度value用于设定输入默认值maxlength在单行文本的时候允许输入的最大字符数src插入图像的地址表单常用属性2.3表单及表单元素

2.表单控件1．单行文本输入框（inputtype="text"）单行文本输入框允许用户输入一些简短的单行信息，如用户姓名。基本语法：<inputtype="text"name=field_namemaxlength=valuesize=valuevalue=field_value/>2．密码输入框（inputtype="password"）

密码输入框主要用于保密信息的输入，如密码。因为用户输入的时候，显示的不是输入的内容，而是*。基本语法：<inputtype="password"name="field_name"maxlength="value"size="value"/>教师演示2.3表单及表单元素

2.表单控件3．单选框（inputtype="radio"）选择控件通常分为两种，单选框和复选框。使用单选框，让用户在一组选项里只能选择一个，选项以一个圆框表示。基本语法：<inputtype="radio"name="field_name"value="value"checked>4．复选框（inputtype="checkbox"）复选框允许用户在一组选中选择多个，用checked表示缺省已选的项。基本语法：<inputtype="checkbox"name="field_name"value="value"checked>教师演示5．列表框（select）

常用的列表框分为：下拉列表框与列表框两种。通过<select>和<option>标签设计下拉列表框和列表框效果。基本语法：

<selectname="name"size="value"multiple><optionvalue="value"selected>选项1</option><optionvalue="value">选项2</option>…</select>属性说明name菜单和列表的名称size显示选项的数目，当size为1时，为下拉列表框控件multiple列表中的项目多选，用户用<Ctrl>键来实现多选value选项值selected默认选项教师演示教师演示6．多行文本输入框（textarea）

多行文本输入框（textarea）主要用于输入较长的文本信息。基本语法：<textareaname="textfield"cols="value"rows="value"value="value">…</textarea>属性说明name多行输入框的名称cols多行输入框的列数rows多行输入框的名称value多行输入框的默认值2.3表单及表单元素

2.表单控件教师演示7．普通按钮

表单中的按钮分为三类：普通按钮、提交按钮、重置按钮多行文本输入框（textarea）主要用于输入较长的文本信息。其中普通按钮本身没有指定特定的动作，需要配合JavaScript脚本来进行表单处理。基本语法：<inputtype="button"name="value"id="button"value="value">2.3表单及表单元素

2.表单控件教师演示8．提交按钮

通过提交按钮可以将表单中的信息提交给表单中的action所指向的文件。

基本语法：<inputtype="submit"name="value"id="button"value="提交">语法解释：单击提交按钮时，可以实现表单的提交。value的值代表显示在按钮上面的文字。9．重置按钮通过重置按钮将表单内容全部清除，恢复成默认的表单内容设定，重新填写。基本语法：<inputtype="reset"value="重置">2.3表单及表单元素

提交按钮示例

项目演示<formaction="/s"target="_blank"><inputtype="text"size=30maxlength="100"name="word"><inputtype="submit"value="百度一下"></form>10．图片提交按钮

图片提交按钮是指可以在提交按钮位置上放置图片，这幅图片具有提交按钮的功能。基本语法：<inputtype="image"src="图片路径"value="提交"name="value">语法解释：type=“image”相当于inputtype=“submit”，不同的是,inputtype=“images”以一个图片作为表单的按钮；src属性表示图片的路径；alt属性表示鼠标在图片上悬停时显示的说明文字；name为按钮名称。2.3表单及表单元素

2.表单控件教师演示图片提交按钮示例

项目演示<formaction="/s"target="_blank"><inputtype="text"size=30maxlength="100"name="word"><inputtype=“images“src=“images/web.jpg”value="百度一下"></form>2.4框架标签的应用

框架实际上有两部分组成，即框架集与框架。所有的框架标记要放在一个HTML文档中，HTML页面的标签<body>被框架集标签<frameset>所取代，然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口页面属性。基本语法：<html><head></head><frameset><framesrc="url地址1"name="leftFrame"><framesrc="url地址2"name="mainFrame">...</frameset></html>src属性的每个URL值指定了一个HTML文件框架结构可以根据框架集标签<frameset>的分割属性分为三种：左右分割窗口、上下分割窗口、嵌套分割窗口。

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论