HTML5新事物

1 指定编码字符集,极力推荐

<meta charset="utf-8">

2 指定lang,所有的标签上都有,推荐在<html>上指定。

3 css样式的引入,不再需要指定type="text/css"

<link href="style.css" rel="stylesheet">

4 js的引入,不再需要language="javascript",但是关闭标签是必须的。上面一行是针对IE而设定的。

<!-- saved form url=(0014)abort:internet -->
<script src="script.js"></script>

5 checkbox,checked是一个属性,不再需要指定其值

<input type="checkbox" checked />

6 big,已经被删除了。small却被留下来了。

small的含义已经发生了改变,用来表示附属细则,如法律条款等。

7 hr,样式不变,但是含义发生了改变,现在用来表示主题的改变。

8

<strong>用来表示重要的东西(推荐使用);

<b>仅仅用来加粗字体。

<em>重读的部分(推荐使用);

<i>仅仅用来斜体显示。

9 <a>中现在可以是任意的东西。

10 <wbr>,word br,用来指定在对应的位置将过长的字串进行分割。还有<nobr>不要将一个字串进行分割。

11 <time>用来显示一个时间,尽管没有什么样式,但是可以自己去设定。

12

<header>

虽然<header>意图很明确,但并不是什么时候都要使用它。使用它需要满足如下条件:

  1. 有标题;
  2. 除了标题之外还有其它的元素,如<p>等;
  3. 如果仅仅是由多个标题组成的,可以只用<hgroup>,而不使用<header>
  4. 除此之外,页眉可以直接使用<header>包含。

<header>中肯定要有标题的,如果一个<header>中仅仅包含了一个图片,追加一个看不见的标题也是推荐的,这是遵守html5规则的。

<footer>

HTML5规定,只能在footer中放一些版权,法律相关的信息。其它的不建议放到footer中。

<article>

<section> 用来盛放任何一个有title的文字性描述。

13

<hgroup>,用来盛放所有标题的元素。除了标题之外什么也不要放到它里面。

<header>,它可以用来盛放<h2>之外的另外一个东西。

<header>
    <hgroup>
        <h2>This is something</h2>
        <h4>This is another something</h4>
    </hgroup>
    <p>Even I‘m not a title, I wanna be here</p>
</header>

14

<img> W3School上说,并不会真正的插入一个图片,而只是链接一个图片,这个标签的意义是创建文件的占位空间。

15 CSS相关

padding: 内边距。设定值可以为正数px或者百分数(参照值为其父元素的width),但是值不允许为负值。

margin: 外边距。设定值可以为任意数值或者百分数,负值也是可以接受的。

margin合并: 当两个垂直的元素的margin重合时,将会形成一个margin,其值为较大的一个。横向的无影响。

16 figure, figcaption

插图最好浮动在一个地方,而不是固定在某一个位置。

<figure>用来指定一个盛放图片的区域。

<figcaption>存在于<figure>中,用来追加图片的说明文字。

<figure style="float: left; margin-left: 20px;">
    <img src="someimage.gif" /><!--因为存在了figcaption,alt显得多余了,可以删除,但是不能-->
    <figcaption style="font-size:small, font-style:italic">Some words to discribe the image.</figcaption>
</figure>

17 aside,旁白,离题的话

一般也是float的,用来引入一些相关背景或者其它一些与文本不相干的内容。

18 document.createElement("header")

这句话是用来告诉IE9以前的那些兄弟们的。他们把不能识别的元素统统放弃掉,但是上面这句话就能够骗过IE们,并且知会他们,header是一个元素了,我们可以对它使用样式。

<!-- 这句话告诉浏览器,如果版本低于IE9的话,加载下面的js,不然不加载 -->
<!-- [If lt IE9] -->
    <script src="shiv.js"></script>
<!-- [endif] -->

19 nav标签

用来生成导航栏的页面元素。

20 section

具有标题,并且没有更合适的标签的一段文本信息。

  • 并列显示的一个区块;
  • 独立性的一段内容,但是与article没有太大关系;
  • 引用的一段比较长的文本;
时间: 2024-10-24 21:25:57

HTML5新事物的相关文章

5.8 HTML5新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测 你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解 决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,

感悟:新事物的生命力是惊人的,存在无限的机会

三个例子: 1. Delphi刚出现的时候,谁掌握了它的控件开发方法,就能在控件市场占有一席之地:谁先掌握了它的程序开发方法,就能更快的做项目挣钱.等到后来百花齐放了,就难了. 2. 手机编程刚出现的时候,对所有人都是一个新事物,可是最早学会手机编程的人,是多么的吃香. 3. 那么多网络新贵,都是靠新科技,在很短的时间内就与传统大佬平起平坐.这方面,中美都有很多例子. 所以跟随新事物是没错的,只是也要判断一下,这个新事物有没有生命力.其次,就是新事物没有什么参考资料,完全要靠自己不懈的努力去研究

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

HTML5新功能之八 《web works多线程》

一.什么是历史管理 HTML5新功能之七 <历史管理> HTML5新功能之八 <web works多线程>,布布扣,bubuko.com

如何处理HTML5新标签的兼容性问题

支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式: * 当然最好的方式是直接使用成熟的框架.使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"&l

HTML5新增加的功能

HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储localstorage长期存储数据,浏览器关闭后数据不丢失:sessionstorage的数据在浏览器关闭后自动删除: 语义化更好的内容元素如:article.footer.header.nav.section: 表单控件,type属性有calendar.date.time.email.URL.search: 移除的元素有:纯表现的

HTML5新标签解释及其使用场景

我们来看一下HTML 5提供的一些新的标签用法和HTML 4的区别 <article> 标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本,亦或是来自其他外部源内容.HTML5:<article></article>HTML4:<div></div> <aside> 标签定义 article 以外的内容:aside 的内容应该与 article 的内容相关.HTML5:&l

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新标签的兼容性处理

HTML5新的语义标签尽管有很多的好处,但是在低版本的老IE浏览器中还是存在兼容性问题的,常常让人感到头疼,到底是大胆的使用新标签还是使用传统的大量的DIV无义标签?今天就简单的看看H5新标签的兼容性处理方式. 首先来看一小段简单的代码: HTML代码: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>