html5和css3 权威指南 pdf

转载

数据探索者11 2024-09-30 07:05:24

文章标签 html5和css3 权威指南 pdf html5 html 前端 HTML5权威指南 文章分类 HTML5 移动开发

HTML5 权威指南第七章学习笔记

HTML5 权威指南第七章学习笔记

基本文章结构

`DOCTYPE` 元素
`html` 元素

`head` 元素
`body` 元素

元数据

设置文档标题
URL 解析基准

`href` 属性
`target` 属性

说明文档

指定数据对
声明字符编码
模拟 HTTP 标头字段

定义 CSS

指定样式类型
指定样式适用的媒体

指定外部资源

载入样式表
自定义网站标志
预先获取资源

脚本元素

script

定义内嵌脚本
加载外部脚本文件
推迟脚本的执行
异步脚本的加载

noscript

HTML5 权威指南第七章学习笔记

本来想扫一遍就跳过的，后来发现 DOCTYPE 也是常见的面试题之一， metadata 作用是什么自己也被问到过好几次……这种概念性的基础吧，还是挺重要的。

基本文章结构

常见的 HTML 结构如下：

<!-- 一个简单却完整的HTML文档 -->
<!DOCTYPE html>
<!-- 最大的HTML根元素 -->
<html>
  <head>
    <title>文章标题</title>
  </head>
  <body>
    <p>文章段落</p>
  </body>
</html>

`DOCTYPE` 元素

这个知识点死记硬背刻到脑子里： 每一个 HTML 文档都必须以 DOCTYPE 元素开头!

DOCTYPE 并不是 HTML 元素，它自成一类，属于特殊的单标签。浏览器会根据它来得知自己将要处理 HTML 文档。

而且在 HTML5 中，DOCTYPE 元素只有一种用法，即结构中的 HTML 代码中显示。它有两个作用：

告诉浏览器文档是一个 HTML 文档
用来标记文档内容的 HTML 版本

`html` 元素

整个 HTML 中最大的根元素，表示 HTML 部分的开始。

`head` 元素

包含文档的 元数据 (metadata)。

元数据能：

向浏览器提供有关文档内容和标记的信息
包含脚本和对外资源

每一个 HTML 都应该包含一个 head 元素，每一个 head 中应包含一个 title 元素。

`body` 元素

HTML 文档内容的所在地。

有了 DOCTYPE, head, body 三个部分，就已经构成了一个简单但是完整的 HTML 文档了。

body 紧跟在 head 之后，是 html 的第二个子元素。

元数据

应该放在 head 中，元数据 (metadata) 经常用来被提供 HTML 文档的信息，其作用如下：

搜索引擎优化（SEO）
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果，控制页面缓冲
网页定级评价
控制网页显示的窗口等

设置文档标题

每一个文档都应该有，且只有一个 title 元素，其开始和结束标签之间的文字对用户来说才是有意义的。

URL 解析基准

base 元素可以用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。

base 元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。

我个人觉得这个可能用处已经不是特别的大了，感觉在日常开发中，很多情况下都会在自己的模块里面设置 baseURL，打包后作为一个页面的一部分。一旦开始拉数据，不同模块的 baseURL 很难做到一致的吧。例如说，静态数据都是托管了，和动态数据的 baseURL 就不一样了。
我查了下，王者农药、小米、csdn 之类的网页，都没看到 base 的设置……

`href` 属性

设定 baseURL，如下：

<head>
  <base href="http://test/somebases" />
</head>
<body>
  <a href="page1.html">Page 1</a>
</body>

这里当打开 Page 1 的时候就会访问 http://test/somebases/page1.html。

`target` 属性

告诉浏览器应该如何打开 URL。

说明文档

用 meta 元素可以定义文档的各种原数据，每个 meta 元素只能对应一种用途。如果想要使用不止一个 meta 元素，可以选择在 head 元素中添加多个 meta 元素。

指定数据对

meta元素的数据也是使用键值对的形式，定义元素的形式如下：

<head>
  <meta name="author" content="John Doe" />
</head>

其中，name 用来定义元数据的类型，content属性用来提供值。以下列举了最常用的 6 个预定的元数据名称，其余的元数据扩展可以在 whatwg.org/MetaExtensions 中查看。

元数据名称	说明
`author`	文档作者的名字
`description`	一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述
`generator`	生成此页面的软件的标识符（identifier）
`keywords`	与页面内容相关的关键词，使用逗号分隔
`referrer`	控制由当前文档发出的请求的 HTTP `Referer` 请求头

原本是 5 个，现在已经更新到 6 个了。

声明字符编码

如：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
</head>

一般都使用 utf-8 了。

模拟 HTTP 标头字段

可以用来模拟或替换 5 种 HTTP 标头字段：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
</head>

<meta http-equiv="refresh" content="5" /> 其意为每个 5 秒钟就再次载入页面。

属性值	说明
`refresh`	这个属性指定: - 如果 `content` 只包含一个正整数，则为重新载入页面的时间间隔(秒)； - 如果 `content` 包含一个正整数，并且后面跟着字符串 ‘`;url=`’ 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)
`default-style`	设置默认 CSS 样式表组的名称。
`content-type`	如果使用这个属性，其值必须是"`text/html; charset=utf-8`"。注意：该属性只能用于 MIME type 为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
`content-security-policy`	它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
`x-ua-compatible`	如果指定，则 `content` 属性必须具有值 “`IE=edge`”。用户代理必须忽略此指示。

