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文档必须有一个根元素