这是一个常见的 HTML 标签结构。由许多的 <标签> 和 </标签> 组成。 其中 <!-- --> 为代码注释,内容不会被显示和运行。

<!DOCTYPE>
<html>
    <head>
        <title>Web前端开发<title>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
        <meta name="viewport" content="网页描述">
        <meta name="keywords" content="网页关键字">
        <meta name="description" content="网页主要内容">
        <meta name="author" content="网页的作者">
        <style>
            /** 样式表 **/
        </style>
        <script>
            /** 脚本 **/
        </script>
    </head>
    
    <body>
        <!-- 网页主体内容 -->
    </body>
</html>

<!DOCTYPE> :声明文档类型
<html> :网页的根框架
<head> :用于定义HTML文档头

  • <title> :定义HTML网页标题
  • <base> :为HTML页面所有链接设置一个默认的目标地址
  • <link> :定义HTML文档与外部资源的关系
  • <meta> :提供关于HTML文档的元数据(描述等)给服务器和搜索引擎
  • <style> : 用于为 HTML 文档定义 CSS 样式信息
  • <body> : 网页的主体显示内容

meta 的主要属性:

  • keywords (用于告诉搜索引擎网页的关键字)
  • description (用于告诉搜索引擎该网页的主要内容)
  • robots (用于告诉搜索引擎该网页是否需要被收录索引)
robots 参数说明
all索引网页包括链接
index索引此网页
none将此网页忽略
noindex不索引此网页
follow允许通过链接索引其他网页
nofollow不允许通过链接索引其他网页
  • author (用于声明网页作者)
  • generator (用于标注该网页由什么软件编写)
  • copyright (用于标注版权信息)
  • revisit-after (设置爬虫的访问时间)
    <meta name="revisit-after" content="10 days">
  • content-Type (设置网页字符集和编码格式)
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
  • cache-control (用于告知浏览器如何缓存以及缓存时间)
  1. no-cache (先发送请求与服务器确定资源是否更改,如果未更改则使用缓存)
  2. public (不允许缓存)
  3. private (只为单个用户缓存)
  4. max-age (响应该在多久内能被缓存和重用而不去服务器重新缓存)
  • expires (用于设置网页的到期时间,过期后必须到服务器上重新访问)
  • refresh (网页将在设置的时间内自动刷新跳转到指定网页)
  • Set-Cookie (用于设置网页过期时间,过期后将删除本地 Cookie。此处使用 GMT 时间)