前端学习笔记之——创建HTML文档

最新推荐文章于 2023-07-06 11:07:48 发布

前丨尘忆·梦

最新推荐文章于 2023-07-06 11:07:48 发布

阅读量571

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_36879493/article/details/117463987

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

创建 HTML 文档

介绍最基础的 HTML5 元素：文档元素和元数据元素。它们用来创建 HTML 文档和说明其内容的元素。

1、构筑基本的文档结构

这些基础成分确定了 HTML 文档的轮廓以及浏览器的初始环境。文档元素只有 4 个，但是任何 HTML 文档都需要这些元素。

1.1、DOCTYPE 元素

每一个 HTML 文档都必须以 DOCTYPE 元素开头。浏览器据此得知自己将要处理的是 HTML 内容。

元素	DOCTYPE
元素类型	无
允许具有的父元素	无
局部属性	无
内容	无
标签用法	单个开始标签
是否为 HTML5 新增	否
在 HTML5 中的变化	HTML4 中要求的 DTD 已不再要求
习惯样式	无

<!DOCTYPE HTML>

它告诉浏览器两件事情：1、它处理的是 HTML 文档；2、用来标记文档内容的 HTML 所属的版本。

1.2、html 元素

html 元素更恰当的名称是根元素，它表示文档中 HTML 部分的开始。

元素	html
元素类型	无
允许具有的父元素	无
局部属性	manifest
内容	head 元素和 body 元素各一
标签用法	开始标签和结束标签，内含其他元素
是否为 html5 新增	否
在 html5 中的变化	manifest 属性是 html5 中新增的
习惯样式	html {display:block;} html:foucs {outline:none;}

<!DOCTYPE HTML>
<html>
    ...
</html>

1.3、head 元素

head 元素包含着文档的元数据。在 HTML 中，元数据向浏览器提供了有关文档内容和标记的信息，此外还可以包含脚本和对外部资源（比如 CSS 样式表）的引用。

元素	head
元素类型	无
允许具有的父元素	html
局部属性	无
内容	必须有一个 title 元素，其他元数据可有可无
标签用法	开始标签和结束标签。内含其他元素
是否为 HTML5 新增	否
在 HTML5 中的变化	无
习惯样式	无

<!DOCTYPE HTML>
<html>
    <head>
        <title>Hello</title>
    </head>
</html>

1.4、body 元素

HTML 文档的元数据和文档信息包装在 head 元素中，文档的内容则包装在 body 元素中。body 元素总是紧跟在 head 元素之后，它是 html 元素的第二个子元素。

元素	body
元素类型	无
允许具有的父元素	html
局部属性	无
内容	所有短语元素和流元素
标签用法	开始标签和结束标签
是否为 HTML5 新增	否
习惯样式	body {display: block; margin: 8px; } body: focus{ outline: none; }

<html>
    <head>
        <title>Hello</title>
    </head>
    
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://appress.com">Visit Appress</a>
    </body>
</html>

2、用元数据元素说明文档

元数据元素可以用来提供关于 HTML 文档的信息。它们本身不是文档内容，但提供了关于后面文档内容的信息。元数据元素应放在 head 元素中。

2.1、设置文档标题

title 元素的作用是设置文档的标题或名称。浏览器通常将该元素的内容显示在其窗口顶部或标签页的标签上。

元素	title
元素类型	元数据
允许具有的父元素	head
局部属性	无
内容	文档标题或对文档内容言简意赅的说明
标签用法	开始标签和结束标签。内含文字
是否为 HTML5 新增	否
在 HTML5 中的变化	无
习惯样式	title {display: none; }

2.2、设置相对 URL 的解析基准

base 元素可用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。相对链接省略了 URL 中的协议、主机和端口部分，需要根据别的 URL（要么是 base 元素中指定的 URL，要么是用以加载当前文档的 URL）得出其完整形式。base 元素还可以指定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。

元素	base
元素类型	元数据
允许具有的父元素	head
局部属性	href、target
内容	无
标签用法	虚元素形式
是否为 HTML5 新增	否
在 HTML5 中的变化	无
习惯样式	无

HTML 文档至少应该包含一个 base 元素。它通常是 head 元素中位置最靠前的子元素之一，以便随后的元数据元素中的相对 URL 可以用其设置的基准 URL。

