HTML5 模板

叽叽叽喳喳喳
152 阅读1分钟

HTML5 模板

入门 HTML 5 样板的一个非常简单的示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Page Title</h1>
  <script src="scripts.js"></script>
</body>

</html>

HTML5 模板剖析

HTML 模板通常包括以下部分：

文档类型声明（或 doctype）

<!doctype html>

<HTML>元素

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

lang 属性

<html lang="en">

<head> 标签

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>  
</head>

字符编码

 <meta charset="utf-8">

视口元素

  <meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width ：您希望渲染网站的视口的像素宽度。 initial-scale ：值“1”表示设备宽度和视口大小之间的比例为 1:1。

X-UA 兼容

有时您会在 HTML 文档的头部看到这一行：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

此 meta 标记允许 Web 作者选择页面应呈现为哪个版本的 Internet Explorer。

<title>标签

<title>A Basic HTML5 Template</title>

<title> 是浏览器标题栏中显示的内容 ==该元素是 <head> 部分中唯一的强制元素。==

description 描述 和 author 元素

  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

SEO元素

<head>
  ⋮
  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">
</head>

例如，此处包含的五个 <meta> 元素将出现在嵌入以下数据的社交卡中：

  • 内容的标题
  • 所传送内容的类型
  • 内容的规范 URL
  • 内容描述
  • 与内容相关联的图像

网站图标

HTML5 模板中的下一部分包括 <link> 元素，这些元素指示要包含为 favicon 和 apple touch 图标的资源：

<head>
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

 CSS 样式表

<head>
  ⋮
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>

JavaScript 文件

<head>
  ⋮
  <script src="js/script1.js"></script>
</head>
<body>
  ⋮
  <script src="js/script2.js"></script> <!-- Generally the best location -->
</body>

JavaScript 代码通常通过 <script> 元素添加到 HTML 页面 最好的做法是将它们放置在文档底部，就在结束 </body> 标记之前：

<body> 标签

<body>
  <h1>This is My Dog</h1>
  <p>
    <img src="dog.jpg" alt="A golden retriever, lying in the grass">
  </p>
  <p>Here's my gorgeous boy, lying in the grass after our walk today.</p>
</body>

视口元素 <title> 、 description 和 author

avatar
文章
阅读
粉丝