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>