HTML5标签的使用和作用

时间:2022-02-06 04:28:14

在菜鸟教程中找了一些关于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中常用的标签&lpar;及标签的属性和作用&rpar;

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

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

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

  3. 对HTML5标签的认识&lpar;三&rpar;

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

  4. 对HTML5标签的认识&lpar;二&rpar;

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

  5. HTML5 Shiv完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

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

  6. HTML5标签构成

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

  7. 完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

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

  8. HTML5标签与HTML4标签的区别示例介绍&lowbar;html5教程技巧

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

  9. 解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

随机推荐

  1. javascript的一点学习

    最近用vue.js用的很爽,在全栈开发的路上一路狂奔,发现后台跟前台一起确实更有意义. 记录一个比较有意思的bug: 目标是对一个全局的paramList进行json格式化显示.代码借鉴了 http: ...

  2. SoapUI 使用笔记

    1. 构建项目 安装完成后 右键Project --> New SOAP Project 在弹出的 New SOAP Project框中输入名字 和 webservice服务地址(example ...

  3. sdutoj 2608 Alice and Bob

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2608 Alice and Bob Time L ...

  4. lnmp全面优化集合nginx&plus;mysql&plus;php

    lnmp的全名是linux+nginx+mysql+php,既然是全面优化那我们就从linux系统的选择入手.debian系统可以算是 linux各分支中做的比较突出的一类,连谷歌都抛弃linux订制 ...

  5. 微信开放平台 获取 component&lowbar;verify&lowbar;ticket

    <?php /** * @author zhaozhuobin * @date:2016-06=07 * */ namespace common\components;use DOMDocume ...

  6. QEMU-KVM自己主动创建虚拟机,以指定IP构造

    正在使用qemu不能指定创建虚拟机的过程IP住址,然而,在实际应用中,我们需要有一台虚拟机IP住址,不是人为的虚拟机操作系统配置. 于qemu虚拟机技术文档(http://qemu.weilnetz. ...

  7. InnoDB Undo Log

    简介 Undo Log包含了一系列在一个单独的事务中会产生的所有Undo Log记录.每一个Undo Log记录包含了如何undo事务对某一行修改的必要信息.InnoDB使用Undo Log来进行事务 ...

  8. RandomAccessFile&amp&semi;IO流&amp&semi;排序&amp&semi;方法论

    RandomAccessFile&IO流&排序&方法论 我们总觉得历史是极其遥远的东西,与我们并无关联,又觉得历史隐藏在图书馆的旧书之中. 然而,我们每个人都有真真切切的历史. ...

  9. topcoder srm 630 div1 &lpar;2-SAT and SCC template&rpar;

    problem1 link 首先计算任意两点的距离.然后枚举选出的集合中的两个点,判断其他点是否可以即可. problem2 link 假设字符串为$s$,长度为$n$.那么对于$SA$中的两个排名$ ...

  10. 测试同学必备抓包工具--charles之mock数据

    charles中有三个是我经常用到来mock数据的. 一. 打断点--Breakpoints 1. 先切换查看‘Structure’模式 2. 找到目标链接,对其父级进行打断点,如图 3. 取消掉再次 ...