常用html头部标签

最新推荐文章于 2023-01-15 19:14:40 发布
最新推荐文章于 2023-01-15 19:14:40 发布
阅读量850 收藏
点赞数


基本标签

  • 使用 HTML5 doctype，不区分大小写。

    <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

  • 声明文档使用的字符编码

    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->

  • 更加标准的 lang 属性写法 http://zhi.hu/XyIa

    • 简体中文

      <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

    • 繁体中文

      <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    <p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
</p>

  • 优先使用 IE 最新版本和 Chrome

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO 优化

  • 页面描述

    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档

    <meta name="description" content="不超过150个字符"> <!-- 页面描述 -->

  • 页面关键词

    <meta name="keywords" content=""> <!-- 页面关键词 -->

  • 定义页面标题

    <title>标题</title>

  • 定义网页作者

    <meta name="author" content="name, email@gmail.com"> <!-- 网页作者 -->

  • 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

    <meta name="robots" content="index,follow"> <!-- 搜索引擎抓取 -->

可选标签

为移动设备添加 viewport

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui _iOS 7.1 beta 2_ 中新增属性（_注意：iOS8 中已经删除_），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

  2. 添加到主屏后的标题（iOS 6 新增）

    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->

  3. 是否启用 WebApp 全屏模式

    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否启用 WebApp 全屏模式 -->

  4. 设置状态栏的背景颜色

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->

    只有在 "apple-mobile-web-app-capable" content="yes" 时生效

    content 参数：

    • default 默认值。
    • black 状态栏背景是黑色。
    • black-translucent 状态栏背景是黑色半透明。

    如果设置为 default 或 black ,网页内容从状态栏底部开始。

    如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

  5. 禁止数字自动识别为电话号码

    <meta name="format-detection" content="telephone=no"> <!-- 禁止数字识自动别为电话号码 -->

  6. 禁止自动自动识别地址

    <meta name="format-detection" content="address=no"> <!-- 禁止自动自动识别地址 -->

  7. 禁止自动自动识别日期

    <meta name="format-detection" content="date=no">  <!-- 禁止自动自动识别日期 -->

  8. 禁止自动自动识别 Email

    <meta name="format-detection" content="email=no">  <!-- 禁止自动自动识别 Email -->

  9. iOS 图标

    rel 参数：

    apple-touch-icon 图片自动处理成圆角和高光等效果。

    apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

    • iPhone 和 iTouch，默认 57x57 像素，必须有

      <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

    • iPad，72x72 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

    • Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

    • Retina iPad，144x144 像素，可以没有，但推荐有

      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

  10. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    • iPad 的启动画面是不包括状态栏区域的。

      • iPad 竖屏 768 x 1004（标准分辨率）
      <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

      • iPad 竖屏 1536x2008（Retina）

        <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> <!-- iPad 竖屏 1536x2008（Retina） -->

      • iPad 横屏 1024x748（标准分辨率）

        <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> <!-- iPad 横屏 1024x748（标准分辨率） -->

      • iPad 横屏 2048x1496（Retina）

        <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> <!-- iPad 横屏 2048x1496（Retina） -->

    • iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

      • iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

        <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

      • iPhone/iPod Touch 竖屏 640x960 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

      • iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

  11. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

  <meta name="theme-color" content="#db5945">

theme-color meta tag

Windows 8

  • Windows 8 磁贴颜色

    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

  • Windows 8 磁贴图标

    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

360 浏览器

  • 设置 360 浏览器渲染模式

    webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC 浏览器

  • 设置屏幕方向

    portrait 为横屏，landscape 为竖屏。

    <meta name="screen-orientation" content="portrait|landscape">

  • 设置全屏

    <meta name="full-screen" content="yes">

  • 设置适应屏幕排版（缩放是否显示滚动条）

    UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

    <meta name="viewport" content="uc-fitscreen=no|yes">

  • 排版模式

    UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

    <meta name="layoutmode" content="fitscreen|standard">

  • 夜间模式

    可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

    注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

    <meta name="nightmode" content="enable|disable">

  • 整页图片强制显示

    为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

    **注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面

    <meta name="imagemode" content="force">

  • 开启应用模式

    应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

    参数状态说明
    全屏生效可通过 meta 或 JS API 调用退出全屏
    长按菜单失效可通过 JS API 调用重新生效
    浏览器默认手势失效可通过 JS API 调用重新生效
    排版模式标准模式可通过 meta 或 JS API 调用设置其他排版模式
    强制图片显示生效/
    夜间模式失效可通过 meta 或 JS API 调用启用夜间模式
    <meta name="browsermode" content="application">

QQ 浏览器（X5 内核）

  <!-- 设置横屏、竖屏显示，portrait 横屏，landscape 竖屏-->
  <meta name="x5-orientation" content="portrait|landscape">
  <!-- 设置全屏显示 -->
  <meta name="x5-fullscreen" content="true">
  <!-- 开启应用模式 -->
  <meta name="x5-page-mode" content="app">

其他

  • 添加 RSS 订阅

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> <!-- 添加 RSS 订阅 -->

  • 添加 favicon icon

    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> <!-- 添加 favicon icon -->

  • 禁止 Chrome 浏览器中自动提示翻译

    更多：http://www.w3.org/International/questions/qa-translate-flag

    <meta name="google" value="notranslate">

  • 禁止百度转码

    <meta http-equiv="Cache-Control" content="no-siteapp"><!-- 禁止百度转码 -->


