创建Html文档

来源：互联网发布：罗马军团知乎编辑：程序博客网时间：2024/06/07 07:30

这篇学习的是最基本的HTML元素：文档元素和元数据元素。它们是用来创建Html文档和说明其内容的元素。

1.构建基本的文档结构
文档元素有4个，这些基本元素确定了Htmlz文档的轮廓以及浏览器的初始环境，任何HTML文档都需要这些元素。

1.1 DOCTYPE元素
每个Html文档都必须以DOCTYPE元素开头，告诉浏览器得知自己将要处理的是Html元素。虽然省略DOCTYPE这一元素，大多浏览器仍能正确显示文档内容，但这不是一个好习惯。
使用：
这个元素告诉浏览器：1.它处理的是Html文档 2.用来标记文档内容的Html的版本信息。Html5文档版本号用不着写。

1.2 html元素
html元素更恰当的说法应该是根元素，它表示文档中HTML部分的开始。html元素相关信息如下：
这里写图片描述

1.3 head元素

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

1.4 body元素

head元素中包含这元数据和文档信息，而body元素中包含的则是文档内容，body元素总是跟在head元素后面，下面是body元素的说明：

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

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

2.1 设置文档标题
title元素的作用是设置文档的标题或名称，通常显示在其窗口顶部或标签页的标签上。

2.2 设置相对URL的解析基准

base元素可以用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。相对链接省略了URL中的协议、主机和端口部分，同时它还能设置链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。

1.使用href属性

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>base URL的使用</title><meta name="author" content="QiDong"/><meta name="description" content="A simple use  for base url"/><meta http-equiv="refresh" content="10"/><base href="http://localhost:63342/TestHtml5/file/"/><link rel="shortcut icon" href="../img/studio.ico" type="image/x-ico"/></head><body><a href="http://localhost:63342/TestHtml5/file/index.html" target="_blank">index.html</a><a href="second.html" target="_blank">second.html</a><a href="third.html" target="_blank">third.html</a><a href="fourth.html" target="_blank">fourth.html</a></body></html>

文档内容部分的第一个a元素href属性使用的是全路径，而后三个使用的则是基准URL，此时，浏览器会把相对URL和基准URL拼接成一个完整的路径。

使用target属性

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

2.3 用元数据说明文档

meta元素可以用来定义文档的各种元数据。它有很多不同用法，一个HTML文档可以使用多个meta元素。

下面看一下meta元素的用法：
1.指定名/值元数据对
meta元素的第一个用途就是用名/值定义元数据，需要用到meta的name和content属性，下面是简单使用：

<head>    <meta charset="UTF-8">    <title>base URL的使用</title>    <meta name="author" content="QiDong"/>    <meta name="description" content="A simple use  for base url"/></head>

这里的name属性用来表示元数据的类型，而content属性用来提供值。meta元素可以使用的几种预定义元数据类型如下：
这里写图片描述

除了预定义的元数据类型，还可以使用元数据拓展，这里先不予讨论。

2.声明字符编码

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

<head>    <meta charset="UTF-8">    <title>base URL的使用</title>    <meta charset="UTF-8">    </head>

上述的页面使用的UTF-8编码，由于UTF-8编码能使用最少的字节数表示所用的unicode字符，所以使用很广泛。

3.模拟HTTP标头字段

meta元素的最后一个用途就是改变HTTP标头字段的值。服务器的每条响应都包含着一组向浏览器说明其内容的字段，meta元素可以模拟或者替换其中的三种标头字段。下面是使用例子：

 <meta http-equiv="refresh" content="5"/>

http-equiv属性的用途是指定所要模拟的标头字段名称，字段值由content属性指定。上述的例子中将标头字段refresh的值设置为5，意思就是浏览器每隔5秒在此载入该页面。
http-equiv有三个值可以使用，如下：

这里写图片描述

使用cotent-type属性可以声明HTML页面所使用的字符编码。

<meta http-equiv="content-type" content="text/html" charset="UTF-8" />

2.4 定义CSS样式

