HTML5常用标签分类及用法

一、HTML文档标签

1.<!DOCTYPE>: 定义文档类型

2.<html>: 定义HTML文档

lang属性:简体中文<html lang=”zh-cmn-Hans”>  繁体中文 <html lang=”zh-cmn-Hant”>

3.<head>: 定义文档的头部.(头部内包含)

(1). <meta>: 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。该元素除了可以指定id属性之外,还可以指定以下三个属性:

http-equiv:指定元信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确处理网页内容。

http-equiv属性所支持的值:

1、Expires:指定网页的过期时间。一旦网页过期必须重新从服务器下载。

2、Pragma:指定禁止浏览器从本地磁盘缓存中调阅页面内容,浏览器一旦离开该网页就无法脱机访问该网页。

3、Refresh:指定浏览器多长时间后自动刷新指定页面。

4、Set-Cookie:设置Cookie。如果网页过期,那么客户端上的Cookie也将被删除。

5、content-Type:设置该页面的内容类型和所用的字符集

name:指定元信息的名称(author website copyright keywords ),该名称可以随意指定。

content:指定元信息的值。

扩展:meta标签总结与属性使用介绍

(2). <base>:定义页面上的所有链接规定默认地址或默认目标

(3). <title>: 定义文档的标题

(4).  <link>: 定义文档与外部资源的关系

扩展:Link prefetch

(5). <style>:定义 HTML 文档样式信息

4.<body>: 定义文档的主体.(脚本在非必须情况时在主体内容最后)

(1). <script>: 定义客户端脚本,比如 JavaScript

(2). <noscript>:定义在脚本未被执行时的替代内容(文本)

扩展:Noscript标签中不要放置重要内容

扩展:为什么要在html和body加上“height:100%;”

二、布局标签&语义化

1.<div>:定义块级元素

针对在HTML5中对<div>使用的几点建议:

如果你觉得用HTML5中的新的标签比用<div>合适就一定要用新的标签,因为<div>没有任何的语义,这个是HTML5所不倡导的;

如果效果需要的话可以在HTML5新标签的外面加一个<div>标签,这样对HTML中的语义不会产生太大的影响。

2.<span>:定义行业元素.

3.<header>H5:定义区段或页面的页眉.(头部)

该元素主要用于为<article>元素定义文章“头部”信息。该元素内部即可包含多个h1~h6这样的标题元素,也可包含<hgroup>元素,还可以包含普通的<p>、<span>等元素

4.<footer>H5:定义区段或页面的页脚.(足部)

<footer>:页脚标签(与<header>标签对应的标签),用他可以实现的功能有:附录、索引、版权页、许可协议等。相关阅读

特别提示:

页脚并不一定是要位于所在元素的末尾,不过通常是这样的;

他不可以放在<header>标签中,也不可以相互嵌套,或是在<address>元素中。

5.<section>H5:该元素用以对页面的内容进行分块。其通常可由标题和内容组成:

通常建议<section>元素包含一个标题(h1~h6元素定义的标题)

<section>元素可以包含多个<article>元素,表示该“分块”内容包含多篇文章。

<section>可以嵌套<section>元素,表示该分块包含多个子分块。

<article>侧重与表达一篇独立的、完整的文章,而<section>则侧重于对页面内容进行分块。如果想表达一块独立、完成的内容使应该使用<article>元素,如果想把一块内容分成几部分,则应该用<section>元素。相关阅读

6.<article>H5:该元素用于代表页面上独立、完整的一篇“文章”。该元素表示的内容可以是一个帖子、一篇Blog文章、一篇短文、一条完整的回复等。总之,只要是一篇独立的文档内容就应该使用<article>元素来表示。扩展阅读

<article>元素内部可使用<header>定义文章的“标题”部分。

<article>元素内部可使用<footer>定义文章的“脚注”部分。

<article>元素内部可使用<section>把文章内容分成几个“段落”。

<article>元素内部可以嵌套多个<article>作为它的“附属”文章。

7.<aside>H5:定义页面内容之外的内容.

<aside>:定义侧栏标签(表示一部分内容与页面的主体并不是有很大的关系,但是可以独立存在),用他可以实现:升式引用、侧栏、相关文章的链接框、广告、友情链接等等。 相关阅读

特别提示:

如果使用多个<aside>,标签应该在主要内容的后面,这样有利于SEO的搜索与提升可访问性;

如果是与文章的主要内容有关系的图像需要用<figure>标签。

8.<details>H5:定义元素的细节

9.<summary>H5:定义 <details> 元素可见的标题

10. <dialog>H5:定义对话框或窗口

11. <nav>H5:定义导航.

