HTML文档元数据元素

演讲者：whqet

内容提纲

head元素
title元素
meta元素
base元素
style元素
link元素
script元素和noscript元素
canvas元素

元素概述

元素分类 w3school

类型	标签
根元素 The root element	html
文档元数据 Document metadata	head, title, base, meta, link, style
节点 Sections	body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
组合内容 Grouping content	div, p, main, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption
文本级 Text-level semantics	span, a, em, strong, q, cite, mark, i, b, u, s, sup, sub, big, small, var, code, samp, kbd, data, time, ruby, rb, rp, rt, rtc, bdi, bdo, dfn, br, wbr
编辑 Edits	ins, del
嵌入内容 Embedded content	img, iframe, embed, object, param, vedio, audio, surce, track, map, area
表格 Tabular data	table, caption, tr, th, td, thead, tbody, tfoot, col, colgroup
表单 Forms	form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
脚本 Scripting	script, noscript, template, canvas

head元素

类型	取值
分类	无
元素上下文	html元素里的第一个元素
内容模型	title、meta、style、link、script等元素
属性	全局属性

head部分内容不在网页正文显示。

head元素示例

<!DOCTYPE html>
<html lang="en">
<head><!-- 简化版 -->
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

head元素示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 复杂版 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>腾讯首页</title>
    <meta name="apple-itunes-app" content="app-id=660653351">
    <meta name="Keywords" content="资讯,新闻,财经,房产,视频,NBA,科技">
    <meta name="description" content="XX网(www.QQ.com)是……" >
    <link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico">
    <link rel="stylesheet" href="//mat1.gtimg.com/www/css/qq2012/hot_word_sogou.css" media="all">
</head>
<body>

</body>
</html>

title元素

类型	取值
分类	元数据内容-Metadata content
元素上下文	没有其它title元素的head元素
内容模型	文本
属性	全局属性

一般来说，title元素是必须的，一个head元素有且仅有一个title。

title元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题，在浏览器窗口标题栏显示</title>
</head>
<body>

</body>
</html>

meta元素

类型	取值
分类	元数据内容-Metadata content
元素上下文	一般为head元素
内容模型	无，meta元素是空元素，没有结束标签
属性	全局属性 name属性，元数据名称 http-equiv属性，Pragma指令、 content属性，元数据值 charset属性，设置编码方式

meta元素示例

<!-- 设置编码方式 -->
<meta charset="UTF-8">
<!-- name和content属性搭配使用，name属性大小写敏感 -->
<meta name="keywords" content="资讯,新闻,财经,房产,视频,NBA,科技">
<meta name="description" content="XX网是……" >
<meta name="author" content="whqet，whqet@qq.com">
<meta name="copyright" content="本网站版权归zptcsoft所有">
<meta name="generator" content="sublime text 2">
<meta name="application-name" content="应用名称">
<meta name="robots" content="index,follow" >
<meta name="revisit-after" content="7 days" >
<!-- http-equiv属性和content属性搭配使用 -->
<meta http-equiv="content-language" content="zh-CN" > <!--建议使用lang属性-->
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> <!--建议使用charset-->
<meta http-equiv="default-style" content="文档首选样式">
<meta http-equiv="refresh" content="20; URL=another.html">
<meta http-equiv="set-cookie" "name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZON">
<!-- 新特征 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <!-- meta:vp -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--优先使用edge和chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=7"> <!-- meta:compat -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!--指定双核浏览器优先使用哪种内核-->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

base元素

类型	取值
分类	元数据内容-Metadata content
元素上下文	没有其它base元素的head元素
内容模型	无，base元素是个空元素
属性	全局属性 href属性，文档基准URL target属性，文档基准target

base元素可以指定文档基准URL和基准target

base元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base href="//www.baidu.com/s" target="_blank">
</head>
<body>
    <a href="?wd=html5">html5</a>
    <!-- 相当于 -->
    <a href="//www.baidu.com/s?wd=html5" target="_blank">html5</a>
</body>
</html>

style元素

类型	取值
分类	元数据内容-Metadata content
元素上下文	一般在head部分
内容模型	根据type类型而定
属性	全局属性 media属性，应用媒体 type属性，嵌入资源类型

style元素示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .info{color:orange;}
    </style>
</head>
<body>
    <p class="info"></p>
</body>
</html>

link元素

类型	取值
分类	元数据内容-Metadata content
元素上下文	一般在head部分
内容模型	空，空元素，无结束标签
属性	全局属性 href属性，链接资源地址 hreflang属性，链接资源语言 rel属性，链接资源和宿主文件的关系 crossorigin属性，指定元素如何处理交叉源请求 type属性，链接资源类型 media属性，应用媒体 sizes属性，icons的大小

link元素示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="print.css" media="print">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
    <link rel="import" href="component.html">
    <link media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />
    <link rel="next" href="http://www.syfyportal.com/atomFeed.php?page=4"/>
</head>
<body>
    <p class="info"></p>
</body>
</html>

script元素

类型	取值
分类	元数据内容-Metadata content, 流内容-Flow content
元素上下文	head部分和body部分，body最下方最佳
内容模型	有src属性，内容为空。无src属性，内容为script脚本
属性	全局属性 src属性，链接资源地址 type属性，链接资源类型 charset属性，链接资源编码方式 crossorigin属性，指定元素如何处理交叉源请求 async属性，异步执行脚本 defer属性，推迟执行脚本

script元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
    <div class="content"></div>
    <script src="//cdn.bootcss.com/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
    <script>
        //do something
    </script>
</body>
</html>

canvas元素

功能最为强大的html5元素

HTML文档元数据元素

演讲者：whqet

内容提纲

元素概述

元素分类 w3school

head元素

head元素示例

head元素示例

title元素

title元素示例

meta元素

meta元素示例

base元素

base元素示例

style元素

style元素示例

link元素

link元素示例

script元素

script元素示例

canvas元素

前端开发

旨为前端开发工程师的前端开发基础课程