HTML 超文本标记语言,描述网页的。跟其他编程语言不同,可通过文本编辑器来创建。


HTMl文件格式:

文件是.html或者.htm后缀的文件。

HTMl超文本标记语言书写格式要符合W3C(万维网联盟)标准。(字母小写)

 

HTML完整的结构:

 

标题

声明css或者引入js、css以及其他内容

 

 

页面显示的内容

 


……:表示文件类型为HTML文档

……:文档头部标记,表示设置文档描述及其他不在web网页上显示的信息

……内部经常使用标签说明:

  :提供将现行文档与其他文档或实体关联的信息。

  :指明在服务器上提供文档可以检索的索引

:允许包含样式表(CSS)信息

:主页头部元素标签,描述不包含在标准HTML里的文档信息.

  向搜索引擎说明你的网页的关键词

    告诉搜索引擎制作你的站点的作者

  设置网页语言字符集

设置网页语言字符集

浏览器将在m秒后,自动转换到某文件

……:文档标题,即在标题栏中显示的题目

……:当主题标记,记在网页内要现实的题目.

……用于定义页面内容的显示效果.

bgcolor=”颜色值”:设置背景色

background=“url”这是背景图片的文件名。

alink:活动时连接颜色

link:链接的颜色

vlink:连接后的颜色

text:文本的颜色

属性解释:

align=left/right/center:设置在网页中的左右对齐方式。

valign=top/middle/botton/baseline:设置在网页中的上下对齐方式。

……
:地址风格一般用与文档的开始或结尾处,并以斜体格式显示文本。


标记:

标题文字标记:.... : n的取值为:1—6,1最大,6最小;1-6级标题。

常用段落标记:

      注释标记:其格式为:

换行标记:
或者是

强制换段标记,格式为:  文字

,相当于两个

设置段落标记,格式为:

文字

预格式化标记:

 

位置控制标记,格式为:

文本或图像

我们可将div认为是容器,默认是纵向排列的。

水平线标记:


:其属性有:

size:水平线的宽度.

width:水平线的长度,可用占平宽度的百分比或像素值来表示

heigth:水平线的高度,可用占平宽度的百分比或像素值来表示

align:水平线的对齐方式,有left/right/center三种

noshade:线段无阴影属性,为实心线段

字体标记:

    要显示的内容

        size:设置字体大小,取值1--7

        face:设置字体,如:隶书,宋体,幼圆,楷体等.

        color:设置文字颜色

   ……:设置字体加粗

   ……:标准打字机字体

   ……:设置斜体字

   ……:设置带删除线的文字

   ……:设置带下划线的文字

   ……:将文本作为下标显示 

   ……将文本作为上标显示  ,例如:2的2次幂 

   ……:大字体文本显示

   ……:小字体文本显示

   ……:加重显示字体


超链接标记     

显示的文本内容 属性:name="" 相当于给该标签起名字。

  例如:如果当前页面一个a标签跳转到指定当前页面另一个a标签所在位置:

A B

target将链接的文件最终要显示的位置.其值为:

              target=_blank:将链接的文件显示在一个新的窗口

              target=_self:将链接的文件显示在本窗口

              target=_top:将链接的文件显示在整个浏览器窗口

              target=_parent:将链接文件显示在前一个窗口

              target=”windowname”将链接的文件显示在指定的窗口

相对路径:相对某个文件,去找目标文件,不写具体的盘符

绝对路径:直接写具体的盘符文件夹路径

./同级路径的   ../跳出一层文件夹

图像标记

 

src=’url’设置图片的路径

name=图片的名字

width:设置图片的宽度

height:设置图片的高度

vspace:设置图片离网页顶端的空白距离

hspace:设置图片离网页左端的空白距离

alt:在浏览器尚未完全读入图像时,在图像位置显示的信息:

title:当鼠标指到图片时出现的信息.

border:设置图片边框的粗细,其值为数字.


相关序列表标记 

定义无序列表标签:

  • 内容
  • 内容
  • 内容

Type=disk/circle/square:指定表项左端前面的符号类型.

      有序列表标记:

  1. 内容
  2. 内容
  3. 内容

type=""属性,指定该列表序号格式。可设定5种序号:数字、大小写英文字母、大小写罗马字母。

start=“”指定该了列表从几开始排列标示符。

      自定义项目列表:

标题
内容
    


表格标记:

:定义表格。

…:定义表格标题。

…:定义表行。

…:定义表头。

…:定义表元(即表格的具体数据)。

:#=从左数起,具有指定属性的列的列数。

:#=left,right,center:设置所在列的左右对齐方式。

表格中边框的显示:(对table标签)

frame=box:全部显示四个边框。

frame=above:只显示上边框。

frame=hsides:只显示上下边框。

frame=lhs:只显示左边框。

frame=void:不显示任何边框。

表格中分隔线(Rules)的显示:(对table标签)

rules=all:显示所有的分隔线。

rules=rows:只显示行之间的分隔线。

rules=none:不显示任何分隔线。

其它属性有:

bgcolor:背景色        background=”图片名”

表格边框色彩的亮度控制:

bordercolorlight:表格边框亮度颜色值。

bordercolordark:表格边框阴影颜色值。

width=宽度  height=高度   border=边框粗细   bordercolor=”颜色值”

