2023年6月20日发(作者:)

HTML

1

标签

标签指示浏览器该如何解读信息

标签可以有属性,属性由属性名和值组成,为了避免解释错误,值要用双引号引起

若本身就想显示双引号,则需要在外面再用单引号引起

属性之间要用空格隔开,顺序和大小写无关

2

常用标签

2.1 HTML固有标签

定义HTML网页,所有内容要在这两个标签之中

定义文件头,不显示在网页内容中,定义格式、脚本等

定义文件体,网页的主题部分

2.2 meta标签

定义文件信息,使用手工写,使用dreamweaver HTML选项可以选择添加。

2.3 标题标签title

用来定义网页名字,将来会显示在网页标题栏

eg :this is a title

属性:

2.4 段落标签p

„„本段文字„„

在body中使用

eg

this is a paragraph

2.5 换行br

:紧凑换行

在显示上段和段之间差着两行,在设计区直接按Enter相当于制造了两段

之间的行紧挨着,在设计区用shift+enter实现

制造空的一行

2.6 水平线hr


制造一条水平线

属性:颜色

eg:color=”reg”

2.7 注释

2.8 超链接

2.8.1 文间链接

创建超链接:

文本或图片等

效果:将以蓝色显示并链接到网址

eg:

绝对地址 page

相对地址 page

page

TIPS:添加google maps显示当先地址

2.8.2 文内链接

创建锚点进行文内链接,不能用数字开头的字符串作为锚点

定义锚点

引用锚点„„

引用其他文章的锚点„„

创建电子邮件

kangde@

防止垃圾邮件

a在ASCII中编码为a;用它替换原来的字符。

2.9 定义列表

2.9.1 定义有序列表

