课件-p课程大纲_第1页
课件-p课程大纲_第2页
课件-p课程大纲_第3页
课件-p课程大纲_第4页
课件-p课程大纲_第5页
已阅读5页,还剩33页未读 继续免费阅读

下载本文档

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

文档简介

课程大纲HTML概述HTML语法HTMLHTML概述:用于展示特定内容的相关网页的集合。网页:网页是构成的基本元素。网页是html语言编写的文件,存放在计算机中。当你在浏览器输入后,网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前网页内容分类:图、文、声、像、表格、表单、超HTML概述HTML:Hyper

Text

Mark-up

Language超文本标记语言:它属于计算机语言,是描述网页的一种语言。HTML网页文件的结构:包括头部(head)、主体(body)两大部分,其中头部描述浏览器所需要的信息,而主体则包含网页中要显示的具体内容。HTML编写的网页文件格式为html和htm。HTML网页文件可以使用记事本编辑。专业的编辑工具:Dreamweaver。HTML基本结构<html>(网页)<head>(网页头部)<title>(网页标题)(显示在浏览器标题栏的网页标题)</title></head><body>(主体部分)(显示在浏览器窗口网页的主体部分)</body></html>基本语法:<

名>文本</

名>例如:<title>网页标题</title><

属性名="属性值">文本</

名>例如:<body

bgcolor="red">背景颜色</body>和单

。成对使用如果属性相同不会<

名>例如:<hr>(水平分隔线)说明:名不区分大小写。主要分为双时可以相互嵌套,不能交叉嵌套。嵌套的,属性不同,就近选择。HTML语法HTML分类:HTML基础HTMLHTML声像HTML表格HTML表单HTML超HTML框架HTML基础<Hn></Hn><p>文字内容</p><br>标题段落换行水平分隔线段落居中文本属性<hr><center>文字内容</center><font>文字内容</font>HTML基础标题语法:<Hn>标题文字</Hn>其中:n

=1、2、3、4、5、6属性:align:设置对齐方式,取值left

|

right

|

center,默认left。<Hn

align="对齐方式">标题文字</Hn>说明:标题文字被标题

标记后字体加粗加大)标题

