在菜鸟教程中找了一些关于HTML5的知识点,觉得很有用,可以整理一下,以后使用。

这是一个基本的HTML5文档:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>

判断是不是HTML5?看两个地方就够了------<!DOCTYPE html>,<meta charset="utf-8">,只要这两个格式正确,就可以确定了。

下面说一下HTML5标签的使用方法和作用

<!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。

<a href="http://www.baidu.com"></a><a href=""></a>这是一个超链接标签。

<abbr> 标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948. (当你的鼠标在WHO上悬停的时候,它会出现World Health Organization)

<address>标签

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

显示出的效果通常都是斜体字。如果<address>元素位于<body>元素内部,则它表示该文档作者/所有者的联系信息。

如果<address>元素位于<article>元素内部,则它表示该文章作者/所有者的联系信息。

后期学习新增:

<header></header>它就是主体的头部,也可以把它看成页眉。每一页都有,在最上面。放置logo,顶级导航这样一些内容。

<footer></footer>页面主体上的底部,也就是文档上的页脚,一般会放些版权声明,联系方式等等内容

<nav></nav>它是代表页面中的导航链接的部分,一般有导航的话,就会有这个标签

<article></article>它代表文档啊,页面啊,或者应用程序中独立的完整的一些可以独自外部引用的内容,比如说:博客里的一篇文章,一个帖子等等与之比较类似的是<section></section>

<section></section>.的适用范围更广泛,比如页面里的广告,联系方式,文章里面的章节等等,只要你觉得只是个区块就可以使用,在文档内容明确的出现在大纲里,它就比较适用。如果你这个东西只是个装饰,就不用了,但是出现在文档大纲中,由用户看到的,有意义的内容就可以使用。<article></article>就可以看成是一个特殊的<section></section>,是<section></section>的子集,包含图文内容的文章,就可以使用<article></article>,<article></article>的语义更加的强烈

<b></b>不仅仅是加粗,还表示这段文本是用来吸引人注意的,但并不表示这是重点或者是强调

<em></em>表示重点强调,比如说公式,定理一段文字的

<i></i>不同的语气,样子上有不同的差异,有些区别,比如说这段文字表示了讽刺,文法与其他的不一样啊。

HTML5标签的使用和作用的更多相关文章

  1. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  2. html5标签兼容ie6,7,8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  3. 对HTML5标签的认识(三)

    这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...

  4. 对HTML5标签的认识(二)

    ---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...

  5. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  6. HTML5标签构成

    一个HTML5文件是由一些列的元素和标签组成的.元素是HTML5文件的重要组成部分,例如title(文件标题).img(图像)及table(表格)等.元素名不区分大小写,而HTML5用标签来规定元素的 ...

  7. 8 个有用的 HTML5 标签

    作为一个 web 前端开发者,在制作页面的时候你会从一大堆不同的标签中选择合适的标签来完成相应的功能.有些 HTML5 标签广为流传,例如 <article> <header> ...

  8. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  9. HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

    (1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...

随机推荐

  1. scala刷LeetCode--21 合并两个有序链表

    一.题目描述 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 二.示例 输入:1->2->4, 1->3->4输出:1->1 ...

  2. Java内部类你真的会吗?

    一.四种内部类 1.1.成员内部类 成员内部类是最普通的内部类,它的定义为位于另一个类的内部,形如下面的形式: public class OuterAndInnerClass { public sta ...

  3. Windows下必备的开发神器之Cmder使用说明

    诚言,对于开发码字者,Mac和Linux果断要比Windows更贴心;但只要折腾下,Windows下也是有不少利器的.之前就有在Windows下效率必备软件一文中对此做了下记载:其虽没oh-my-zs ...

  4. NOIP最后阶段每日小记

    前言:最后几天了,记录一下每天的经验.教训.启示.大牛路过请补充一点内容…… 2017-10-31 21:32 今天考试打完第一题就知道是AK场,然后就死命搞题,结果第一题手贱多打了一个%,本机无显示 ...

  5. STM32F0_HAL库驱动描述——LL驱动程序概述

    LL驱动概述 低层(LL)驱动器旨在提供快速轻量级的专家导向层,它比硬件更接近硬件: 与HAL相反,LLAPI不适用于优化访问不是关键功能的外设设备,或者需要大量软件配置和/或复杂的高级堆栈(如USB ...

  6. VS2012 BIDS之Reporting Service/SSRS 项目2--开发过程问题总结(全)

    由刚开始的接触到现在做出来一个基本完整的SSRS的项目,学到了比较多的知识,和大家共享. 上一篇学习总结可能有些问题,一起修正和总结. ================================ ...

  7. 【CYH-01】小奔的国庆练习赛:赛后标程

    前排鸣谢@找寻 大佬 emm-由于头一次举办公开赛所以--准备不是很充分,所以说题解也没有备好,在这里表示歉意. 欢迎大家来发布题解,在此我们可以提供AC代码,供大家参考. T1 解析:这一题可能栈溢 ...

  8. Excel催化剂开源第28波-调用Google规划求解库

    在Excel催化剂的自定义函数中,有规划求解的函数,用于在一些凑数的场景,某财务工作网友向我提出的需求,例如用于凑发票额使用. 一般开发票的场景是多次采购合在一起开具,即多个订单产生后开,同时发票一般 ...

  9. Anacodna之conda的使用

    yum install -y bunzip2 wget https://repo.continuum.io/archive/Anaconda2-5.0.1-Linux-x86_64.sh chmod ...

  10. LeetCode 解题目录

    0001. 两数之和(Java) 0003. 无重复字符的最长子串(Java) 0172. 阶乘后的零 (Java) 0287. 寻找重复数(Java)