标签 描述 示例
<!DOCTYPE>  定义文档类型。

HTML5 ： <!DOCTYPE html>

HTML4.* ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta> 定义关于 HTML 文档的元信息。

规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

指定字符集：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

禁止转码：<meta http-equiv="Cache-Control" content="no-siteapp" />

优先使用IE11：<meta http-equiv="x-ua-compatible" content="ie=IE11">

SEO：<meta name="keywords" content="FullStack">

移动端设置：<meta name="screen-orientation" content="portrait"> 强制竖屏...等等

<datalist>

<select>

定义下拉列表。

定义选择列表（下拉列表）。

datalist如下：

select只能选择给定选项

datalist支持输入填写，支持模糊查找匹配
<ol><ul><li>

定义列表。

有序列表

无序列表

<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>

<frameset><frame>

<noframes>

 定义框架集的窗口或框架。 

<frameset cols="25%,50%,25%">
 <noframes>
 <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src="frame_a.htm" />

  <frame src="frame_b.htm" />

  <frame src="frame_c.htm" />

</frameset>
<abbr> 定义缩写。

<abbr title="People's Republic of China">PRC</abbr>
<address> 定义文档作者或拥有者的联系信息。  仅语义特性，效果同div
<applet> 不赞成使用。定义嵌入的 applet。  嵌入的 Java applet
<article> 定义文章。  仅语义特性，效果同div
<aside> 定义页面内容之外的内容。  仅语义特性，效果同div
<base> 定义页面中所有链接的默认地址或默认目标。  <head>

<base href="http://www.w3school.com.cn/i/" />

<base target="_blank" />

</head>

<body>

<img src="eg_smile.gif" /> //此图片会在w3school域名下寻找

</body>
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。  
<bdo> 定义文字方向。

<bdo dir="rtl"> Here is </bdo>

结果- si ereH
<blockquote> 定义长的引用。 文字左右缩进并有换行
<caption> 定义表格标题。

内嵌于table

<cite><dfn><em>

<code><strong><kbd>

<var><samp><small><time>

 定义  仅语义特性，效果同div，可使用css实现
<col> 定义表格中一个或多个列的属性值。  
<colgroup> 定义表格中供格式化的列组。  
<dd><dl><dt> 定义列表

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

结果:
<del><ins> 定义被删除文本。  
<details><summary> 定义元素的细节。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<dialog> 定义对话框或窗口。  Chrome 和 Safari 6 和支持
<embed> 定义外部交互内容或插件。

<embed src="/i/helloworld.swf" />

播放该文件
<fieldset><legend> 定义围绕表单中元素的边框。

<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
<figure><figcaption> 定义 figure 元素的标题。   仅语义特性，效果同div
<header><footer> 定义 section 或 page 的页脚。  仅语义特性，效果同div
<hr> 定义水平线。  
<iframe> 定义内联框架。

frame不能脱离frameSet单独使用，iframe可以

Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性
<keygen> 定义生成密钥。  配合表单使用，当提交表单时，私钥存储在本地，公钥发送到服务器
<map><area> 定义图像映射。  定义图片中的部分区域可点击并具有href
<mark> 定义有记号的文本。

<mark>milk</mark>

<meter>

<progress>

定义预定义范围内的度量。

<meter value="3" min="0" max="10">3/10</meter>

<progress value="22" max="100"></progress>
<nav> 定义导航链接。  
<object><param> 定义内嵌对象。定义对象的参数。  

<optgroup>

<option>

 定义选择列表中相关选项的组合。

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<pre> 定义预格式文本。

<pre> 标签的一个常见应用就是用来表示源代码

<pre>

  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;

&lt;/script&gt;

</pre>
结果：
<script type="text/javascript" src="loadxmldoc.js">

</script>
<q> 定义短的引用。

给文字加引号

<q>This is a short quotation</q>

<ruby>

<rt>

<rp>

定义 ruby 注释。

定义 ruby 注释的解释。

定义若浏览器不支持 ruby 元素显示的内容。

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

结果:
<source>

定义媒介源。

浏览器选择它所支持的文件

 

<audio controls>

   <source src="horse.ogg" type="audio/ogg">

   <source src="horse.mp3" type="audio/mpeg">

 Your browser does not support the audio element.

</audio>
<sub><sup> 定义下标文本。  
<tfoot> 定义表格中的表注内容（脚注）。  
<thead> 定义表格中的表头内容。  

HTML 部分非常用标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. 马凯军201771010116《面向对象与程序设计Java》第十七周学习总结

    一.理论知识部分 Java 的线程调度采用优先级策略:优先级高的先执行,优先级低的后执行:多线程系统会自动为每个线程分配一个优先级,缺省时,继承其父类的优先级: 任务紧急的线程,其优先级较高: 同优先 ...

  2. less &进行选择判断css的样式

    先说&在less写 .parent{ .child{} &.and{} }在css就是 .parent.child{}//父子关系 .parent.and{}//并关系 用到这个方法是 ...

  3. 使用VMware Workstation 14 Player或者Oracle VM VirtualBox安装Fedora-Workstation-netinst-x86_64-27-1.6操作系统的相关记录

    无论是在使用哪个(VMware或者Oracle VM)都遇到了一个问题:即使在安装完Fedoras操作系统之后,进行Reboot还是会进入之前一摸一样的安装界面,相当于再次安装.然而最最有效的解决办法 ...

  4. python第一条代码

    #!usr/bin/env python #-*-coding:utf-8 -*- print("hello,world")

  5. linux下centos解压时报错：　gzip: stdin: not in gzip format 　　tar: Child returned status 1 　　tar: Error is not recoverable: exiting now

    最近在linux下安装python时,解压Python.tgz文件时遇到一个问题:          gzip: stdin: not in gzip format      tar: Child r ...

  6. 日志打入kafka改造历程-我们到底能走多远系列49

    方案 日志收集的方案有很多,包括各种日志过滤清洗,分析,统计,而且看起来都很高大上.本文只描述一个打入kafka的功能. 流程:app->kafka->logstash->es-&g ...

  7. AI之旅（4）：初识逻辑回归

    前置知识   求导 知识地图   逻辑回归是用于分类的算法,最小的分类问题是二元分类.猫与狗,好与坏,正常与异常.掌握逻辑回归的重点,是理解S型函数在算法中所发挥的作用,以及相关推导过程. 从一个例子 ...

  8. RSA 格式 - 转载

    转载自 RSA(三) 密钥的格式 https://www.shangyang.me/2017/05/24/encrypt-rsa-keyformat/#%E5%89%8D%E8%A8%80 PEM 和 ...

  9. hibrnate缓存

    缓存: 是计算机领域的概念,它介于应用程序和永久性数据存储源之间. 缓存: 一般人的理解是在内存中的一块空间,可以将二级缓存配置到硬盘.用白话来说,就是一个存储数据的容器.我们关注的是,哪些数据需要被 ...

  10. 在c#中 RemoveAt、 Remove、delete用法区别

    有三种方法可以删除 DataTable 中的 DataRow: Delete 方法和 Remove 方法和 RemoveAt 方法 其区别是: Delete 方法实际上不是从 DataTable 中删 ...