HTML初学笔记四

发表于

XHTML简介

  • XHTML元素语法：

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

  • XHTML属性语法规则：

    属性必须小写
    属性值必须用引号包围
    属性最小化禁止

HTML5和HTML4的区别：

  • 新增的元素
    结构元素：

    section:内容块，与h1~h6同时使用。表示文档的结构
    article:表示一块与上下文不相关的内容
    aside:表示article内容之外的相关的辅助信息
    header:页面中的内容区域块，通常表示标题
    hgroup:表示整个页面或一个内容块的标题进行结合
    footer:表示页面中的部分，通常表示区域块的底部
    nav:表示页面中的导航链接部分
    figure:主体重内容的单元

  • 新增其他元素：

    vidio:定义视频
    audio:定义音频
    canvas：画布，表示图形
    等等

  • 新增input元素类型：
    email:地址
    url:文本框地址
    number:数字
    range:输入框内数字的范围值
    Date pickers:日历时间
  • 废除的元素：

    不再使用frame框架
    只有部分浏览器支持的元素
    其他

新增的属性：

表单相关的属性
链接相关的属性
其他属性

全局属性：可以对任何元素都使用

  • contenteditable属性：

    允许编辑内容ontenteditable或者=”true”,
    contenteditable=”false”为不可编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        </head>
        <body>
        <h1>可编辑列表</h1>
            <ul contenteditable>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            </ul>
        </body>
</html>

  • designmode属性：用来指定整个页面是否可编辑，当页面可编辑时，contenteditable元素都为可编辑，属性值有两个：off和on

  • hidden属性：通知浏览器不渲染该元素，元素为true时不可建状态，false时为可建状态

  • spellcheck属性：对用户输入的内容进行拼写和语法的检查
  • tabindex属性：表示该内容是第几个被访问到的

新增主体结构元素：

  • article元素：可以嵌套使用，可以做插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>article元素</title>
    </head>
 <body>
         <article>
                       <header>
                 <h1>极客学院</h1>
                 <p>欢迎</p>
                       </header>
         <article>
                  <header>作者</header>
                  <p>评论</p>
                  <footer>time</footer>
         </article>
            <footer>
                    <p>底部</p>
            </footer>
         </article>
<article>
            <h1>内嵌页面</h1>
             <object>
                 <embed src="#" height="400" width="500"></embed>
             </object>
</article>
</body>
</html>

embed标签定义嵌入的内容，比如插件，标签必须有src属性

  • section元素：

    对于网站或应用程序中页面上的内容进行分块，section元素通常由内容或其标题组成，但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或者通过脚本定义行为时，推荐使用div.

  • nav元素：用作页面导航的连接组

    传统导航条
    侧边导航栏
    页内导航
    翻页操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>nav元素</title>
    </head>
 <body>
         <nav>
             <ul>
                 <li><a href="#">主页</a></li>
                 <li><a href="#">开发文档</a></li>
             </ul>
         </nav>
         <article>
             <header>
                 <h1>HTML5与CSS3的历史</h1>
                 <nav>
                     <ul>
                         <li><a href="#">CSS3的历史</a></li>
                         <li><a href="#">HTML5的历史</a></li>
                     </ul>
                 </nav>
             </header>
             <section>
                 <h1>CSS3的历史</h1>
                 <p>...</p>
             </section>
             <section>
                 <h1>HTML5的历史</h1>
                 <p>...</p>
             </section>
             <footer>
                 <a href="#">删除</a>
                 <a href="#">修改</a>
             </footer>
         </article>
         <footer>
             <p><small>版权声明：</small></p>
         </footer>
 </body>
</html>