2.2.1、使用 href 属性

href 属性指定了解析文档此后部分中的相对 URL 要用到的基准 URL。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

此例将基准 URL 设置为 http://titan/listings/ 。其中 titan 是我的开发服务器的名称，而 listings 是服务器上包含本书示例文件的目录。

在后边部分有一个用来生成超链接的 a 元素，它使用了 page2.html 这个相对 URL。用户点击这个超链接时，浏览器就会把基准 URL 和相对 URL 拼接成完成的 URL：http://titan/listings/page2.html。

2.2.2、使用 target 属性

target 属性的作用是告诉浏览器该如何打开 URL。这个属性的值代表一个浏览器上下文。

2.3、用元数据说明文档

meta 元素可以用来定义文档的各种数据。一个 HTML 文档中可以包含多个 meta 元素。

元素	meta
元素类型	元数据
允许具有的父元素	head
局部属性	name、content、charset 和 http-equiv
内容	无
标签用法	虚元素形式
习惯样式	无

注意每个 meta 元素只能用于一种用途。如果在这些特性中想要使用的不止一个，那就应该在 head 元素中添加多个 meta 元素。

2.3.1、指定名/值元数据对

meta 元素的第一个用途是用名/值对定义元数据，为此需要用到其 name 和 content 属性。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

name 属性用来表示元数据的类型，而 content 属性用来提供值。

元数据名称	说明
application name	当前页所属 Web 应用系统的名称
author	当前页的作者名
description	当前页的说明
generator	用来生成 HTML 的软件名称（通常用于以 Ruby on Rails、ASP.NET 等服务器端框架生成 HTML 页的情况下）
keywords	一批以逗号分开的字符串，用来描述页面的内容

2.3.2、声明字符编码

meta 元素的另一种用途是声明 HTML 文档内容所用的字符编码。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

2.3.3、模拟 HTTP 标头字段

meta 元素的最后一种用途是改写 HTTP 标头字段的值。服务器和浏览器之间传输 HTML 数据时一般用的就是 HTTP。meta 元素可以用来模拟或替换其中三种标头字段。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
        <meta http-equiv="refresh" content="5"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

http-equiv 属性的用途是指定所要模拟的标头字段名称，字段值则由 content 属性指定。此例将标头字段 refresh 的值设置为 5，其作用是让浏览器每隔 5 秒就再次载入页面。

http-equiv 属性有三个值可用：

属性值	说明
refresh	以秒为单位指定在一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可另行指定一个 URL 让浏览器载入。 <meta http-equiv=“refresh” content=“5; http://www.apress.com” />
default-style	指定页面优先使用的样式表。对应的 content 属性值应与同一文档中某个 style 元素或 link 元素的 title 属性值相同
content-type	这是另一种声明 HTML 页面所用的字符编码的方法。如 <meta http-equiv=“content-type” content=“text/html charset=UTF-8” />

2.4、定义 CSS 样式

style 元素可用来定义 HTML 文档内嵌的 CSS 样式（link 元素则是用来导入外部样式表中的样式）。

元素	style
元素类型	无
允许具有的父元素	任何可包含元数据元素的元素，包括 head、div、noscript、section、article、aside
局部属性	type、media、scope
内容	CSS 样式
标签用法	开始标签和结束标签。内含文字
在 HTML5 中的变化	scoped 属性为 HTML5 新增

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
        <style type="text/css">
            a {
                background-color: grey;
                color: white;
                padding: 0.5em;
            }
        </style>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

style 元素可以出现在 HTML 文档中的各个部分。一个文档可包含多个 style 元素，因此不必把所有样式定义都塞在 head 部分。

2.4.1、指定样式类型

type 属性可以用来将所定义的样式类型告诉浏览器。但是浏览器支持的样式机制只有 CSS 一种，所以这个属性的值总是 text/css。

2.4.2、指定样式作用范围

如果 style 元素中有 scoped 属性存在，那么其中定义的样式只作用于该元素的父元素及所有兄弟元素。要是不用 scoped 属性的话，在 HTML 文档中任何地方用 style 元素定义的样式都将作用于整个文档。

2.4.3、指定适用的媒体

