您的位置：首页 > Web前端 > HTML5

What's new in HTML5?

2014-04-03 12:25 351 查看

HTML5 is the latest standard for HTML. HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. HTML5 is also cross-platform. It is designed to
work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.

HTML5 是HTML最新标准，它的出现是为了取代HTML 4、XHTML和HTML DOM Level 2。特别地，HTML5被设计用于传达丰富的多媒体内容而无需额外的插件。它同时也是跨平台的。

The W3C HTML5 recommendation was released 28. October 2014.

What’s new?

1. HTML5文档类型声明，如下：

<!DOCTYPE html>

There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTMLtype andversion used.

文档声明大小写不敏感！

两个作用：1．验证器根据此来判断应采用何种验证规则去验证代码。２．能强制 IE6,7,8以标准模式 standards mode 渲染页面.

2. 新增结构元素 new semantic/structural elements

<header> 定义文档或者一个区域的header，用于存放介绍性的内容的容器

<nav> 定义一组导航链接，但不是文档中所有的链接都要放到这个元素里,

<section> 定义了一组有主题的内容，通常含有一个标题

<main> 定义文档的主要内容区域

<article> 定义独立完整的内容，独立与网站中其他内容也可以被阅读：Forum post、Blog post、Newspaper article

<aside> 定义它所处位置的内容以外的一些内容（旁白），要与周围的内容相关，

<footer> 定义文档或者一块区域的footer，页面footer通常包含 author of the document, copyright information, links to terms of use, contact information,
etc.

<figure> 定义一组媒体内容，可以是 illustrations 插图实例, diagrams, photos, code listings, etc,

<figcaption> 定义figure元素的标题, 可以作为<figure>元素的第一个或最后一个子元素

<time> 定义一个日期/时间,

<ruby> 定义ruby注释,

<rt> 定义字符的解释/读法（针对东亚的字体）,

<rp> 定义那些不支持ruby注解的浏览器要显示的内容

新的结构化/语义化的元素取代了传统 <div id="nav">, <div class="header">, or <div id="footer">
的表示方法，带来网页布局的改变，提升对搜索引擎的友好。

正如W3C所建议的：Allows data to be shared and reused across applications, enterprises, and communities

3. 图形元素

<canvas> 定义用JavaScript绘制的图像

<svg> 定义使用SVG绘制的图形

4. 多媒体元素

<audio> 定义声音或音乐内容

<video> 定义视频或电影内容

<source> 定义audio、video两个元素的媒体资源

<track> 定义audio、video的轨迹

<embed> 定义用于外部应用（如：插件）的容器

5. 新增的Web应用元素

<details> 定义用户可以看到或隐藏的额外细节（点击下拉显示）,

<summary> 定义<details>元素内的visible heading,

<mark> 定义被标记或高亮显示的文字,

<bdi> 定义一块文字可能与其他文字在不同的方向,

<wbr> 定义可能的line-break,

<meter> 定义一个含已知范围的标量测量仪器，

<progress> 定义任务进度状态,

6.表格元素

<datalist> 为input提供预定义的选项，用于输入控制

<keygen> 定义了表格里的一个 key-pair 生成器区域

<output> 进行计算并显示结果

New Input Types

HTML5有一些新的输入类型，为表单提供更好的输入控制和确认。

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

HTML5 Browser Support

所有浏览器，不论新版还是旧版，对于不识别的元素，自动按inline行内级元素处理。因此，我们可以教旧浏览器来处理“未知的”HTML元素。

Semantic elements

A semantic element clearly describes its meaning to both the browser and the developer. 语义化的元素清楚地描述了它对于浏览器和开发者的含义。

non-semantic elements: <div> and <span> - Tells nothing about its content.

semantic elements: <form>, <table>, and <img> - Clearly defines its content.

HTML5定义了八个新的semantic元素，它们都是块级元素。

为了在旧浏览器中安全地正确显示<header> <section> <footer> <aside> <nav> <main> <article> <figure> 这些元素，通过CSS display设定为block

header, section, footer, aside, nav, main, article, figure {
display: block;
}

对于IE9及之前版本的IE浏览器，不允许对未知元素设定样式。因此上述办法不起作用。

解决办法：

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

因为IE需要在读取之前知道所有的新元素，所有上述脚本必须放在 <head> 元素里。

关于HTML5 code风格

1. 在等号前后的加空格是合法的，如

<link rel = "stylesheet" href = "styles.css">但是不写空格更易于阅读，和组织相关的实体。
2. 加 2 个空格用于缩进，不要使用 TAB

3. 关于注释，短的注释写在一行，如：

长的注释，分行写，每行开始缩进2个空格，如：
4. 关于CSS书写，短的法则写在一行，如：
p.into {font-family:"Verdana"; font-size:16em;}长的写多行，
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}注意：
1. 开大括号与选择器写在同一行

2. 在开大括号前加一个空格

3. 每行开始缩进2个空格

4. 在每个CSS属性和值之间使用冒号加一个空格

5. 在每一个逗号或分号后加一空格

6. 每对属性-值末尾使用分号，包括最后一个

7. 只有当属性值包含空格时，使用双引号

8. 闭大括号另起一行，没有空格缩进

9. 避免每行超过80个字符

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： semantic elements HTML5 intro

相关文章推荐

新的分享

章节导航