HTML5框架

HTML5中的元素


新增的元素

  • section元素:页面中内容块,如页眉 页脚等
  • article:与上下文不相关的内容
  • aside:表示article元素内容之外的,与article内容相关的辅助信息
  • header:页面中的一个内容区域块,通常用来表示标题
  • hgroup:对整个页面或者页面中的一个内容块的标题进行集合
  • footer:表示页面中的一个区域块,通常表示底部
  • nav:导航链接部分
  • figure:独立的内容,一般表示内容主题中的独立的一个单元
  • canvas:元素本身没有行为,展现为一块画布

全局属性

  • contentEditable属性:

    是否允许用户编辑元素中的内容,boolean类型,属性值为true时允许编辑,为false时不可编辑,未指定值时则由继承状态来决定,若元素的父元素为可编辑,则该元素可编辑

  • designMode属性:

    用来指定整个页面是否可编辑,当页面可编辑时,页面中所有支持上下文所述的contenteditable属性元素都变为可编辑状态,designMode属性只能在javascript脚本文件中被修改编辑,值为on时可编辑,为off时不可编辑

  • hidden属性:

    通知浏览器不渲染该元素,使该元素不可见,可在javascript文件中取消;boolean值类型,属性值为true时为不可见状态

  • spellcheck属性:

    针对于input元素与textarea元素,对于用户输入的内容进行拼写和语法检查

  • tabindex属性:

    当敲击Tab键时,第几个被访问到,(默认情况下Tab访问功能只有表单和链接元素可使用,若其他标签想要使用该功能可以设置tabindex属性)。例:tabindex=2表示敲击Tab键时,第二个被访问到

框架:

框架标签(frame):框架对页面设计有很大作用
框架集标签(<frameset>):可以不需要<body>标签,框架集标签定义如何将窗口分割为框架,每一个frameset定义一系列行或列,rows/cols的值规定了每行或每列占据屏幕的面积
常用标签: noresize:固定框架大小;cols:列;rows:行

1
2
3
4
5
6
<framset rows="20%,50%,30%"> //rows:行;cols:列
<frame src="frame1.html"></frame>
<frame src="frame1.html"></frame> //在框架集标签中 用框架标签 src:导入.html文件
<frame src="frame1.html"></frame>
</framset>

内敛框架:iframe 可以将页面嵌套进来

1
2
3
4
5
6
7
8
9
10
11
12
13
//主页面 index.html
<iframe src="frame3.html" frameborder="0" width="800px" height="800px">
</iframe>
形成页面的嵌套
//frame1.html
内容
//frame2.html
<iframe src="frame1.html" width="400px" height="400px"></iframe>
//frame3.html
<iframe src="frame2.html" width="600px" height="600px"></iframe>
  • <a>标签的target属性:
    target的值

    ‘_self’:在本页面打开
    ‘_blank’另起一个页面打开
    ‘_parent’在父级页面打开
    ‘_top’在顶级页面打开

  • HTML实体
    预留字符串的表示: &lt;html&gt;———–><html>

XHTML


  • XHTML

    XHTML是指可扩展超文本标记语言
    XHTNL是更严格更纯净的HTML版本

  • 文档声明

    DTD:规定了通用标记语言的网页语法
    公司DTD包含了所有HTML元素和属性,不包括展示性和弃用元素,不允许框架集(Framesets)

  • 三种XHTML文档类型

    STRICT(严格类型)
    TRANSITIONAL(过渡类型)
    FRAMESET(框架类型)

  • XHTML元素语法

    XHTML元素必须正确嵌套
    XHTML元素必须始终关闭
    XHTML元素必须小写
    XHTML文档必须有一个根元素