<nav>:标记导航(对应网页中重要的链接群就需要用这个标签)包含在<nav>中间的通常是<ul>无序列表。当然如果是面包屑链接就需用到<ol>有序列表,只要记住这个语义自己灵活发挥就是可以了。

特别提示:

HTML5规范不推荐对有辅助性的页脚链接用<nav>;

HTML5中不允许将<nav>嵌套在<address>标签中。

12. <hgroup>H5:定义标题组

该元素主要用于组织多个h1~h6这样的标题元素。当<header>需要包含多个标题元素时,可以考虑使用<hgroup>把它们组成一组。

三、表格标签

1.<table>:定义表格

2.<thead>:定义页眉.

3.<tbody>:定义主体.

4.<tfoot>:定义页脚.

5.<caption>:定义标题.

6.<th>:定义表头.

7.<tr>:定义一行.

8.<td>:定义单元格.

扩展阅读:table 那些事儿

四、表单标签

1.<form>:元素用于生成输入表单,该元素不会生成可视化部分。其除了指定id、style、class等核心属性,还可以指定onclick等事件属性,除此之外还可以指定如下几个属性:

action:指定当单击表单内的“确认”按钮时,该表单被提交到哪个地址。该属性既可以指定绝对地址,也可以指定相对地址。该属性必填。

method:指定提交表单时发送何种类型的请求。该属性值可为get或post,分别用于发送GET或POST请求。通常建议发送POST请求。该属性必填。

enctype:指定对表单内容进行编码所使用的字符集。

name:指定表单的唯一名称,建议该属性与id属性值一致。

target:指定使用哪种方式打开URL。

2.<input>:定义输入域 扩展阅读:深藏不露的 <input>

3.<textarea>:定义文本域(多行)   扩展阅读:禁用webkit textarea可调整大小和文本框焦点时边框

cols:指定文本域的宽度,该属性必填。

rows:指定文本域的高度,该属性必填。

disabled:指定禁用该文本域。

readonly:指定该文本域只读。

4.<label>:元素用于在表单元素中定义标签,这些标签可以对其他可生成请求参数的表单控件元素(如单行文本框、密码框等)进行说明。<label>元素可以指定for属性,该属性指定该标签与哪个表单控件关联。

5.<fieldset>:定义域.

6.<legend>:定义域的标题.

7.<select>:元素用于创建列表框或下拉菜单,该元素必须和<option>元素结合使用,每个<option>元素代表一个列表项或菜单项。其可指定如下几个属性:

disabled:设置禁用该列表框和下拉菜单。

multiple:设置列表框与下拉菜单是否允许多选,该属性值只能是disabled或省略属性值,表示允许多选,一旦设置会自动生成列表框。

size:指定列表框内可同时显示多少个列表项。一旦设置会自动生成列表框。

注:一个<select>元素到底生成列表框还是下拉菜单完全由multiple或size属性决定,设置了该属性就会生成列表框,否则就是下拉菜单。

8.<optgroup>:用于定于列表项或菜单项组。该元素只能包含<option>子元素,处于其里面的<option>就属于该组。

label:指定该选项组的标签。这个属性必填。

disabled:设置禁用该选项组的所有选项。

9.<option>:用于定义列表项或菜单项。该元素只能包含文本内容作为该选项文本。

disabled:指定禁用该选项。

selected:指定该列表项初始状态是否处于被选中状态。

value:指定该选项对应的请求参数。

10. <button>:元素用于定义一个按钮,在<button>元素的内部可以包含普通文本、文本格式化标签、图像等内容,这也正是其和<input>按钮的不同之处。值得指出的是,不要在按钮之间放置图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

<button>元素可以指定id、style、class等核心属性,还可以指定onclick等事件响应属性。除此之外,还可以指定以下属性:

disabled:指定是否禁用此按钮。该属性值只能是disabled,或者省略属性值。

name:指定按钮的唯一名称。该属性值应该与id属性值保持一致。

type:指定该按钮属于哪种按钮,该属性值只能是button、reset或submit其中之一。

value:指定该按钮的初始值,可通过脚本进行更改。

11. <fieldset>:定义围绕表单中元素的边框.

12. <legend>:定义 fieldset 元素的标题.

13. <fieldset>H5:定义选项列表.与input 元素配合使用该元素,来定义 input 可能的值.

14. <keygen>H5:定义表单的密钥对生成器字段.

15. <output>H5:定义不同类型的输出,比如脚本的输出.

五、列表标签

1.<ul>:定义无序列表.

2.<ol>:定义有序列表.

3.<li>:定义列表项.

4.<dl>:定义自定义列表.

5.<dt>:定义自定义列表项.

6.<dd>:定义自定义的描述.

六、图像&链接标签

1.<img>:定义图像.注意加上alt属性

