21xrx.com
2024-12-24 20:38:01 Tuesday
  

HTML head

HTML <head>标签

<head>元素是metadata(元数据:描述数据的数据)的容器.

HTML的元数据是用来描述HTML文档的.元数据不显示.

元数据往往定义文档的标题,样式,超链接,脚本,和其它的元数据信息.

描述元数据的标签有:<title>,<style>,<meta>,<link>,<script>和<base>.

能否省略<html>和<body>标签?

在HTML5标准里,<html>标签,<body>标签和<head>标签可以省略.

下面的代码将以HTML5的标准解析:

例子

<!DOCTYPE html>
<title>页标题</title>

<h1>标题</h1>
<p>段落.</p>
Markup
  
我们不建议省略<html>标签和<body>标签.

<html>标签是文档根元素.建议在这个元素上指定页面语言:

<!DOCTYPE html>
<html lang="en-US">
Markup

对于应用程序(屏幕阅读器)和搜索引擎来说定义语言很重要,可以方便识别.

省略<html>和<body>标签会导致DOM/XML程序出错.

而且,在IE9之前的浏览器省略<body>标签会产生错误.

省略<head>标签

在HTML5标准里,<head>标签也可以省略.

默认情况下,浏览器会把<body>标签之前的所有元素当做<head>标签里的内容:

如果省略<head>标签会增加HTML的复杂度.

例子

<!DOCTYPE html>
<html>
<title>页标题</title>
<body>

<h1>这是标题</h1>
<p>这是段落.</p>

</body>
</html>
Markup
  
对于网页开发者来说,省略标签是陌生的.需要时间慢慢熟悉.

HTML <title>元素

<title>元素定义文档的标题

在所有的HTML/XHTML文档里都需要<title>标签.

<title>元素:

  • 在浏览器的tab里定义标题
  • 当页面被添加进收藏栏里,作为页的标题
  • 在搜索结果中作为标题显示

一个简单的HTML文档:

例子

<!DOCTYPE html>
<html>
<title>页标题</title>

<body>
文档内容......
</body>

</html>
Markup

HTML <style>元素

<style>标签用来定义HTML文档的样式信息

在<style>元素里你怎么定义样式,浏览器就怎么渲染HTML元素:

例子

<style>
body {background-image:linear-gradient(30deg,#59C173,#a17fe0,#5D26C1);}
p {color:blue;}
</style>
Markup

HTML <link>元素

<link>标签定义指向外部页面资源的连接信息.

<link>标签常用来连接到样式文件.

例子

<link rel="stylesheet" href="/public/css/w3.css">
Markup

HTML <meta>元素

<meta>标签用来指定页面描述,关键字,作者和其它元数据.

浏览器用元数据来决定怎么显示内容,搜索引擎用元数据(keywords)进行检索,和其它一些网络服务.

给搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Markup

给你的网页定义描述:

<meta name="description" content="免费教程有HTML and CSS">
Markup

定义页面用什么字符集:

<meta charset="UTF-8">
Markup

定义页面作者:

<meta name="author" content="xrx">
Markup

每隔30秒刷新页面:

<meta http-equiv="refresh" content="30">
Markup

<meta>标签例子:

例子

<meta name="description" content="免费的网页教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="xrx">
<meta charset="UTF-8">
Markup

HTML <script>元素

<script>元素用来定义客户端的Javascript代码

下面的脚本代码把'Hello Javascript!'写进id为demo的HTML元素

例子

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Markup
  
要学习更多的Javascript.请访问我们的Javascript教程

HTML<base>元素:

<base>元素指定页面的所有相对URL的基地址和相对的target属性的基地址.

例子

<base href="http://www.21xrx.com/" target="_blank">
Markup

HTML head标签

标签描述
<head>定义关于文档的信息
<title>定义文档标题
<base>定义页面所有超链接的默认基地址和默认的target属性
<link>定义文档和外部资源的联系.
<meta>定义HTML文档的元数据.
<script>定义客户端的脚本代码.
<style>定义文档的样式信息.
  
  

评论区

21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2