原文说的是 3 种，不过现在 MDN 已经更新到了 5 种了。

定义 CSS

使用 CSS 应该是 head 最为人所熟知的用法之一了吧，如：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <style type="text/css">
    a {
      backgournd-color: grey;
      color: white;
      padding: 0.5em;
    }
  </style>
</head>

指定样式类型

值只有 text/css。

指定样式适用的媒体

用法如下：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <style media="screen" type="text/css">
    a {
      backgournd-color: grey;
      color: white;
      padding: 0.5em;
    }
  </style>
  <style media="print" type="text/css">
    a {
      color: red;
      font-weight: bold;
      font-style: italic;
    }
  </style>
</head>

基本上就是指定不同的设备的，具体现在可用的设备如下：

媒体类型	说明
`all`	适用于所有设备。
`print`	适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）
`screen`	主要用于屏幕。
`speech`	主要用于语音合成器。

注：原作中出现的一些 media type 已经在 Media Query 4 中被废弃了。目前保留的是 Media Query 4 中留下来的。留于 2021-04-13

除此之外，media 还有一些特性可以让 style 应用的对象更加具体：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <style media="screen" AND (max-width: 500px) type="text/css">
    a {
      backgournd-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>

关于可用的属性这一块可以查看 MDN 上的媒体特性，太多了，我就不放了。

通俗的理解就是 media query 嘛，毕竟用的最多……现在很多用来做多端的自适应。

指定外部资源

link 元素可以用来在 HTML 文档和外部资源之间建立联系，目前来说，引入外部 CSS 和 JavaScript 都是最常见的使用了。

link 的属性距离这本书出版的时间已经更新好多了，具体可以在：外部资源链接元素里查看，反正我看了下，如果按照这本书的格式加内容的话，大概……反正五六页应该是搞不定的。

载入样式表

经典用法：

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <!-- 假设同文件夹目录下有一个名为 styles.css 的文件 -->
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

自定义网站标志

这是 CSDN 用的，正好看到有就拉过来了，省的自己再编了 hhhh

<head>
  <link
    rel="shortcut icon"
    href=""
    type="image/x-icon"
  />
</head>

就是 CSDN 页面上的那个小 C，感兴趣的可以打开看看。

预先获取资源

之前这本书出现过的，关于 async 和 defer 里面的介绍说，要在 head 里面预先声明需要加载的 JavaScript。

使用 prefetch 要求加载的页面会随着主页面的加载一起加载。即，假设下文用户要打开 page2.html 这个页面，因为已经该资源被预先加载了，所以用户打开该页面无需另外加载。

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <!-- prefetch -->
  <link rel="prefetch" href="/page2.html" />
</head>

注：目前主流浏览器之中只有 Safari 默认不支持 prefetch。不过 Safari 有开启 prefetch 的功能，所以在针对 Safari 进行开发的时候需要注意一下prefetch的功能是否能够正常使用。

脚本元素

就两个，script 和 noscript。

script

关于 script 的属性，还是查看

定义内嵌脚本

不使用 type 的时候，浏览器会假定使用的就是 JavaScript。

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="prefetch" href="/page2.html" />
  <script>
    //   页面会在加载的时候在头部打印出 Hello world
    document.write("Hello world");
  </script>
</head>

加载外部脚本文件

// 和上一个案例的代码一样，但是放在了外部文件
document.write("Hello world");

加载同目录下的 sample.js 文件。

<head>
  <meta name="author" content="John Doe" />
  <meta charset="utf-8" />
  <meta http-equiv="refresh" content="5" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="prefetch" href="/page2.html" />
  <!-- 不能使用自闭标签 -->
  <script src="sample.js"></script>
</head>

推迟脚本的执行

也就是在 script 中加入 defer，这一段说在 DOM 操作的时候会进行更深入的讲解。

假设有第二个 JavaScript 文件如下：

document.getElementById("randomId").innerText = "延迟加载";

随后利用 defer 在 head 中进行延迟加载

<head>
  <script defer src="simple2.js"></script>
</head>
<body>
  <p id="randomId"></p>
</body>

因为使用了 defer，页面能够顺利解析，在加载完毕之后会显示 延迟加载 这个字段。

异步脚本的加载

就是在 script 中加入 async。

有一些数据收集之类的脚本并不需要与用户交互，可以被异步调用，这时候就可以使用 async。

适当的使用异步调用可以提升性能，但是 async 并不能保证运行的顺序，所以当页面内有其他的值是依赖于某一个函数，那么那个函数就不能使用 async 关键字。

<head>
  <!-- 脚本会异步的收集一些信息，所以用户不会有卡顿的体感 -->
  <script async src="tracking.js"></script>
</head>

noscript

看样子好像说是有些浏览器会特地禁用 JavaScript，所以需要用 noscript 进行声明：

<head>
  <noscript>You will need to enable JavaScript to view the content</noscript>
</head>

这么说起来，用 create-react-app 生成的页面好像也出现过相似的内容。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：android DatePicker 怎么显示一条

下一篇：Android 涉及WMS AMS技术点

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