2.<a>:定义超链接.

3.<map>:定义图像映射。

4.<area>:定义图像地图内部的区域.

5.<figure>H5:定义媒介内容的分组

<figure>这个元素是用来引入图表、图形、照片等,对应的场景就是像是杂志中的图片一样,在HTML5之前是没有一个专门的标签来做这个事的,之前如果实现这个功能就是用没有语义的<div>标签;扩展阅读

用法提示:

1. <figure>元素可以包含多个内容块,但是只能有一个<figcaption>(可以理解成给图表加标题)标签;

2. 可以用<h1>~<h6>来给<figure>增加标题;

3. <figcaption>不能单独出现,需要有配套的内容一起出现。

6.<figcaption>H5:定义 <figure> 元素的标题.

七、音频/视频

1.<audio>H5:定义声音内容.

2.<source>H5:定义媒介源.

3.<track>H5:定义用在媒体播放器中的文本轨道.

4.<video>H5:定义视频.

扩展阅读:HTML5 audio与video标签实现视频播放,音频播放

八、框架标签

1.<iframe>:内联框架   扩展:最简单的 iframe 使用方法

九、格式标签

1.文章标签

1.<h1>-<h6>:定义 HTML 标题

扩展:网站h1,h2,h3标签的用法和技巧

2.<p>:定义段落.

3.<br>:定义换行.

4.<hr>:定义水平线.

5.<bdo>:定义文字方向.

6.<pre>:定义预格式文本.

7.<abbr>:定义缩写.

8.<address>:定义文档作者或拥有者的联系信息.

1.<address>是用来定义与HTML页面或页面一部分有关的作者、相关人员或组织的联系信息,通常位于页面底部或相关部分内;
2.大多数时候,联系信息是作者的电子邮件或是指向联系信息页的链接,这个是正确的,不能用来标记“联系我们”中的办公地点,这是错误的用法;
3.提供的信息要准确,不是说电子邮件的地址的正确性,而是说需要对应上提供信息的人,如果一个页面中有好多相关的人,那么提供信息的时候一定要确定信息准确性,不要张冠李戴;
4.<address> 标签中不能 有<h1>~<h6>、<article>、<address>、<aside>、<footer>、<header>、<hgroup>、<nav>、<section> 等标签;

9.<ins>:定义被插入文本.

10. <del>:定义被删除文本.

11. <time>:定义日期/时间

<time>可以通过这个标签标记一个具体的时间或日期,应用场景通常就是一篇文章的发表时间。

需要注意的是:

1. datetime中的时间最好与<time>标签中的文本元素日期一样,写法可以不一样;

2. 如果这个时间是代表整个文章或是页面的时间需要添加pubdate属性;

3. 不要在<time>标签中使用不确切的时间如:“今天中午”、“上周末”;

4. 如果 使用pubdate属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题;

5. <time>标签不能在嵌套另一个<time>标签;

6. datatime中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss

2.短语元素标签

1.<em>:定义强调文本(默认为斜体)

2.<strong>:定义语气更为强烈的强调文本

<strong>表示的是重要的文本(默认为粗体显示)——重点是语义上的表达而不是展现的效果这个需要记住哦

3.<dfn>:定义定义项目.

4.<code>:定义计算机代码文本.

5.<samp>:定义计算机代码样本.

6.<kbd>:定义键盘文本.

7.<var>:定义文本的变量部分.

8.<sup>:定义上标文本.

9.<sub>:定义下标文本.

10. <cite>:定义引用.

11. <blockguote>:定义长的引用.

12. <q>:定义短的引用.

3.字体样式标签

1.<i>:显示斜体文本效果.

2.<b>:呈现粗体文本效果.

3.<big>:呈现大号字体效果.

4.<small>:呈现小号字体效果.

5.<mark>H5:定义有记号的文本.

<mark>标签是HTML5中的新元素,用来突出显示文本,它的效果就像是用荧光笔给重点的语句做标记一样;

十、其它

1.<canvas>H5:定义图形容器,必须使用脚本来绘制图形 扩展:Canvas笔记

2.<meter>H5:定义预定义范围内的度量 <meter value =”当前值”  min = “最小值” max = “最大值” low = “指定范围的最小值”  high= “指定范围的最大值” optimum = “指定有效范围的最佳值” ></meter>

<meter>可以用它做一些测量结果的显示与投票结果的显示(现在的问题是浏览器对它的支持不好);

3.<progress>H5:定义任何类型的任务的进度<progress value = “进度条当前完成的进度值” max = “进度条完成时的值”></progress>

<progress>同样的一个进度条的显示,可以用做一些很好的与用户交互的效果,问题是浏览器的兼容现在也不好。

From:segmentfault.com

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注