整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML标签大全（常用）

本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。以下是小编为大家整理的HTML基本的标签。

注：HTML 标签对大小写不敏感，但推荐使用小写！

基本

<html>…</html> 定义 HTML 文档

<head>…</head> 文档的信息

<meta> HTML 文档的元信息

<title>…</title> 文档的标题

<link> 文档与外部资源的关系

<style>…</style> 文档的样式信息

<body>…</body> 可见的页面内容

<!--…--> 注释

文本

<h1>...</h1> 标题字大小（h1~h6）

<b>...</b> 粗体字

<strong>...</strong> 粗体字(强调)

<i>...</i> 斜体字

<em>...</em> 斜体字(强调)

<u>...</u> 下划线

<del>...</del> 删除线(表示删除)

<center>…</center> 居中文本

<ul>…</ul> 无序列表

<ol>…</ol> 有序列表

<li>…</li> 列表项目

<a href=”…”>…</a> 超链接

<font> 定义文本字体尺寸、颜色、大小

<sub> 下标

<sup> 上标

<br> 换行

<p> 段落

图形

<img src=’”…”> 定义图像

<hr> 水平线

表格

<table>…</table> 定义表格

<th>…</th> 定义表格中的表头单元格

<tr>…</tr> 定义表格中的行

<td>…</td> 定义表格中的单元

其它

<form>…</form> 定义供用户输入的 HTML 表单

<frame> 定义框架集的窗口或框架

另加16进制颜色，但仅仅有16种颜色名可用英文字母，其余的要用16进制值。 记住哦！

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

、定义

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2、作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：


  2. <meta http-equiv="charset" content="iso-8859-1">
  3. <meta http-equiv="expires" content="31 Dec 2008">

浏览器的头部就会包括这些:


  2. charset:iso-8859-1
  3. expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：

必需属性

<meta name="keywords" content="HTML,ASP,PHP,SQL">

这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

可选属性

在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子

name

第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:

<meta name="renderer" content="webkit">

这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦，我会尽可能的做到全

charset

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法


  2. <meta charset="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分


  2. <!-- 页面标题<title>标签(head 头部必须) -->
  3. <title>your title</title>
  4. <!-- 页面关键词 keywords -->
  5. <meta name="keywords" content="your keywords">
  6. <!-- 页面描述内容 description -->
  7. <meta name="description" content="your description">
  8. <!-- 定义网页作者 author -->
  9. <meta name="author" content="author,email address">
  10. <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
  11. <meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的，例如：


  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer


  2. <!-- 优先使用最新的ie版本 -->
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <!-- 是否开启cleartype显示效果 -->
  5. <meta http-equiv="cleartype" content="on">
  6. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  9. <!-- Pinned Site -->
  10. <!-- IE 10 / Windows 8 -->
  11. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
  12. <meta name="msapplication-TileColor" content="#009900">
  13. <!-- IE 11 / Windows 9.1 -->
  14. <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome


  2. <!-- 优先使用最新的chrome版本 -->
  3. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  4. <!-- 禁止自动翻译 -->
  5. <meta name="google" value="notranslate">

360浏览器


  2. <!-- 选择使用的浏览器解析内核 -->
  3. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

UCBrowser_U3_API

QQ手机浏览器


  2. <!-- 锁定屏幕在特定方向 -->
  3. <meta name="x5-orientation" content="landscape/portrait">
  4. <!-- 全屏显示 -->
  5. <meta name="x5-fullscreen" content="true">
  6. <!-- 页面将以应用模式显示 -->
  7. <meta name="x5-page-mode" content="app">

Apple iOS


  2. <!-- Smart App Banner -->
  3. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  6. <!-- 禁止自动探测并格式化手机号码 -->
  7. <meta name="format-detection" content="telephone=no">
  10. <!-- Add to Home Screen添加到主屏 -->
  11. <!-- 是否启用 WebApp 全屏模式 -->
  12. <meta name="apple-mobile-web-app-capable" content="yes">
  13. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  15. <!-- 添加到主屏后的标题 -->
  16. <meta name="apple-mobile-web-app-title" content="App Title">

Google Android


  2. <meta name="theme-color" content="#E64545">
  3. <!-- 添加到主屏 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links


  2. <!-- iOS -->
  3. <meta property="al:ios:url" content="applinks://docs">
  4. <meta property="al:ios:app_store_id" content="12345">
  5. <meta property="al:ios:app_name" content="App Links">
  6. <!-- Android -->
  7. <meta property="al:android:url" content="applinks://docs">
  8. <meta property="al:android:app_name" content="App Links">
  9. <meta property="al:android:package" content="org.applinks">
  10. <!-- Web Fallback -->
  11. <meta property="al:web:url" content="http://applinks.org/documentation">
  12. <!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta


  2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  5. <meta name="format-detection"content="telephone=no, email=no" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
  9. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  10. <!-- 启用360浏览器的极速模式(webkit) -->
  11. <meta name="renderer" content="webkit">
  12. <!-- 避免IE使用兼容模式 -->
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  15. <meta name="HandheldFriendly" content="true">
  16. <!-- 微软的老式浏览器 -->
  17. <meta name="MobileOptimized" content="320">
  18. <!-- uc强制竖屏 -->
  19. <meta name="screen-orientation" content="portrait">
  20. <!-- QQ强制竖屏 -->
  21. <meta name="x5-orientation" content="portrait">
  22. <!-- UC强制全屏 -->
  23. <meta name="full-screen" content="yes">
  24. <!-- QQ强制全屏 -->
  25. <meta name="x5-fullscreen" content="true">
  26. <!-- UC应用模式 -->
  27. <meta name="browsermode" content="application">
  28. <!-- QQ应用模式 -->
  29. <meta name="x5-page-mode" content="app">
  30. <!-- windows phone 点击无高光 -->
  31. <meta name="msapplication-tap-highlight" content="no">
  32. <!-- 适应移动端end -->

lt;form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

下面小编为大家介绍几个常用的表单标签。

<datalist>标签

这个标签规定了 <input> 元素可能的选项列表。

一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

我们来演示一个案例，大家就知道怎么用了：

上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。

效果图如下：

有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。


<output>标签：

标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。

我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。

我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：



其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。

我们来将output移到form表单的外面试试：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。


<keygen>标签

这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。

这个标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。

我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。

而另一段话则是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。


在线咨询
上一篇：JavaScript代码怎样引入到HTML中？
下一篇：熟悉css3属性选择器 input下的type=radio

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 余江县 河池 延平区 永川市 乌恰县 麟游县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服