有序列表,每个表项有数字号

    :表示有序列表

  1. :表示表项

    1. „„„„
    2. „„„„
    2.9.2 定义无序列表

    无序列表,每个表项有个点号

      :表示有序列表

    • :表示表项

      • „„„„
      • „„„„

      2.9.3 定义定义列表

      定义列表:定义无缩进,术语缩进两格

      :表示有序列表

    • :表示表项

      定义

      定义内容

      定义

      „„„„

      2.9.4 列表嵌套

      列表可以嵌套

      基本格式,以无序列表为例

      • „„
        • „„

      2.9.5 列表标签属性

      无序列表

        circle或者square

        或者

      • „„
      • 有序列表

          upper-alpha或者lower-alpha或者lower-roman 2.10 格式化标签

          2.10.1 文本格式化

          加粗:„„

          斜体:„„

          上标:„„

          下标:„„

          保持空格:

           

          2.10.2 文本和背景颜色

          背景颜色:

          style=”backgroung-color:blue”

          背景图像:style=”background-image:url()”

          文本颜色:

          color:blue

          同时使用

          注意:使用分号

          属性:background-repeat: 指定背景图像平铺方式repeat、repeat-x、repeat-y、no-repeat

          2.11 插入图片

          web支持文间格式为GIF、JPEG、JPG、PNG

          插入图片格式:

          src:图片文件名

          alt:用户无法下载图片时显示的文本,若不需要,alt=“”

          缩略图超链接图片

          />

          属性

          1、style=”border-style:none”:去掉超链接图像的边框

          2、title=””:指定鼠标指向图像时显示的文字

          3、style=”float:”参数:left、right指定文字环绕模式

          4、style=”vertical-align:”参数text-top(同一行内容顶部对齐)、text-bottom(同一行内容底部对齐)、middle(同一行内容中心对齐)、baseline(同一行文本基线对齐)

          5、width=”200px” height=”100px”设定图像大小,防止浏览器拉伸大小

          2.12 创建表格

          用于创建表格

          用于创建一行,包括一个或多个单元格

          用于创建表头 用于创建单元格

          注意:对表格进行修饰的CSS不能出现在

          中,其对表格不会产生影响,需要出现在中。

          eg:

          表项1 表项2
          内容1 内容2

          属性:

          style=”width:500px”指定表格宽度 用于table标签

          style=”height:400px”指定表格长度 用于table标签

          style=“width:20%”指定单元格百分比,用于th/td标签,也可指定像素等

          style=“vertical-align:”参数:top、middle、bottom、text-top、text-bottom和baseline指定表格中数据垂直对齐方式

          colspan=“2”指定单元格跨越两列,不使用style

          rowspan=“2”指定单元格跨越两行,不使用style

          style=“background-color:red”

          style=“background-image:”指定使用的背景,可以再table、tr、td、th中使用

          cellpadding=“2”(单位默认为像素)指定表格边框之间和表格单元格之间的间距

          cellspacing=“2”(单位默认为像素)指定单元格中的信息四周的间距

          border=1 表示边框可见

          表格可以嵌套,表格嵌套可以用来布局

          2.13 创建框架

          2.13.1 定义框架集

          rows或者cols必须指定

          rows用来指定分为上下两部分的框架的大小

          cols用来指定分为左右两部分的框架的大小

          eg:

          rows=“80,*”上边为80像素,下边为剩下所有

          rows=“20%,*”上边为20%,下边为剩下所有

          rows=“30%,*,*”上边为30%,剩下两个框架平分剩余空间

          注意:不能在head或者body中设置,在它们之外之中设置

          2.13.2 定义框架

          指定框架中填充的网页并提供框架区域应用名称

          eg

          该框架指示建立一个有两个内容的框架,各占20%和80%,其中上边框架默认引用网页,上边框架名称为top,下面框架默认引用网页,下面框架名称为name

          其他属性,以下属性用于frame标签

          marginwidth 指定框架的左右边距,单位:像素

          marginheight 指定框架的上下边距,单位:像素

          scrolling:是否显示滚动条 yes或no

          frameborder:是否显示该框架与相邻框架之间的分割线,1:是,0:否

          noresize:是否允许用户调整框架大小 直接noresize

          2.13.3 引用框架

          超链接中添加target属性

          点击该超链接,内容都将出现在main框架中,若想其用一个网页单独显示,需要设置target为_blank

          2.14 创建表单

          2.14.1 声明表单

          指定创建表单

          eg:

          表单内容

          action有两种处理方法:1、引用web服务器中脚本;2、mailto引用电子邮件地址。

          2.14.2 创建文本信息

          文本

          表示在提示信息“文本”后出现一个框,该框长20像素,最大能接受30个字符,maxlength值超过size,会向做滚屏

          type属性值为text表示表单元素为文本

          其他参数 加密显示

          type=”password”

          2.14.3 创建复选框

          选项文本

          name属性必须要有

          checked表示默认选项

          tips文本 imput标签末尾加空格可以扩大选项到文本的距离

          2.14.4 创建单选框

          选项文本

          value属性可以是任何名称或编码

          2.14.5 创建滚动列表

          size属性表示同时显示多少项,若少于实际选项,则将显示滚动条

          multiple属性表示可以同时选中多项

          selected属性指定默认选项

          2.14.6 创建多行文本

          rows属性指定行数

          cols属性指定列数

          2.14.7 创建按钮

          创建默认提交按钮

          value指定按钮的内容

          创建图像提交按钮

          重置按钮

          创建图像重置按钮

          2.15 插入视频音频

          简单格式

          文本或图片

          强制用media player播放视频同时指定大小

          height=”305”>

          播放该视频

          表示视频在页面打开后会自动播放

          随页面打开自动播放

          controls=”All” loop=”false” autostart=”true” pluginspage=”www.„„„„” />

          realplayer编码

          CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA

          MIME格式:

          3

          样式表CSS

          CSS是一种将文本和格式分离的布局,格式化方案。

          在head中引用样式表:

          3.1 布局属性

          一、布局属性display

          3.2 格式化属性

          3.2.1 创造边框border

          在元素四周建立一个课件的方框

          border-width:5px 指定边框宽度,单位像素

          border-color:指定边框颜色

          border-style:指定边框样式,参数solid(单实线)、double(双实线)、dashed(虚线)、dotted(点线)、groove(沟线)、ridge(脊线)、inset(内线边框)、outset(外凸边框),none(无边框)

          border-left:指定边框左边

          border-right:指定边框右边

          border-top:指定边框顶部

          border-bottom:指定边框底部

          border:指定边框的所有边

          color:边框内部文字颜色

          background-color:边框内部文字背景颜色

          3.2.2 文本处理

          统一用style=引用

          对齐

          text-ailgn:参数:center、left、right

          缩进

          text-indent:参数XXpx/XXpt

          字体集

          font-family:参数:times new roman、arial„„备选项用逗号隔开

          字体大小

          font-size:参数:XXpt或px 斜体

          font-style:参数:normal、italic、oblique

          加粗

          font-weight:参数:normal、bold、bolder、lighter

          颜色

          color:参数:„„

          文本行高度

          line-height:

          删除链接下划线

          text_decoration:参数:none、underline、italic和line-through

          设置左右边距

          margin-left:

          margin-right:

          字母间距 单位:像素

          letter-spacing

          词间距 单位:像素

          word-spacing

          小型大写字母

          font-variant:small-caps

          自动转换段落文本大小写

          text-transform:参数:none、uppercase(大写)、lowercase(小写)、capitalize(首字母大写)

          3.3 修改超链接外观

          Link:链接尚未访问过

          Hover:鼠标指向链接

          Active:链接被激活

          Visited:链接被访问过

          先设置后引用

          设置:

          a:link{

          CSS}

          引用:

          „„

          对多个类指定统一格式,用逗号分隔

          a:link,a:visited,a:active{

          CSS}

          a.1:link,a.2:visited,a.3:active{

          CSS}

          3.4 注释

          /*„„„„*/ 3.5 通用类

          可以用于任何样式

          eg:

          .bold{font-weight:bold

          }

          3.6 应用样式

          3.6.1 样式类

          定义样式类:样式名:类名

          样式之间用分号隔开,最后一个样式也要加分号

          样式类应用于整个站点

          eg

          {font-size:12pt; color=red;}

          „„„„

          3.6.2 内部样式表

          应用于单个网页

          必须在head中定义样式表

          不需要link标签引用样式表

          在其他网页中不能引用该样式表除非将其复制过去

          eg:

          „„

          3.6.3 内联样式表

          将样式应用于单个元素

          一行:XXX

          一块:

          XXX

          3.7 单独用style指定样式示例

          (文本/图像)对齐方式:style=”text-ailgn: ”参数:center、left、right 字体:style=”font-family: ”参数times new roman、arial„„

          字号:style=”font-size: ” 参数:XXpt或px

          颜色:style=”color: ”参数:„„

          字体加粗:style=”font-weight:”参数:normal、bold、bolder、lighter

          字体斜体:style=”font-style:”参数:normal、italic、oblique

          列表编号类型:style=”list-style-type:numtype:”参数:decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none

          列表项目标记类型:style=”list-style-type:bullettype”参数:disc、circle、square、none

          3.8 样式规则

          样式之间用分号隔开分号后无空格

          eg:

          it is bold and italic

          参数可以设多个备选项

          eg:

          有空格的话需要加单引号

          4

          特殊符号

          2023年6月20日发(作者:)

          HTML

          1

          标签

          标签指示浏览器该如何解读信息

          标签可以有属性,属性由属性名和值组成,为了避免解释错误,值要用双引号引起

          若本身就想显示双引号,则需要在外面再用单引号引起

          属性之间要用空格隔开,顺序和大小写无关

          2

          常用标签

          2.1 HTML固有标签

          定义HTML网页,所有内容要在这两个标签之中

          定义文件头,不显示在网页内容中,定义格式、脚本等

          定义文件体,网页的主题部分

          2.2 meta标签

          定义文件信息,使用手工写,使用dreamweaver HTML选项可以选择添加。

          2.3 标题标签title

          用来定义网页名字,将来会显示在网页标题栏

          eg :this is a title

          属性:

          2.4 段落标签p

          „„本段文字„„

          在body中使用

          eg

          this is a paragraph

          2.5 换行br

          :紧凑换行

          在显示上段和段之间差着两行,在设计区直接按Enter相当于制造了两段

          之间的行紧挨着,在设计区用shift+enter实现

          制造空的一行

          2.6 水平线hr


          制造一条水平线

          属性:颜色

          eg:color=”reg”

          2.7 注释

          2.8 超链接

          2.8.1 文间链接

          创建超链接:

          文本或图片等

          效果:将以蓝色显示并链接到网址

          eg:

          绝对地址 page

          相对地址 page

          page

          TIPS:添加google maps显示当先地址

          2.8.2 文内链接

          创建锚点进行文内链接,不能用数字开头的字符串作为锚点

          定义锚点

          引用锚点„„

          引用其他文章的锚点„„

          创建电子邮件

          kangde@

          防止垃圾邮件

          a在ASCII中编码为a;用它替换原来的字符。

          2.9 定义列表

          2.9.1 定义有序列表

          有序列表,每个表项有数字号

            :表示有序列表

          1. :表示表项

            1. „„„„
            2. „„„„
            2.9.2 定义无序列表

            无序列表,每个表项有个点号

              :表示有序列表

            • :表示表项

              • „„„„
              • „„„„

              2.9.3 定义定义列表

              定义列表:定义无缩进,术语缩进两格

              :表示有序列表

            • :表示表项

              定义

              定义内容

              定义

              „„„„

              2.9.4 列表嵌套

              列表可以嵌套

              基本格式,以无序列表为例

              • „„
                • „„

              2.9.5 列表标签属性

              无序列表

                circle或者square

                或者

              • „„
              • 有序列表

                  upper-alpha或者lower-alpha或者lower-roman 2.10 格式化标签

                  2.10.1 文本格式化

                  加粗:„„

                  斜体:„„

                  上标:„„

                  下标:„„

                  保持空格:

                   

                  2.10.2 文本和背景颜色

                  背景颜色:

                  style=”backgroung-color:blue”

                  背景图像:style=”background-image:url()”

                  文本颜色:

                  color:blue

                  同时使用

                  注意:使用分号

                  属性:background-repeat: 指定背景图像平铺方式repeat、repeat-x、repeat-y、no-repeat

                  2.11 插入图片

                  web支持文间格式为GIF、JPEG、JPG、PNG

                  插入图片格式:

                  src:图片文件名

                  alt:用户无法下载图片时显示的文本,若不需要,alt=“”

                  缩略图超链接图片

                  />

                  属性

                  1、style=”border-style:none”:去掉超链接图像的边框

                  2、title=””:指定鼠标指向图像时显示的文字

                  3、style=”float:”参数:left、right指定文字环绕模式

                  4、style=”vertical-align:”参数text-top(同一行内容顶部对齐)、text-bottom(同一行内容底部对齐)、middle(同一行内容中心对齐)、baseline(同一行文本基线对齐)

                  5、width=”200px” height=”100px”设定图像大小,防止浏览器拉伸大小

                  2.12 创建表格

                  用于创建表格

                  用于创建一行,包括一个或多个单元格

                  用于创建表头 用于创建单元格

                  注意:对表格进行修饰的CSS不能出现在

                  中,其对表格不会产生影响,需要出现在中。

                  eg:

                  表项1 表项2
                  内容1 内容2

                  属性:

                  style=”width:500px”指定表格宽度 用于table标签

                  style=”height:400px”指定表格长度 用于table标签

                  style=“width:20%”指定单元格百分比,用于th/td标签,也可指定像素等

                  style=“vertical-align:”参数:top、middle、bottom、text-top、text-bottom和baseline指定表格中数据垂直对齐方式

                  colspan=“2”指定单元格跨越两列,不使用style

                  rowspan=“2”指定单元格跨越两行,不使用style

                  style=“background-color:red”

                  style=“background-image:”指定使用的背景,可以再table、tr、td、th中使用

                  cellpadding=“2”(单位默认为像素)指定表格边框之间和表格单元格之间的间距

                  cellspacing=“2”(单位默认为像素)指定单元格中的信息四周的间距

                  border=1 表示边框可见

                  表格可以嵌套,表格嵌套可以用来布局

                  2.13 创建框架

                  2.13.1 定义框架集

                  rows或者cols必须指定

                  rows用来指定分为上下两部分的框架的大小

                  cols用来指定分为左右两部分的框架的大小

                  eg:

                  rows=“80,*”上边为80像素,下边为剩下所有

                  rows=“20%,*”上边为20%,下边为剩下所有

                  rows=“30%,*,*”上边为30%,剩下两个框架平分剩余空间

                  注意:不能在head或者body中设置,在它们之外之中设置

                  2.13.2 定义框架

                  指定框架中填充的网页并提供框架区域应用名称

                  eg

                  该框架指示建立一个有两个内容的框架,各占20%和80%,其中上边框架默认引用网页,上边框架名称为top,下面框架默认引用网页,下面框架名称为name

                  其他属性,以下属性用于frame标签

                  marginwidth 指定框架的左右边距,单位:像素

                  marginheight 指定框架的上下边距,单位:像素

                  scrolling:是否显示滚动条 yes或no

                  frameborder:是否显示该框架与相邻框架之间的分割线,1:是,0:否

                  noresize:是否允许用户调整框架大小 直接noresize

                  2.13.3 引用框架

                  超链接中添加target属性

                  点击该超链接,内容都将出现在main框架中,若想其用一个网页单独显示,需要设置target为_blank

                  2.14 创建表单

                  2.14.1 声明表单

                  指定创建表单

                  eg:

                  表单内容

                  action有两种处理方法:1、引用web服务器中脚本;2、mailto引用电子邮件地址。

                  2.14.2 创建文本信息

                  文本

                  表示在提示信息“文本”后出现一个框,该框长20像素,最大能接受30个字符,maxlength值超过size,会向做滚屏

                  type属性值为text表示表单元素为文本

                  其他参数 加密显示

                  type=”password”

                  2.14.3 创建复选框

                  选项文本

                  name属性必须要有

                  checked表示默认选项

                  tips文本 imput标签末尾加空格可以扩大选项到文本的距离

                  2.14.4 创建单选框

                  选项文本

                  value属性可以是任何名称或编码

                  2.14.5 创建滚动列表

                  size属性表示同时显示多少项,若少于实际选项,则将显示滚动条

                  multiple属性表示可以同时选中多项

                  selected属性指定默认选项

                  2.14.6 创建多行文本

                  rows属性指定行数

                  cols属性指定列数

                  2.14.7 创建按钮

                  创建默认提交按钮

                  value指定按钮的内容

                  创建图像提交按钮

                  重置按钮

                  创建图像重置按钮

                  2.15 插入视频音频

                  简单格式

                  文本或图片

                  强制用media player播放视频同时指定大小

                  height=”305”>

                  播放该视频

                  表示视频在页面打开后会自动播放

                  随页面打开自动播放

                  controls=”All” loop=”false” autostart=”true” pluginspage=”www.„„„„” />

                  realplayer编码

                  CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA

                  MIME格式:

                  3

                  样式表CSS

                  CSS是一种将文本和格式分离的布局,格式化方案。

                  在head中引用样式表:

                  3.1 布局属性

                  一、布局属性display

                  3.2 格式化属性

                  3.2.1 创造边框border

                  在元素四周建立一个课件的方框

                  border-width:5px 指定边框宽度,单位像素

                  border-color:指定边框颜色

                  border-style:指定边框样式,参数solid(单实线)、double(双实线)、dashed(虚线)、dotted(点线)、groove(沟线)、ridge(脊线)、inset(内线边框)、outset(外凸边框),none(无边框)

                  border-left:指定边框左边

                  border-right:指定边框右边

                  border-top:指定边框顶部

                  border-bottom:指定边框底部

                  border:指定边框的所有边

                  color:边框内部文字颜色

                  background-color:边框内部文字背景颜色

                  3.2.2 文本处理

                  统一用style=引用

                  对齐

                  text-ailgn:参数:center、left、right

                  缩进

                  text-indent:参数XXpx/XXpt

                  字体集

                  font-family:参数:times new roman、arial„„备选项用逗号隔开

                  字体大小

                  font-size:参数:XXpt或px 斜体

                  font-style:参数:normal、italic、oblique

                  加粗

                  font-weight:参数:normal、bold、bolder、lighter

                  颜色

                  color:参数:„„

                  文本行高度

                  line-height:

                  删除链接下划线

                  text_decoration:参数:none、underline、italic和line-through

                  设置左右边距

                  margin-left:

                  margin-right:

                  字母间距 单位:像素

                  letter-spacing

                  词间距 单位:像素

                  word-spacing

                  小型大写字母

                  font-variant:small-caps

                  自动转换段落文本大小写

                  text-transform:参数:none、uppercase(大写)、lowercase(小写)、capitalize(首字母大写)

                  3.3 修改超链接外观

                  Link:链接尚未访问过

                  Hover:鼠标指向链接

                  Active:链接被激活

                  Visited:链接被访问过

                  先设置后引用

                  设置:

                  a:link{

                  CSS}

                  引用:

                  „„

                  对多个类指定统一格式,用逗号分隔

                  a:link,a:visited,a:active{

                  CSS}

                  a.1:link,a.2:visited,a.3:active{

                  CSS}

                  3.4 注释

                  /*„„„„*/ 3.5 通用类

                  可以用于任何样式

                  eg:

                  .bold{font-weight:bold

                  }

                  3.6 应用样式

                  3.6.1 样式类

                  定义样式类:样式名:类名

                  样式之间用分号隔开,最后一个样式也要加分号

                  样式类应用于整个站点

                  eg

                  {font-size:12pt; color=red;}

                  „„„„

                  3.6.2 内部样式表

                  应用于单个网页

                  必须在head中定义样式表

                  不需要link标签引用样式表

                  在其他网页中不能引用该样式表除非将其复制过去

                  eg:

                  „„

                  3.6.3 内联样式表

                  将样式应用于单个元素

                  一行:XXX

                  一块:

                  XXX

                  3.7 单独用style指定样式示例

                  (文本/图像)对齐方式:style=”text-ailgn: ”参数:center、left、right 字体:style=”font-family: ”参数times new roman、arial„„

                  字号:style=”font-size: ” 参数:XXpt或px

                  颜色:style=”color: ”参数:„„

                  字体加粗:style=”font-weight:”参数:normal、bold、bolder、lighter

                  字体斜体:style=”font-style:”参数:normal、italic、oblique

                  列表编号类型:style=”list-style-type:numtype:”参数:decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none

                  列表项目标记类型:style=”list-style-type:bullettype”参数:disc、circle、square、none

                  3.8 样式规则

                  样式之间用分号隔开分号后无空格

                  eg:

                  it is bold and italic

                  参数可以设多个备选项

                  eg:

                  有空格的话需要加单引号

                  4

                  特殊符号