zoukankan      html  css  js  c++  java
  • HTML标记

     

    注释:红色字体为标记和其必不可少的属性;

    绿色字体为标记中的属性,可任意选取所需要的属性;

          天蓝色字体为自由填充的属性值;

          黑色字体为补充内容及对标识和描述内容的注解

    1HTML标记的语法是:<标记名称 属性1名=属性1值 属性2名=属性2值 …>

    标记在表示HTML文档内容结构和含义的时候,通常有两种方式,我们分别称单标记和双标记。

    1

    HTML定义的用于描述页面整体结构的四种标记

    <HTML>

      <HEAD>

        <TITLE> (加入网页的标题)</TITLE>

      </HEAD>

      <BODY> </BODY> 

    </HTML>

    2<BODY>的属性

    BGCOLOR=" 颜色" (设置背景颜色)     

             BACKGROUND=" 图片名" (设置背景图片)

             BGPROPERTIES="FIXED" (设置背景图片固定不变)

             TEXT="颜色 " (设置文本颜色)

             LINK="颜色" (默认链接) VLINK="颜色" (当鼠标按下时的链接) ALINK="链接按钮" (当鼠标松开后的链接)

             TOPMARGIN=距离 (文本距顶部的距离) LEFTMARGIN=距离 (文本距左边的距离)

    3、设置播放器,必须在BODY的双标记中存在

    <BGSOUND SRC="地址" (歌名或视频名)>

    <EMBDE SRC="地址" (歌名或视频名) WIDTH=宽度 HEIGHT=高度 (调整播放器的宽度和高度) HIDDEN="TRUE"(隐藏播放器)>

    4、如何使网页在网站的排名靠前,其必须在HEAD中存在

    <META NAME="KEYWORD" CONTENT="描述网站内容 "> (用于标记搜索引擎在搜索该页面时所取出的关键词)

    <META COUNT="描述内容"NAME="DESCRIPTION">(用来标记描述内容)

    <META NAME="AUTHOR" CONTENT="作者名称" >(用来标记文档的作者)

    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT = "TEXT/HTML; CHARSET =GB2312">(用来标记你的页面的解码方式)

    <META HTTP-EQUIV="REFRESH" CONTENT="5;URL= Http://www.baidu .com">(用来自动刷新网页)

    5、标题字体

    2

    语法:

    <H*ALIGN=对齐位置> </H*>

    说明:

    其中*可以选择1-6,且按顺序字体从大到小显示;ALIGN属性值可以选择“left”、“center”、“right”三个中间的一个。

    一个标题占一个独立段,字体自动显示为黑体且不容不同大小的字体

    6、文章字体

    3

    语法:

    <FONT SIZE=大小COLOR=颜色> </FONT>

    说明:

    其中SIZE属性可以选择1-7;

    COLOR属性值可以选择RGB值或者预定义颜色名称。常用的颜色名称有:black(黑),white(白),red(红),green(绿),blue(蓝),yellow(黄),aqua(浅绿),fuchsia(紫红),gray(灰),Lime(橙),maroon(栗色),purple(紫),olive(橄榄),silver(银色)

    7、物理字体

    4

    语法:

    <B> </B>

    <I> </I>

    <U> </U>

    说明:

    B标记用来指示以粗体字显示文本

    I标记用来指示以斜体字显示文本

    U标记用来指示为文本加上下划线

    5

    语法:

    <SUP> </SUP>

    <SUB></SUB>

    <STRIKE> </STRIKE>

    说明:

    SUP标记指示以上标方式显示文本

    SUB标记指示以下标方式显示文本

    STRIKE标记用来指示在文本的正中央画一条删去线

    8、字符实体

    在往HTML文档中写入特殊字符,如“〈”、“〉”、“&”、“ ”等要使用特殊的代码,浏览器会用HTML命令对这些特殊代码进行翻译。往网页中输入特殊字符,需在HTML代码中加入以&开头的字母组合或以&#开头的数字。

    9、对齐方式

    6

    语法:

    <DIV ALIGN=对齐位置> </DIV>

    <CENTER> </CENTER>

    说明:

    ALIGN属性可以用“left”、“center”、“right”,分别对应于将标记中间的字符块按照左、中、右对齐。

    这个标记没有属性,其作用是将标记中间的字符居中对齐,其作用和<DIV ALIGN=“center”></DIV>一样。

    7

    语法:

    <P ALIGN=对齐位置> </P>

    说明:

    <P>用于换行,意同于回车两次。<P>和<DIV>中的ALIGN属性的属性值一样,也是取“left”、“center”、“right”三个值,分别对应将中间的字体左、中、右对齐。

    10、文字移动

    8:

    语法:

    <MARQUEE DIRECTION=“移动方向” BEHAVIOR=“移动方式” LOOP=“移动次数” SCROLLAMOUNT=“字体循环移动的速度” SCROLLDELAY=“字体循环移动的延时” HEIGHT=“高度” WIDTH宽度” BGCOLOR背景颜色> </MARQUEE>

    说明:

    其中的DIRECTION属性的属性值是取“left”、“right”, “up”, “down”四个值,分别对应将中间的字体向左、右、上、下移动;

    BEHAVIOR属性的属性值是取“scroll”、“slide”、“alternate”三个值,分别对应将中间的字体循环移动、只移动一次、在屏幕中间来回移动;

    LOOP属性的属性值是取一个数值,表示将中间的字体循环移动的次数;

    SCROLLAMOUNT属性的属性值是取数字值,对应将中间的字体循环移动的速度,数值越大,表示速度越快;

    SCROLLDELAY属性的属性值是取数字值,对应将中间的字体循环移动的延时,设置这个参数也会影响到文字移动的速度;

    HEIGHT属性的属性值是取数字值,这个属性控制了文字移动面积的高度;

    WIDTH属性的属性值是取数字值,这个属性控制了文字移动面积的宽度;

    BGCOLOR属性的属性值可以取RGB值,或者用预定义值,它控制了移动文字的背景颜色;

    11、文字中行的控制

    9:

    语法:

    <P ALIGN=“对齐位置> </P>

    说明:

    其中ALIGN属性的属性值可以取“left”、“center”、“right”三个值中的值,这个属性控制了段落中的文字在Web页面中的对齐方式。需要注意的是有些浏览器不支持右对齐方式。

    10

    语法:

    <BR>

    说明:

    这个标记是单标记。换行标记,意同于回车一次。

    12、列表

    无序列表

    11

    语法:

    <UL TYPE=“强调符类型” COMPACT> </UL>

    说明:

    TYPE属性可以分别取三个值“disc”、“square”、“circle”,(在某些浏览器中,TYPE属性的值必须使用小写浏览器才可以识别)它是用来控制强调符风格的属性,三个值分别对应实心圆点,实心方块,空心圆圈。需要说明的是有些浏览器不支持该属性。

    COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式显示。

    有序列表

    12

    语法:

    <OL TYPE=“强调符类型” START=“” COMPACT> </OL>

    说明:

    TYPE属性可以分别取五个值“1”、“a”、“A”、“i”、“I”,用来控制强调符风格的属性,五个值分别对应数字、小写字母、大写字母、小写罗马数字、大写罗马数字。

    START属性是一个数字,表示从第几个数字(字母)开始计数。

    COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式显示。

    13

    语法:

    <LI  TYPE=“强调符类型> </LI>

    说明:

    TYPE属性是可选的,一般情况下是不需要的,因为在整体列表定义时应该已经定义完毕,只有在极少数情况下,需要使不同表项的强调符不同,才有必要在这里定义这个属性。属性值的选择和前面列表的属性选项一致。

    定义列表:

    14

    语法:

    <DL COMPACT> </DL>

    说明:

    COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式显示。

    15

    语法:

    <DT> </DT>

    说明:

    <DT>标记用于标注需要定义的术语

    16

    语法:

    <DD> </DD>

    说明:

    <DD>标记用于标注该术语的定义

    17

    无序列表

    有序列表

    定义列表

    <UL TYPE=“强调符类型 >

    <LI TYPE=“强调符类型> </LI>

    <LI> </LI> …

    <LI > </LI>   

    </UL>

    <OL TYPE=“强调符类型”        START=“从哪开始计数 >

     <LI  TYPE=“强调符类型> </LI>

    <LI> </LI> …

     <LI > </LI>

    </OL>

    <DL>   

    <DT>

    <DD> </DD>

    </DT> 

     </DL>

    13、预格式化

    18

    语法:

    <PRE> </PRE>

    说明:

    <PRE>标记用于使浏览器原封不动地显示预先编排好格式的一段文本

    14、链接

    超链接是WWW的基础,也是其核心。

    19

    语法:

    <A HREF=“url#name” TARGET=“链接打开的位置></A>

    说明:

    HREF部分中url后边跟的“name”部分是指定页面的指定部分的标识,用“#”分割url和指定部分标识。TARGET参数定义了链接打开的位置。

    A、相对地址:描述了从一个页面到另一个页面的路径,而不是Internet的完整地址。

    B、绝对地址:描述的不是两个文件相对的路径关系,它描述的是两个文件相对于根的关系

    C、物理地址:是使用文件存放在硬盘上的位置的路径来描述文件的方式。

    15、加入图片

    大多数的浏览器都支持两种图形格式:GIF(图形互换格式)和JPEG(联合图像专家组)。

    20

    语法:

    <IMG SRC=“图片来源ALIGN=“对齐方式” BORDER=“边框线宽度” ALT=“鼠标放在图片上时,框内显示的内容>

    说明:

    SRC表示图片的来源(存放路径);

    ALIGN属性标识了图片在页面中的对齐方式;

    BORDER属性标识了图片的边框线的宽度;

    ALT属性是在图片显示后,对图片的一段描述。

     

    16、水平线

    21

    语法:

    <HR ALIGN对齐方式” WIDTH=“宽度” SIZE=“粗细” NOSHADE>

    说明:

    ALIGN属性用来设置水平标尺线的对齐方式,WIDTH属性用来设置水平标尺线在水平方向上的宽度,SIZE属性设置水平标尺线的粗细,单位是像素数,NOSHADE属性是一个名称记号,用于取消水平标尺线的阴影。

    17、表格

    表格中由行和列分隔成的格子称为表元(cell),是矩形区域,它可以包含文本,图像和HTML标记。用以分隔表元的行列线则称为表格的边框线(border),表元的内容分成两类,一类是表头,一类是表数据。

    表格的定义

    22

    语法:

    <TABLE BORDER=“边框的粗细” BORDERCOLOR=“边框线的颜色” BGCOLOR=“背景颜色” BACKGROUND=“背景图片” ALIGN=“位置” WIDTH=“宽度” HEIGHT=“高度” CELLSPACING=“表元间距” CELLPADDING=“表元内容与边框的距离> </TABLE>

    说明:

    TABLE标记定义了一个表格的开始,表格的所有内容,都在这一对双标记中间。BORDER属性设置表格的边框的粗细;BORDERCOLOR属性表示边框线的颜色;BGCOLOR属性控制表格的背景颜色;BACKGROUND属性定义了表格的背景图片;ALIGN属性控制表格在页面中的位置;WIDTH和HEIGHT属性表示表格的宽度和高度;CELLSPACING表示的是表元和表元之间的距离;CELLPADDING表示表元内部内容和这个表元边框之间的距离。

    标题的定义

    23

    语法:

    <CAPTION ALIGN水平对齐方式” VALIGN垂直对齐方式></CAPTION>

    说明:

    CAPTION标记定义了一个表格的标题,ALIGN属性设置表格标题的水平对齐,取值有left、right、center;VALIGN属性设置表格标题的垂直对齐,取值有top、bottom,分别是将标题设置在表格的上部和下部。

    表行定义

    表24:

    语法:

    <TR ALIGN水平对齐方式” WIDTH=“宽度” HEIGHT=“高度> </TR>

    说明:

    TR标记定义了一个表行,这行表的内容都写在这对双标记中间。

    表头的定义

    25:

    语法:

    <TH WIDTH=“宽度” HEIGHT=“高度” BACKGROUND=“背景图片” BGCOLOR=“背景颜色” ALIGN=“水平对齐方式” VALIGN=“垂直对齐方式” COLSPAN=“行合并格数” ROWSPAN=“列合并格数> </TH>

    说明:

    TH标记定义了一个表头,表头的内容都写在这对双标记中间。表头可以看作是行或列的标题。标记中的WIDTH和HEIGHT属性分别设置了表头的宽度和高度;BACKGROUND和BGCOLOR属性定义了表头的背景图形和背景颜色;ALIGN、VALIGN属性表示表头内容在本表头中的水平和垂直对齐方式;COLSPAN和ROWSPAN两个属性定义了和表头相邻的表头(表元)的合并方法,在需合并的表头的最左上角的表头的<TH>标记中定义。

    表单元的定义

    26

    语法:

    <TD WIDTH=“宽度” HEIGHT=“高度” BACKGROUND=“背景图片” BGCOLOR=“背景颜色” ALIGN=“水平对齐方式” VALIGN=“垂直对方式” COLSPAN=“行合并格数” ROWSPAN=“列合并格数> </TD>

    说明:

    TD标记定义了一个表数据,表数据的内容都写在这对双标记中间。标记中的WIDTH和HEIGHT属性分别设置了表数据的宽度和高度,BACKGROUND和BGCOLOR属性定义了表数据的背景图形和背景颜色,ALIGN、VALIGN属性表示表数据内容在本表数据中的水平对齐方式和垂直对齐方式。COLSPAN和ROWSPAN两个属性定义了和表数据相邻的表数据(表元)的合并方法。

    列表的基本结构

    27

    列表的基本结构

     

    <TABLE>

        <TR>

            <TH> </TH>或者<TD></TD>

        </TR>

    ………..

        <TR>

            <TH> </TH>或者<TD> </TD>

       </TR>

    </TABLE>

    18、表单

    表单定义

    28

    语法:

    <FORM NAME=“命名” ACTION=“提交路径” METHOD传递方式> </FORM>

    说明:

    FORM标记定义一个页面中的一个表单。NAME用于命名;

    ACTION属性用来指定当表单被提交时要接受的文件的路径;

    METHOD属性用于指定提交表单的方法,其取值为GET或POST,默认为GET,GET为地址传值,将数据放在URL后面传递,长度有限,但会自动保存数据,POST传输数据安全,但不能保存数据。

    表单域定义

    29

    语法:

    <INPUT TYPE=“类型” NAME=“命名” VALUE=“取值” SIZE=“表单框的长度>

    说明:

    INPUT是表单中功能最为丰富的一个标记,使用INPUT标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。

    NAME属性标识表单域的名称;TYPE属性标识表单域的类型,它可以是文本TEXT、口令PASSWORD、复选框CHECKBOX、单选框RADIO、隐藏表单HIDDEN、提交表单SUBMIT和复位键RESET;

    VALUE属性定义表单域的值,其他属性根据TYPE的不同而有所变化。

    注:TYPE的最终目的是将写好的的数据传递出去;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

    文本TEXT为一行,不可换行;

    要想使单选和复选可以选择其中的部分选项,再做相应的选项标记时,同一选择中,各选项的标记相对应的那么也必须完全相同;

    VALUE的值最好与INPUT双标记中间的内容相同

    30

    语法:

    <SELECT NAME=“命名”  SIZE=“选项个数”  MULTIPLE> </SELECT>

    说明:

    SELECT标记用来在表单内生成一个选择列表,用户从这个列表中可以选择一个或多个选项。NAME属性是必须的,它用作SELECT单元选择列表的名称,SIZE属性用来设置列表窗口中可见的选项的个数,MULTIPLE是一个名称记号,设置了这一属性,可以在选项列表中选择多个选择项,默认为单选。

    31

    语法:

    <OPTION VALUE=“命名” SELECTED></OPTION>

    说明:

    OPTION标记定义列表中的内容,且只能用在SELECT单元内部,其内容只 能是普通文本。<OPTION>单元有两个可选的属性:VALUE和SELECTED。VALUE属性是选项的值,其取值是唯一的,其默认取值为OPTION双标记间的描述内容;SELECTED属性表示这一项为缺省的(即默认选项)。

    注:要实现下拉菜单至少要有SELECTPOTION这两个双标记;

    下拉单的宽度有VALUE的最长取值决定

    32

    语法:

    <TEXTAREA NAME=“命名” COLS=“高度” ROWS=“宽度></TEXTAREA>

    说明:

    TEXTAREA标记用来在表单中建立一个文本输入窗口,用户可以在其中输入多行文本。NAME属性用来设置文本输入表单域的名称,ROWS属性和COLS属性用来设置文本输入窗口的高度和宽度,单位是字符。

    19、帧集和帧

    有时我们需要在浏览窗口中同时显示多个页面,即将整个浏览的页面划分为多个独立的窗口,每个窗口就称为一帧,这些窗口的集合就成为帧集。

    33

    语法:

    <FRAMESET COLS=“” ROWS“” FRAMEBORDER=“” BORDERCOLOR=“” FRAMESPACING=“”></FRAMESET>

    说明:

    FRAMESET标记定义一个帧集。属性COLS设置纵向排列多个帧窗口,属性ROWS设置横向排列多个帧窗口,FRAMEBORDER代表是否有边框,BORDERCOLOR设置边框颜色,FRAMESPACING属性取值为数字,表示边框的宽度。

    34

    语法:

    <FRAME SRC=“” NAME=“” MARGINWIDTH=“” MARGINHEIGHT=“” SCROLLING=“”>      单标记

    说明:

    FRAME标记定义帧,用来说明显示在每一帧中的HTML文档。SRC属性用来定义帧的来源,NAME属性表示这个帧的名称,MARGINWIDTH和MARGINHEIGHT属性用来控制当前帧左右边界处和上下边界处的空白,其取值单位是象素,SCROLLING标记可设置窗口的滚动条。

    35

    窗口显示

    横排多个窗口

    纵排多个窗口

    纵横排多个窗口

    内含窗口

    实例

    <frameset rows=#>横排多个窗口

    <frameset rows=30%,20%,*>

    <frame src="A.html">

    <frame src="B.html">

    <frame src="C.html">

    </frameset>

    <frameset cols=#>纵向排列多个窗口

    <frameset cols=30%,20%,*>

    <frame src="A.html">

    <frame src="B.html">

    <frame src="C.html">

    </frameset>

    COLS & ROWS纵横排列多个窗口

    <frameset cols=137,*>

    <frame src="A.htm">

    <frameset rows=82,*>

    <frame src="B.htm">

    <frame src="C.htm">

    </frameset>

    </frameset>

    <iframe src=#  name=##>... </iframe>

    #=初始页面的 URL

    ##=框架名称(Frame Name)

    排列方式

        A

           B

           C

    A  B  C

             B

    A

            C

  • 相关阅读:
    python: 字符串按空格分成列表split与加密密码maketrans
    android 几个工具方法
    华硕N43sl VNP 连接问题 800 807 621
    git 创建新项目,下载工程,合并和更新工程简单应用记录
    android分析windowManager、window、viewGroup之间关系(二)
    android分析windowManager、window、viewGroup之间关系(一)
    meta-data获取小结
    转载: 项目经验分享
    不想写代码了
    MapReduce源码分析总结(转)
  • 原文地址:https://www.cnblogs.com/borter/p/9439593.html
Copyright © 2011-2022 走看看