有自动换行效果(类似于<br><H1>:字体最大<H6>:字体最小HTML基础段落语法:<P>文字内容</P>属性:align:设置对齐方式,取值left

|

right

|

center,默认left。<P

align="对齐方式">标题文字</P>说明:将被一对段落

标记的内容作为一个单独的段落HTML基础换行语法:<br>这是第一行<br>

这是第二行说明:将该标记之后的内容另起一行开始HTML基础水平分隔线语法:<hr>属性:size:设置高度(粗细),默认为2px(像素)width:设置长度,数值可以取像素px和百分比align:设置对齐方式,取值left

|

right

|

center,默认left。color:设置颜色<hr

size="8"

width="500"

align="center"

color="red">说明:水平分隔线单独一行HTML基础段落居中语法:<center>文字内容</center><center><p>这是第一行</p><p>这是第二行</p></center>说明:被段落居中标记的内容都会居中显示HTML基础练习:HTML基础文本属性语法:<font>文字内容</font>属性:color:设置颜色size:设置字体大小,取值1-7,默认取值3face:设置字体,例如:黑体,宋体<font

color="red"size="5"face="黑体">文字内容</font>说明:文本属性

一般和其他

嵌套使用HTML语法:<imgsrc="

路径">属性:语法:<imgsrc="

路径">src:alt:width:路径设置

无法正常显示时所显示的文字设置图像的宽度height:设置图像的高度border:设置边框的粗细<img

src=""

alt=""

width=""

height=""

border="">说明:为单

,没有结束在网页中HTML声像语法:<embed

src="声像路径">属性:width:

设置影像的宽度height:设置影像的高度<embed

src=""

width=""

height="">语法:<bgsound

src="声音路径">说明:bgsound背景音乐使用embed声像使用bgsound背景音乐支持IE浏览器声音带有音乐栏声音没有音乐栏HTML表格表格

:表格的基本结构表格表格行<table><tr>表格行/列标题表格单元格<th><td>HTML表格1.

表格的基本结构<table><tr><th>第一行第一个单元格

</th><th>第一行第二个单元格

</th>……</tr><tr><td>第二行第一个单元格</td><td>第二行第二个单元格

</td>……</tr></table>HTML表格表格语法:<table></table>定义整个表格,表格中的所有内容都必须位于<table>和</table>之间。属性:①bordercolor:设置表格边框颜色②border:设置边框的粗细③bgcolor:设置背景颜色④Width:

设置表格列宽,可取像素值或百分比值⑤height:

设置表格行高,可取像素值或百分比值HTML表格表格行语法:<tr></tr>定义表格的一行,行内是单元格属性:①align: 行内容的水平对齐方式:left(默认)

|

center

|

right②valign:行内容的垂直对齐方式:top

|

middle(缺省)|

bottom③height:行高(像素)④bgcolor:行的背景颜色⑤bordercolor:行的边框颜色HTML表格表格行列标题单元格语法:<th></th>定义作为标题的单元格属性:①rowspan:行合并,其取值表示纵向方向上合并的行数②colspan:列合并,其取值表示横向方向上合并的列数③align:标题单元格内容的水平对齐:left|

center

(默认)

|right④valign:标题单元格内容的垂直对齐:top

|

middle(缺省)|

bottom⑤width:设置单元格宽度(像素)⑥height:设置单元格高度(像素)HTML表格表格单元格语法:<td></td>构成表格的基本元素属性:①rowspan:行合并,其取值表示纵向方向上合并的行数②colspan:列合并,其取值表示横向方向上合并的列数③align:单元格内容的水平对齐:left(默认)

|

center

|

right④valign:单元格内容的垂直对齐:top

|

middle(缺省)|

bottom⑤width:设置单元格宽度(像素)⑥height:设置单元格高度(像素)⑦bgcolor:设置背景颜色HTML表格练

:HTML表格练习2:HTML表单•表单?表单是指用于实现客户端(网页浏览者)与服务器端(网页拥有者)之间信息交互的一种页面元素,在WWW上它被广泛用于各种信息的搜索和反馈。常见的表单有用户登录、搜索引擎、 、用户留言等。简单来说,就是客户端通过表单向服务器发送数据信息。表单包含:文本框、 框、单选框、复选框、下拉选择框、文本域、提交按钮、重置按钮、自定义按钮和文件上传框。HTML表单表单语法:<form></form>属性:action:该属性表示服务器端程序的URLmethod:数据的发送方式。get

|

post–

get:发送较少数据(256byte),数据经编码后显示在url中。»

例如:url/userinfo?username=

&password=123="_blank">–

post:数据长度

,且数据不会显示在url中。:页面的打开方式_blank(新窗口)<from

action="Test.html"

method="get"<input

type="

"></input><input

type="

"></input><from>HTML表单Input(位于<form>..</form>之中,用于接收用户输入的控件)语法:<input

type="">属性:type:text(单行文本框)password(

框)radio(单选按钮)checkbox(复选框)file(文件域)hidden(隐藏域)submit

(提交按钮)reset(重置按钮)button(自定义按钮)HTML表单Input示例:HTML表单多行文本框语法:<textarea>…</textarea>属性:name:文本框名称。rows:最大可视行数。cols:最大可视列数。示例:<textarea

name="名称"rows=“5”cols=“15”>内容

</textarea>HTML表单列表选择框语法:<select>..</select>多行文本框语法:<option>..</option>属性:selected:选项默认被选中。–

示例:<select><option

selected>…</option><option>…</option><option>…</option></select>HTML表单练习:HTML超超语法:<a

href=“url

”>文字(或属性:)</a>href:用来指定超

目标——

、文档、音乐、

、邮箱name:书签名。:指定超

的目标框架名。–

说明:鼠标点击“文字(或)”时,根据“url

”内容的不同,会发生下面3种情况:①href="新文档名":打开一个新的HTML文档。②href="新文档名#point":打开一个新的HTML文档并跳转到新文档中已经定义好的书签。point处显示。

point是在③href="#point":跳转到本文档的签。提示:href

邮箱需要电脑安装有point处显示。

point是在本文档中已经定义好的书Office

Outlook邮箱HTML超练习:通过超通过超通过超通过超通过超打开一张。打开一个文本文件。打开一个声音文件。打开一个h打开一个本地网页。。6.在本地网页一个底部书签,通过超跳转到书签位置。HTML框架框架作用:框架是用来提高网页导航性能的

式。框架用来划分浏览器窗口以使窗口中能够容纳多个独立页面。<frameset>

</frameset>功能:设置框架集网页,结束标记不能省。属性:rows:设置横向框架的数量和高度。cols:设置纵向框架的数量和宽度。属性值:像素和百分

温馨提示

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

评论

0/150

提交评论