原文链接：https://github.com/yisibl/blog/issues/1
tengjunfei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML5头部meta标签的一些常用信息小结
12-14
大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些HTML5头部<meta>标签常用的信息。有错误的，敬请留言指正，或...
HTML-基础开篇
最新发布
bukine的博客
01-15 1522
通常为双标签,都是成对出现的,一个开始标签一个结束标签,结束标签会比开始标签多一个"/". 单标签,特殊的标签(极少情况),例如
HTML主体代码和基本标签
zmjzv19的博客
07-18 344
HTML主体代码
html5页头代码,HTML5常用的标签
weixin_32893479的博客
06-09 309
目录：HTML5新结构标签HTML5新其他标签HTML5新input类型HTML5新属性HTML5高级应用html4和html5对比：Html4代表示例：Html5代码示例：HTML5新结构标签：页头页脚导航内容区块文章区块article之外的信息标题组数据组数据组标题用法网页标题文章标题文章正文内容用法文章主体文章脚注站内链接站内链接站内链接用法用法标题内容用法用法文章标题内容相关内容用法主标题...
web前端开发与应用——文档
m0_59742894的博客
11-29 375
title标签 title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。 它的作用是： 在浏览器的标题栏中显示标题 标题可以用作默认快捷方式或收藏夹的名称 标题还可以作为搜索引擎结果中的页面标题 应用时注意： 一个网页只能有一个标题 标题名称的长度不超过64个字符数 标题标记对之间不允许有其它的标签存在 用法示例： <title>个人网页</title> charset属性 在html5中，可直接通过meta标签的char
HTML 头部
jiaomubai的博客
09-21 2602
html 头部元素介绍
HTML5标签大全
09-27
本文将详细探讨HTML5中的标签大全，包括可以省略的标签和新增的标签。 首先，我们来看看可以省略的标签。在HTML5中，一些标签允许省略开始或结束标签，以简化代码并提高效率。例如，`area`、`base`、`br`、`col`、`...
HTML常用标签.pdf
10-05
HTML常用标签 HTML 是构建网页的基础语言，它提供了一些基本的结构元素来组织内容。这些结构元素被称为 HTML 标签。 HTML 标签是 HTML 文档的基础，通过这些标签，可以构建一个完整的网页。 基本文档结构标签 1. ...
HTML5中新标签和常用标签详解
09-28
除了这些新标签，HTML5还引入了一些其他常用的标签，例如： 1. `<header>`：页面或区块的头部，通常包含导航、logo、搜索表单等。 2. `<hgroup>`：用于组合多个标题元素（`<h1>`至`<h6>`），提供更清晰的标题层次。...
基于html的常用模板
02-18
以下是对"基于html的常用模板"这一主题的详细解释： 1. **基础结构**：HTML模板的基本组成部分包括`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`元数据部分和`<body>`主体内容。`<meta>`标签用于设置字符编码、...
浅谈html5标签css3的常用样式
09-27
在HTML5中，新增了许多语义化的标签，使得网页结构更加清晰，易于理解和搜索引擎优化。CSS3则引入了大量的新样式和动画效果，极大地提升了网页的视觉表现力。 HTML5标签的常见新增包括： 1. `<header>` 和 `...
html基础知识点以及常用标签
07-24
首先，HTML文档的头部通常包含`<title>`标签，它定义了浏览器标题栏显示的页面标题，如“家用电器排行榜”。`<meta>`标签则用来设定页面元信息，例如字符编码，这里使用`charset="UTF-8"`确保页面使用UTF-8编码。 ...
HTML5的常用标签
04-03
以下是一些HTML5中常用的标签及其详细解释： 1. `<header>`与`<footer>`：这两个标签用于定义页面的头部和底部区域，通常包含logo、导航菜单、版权信息等。 2. `<nav>`：定义页面的主要导航部分，帮助用户在网站中...
HTML5头部<meta>标签的一些常用信息小结
09-27
给大家查找总结了一些HTML5头部<meta>标签常用的一些信息，文章给出了示例代码与注释，介绍的很详细，感兴趣的朋友们下面来一起看看吧。
HTML网页头部小图标
qq_39150021的博客
06-01 4011
HTML网页头部小图标 具体实现如下图： 实现语句： 结果：
html网页标题头图标
automation13的博客
12-02 4581
说明： 添加方法： 在HTML文件的head标签下添加任意一行即可 1.   2.my-title.png"> 3.my-title.png"> 注： 1. 百度“html title图标”可发现很多相关文档 2. link标签中type指的是引入文档的解析方法，百度“mime类型” 3. icon和shortcut icon的区别可以百度“shortcut icon和i
HTML头部
歪脖先生的博客
03-29 4884
HTML头部 head元素用于定义文档的头部信息，出现在 &lt;head&gt;...&lt;/head&gt; 标签之间的内容，是文档的头部信息。头部定义的内容不会在浏览器窗口的正文部分显示出来。 head元素比较特殊，只有一些特定的标签才允许放在 &lt;head&gt; 标签内，它们分别是 &lt;title&gt;、&lt;base&gt;、&lt;meta&gt;、&lt;scir...
HTML头部标签
mooonk的博客
03-23 446
HTML基础（头部标签） 一、头部标签 代码如下（示例）： 中的标签以及各自作用： （1）双标签，中间是网页名称 day1 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210323175035527.png) （2）meta系列标签 -->charset属性，属性值为浏览器解析源码方法，一般我们使用UTF-8，可以解决网业打开的乱码问题 -->name属性，一般用于当前网页的简单描述，便于搜索 -->
HTML常用标签总结
03-09
而<html>定义了这是一个html文档，定义了网页的头部部分，包含常用标签、、、、等；定义了网页的主要内容部分，俗称身体。 在HTML中，各种标签有各自的用途，下面将逐一总结常用的标签和其用法。 1. <!DOCTYPE>：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值