media 属性可用来说明文档在什么情况下应该使用该元素中定义的样式。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
        <style media="screen" type="text/css">
            a {
                background-color: grey;
                color: white;
                padding: 0.5em;
            }
        </style>
        <style media="print">
            a{
                color:Red;
                font-weight:bold;
                font-style:italic
            }
        </style>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

浏览器在屏幕上显示文档的时候用的是第一个 style 样式，在打印文档的时候用的是第二种样式。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
        <style media="screen AND (max-width:500px)" type="text/css">
            a {
                background-color: grey;
                color: white;
                padding: 0.5em;
            }
        </style>
        <style media="screen AND (min-width:500px)" type="text/css">
            a {color:Red; font-style:italic}
        </style>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

使用 media 和 width 特性区分两组样式。浏览器窗口宽度小于 500 像素时使用的是第一组样式，窗口宽度大于 500 像素时使用的是第二组。

2.5、指定外部资源

link 元素可用来在 HTML 文档和外部资源（CSS 样式表是最典型的情况）之间建立联系。

元素	link
元素类型	元数据
允许具有的父元素	head、noscript
局部属性	href、rel、hreflang、media、type、sizes
内容	无
标签用法	虚元素形式
习惯样式	无

link 元素定义了 6 个局部属性。这些属性中最重要的是 rel，它说明了 HTML 页与 link 元素所关联资源的关系类型。

属性	说明
href	指定 link 元素指向的资源的 URL
hrelang	说明所关联资源使用的语言
media	说明所关联的内容用于哪种设备
rel	说明文档与所关联资源的关系类型
sizes	指定图标大小
type	指定所关联资源的 MIME 类型，如 text/css、image/x-icon

为 rel 属性设定的值决定了浏览器对待 link 元素的方式。下表介绍了 rel 属性比较常用的一些值。

值	说明
alternate	链接到文档的替代版本，比如说另一种语言
author	链接到文档的作者
help	链接到当前文档的说明文档
icon	指定图标资源
licence	链接到当前文档的相关许可证
pingback	指定一个回探服务器。从其他网站链接到博客的时候它能自动得到通知
prefetch	预先获取一个资源
stypesheet	载入外部样式表

2.5.1、载入样式表

创建一个 styles.css 样式表：

a{
    background-color:grey;
    color:white;
    padding:0.5em;
}

这条样式在先前的例子中定义在 style 元素里边，现在被放到了一个外部样式表文件中。要使用这个样式表，需要用到 link 元素：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

2.5.2、为页面定义网站标志

除了 CSS 样式表，link 元素最常见是用处要算定义与页面联系在一起的图标。各浏览器处理图标的方式有所不同，常见的做法是将其显示在相应的标签页上或收藏夹中相应的项。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

2.5.3、预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="prefetch" href="/page2.html"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

此例将 rel 属性设置为 prefetch，并且要求载入 HTML 页面 page2.html，为用户点击某个链接以执行其他需要这个页面的操作做好准备。

3、使用脚本元素

与脚本有关的元素有两个。第一个是 script，用于定义脚本并控制其执行过程。第二个是 noscript，用于规定在浏览器不支持脚本或禁止了脚本的情况下处理办法。

3.1、script 元素

script 元素可以用来在页面中加入脚本，方式有在文档中定义脚本和引用外部文件中的脚本两种。

元素	script
元素类型	元数据/短语
允许具有的父元素	可以包含元数据或短语元素的任何元素
局部属性	type、src、defer、async、charset
标签用法	必须使用开始标签和结束标签。不能使用自闭合标签

位于 head 元素中的 script 元素属于元数据元素，位于其他元素（如 body、section）中的则属于短语元素。

接下来要介绍的是如何用 script 元素完成各种任务。

属性	说明
type	表示所引用或定义的脚本类型，对于 JavaScript 脚本这个属性可省略
src	指定外部脚本文件的 URL
defer	设定脚本的执行方式
async
charset	说明外部脚本文件所用的字符编码

3.1.1、定义文档内嵌脚本

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script>
            document.write("This is from the script");
        </script>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

3.1.2、载入外部脚本

先创建一个外部脚本：

/*simple.js*/
document.write("This is from the external script");

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script src="simple.js"></script>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

3.1.3、推迟脚本的执行

