山西新华电脑学校提供网页设计之XHTML基础.docx

上传人:b****5 文档编号:6077356 上传时间:2023-01-03 格式:DOCX 页数:21 大小:23.91KB
下载 相关 举报
山西新华电脑学校提供网页设计之XHTML基础.docx_第1页
第1页 / 共21页
山西新华电脑学校提供网页设计之XHTML基础.docx_第2页
第2页 / 共21页
山西新华电脑学校提供网页设计之XHTML基础.docx_第3页
第3页 / 共21页
山西新华电脑学校提供网页设计之XHTML基础.docx_第4页
第4页 / 共21页
山西新华电脑学校提供网页设计之XHTML基础.docx_第5页
第5页 / 共21页
点击查看更多>>
下载资源
资源描述

山西新华电脑学校提供网页设计之XHTML基础.docx

《山西新华电脑学校提供网页设计之XHTML基础.docx》由会员分享,可在线阅读,更多相关《山西新华电脑学校提供网页设计之XHTML基础.docx(21页珍藏版)》请在冰豆网上搜索。

山西新华电脑学校提供网页设计之XHTML基础.docx

山西新华电脑学校提供网页设计之XHTML基础

一、XHTML基本知识

1、互联网基本知识:

因特网、Web、HTML

2、浏览器之争:

1、1994微软、网景自己做插件

2、万维网联盟(W3C)产生

W3C成员:

苹果公、Adobe公司、美国在线、Opera、微软公司、Google、Mozilla

标准推进速度慢

3、HTML3.2:

标准化的开始

4、HTML4和CSS

5、XML:

文档进行格式化,使用灵活

6、W3C用XML重写了HTML==xhtml

第一种称为过渡型(transitional),它允许使用废弃的标记(tag)

第二种称为严格型(strict),它禁止使用任何废弃的标记。

第三种是框架型(frameset),它允许使用废弃的标记和框架

3、准备工具

二、HTML的基本标记

1.HTML的基本结构

------根控制标记

-------头控制标记

标题-------标题标记

-------头控制标记(尾)

-------网页显示区域

(关闭标签)-------根控制标记(尾)

1、…根控制标记

开头和结尾

2、…头控制标记

1.标题声明</p><p>2.<meta>控制标记的动态文件转换声明</p><p>3.<base>超链接网址基准参考点</p><p>4.Javascript和VBScript程序</p><p>5.stylesheet可用来设置排版来的声明</p><p>6.<link>可引用外部文件,如CSS排版样本</p><p><title>…设置浏览器的标题

3、…页面可见内容

在写代码的是很最好成先成对编写,再添加内容

2、HTML控制标记的格式

(1).单一型,无属性值:

<标记名称>

如:


(2)单一型,有属性值的:

.<标记名称属性=”属性值”>

如:

(3)对称型,有属性值的:

.<标记名称>…

如:

(4).对称型,有属性值的:

<标记名称属性=”属性值”>…

如:

3.最常用的控制标记

(1).跳行

格式:


无属性设置

使用实例:


(2).段落

格式:

属性名称

属性值

说明

使用

align

left

左对齐

内容

center

中对齐

right

右对齐

段落距离比较大,而且有属性

(3)水平直线


属性名称

属性值

说明

使用

Size

像素

绝对设置,以数字表示,属性值越大,线越粗

百分比

相对设置,以%表示,属性值越大,线越粗

Width

像素

绝对设置,长度不会应视窗的改变而改变

百分比

相对设置,长度会随着视窗宽度而改变

Noshade

实体线

(4).向中对齐

(被废弃的标签)隐藏换行

格式:

(5).背景色与文字设置(body)

属性名称

属性值

说明

使用

bgcolor

颜色值

背景色

text

颜色值

文本颜色

leftmargin

像素

左间距

rightmargin

像素

右间距

topmargin

像素

上间距

bottommargin

像素

下间距

Link

Vlink

alink

6).标题文字设置

格式:

Title说明文字

属性名称

属性值

说明

使用

align

left

左对齐

dddd

center

右对齐

right

中对齐

(7).特殊字符设置

不换行空格 不

<<

>>

&&

“"

<;<;

(8)在HTML备注

格式:

--…-->

(9).实体字符控制标记

1.加粗

2.倾斜

3.删除线

4.下划线

5.电报

6.下标

7.上标

标签嵌套dasdad

(10).语意字符控制