style元素可以用来定义HTML文档内嵌的CSS样式，而link元素则是用来导入外部样式表中的样式。
这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>百分比单位的使用</title>    <style type="text/css">        p{            font-size: calc(200% - 15px);            width: calc(80% - 700px);            background: #ff0000;            color: white;        }    </style></head><body>这是一行正常的字体<p>能不能给我一首歌的时间</p></body></html>

style元素可以出现在HTML文档中的各个部分。一个文档可以包含多个style元素，因此并不必要把所有样式都定义在head里面。在使用模板引擎生成页面的情况下这个特性很有用，因为这样一来就可以使用页面特有的样式为模板定义的样式提供补充。

1.指定样式类型

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

2.指定样式作用范围

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

3.指定样式适用的媒体

media属性可以用来说明文档在什么情况下应该使用该元素中定义的样式，下面首先是看一下用法：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>style的media属性的使用</title>    <style type="text/css" media="print">        p{            background: greenyellow;            color: white;            width:80%;        }    </style>    <style type="text/css" media="screen">        p{            background: red;            color: white;            width:50%;        }    </style></head><body><p>这是一首简单的小情歌</p></body></html>

可以清楚地从代码中看到，使用了两个style元素，它们有不同的media值。显然这里是在浏览器屏幕上显示，所以用的是第二个style元素中的样式；如果是要打印的话，则是使用第一个style元素中的样式。

样式的使用条件可以设置得非常细致。首先要确定的是所针对的设备类型。下表中是符合规定的值。
这里写图片描述

浏览器负责解释设备归类，对于我们之前使用的比如screen和print这类，一般的浏览器的解释都比较一致；但是对于某些类型，比如handled，各个浏览器的解释可能就不太一样了，使用的时候是需要事先去了解这些差异的。除此，media还有一些特性可以用来设计更具体的使用的条件。先走上一例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>让style元素对象更加具体</title>    <style type="text/css" media="screen AND (max-width:800px)">       p{           background: red;           color: white;           width: 50%;       }    </style>    <style type="text/css" media="screen AND (min-width:800px)">        p{            background: greenyellow;            color: white;            width:50%;        }    </style></head><body><p>你不是真正的快乐</p></body></html>

效果是啥呢？当浏览器的宽度大于800px的时候，使用第二个style元素中的样式；如果小于800px的话，则是使用第一个style元素中的样式。
这里写图片描述

除了AND，其实也是可以使用NOT或者表示OR的逗号（，），借助它们可以复杂而又具体的条件。style的media属性可以使用的特性一般都是加上前缀min-或者max-,特性以及它们的说明如下图所示：
这里写图片描述

这些特性也是由浏览器负责解释，所以在使用的时候需要了解这些特性在各个浏览器上的差别。

2.5 指定外部资源

link元素可以用来在HTML文档和外部资源之间建立联系，最典型的就是CSS资源。来看一下link元素：

link元素有6个局部属性，最重要的当属于rel属性。rel属性比较常见的值如下表所示：

为rel属性设定的值决定了浏览器对待link元素的方式。

1.载入样式表

p{    background: red;    color: white;    width:50%;}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>link导入样式表</title>    <link rel="stylesheet" href="../css/test1.css" type="text/css"/></head><body><p>你不是真正的快乐</p></body></html>

效果显而易见：背景红色，字体白色，宽度为屏幕宽度的50%

2.为页面定义网站标志

除了最常用的CSS样式表，link元素最常见的用处莫过于定义与页面联系在一起的图标。每个浏览器的处理方式可能不同，但一般都是显示在标签页的标签上，下面是一个简单的例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>给页面定义一个网站图标</title>    <link rel="shortcut icon" href="../img/lion.ico" type="image/x-icon"/></head><body><p>你不是真正的快乐</p></body></html>

3.预先取得资源

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用link元素预先加载资源</title>    <link  rel="prefetch" href="third.html" type="text/html"/></head><body><p>你不是真正的快乐</p><a href="third.html">第三个页面</a></body></html>

rel设置为prefetch，href设置为third.html，为用户可能设计到这个页面的操作作准备。目前支持link元素这一功能的浏览器还不是很多。

3. 使用脚本元素

与脚本元素相关的元素有两个。一个是script，用于定义脚本并控制其执行流程；另一个是noscript，用于规定在浏览器不支持脚本或者是禁止了脚本时的处理方法。

3.1 script脚本

script元素可以用来在页面上加上脚本，方式有在文档中定义脚本和引用外部的脚本这两种方式。每一段脚本都需要一个script元素。
这里写图片描述
需要注意的是，位于head元素内的script元素属于元数据元素，位于其他元素中的则属于短语元素。
先从整体的角度来认识一下script元素属性的含义：

1.定义文档内嵌脚本

这是定义脚本最简单的方式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>定义内嵌脚本</title>    <script type="text/javascript" >        document.write("一个你和一个我");    </script></head><body><br><p>两个人的心在放纵</p></body></html>

这里写图片描述

例子中的脚本的作用就是在文档中加入一行文字。

2.载入外部脚本库

可以把JavaScript脚本写在一个外部文件中，然后使用script元素引入该外部文件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>导入外部脚本文件</title>    <script type="text/javascript" src="test_js.js">    </script></head><body><br><p>你说依赖，是我们的阻碍！</p></body></html>

例子中的外部脚本文件的作用是在文档中输入一行歌词。

3.推迟脚本的执行

可以用async和defer属性对脚本的执行方式加上控制。defer属性是告知浏览器要等页面载入和解析完毕之后才能执行脚本。要理解defer的作用的话，首先看如下的一个例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>体验defer属性的作用</title>    <script type="text/javascript">        document.getElementById("code").innerText="测试代码";    </script></head><body><br><p>你说你喜欢<span id="code">水果</span>，是这样吗？</p><p>你说<span id="code2">依赖</span>是我们的阻碍。</p></body><script>    document.getElementById("code2").innerText="眷恋";</script></html>

看下效果：
这里写图片描述

可以看到第一个span元素中的内容没有被替换，而第二个span元素中的内容被替换了，这是因为head元素中的脚本先于body元素文档先执行了，所以没有正确获取到第一个span元素，自然不能改变其内容了。下面在使用script加载外部脚本文件的时候，加上defer属性，再看一下效果：

document.getElementById("code").innerText="测试代码";

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>体验defer属性的作用</title>    <script defer src="test_js.js">    </script></head><body><br><p>你说你喜欢<span id="code">水果</span>，是这样吗？</p></body></html>

这里写图片描述
可以看出这次脚本文件是在文档解析完毕之后执行的，所以span元素中内容被换了。

4.异步执行脚本

使用了async属性后，浏览器在继续解析HTML文档中的其他元素的时候同时异步加载和执行脚本。如果能运用得当，可以大大提高整体加载性能。
这是只是简单地将上一个例子中的defer属性换成async，发现效果一致：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>体验defer属性的作用</title>    <script async src="test_js.js">    </script></head><body><br><p>你说你喜欢<span id="code">水果</span>，是这样吗？</p></body></html>

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

3.2 noscript元素

noscript元素是用来向禁用JavaScript浏览器或浏览器不支持JavaScript的用户一些内容。

阅读全文

0 0