HTML的基本结构及常用的标签及其属性

1、HTML的基本结构


	
		...
	
	
	 

中间可以添加的内容:

标签符号 说明
文件标题声明
控制标记的动态文件转换声明
超链接网址基准参考点
Javascript 和 VBScript 程序
stylesheet 用来设置排版的声明
可引用外部文件,如 CSS 排版样本

2、常用的控制标记

(1)跳行

格式:
,无属性设置。
(2)段落


格式:

......

属性名称 属性值 说明
align left 居左(默认)
align center 居中
align right 居右

(3)水平直线



格式:

属性名称 属性值 说明
size 像素 绝对设置,以数字表示,属性值越大,线越粗
size 百分比 相对设置,以%表示,属性值越大,线越粗
width 像素 绝对设置,长度不会因视窗的改变而改变
width 百分比 相对设置,长度会随着视窗宽度而改变
noshade   实体线

(4)居中对齐

(被废弃的标签)
格式:
......

(5)背景色与文字设置
格式:
(6)标题文字设置
格式:

属性名称 属性值 说明
align left 居左
align center 居中
align right 居右

(7)特殊字符设置
格式:

特殊字符 代替表示
< lt;
> gt;
& amp;
" quot;

(8)HTML的备注
格式:
(9)实体字符控制标记

标签 说明
加粗
倾斜
删除
下划线
电报
上标
下标

(10)语意字符控制

标签 说明
地址
大字
删除
修改
小字
加强语气(加粗)
加强语气(倾斜)

(11)字体控制(被废弃的标签)
格式:

属性名称 属性值 说明
size 0-7 字体大小
color 英文或十六进制表示 颜色
face 字体 字体

(12)格式化
格式:


让书写的文字格式化。
(13)引用文本
格式:
...

属性名称 属性值 说明
cite url 被引用的地址

3、无序列表和有序列表

(1)无序列表


  • 格式:

    • ......
    • ......
    • ......
    • ......

    功能:

      :无序列表的开始,
    :无序列表的结束,
  • ......
  • :表示一个无序列表项。
  • 的属性

    属性名称 属性值 说明
    type dise 实心圆(默认值)
    type circle 空心圆
    type square 实心方块

    (2)有序列表


    1. 格式:

      1. ......
      2. ......
      3. ......
      4. ......

      功能:

        :有序列表的开始,
      :有序列表的结束,
    2. ......
    3. :表示一个有序列表项。
        的属性

        属性名称 属性值 说明
        type 1 以 1,2,3,4 来表示
        type a 以 a,b,c,d 来表示
        type A 以 A,B,C,D 来表示
        type i 以 i,ii,iii 来表示
        type I 以 I,II,III 来表示

        (3)无序列表和有序列表的结合应用
        格式:

          1. ......
          2. ......
          3. ......
          1. ......
          2. ......
          3. ......

        (4)叙述式清单(定义列表)
        格式:

        ...
        ......
        ......
        ......
        ...
        ......
        ......
        ......

        功能:

        :叙述清单的开始,
        :表示一个叙述式列表项,
        :表示一个叙述式列表项下的更详细的内容。

        4、表格

        (1)

        标签下的属性

        属性名称 属性值 说明
        border 像素 设置表格的边线
        cellspacing 像素 绝对设置,格框线的宽度
        cellspacing 百分比 相对设置,格框线的宽度
        cellpadding 像素 绝对设置,数据与框线的距离
        cellpadding 百分比 相对设置,数据与框线的距离
        width 像素 绝对设置,像素表示表格宽度
        width 百分比 相对设置,百分比表示表格宽度
        height 像素 绝对设置,像素表示表格高度
        height 百分比 绝对设置,百分比表示表格高度
        align left 表格居左(默认)
        align center 表格居中
        align right 表格居右
        bgcolor 英文或十六进制表示 表格的背景颜色
        background URL 表格的背景图片
        summary 字符串 用来对表格中的数据作说明
        bordercolor 英文或十六进制表示 边框的颜色
        bordercolorlight 英文或十六进制表示 边框的亮色
        bordercolordark 英文或十六进制表示 边框的暗色

        (2)

        标签下的边框设置

        属性名称 属性值 说明
        frame void 不要显现表格的边线
        frame above 只显现出表格的上边线
        frame below 只显现出表格的下边线
        frame hsides 只显示表格的上下边线
        frame vsides 只显现表格的左右边线
        frame lhs 只显现表格的左边线
        frame rhs 只显现表格的右边线
        frame border/box 会显现出表格的所有边线
        rules rows 只显示出横行的格框线
        rules cols 只显示出直行的格框线
        rules all 显示全部格框线
        rules groups 表示列组合水平部分
        rules none 不显示任何格框线

        注意:frame属性必须在border属性值不为0的状态下设置才有效果。
        (3)标签下的常用属性

        属性名称 属性值 说明
        width 像素 绝对设置,以像素值设置宽
        width 百分比 相对设置,以百分比设置宽
        height 像素 绝对设置,以像素值设置高
        height 百分比 相对设置,以百分比设置高
        bgcolor 英文或十六进制 数据栏的颜色设置
        align(水平方向) left 数据靠左
        align(水平方向) center 数据靠中
        align(水平方向) right 数据靠右
        valign(垂直方向) top 数据靠上
        valign(垂直方向) middle 数据靠中
        valign(垂直方向) bottom 数据靠下
        nowrap   在单元格中不换行

        (4)拆分与合并单元格

        属性名称 属性值 说明
        colspan 数字 向两边扩展栏位
        rowspan 数字 向下扩展栏位

        (5)表格的结构化
        结构化格式:

        ..................

        (6)表格的直列化
        表格的直列化格式:......

        属性名称 属性值 说明
        align left 居左
        align center 居中
        align right 居右
        valign top 居上
        valign middle 居中
        valign bottom 居下
        span 数字 直列数目
        width 像素/百分比 宽度

        个别直列设置格式:功能完全和一样。
        (7)表格的标题

        ......

        下的属性值:

        属性名称 属性值 说明
        align top 标题在表格上方
        align bottom 标题在表格下方

你可能感兴趣的:(Front,End)