cellspacing=单元格间隙   cellpadding=设置表格边框与其内容空间的大小

colspan=跨列   rowspan=跨行

form表单常用标记

用于提交请求发送数据使用。

属性:name:定义表单的名字。

action:表单提交的目的地址。action=”url”。

method:表单的提交方式。其值有post/get。

target=”_blank/_self/_top/_parent”:指定表单提交结果文档最终要显示的位置。

enctype=”multipart/form-data”:来确保匿名上载文件的正确的编码


文本框:

属性: 

name="username" 相当于给该标签起名字,以后传输数据时使用。

          value=""该属性是该标签真实的值;

readonly 该属性,指定该标签是只读。

size:定义文本框的宽度,单位是单个字符宽度:如:size=”5”。

maxlength="10" 定义最多输入的字符数

    (如下两个标签任何标签都有该属性): 

id="" 唯一标示该标签,页面上的id,不允许重复。

class="" 以后css会使用该属性,相同的class属性的标签认为是一组

  文本域:  

textarea多行多列输入元素,即多行多列文本框。

  textarea基本属性:

name:定义多行文本框的名称。

cols:定义多行文本框的宽度,单位是单个字符宽度。

rows:定义多行文本框的高度,单位是单个字符宽度。

wrap:属性定义输入内容大于文本域时显示的方式,可选值如下:

virtual:允许文本自动换行。

off:不允许自动换行。

physical:让文本换行,当数据被提交处理时换行符也将被一起提交处理。

隐藏域:

基本属性:

name:设定提交信息时的提交名称,对应HTML文档的hidden中的name。

type:定义该输入元素为隐藏域。

密码框: 同样有文本框相关的属性。

文件上传框:其格式:

下拉列表: 

 selected 属性指定某个要选中的option,

 disabled 该属性一般用在select标签、button按钮上面,让该标签不可以被使用(不可被点击)。

size:定义下拉选择框的行数。

multiple:设置滚动菜单,属性表示可以多选,如果不设置本属性,那么只能单选。

单选框:

属性:name,相同的name属性认为是一组。

        复选框:

按钮:普通按钮:

     form标签中专门用于提交form表单的提交按钮:

       form标签中专门用于提交form表单的重置按钮:         

       

框架标记

   

  框架内的属性有:

rows=像素值:设定横向分割的框架数目  cols=像素值:设定纵向分割的框架数目

src=”url”:指定表示该框架对应的源文件。Name:指定框架名称。

border=像素值:设定边框的宽度。bordercolor=颜色值:设定边框的颜色

frameborder=yes/no 设定边框的有无,缺省值为yes。

noresize:设定框架不可编辑,即固定边框。

marginwidth=像素值,marginheight=像素值:设定页面空白区域的大小。

scrolling=yes/no:设置是否显示滚动条。

framespacing=像素值:窗口之间空白区域设置。

marginwidth=像素值/marginheight=像素值:设置页面空白的大小。


 

name="center"marginheight="200">

嵌入窗口标记

将某个页面嵌入到指定页面中:

例如:

 


fieldset 标签:

 


标题

 

 

第一列第二列

 


制作多媒体页面

:#=URL,本标记可以用来在主页中嵌入多媒体文本。

#=WAV 文件的URL。

#=循环数。

:插入视频剪辑。

start=#:设置何时播放。

#=fileopen时,表示链接到本页时开始播放该视频。

#=mouseover时,表示把鼠标移到播放区域时,开始播放该视频。

controls:用来在视频窗口下附加MS-WINDOWS的AVI播放控制条。

loop=#:设置播放次数。

loopdelay=#:设置播放延时,单位是毫秒。


在网页设置会移动的文字

    ……

direction设置文字移动的方向:其值可以有:up/down/left/right

behavior: 设置文字移动的方式:其值可以有:slide/alternate/scroll

loop: 设置文字移动的次数:默认值为无数次循环.

scrolldelay:设置文字移动的延时.

scrollamount:设置一次滚动的文本量

width:数值滚动内容宽度

height:数值滚动内容高度

vspace:数值滚动区域宽度

hspace:数值滚动区域高度

鼠标经过时滚动停止离开重新滚动

1. 向左滚动(默认)代码

scrolldelay=100>Welcom to my blog.

2. 向右滚动代码

scrolldelay=100>Welcom to my blog.

3. 向上滚动(多行文字在每行后加
标记)代码

scrolldelay=100>Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

4. 向下滚动代码

  scrolldelay=100>Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

  5. 滚动次数3次(默认为无数次)代码

color=#ff6600>Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

6. 滚动延时代码

Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

7. 滚动文本量代码

  Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

8. 滚动文本大小(默认为原文字大小)代码

  Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

9. 滚动区域的宽度和高度(默认为原文字大小)代码

  Welcom to my blog.
It's just for you!
The most preferred bilingual bol for you to share

10. 滚动的超链接代码

此处为链接文字说明(点击进入动感部落的博客)

  11. 滚动的图片加超链接

  12. 来回滚动代码

 

  13. 鼠标经过时滚动停止代码(此效果在新浪博客中可能无效)

 



div:

可以认为是一个容器:

style属性: 添加Css样式表,控制该标签的样式。 border:solid 1px red;表示边框,实心,1像素宽,红色。