可以用 async 和 defer 属性对脚本的执行方式加以控制。defer 属性告诉浏览器要等页面载入和解析完毕之后才能执行。

/*simple2.js*/
document.getElementById("applecode").innerText = "cherries";

该脚本的作用是会查找一个 id 属性值为 applecode 的元素并且将其内部内容改为 cherries。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script src="simple2.js"></script>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

载入这个 html 后，结果并不是原先想象的那样：

在这里插入图片描述

默认情况下，浏览器一遇到 script 元素就会暂停处理 HTML 文档，转而载入脚本文件并执行其中脚本。在脚本执行完毕之后浏览器才会继续解析 HTML。这个例子中浏览器载入和执行 simple2.js 中的语句时还没有解析其余的 HTML 文档内容。脚本找不到要找的那个元素，所以也就没有做出任何改变。脚本执行完毕之后，浏览器继续解析 HTML，code 元素也随之出现，然而对于脚本来说为时已晚，它不会再执行一遍。

/*通过改变 script 脚本的位置解决脚本的时间安排问题*/
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
        <script src="simple2.js"></script>
    </body>
</html>

在这里插入图片描述

不过在 HTML5 中可以用 defer 属性达到同样的结果。浏览器在遇到带有 defer 属性的 script 元素时，会将脚本的加载时间和执行推迟到 HTML 文档所有元素都已得到解析之后。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script defer src="simple2.js"></script>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

3.1.4、异步执行脚本

async 属性解决的是另一类问题。前面说过，浏览器遇到 script 元素时的默认行为是在加载和执行脚本的同时暂停处理页面。各个 script 元素依次（即按其定义的次序）同步（即在加载和执行进程中不再管别的事情）执行。

作为处理脚本的默认形式，同步顺序执行自有其意义所在。不过有些脚本并不需要这样处理，对这类脚本可以使用 async 属性提高其性能。这方面的一个典型例子是跟踪脚本。这种脚本可以汇报用户的网站访问记录以便广告公司根据用户的浏览习惯定制和投放广告，或者搜集网站访问者的统计数据以供分析。这些脚本自成一体，一般不需要与 HTML 文档中的元素互相作用。

使用 async 属性后，浏览器将在继续解析 HTML 文档中其他类型（包括其他 script 元素）的同时异步加载和执行脚本。如果运用得当，这可大大提高整体加载性能。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script async src="simple2.js"></script>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

使用 async 属性后的一个重要后果就是页面中的脚本可能不再按照定义它们的次序执行。因此如果脚本使用了其他脚本中定义的函数或值，那就不宜使用 async 属性。

3.2、noscript 元素

noscript 元素可以用来向禁用了 Js 或浏览器不支持 Js 的用户显示一些内容。

元素	nosrcipt
元素类型	元数据/短语/流
允许具有的父元素	任何可以包含元数据元素、短语元素或流元素的元素
局部属性	无
内容	短语元素或流元素
标签用法	开始标签和结束标签都需要

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script defer src="simple2.js"></script>
        <noscript>
            <h1>Javascript is required!</h1>
            <p>You cannot use this page without Javascript</p>
        </noscript>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

除此之外还有一种选择是在浏览器不支持 Js 时将其引至另一个 URL。这需要在 noscript 元素中加入一个 meta 元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <script defer src="simple2.js"></script>
        <noscript>
            <meta http-equiv="refresh" content="0; http://www.apress.com"/>
        </noscript>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <a href="page2.html">Page 2</a>
    </body>
</html>

这个代码会在不支持 Js 或禁用了 Js 的浏览器视图载入页面时将用户引至 www.appress.com 网站。

前丨尘忆·梦

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记之——创建HTML文档

创建 HTML 文档介绍最基础的 HTML5 元素：文档元素和元数据元素。它们用来创建 HTML 文档和说明其内容的元素。1、构筑基本的文档结构这些基础成分确定了 HTML 文档的轮廓以及浏览器的初始环境。文档元素只有 4 个，但是任何 HTML 文档都需要这些元素。1.1、DOCTYPE 元素每一个 HTML 文档都必须以 DOCTYPE 元素开头。浏览器据此得知自己将要处理的是 HTML 内容。元素DOCTYPE元素类型无允许具有的父元素无局部属性无
复制链接

扫一扫