HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 头部标签,可以很有效的增强页面的可用性。

HTML基本的头部标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--具体可以查看本文 为移动设备添加 viewport 部分-->
<!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
<title>页面标题</title>
...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。

如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype,不区分大小写。

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

charset

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

    <meta charset="utf-8">

html5 之前网页中会这样写:

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

这两个是等效的,具体可移步阅读:vs,所以建议使用较短的,易于记忆。

lang属性

更加标准的 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>

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”

移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  3. 移动前端不得不了解的HTML5 head 头标签(2016最新版)

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  5. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  6. 移动前端不得不了解的HTML5 head 头标签(首篇)

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  7. 移动前端不得不了解的HTML5 head 头标签(中上篇)

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  8. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  9. 移动前端不得不了解的HTML5 head 头标签(中下篇)

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. Python实现群聊天小程序代码

    群聊服务端 服务端Server.py代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/18 16:05 # @D ...

  2. [转载]2.7 UiPath Flowchart的介绍和使用

    一.Flowchart的介绍 用于更复杂的业务逻辑. 与序列不同的是, 流程图提供了多个分支逻辑运算符, 可以使用流程图创建复杂的业务流程并以多种方式连接每个活动. 二.在UiPath 使用Flowc ...

  3. Kickstart Round H 2019 Problem B. Diagonal Puzzle

    有史以来打得最差的一次kickstart竟然发生在winter camp出结果前的最后一次ks = = 感觉自己的winter camp要凉了 究其原因,无非自己太眼高手低,好好做B, C的小数据,也 ...

  4. yum 配置文件 以及 语法

    yum的配置文件 #vi /etc/yum.conf [main] cachedir=/var/cache/yum/$basearch/$releasever keepcache= debugleve ...

  5. thinkphp6.0 开启调试模式以及Driver [Think] not supported

    thinkphp6.0 开启调试模式 首先确认自己是通过 composer 进行的下载,然后修改系统目录下的 .example.env 为 .env 文件 修改 config->app.php ...

  6. hdu 1083 Courses (最大匹配)

    CoursesTime Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  7. hdu 1285 确定比赛名次 (topsort)

    确定比赛名次Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  8. nyoj 463-九九乘法表

    463-九九乘法表 内存限制:64MB 时间限制:1000ms 特判: No 通过数:16 提交数:41 难度:1 题目描述: 小时候学过的九九乘法表也许将会扎根于我们一生的记忆,现在让我们重温那些温 ...

  9. nyoj 96-n-1位数 (strlen, atoi, ceil)

    96-n-1位数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:30 提交数:47 难度:1 题目描述: 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2) ...

  10. Centos上通过shell脚本备份数据库

    #!/bin/bash ds=`` list=`date +%Y`/`date +%m` dname="callme" eval "mkdir -p $list" ...