天天看点
返回

HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

参考总结：http://www.w3school.com.cn/h.asp

目录

HTML and HTML5

html框架

html头部元素（head内）

- title：定义文档标题

- base：定义页面上所有链接的默认地址或默认目标

- target:规定在何处打开页面上的所有链接。

- link：定义文档与外部资源（外链样式表等）之间的关系

- style：定义文档的样式信息（内联样式表）

- meta：定义关于html文档的元数据

- content属性

- name属性

- http-equiv属性

- scheme属性

- scirpt：定义客户端脚本（插入JS）

HTML and HTML5

html ：HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
html标签：HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

html5：html的一个版本，HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

html5 新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

html框架 

<!DOCTYPE html>
<html >

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
</body>

</html>

html头部元素（head内）

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

- title：定义文档标题 

<!DOCTYPE html>
<html >
<head>
    <!-- 防止乱码 -->
    <meta charset="utf-8">
    <title>定义文档标题</title>
</head>

<body>
</body>
</html>
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- base：定义页面上所有链接的默认地址或默认目标

定义和用法

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）
<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
	<title>定义文档标题</title>
	<base href="https://www.baidu.com/img/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
	<base target="_blank">
</head>

<body>
	<!-- 通过相对路径查找文件，默认从base指定路径文件夹内寻找
	即：https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png -->
	<img src="xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" /><br />
</body>
</html>

HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- target:规定在何处打开页面上的所有链接。

HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- link：定义文档与外部资源（外链样式表等）之间的关系

  • link 元素是空元素，它仅包含属性。
  • 此元素只能存在于 head 部分，不过它可出现任何次数。 
<!DOCTYPE html>
<html >
<head>
	<meta charset="utf-8">
	<title>定义文档标题</title>
	<base href="https://www.baidu.com/img/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
	<base target="_self">
	
	<!-- 外联样式表   -->
	<link rel="stylesheet" type="text/css" href="style.css" target="_blank" rel="external nofollow"  />  

	<!-- ⽂档tag图标   -->
	<link rel="shortcut icon" type="image/x-icon"  href="http://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  />
        <!-- 比shortcut icon 多支持gif，推荐一般时候使用shortcut icon -->
        <link rel="icon" type="image/x-icon"  href="http://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  />
</head>

<body>

</body>
</html>
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- style：定义文档的样式信息（内联样式表）

<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

<!DOCTYPE html>
<html >
<head>
	<meta charset="utf-8">
	<title>定义文档标题</title>
	<html>

	<style type="text/css">
		P{
			color: blue;
		}
		h1{
			color: red;
		}
	</style>
</head>

<body>
	<h1>hello style</h1>
	<p>hello h5</p>
</body>

</html>
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- meta：定义关于html文档的元数据

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

注：

  • <meta> 标签永远位于 head 元素内部。
  • 元数据总是以名称/值的形式被成对传递的。 
<!DOCTYPE html>
<html >
<head>
	<title>定义文档标题</title>

	<!-- 字符编码，防止网页乱码   -->
	<meta charset="utf-8">  
	
     <!-- 编写发送浏览器的头部信息 -->
    <!-- content-type: text/html;charset=utf-8 -->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />  
	<!-- charset:iso-8859-1 -->
	<meta http-equiv="charset" content="iso-8859-1">
	<!-- expires:31 Dec 2008 -->
	<meta http-equiv="expires" content="31 Dec 2008">

	<!-- SEO   -->
	<!-- keyords 常用于搜索引擎可进行模糊搜索到该网站的关键字 -->
	<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">  
	<!-- description 是网站的相关介绍 -->
	<meta name="description" content="80字以内的⼀段话，与⽹站内容相关"> 

	<!-- viewport 进行移动界面自适配，并且禁止用户进行修改适配大小   -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"  />
</head>

<body>
</body>

</html>
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）

- content属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

- name属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

- http-equiv属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含： 
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

- scheme属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

- scirpt：定义客户端脚本（插入JS）

<script> 标签用于定义客户端脚本，比如 JavaScript。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

注意：

  • 假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。 
<!DOCTYPE html>
<html >
<head>
	<title>定义文档标题</title>
	<!-- 字符编码，防止网页乱码   -->
	<meta charset="utf-8">  

    <!-- 可以放在head内也可以放在body内和外，通常放在body下，html内   -->
	<script type="text/javascript"></script>
</head>

<body>
    <script type="text/javascript">
    <!-- js代码块   -->
    document.write("<h1>Hello World!</h1>")
    </script> 
</body>

    <script type="text/javascript"></script>
</html>
HTML5 - 基础总结 - 基本介绍+head头部元素HTML and HTML5html框架html头部元素（head内）
html5
上一篇: HTML的基本结构标签（html，head，title，body）
下一篇: 个人简历小程序(附源码)个人简历小程序(附源码)

继续阅读