1.

地址(倾斜)

2.大字

3.删除(删除线)

4....修改(下划线)

5.…小字

6.加强语气(加粗)

7....加强语气(倾斜)

(11).字体控制(被废弃的标签)

格式:

属性名称

属性值

说明

Size

0~7

字体大小

Color

英文或十六

文字颜色

Face

字体

字体

避免使用字体

Red#FFFFFF

(12).格式化

格式:

按照代码中的样式输出

4545

454

454

(13).引用文本

格式:

...

属性名称

属性值

说明

Cite

url

被引用地址

xfnfsanfsasdadadadaaaaaaaaaaaaaaaaaaaaasdasdasdasd

fsdfsdafsaf

sdfdsfdsfdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaasda

三、排列清单控制标记

1.无序号条例式清单

      无序条列清单的开始

    • 项目

    表示结束

  • 的属性

    属性名称

    属性值

    说明

    使用

    Type

    dise

    实心圆

      jjjj

      fdf

      fdfd

    circle

    空心圆

    square

    实心方块

    2.有序号条例式清单

        有序条列清单的开始

      1. 一个项目

      表示结束

        的属性

        属性名称

        属性值

        说明

        使用

        Type

        1

        1,2,3,4来表示

      1. daddas
      2. ddadsa

      a

      a,b,c,d来表示

      A

      A,B,C,D来表示

      i

      i,ii,iii来表示

      I

      I,II,III来表示

      3.无序列表和有序列表的结合应用

      4.叙述式清单

      叙述清单的开始

      一个项目(标题)

      一个项目下的更详细的内容(内容)

       

      1.1

      asadadas

      dasdadds

      2.1

      asadadas

      dasdadds

      四、表格

      1.表格的基本格式

      表格开始

      …行

      标题栏

      数据位

      表格结束

      2.

      标签下的常用属性

      属性名称

      属性值

      说明

      使用

      border

      像素

      边框

      ///I|/xhtml/agree.gif"bgcolor="#FF0000"border="1"bordercolor="#FFCCFF"cellpadding="2"cellspacing="20"height="20"width="400"summary="dsds">

      cellspacing

      像素

      绝对设置,填充

      百分比

      相对设置,填充

      cellpadding

      像素

      绝对设置,间距

      百分比

      相对设置,间距

      width

      像素

      绝对设置,宽度

      百分比

      相对设置,宽度

      height

      像素

      绝对设置,高度

      百分比

      绝对设置,高度

      Align(控制显示)

      left

      左对齐

      center

      中对齐

      right

      右对齐

      bgcolor

      十六

      背景色

      background

      表格背景图片

      summary

      表格数据说明

      bordercolor

      十六

      边框的颜色

      bordercolorlight

      优先级高于边框色

      亮边框

      bordercolordark

      暗边框

      3.

      标签下的边框设置(边框线不能为0)

      属性名称

      属性值

      说明

      frame

      Void

      不显表格的边线

      above

      显表格的上边线

      Below

      显表格的下边线

      Hsides

      显表格的上下边线

      Vsides

      显表格的左右边线

      Lhs

      显表格的左边线

      Rhs

      显表格的右边线

      border/box

      显表格的所有边线

      rules

      rows

      显横行的格框线

      cols

      显直行的格框线

      all

      显示全部格框线

      groups

      列组合水平部分

      none

      不显示任何格框线

      4.

      标签下的常用属性

      属性名称

      属性值

      说明

      使用

      width

      像素

      绝对设置,宽

      ///I|/xhtml/topcd2.jpg"bgcolor="#FF00FF"> 

        
        

      百分比

      相对设置,宽

      height

      像素

      绝对设置,高

      百分比

      相对设置,高

      bgcolor

      英文/十六

      背景色

      Align

      left

      左对齐

      center

      中对齐

      right

      右对齐

      Valign

      top

      顶对齐

      middle

      中对齐

      bottom

      低对齐

      Nowrap

      在单元格中换行

      5.拆分与合并单元格(td)

      属性名称

      属性值

      说明

      colspan

      数字

      水平和并

      rowspan

      数字

      垂直合并

      方法:

      先删除不用空格,在合并

      6.表格的结构化、直列化、标题

      (1).结构化格式:

      ……--------表头区

      ……--------表体区

      ……-------表尾区

       

         
         
         

      (2).直列化格式:

      ….列的颜色

      属性名称

      属性值

      说明

      使用

      align

      left

      左对齐

       

      个别直列设置col

      center

      中对齐

      right

      右对齐

      valign

      top

      顶对齐

      middle

      中对齐

      bottom

      右对齐

      bgcolor

      数字

      背景色

      span

      数字

      列数

      width

      像素/百分比

      宽度

      (3).表格的标题

      ….

      7.表格的嵌套

      五、图像

      1.背景图案的设置

      格式:

      2.将图片插入到网页中去

      格式:

      功能:

      将图片插入到网页中去,单一标签

      下的属性

      属性

      属性值

      说明

      使用

      Src

      URL

      图片来源

      Alt

      字符串

      图片说明

      width

      像素/百分比

      图片的宽度

      Height

      像素/百分比

      图片的高度

      border

      数字

      图象边框

      align

      left

      图象靠左,文字靠右

      right

      图片靠右,文字靠左

      top

      文字往上靠

      middle

      文字靠中

      bottom

      文字靠下

      vspace

      像素

      垂直上下两端与物件的距离

      usemap

      名称

      热点连接

      lowsrc

      URL

      低解析度源

      hspace

      像素

      水平左右两段与物件的距离

      3.用图像作为超链接

      格式:

      4.使用工具建立地图索引

      格式:

      声明整张图使用地图链接方式进行连接.

      name,id指此图的名称.

      表示我们所要链接其中一点的区快

      shape表示我们所选择的形状,如:

      rect矩形circle圆poly多边形

      coords表示地图的坐标位置

      5.切片索引

      6.为网站添加图标(head)

      六、超链接

      1.超链接的基本格式

      格式:

      scheme:

      //host[:

      post]/path/filename

      scheme指的是http,ftp,file,mailto,news,gopher,telnet七种

      host指的是IP地址或计算机名称

      post指的是服务器端口

      path指的是文件路径

      filename指的是文件名

      //host[:

      post]/path/filename>…

      2.超链接的种类

      1.http

      声明adads

      2..ftp声明

      //">adads

      4.mailto

      song@">sdds

      3.相对链接和绝对链接f:

      /aa/aa.html

      1.index.htm

      2.page/index.htm

      3.page/top/index.htm

      4.../index.htm

      5.../../index.htm

      6.../page/index.htm

      4.书签的链接

      基本格式:

      瞄点

      链接点

      链接到别的网页的书签项目:

      瞄点

      链接点

      5.基准参考点

      基本格式:

      \”>

      6.超链接事件

      LINK颜色的设置

      基本格式:

      link超链接尚被选中的文字

      alink超链接点选但未被放开的颜色

      vlink超链接已被点选过的颜色

      七、表单

      1.表单的功能结构

      属性

      说明

      name

      字符串

      给这个表单起个名字

      method

      get/post

      表单的传输方式

      action

      url

      传输目标

      2、input类

      type

      属性

      说明

      Text(文本)

      size

      象素

      字符宽度

      readonly

      readonly

      只读

      maxlength

      象素

      最大字符数

      Password(密码)

      size

      象素

      字符宽度

      readonly

      readonly

      只读

      maxlength

      象素

      最大字符数

      Hidden(隐藏栏)

      Submit(提交按纽)

      Reset(从设按纽)

      Button(按纽)

      File(文件域)

      size

      象素

      字符宽度

      maxlength

      象素

      最大字符数

      Image(图象域)

      src

      URL

      来源

      alt

      文本

      说明

      align

      middle

      大齐

      Radio(单选按纽)

      checked

      checked

      默认选择

      disabled

      disabled

      禁止选择

      Checkbox(多选按纽)

      checked

      checked

      默认选择

      disabled

      disabled

      禁止选择

      3、select类

      1

      2

      Selected已选size高度multiple多选value值

      7.表单的外框和标题

      外边框:

      ...

      标题:

      ...

      dsdsd

      悬浮框架的设置

      格式:

      属性

      属性值

      说明

      height

      像素/%

      绝对/相对高度

      Width

      像素/%

      绝对/相对宽度

      八、多媒体

      1.FLASH动画的插入

      ...

      属性

      属性值

      说明

      使用

      type

      application/

      x-shockwave-flash

      类型

      data

      url

      路径

      width

      像素/百分比

      宽度

      height

      像素/百分比

      高度

      param

      Name/Value

      属性/

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 求职职场 > 简历

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1