个人自学前端3-HTML标签1

目录

HTML标签

常用全局属性：

属性名 描述
class 规定元素的类名(值可以有多个)
id 规定元素的唯一 id
lang 设置元素中内容的语言代码,语言编码表
style 规定元素的行内样式（内联css）
title 标签在鼠标停留时的提示信息

常用标签（元素）

  • <html> 页面的根标签，最顶层标签。
  • <head> 定义关于文档的信息（不会显示到页面）
  • <body> 定义文档的主体(要显示到页面中的内容)
  • <title>定义文档的标题，显示到浏览器的选项卡中。该标签必须写在<head>标签内部。
  • <meta> 描述 HTML 文档的元数据。通过标签中属性设置其相关的信息
    • charset 定义文档的字符编码。h5新增
    • name 属性规定元数据的名称,取值通常有keywords、description、author name属性需要配合content属性一起使用。
      • robots参数说明：
        参数为 all ：文件将被检索，且页面上的链接可以被查询； 参数为 none ：文件将不被检索，且页面上的链接不可以被查询； 参数为 index ：文件将被检索； 参数为 follow ：页面上的链接可以被查询； 参数为 noindex ：文件将不被检索，但页面上的链接可以被查询； 参数为 nofollow ：文件将被检索，但页面上的链接不可以被查询；
      • revisit-after参数说明：具体整数型数字+空一格+days。一般来说，网站并不需要使用revisit-after来限制搜索引擎的访问频率。而只有当网站数据量非常大，被搜索引擎频繁的抓取，会占用过多的服务器资源，这会影响网站的访问反应速度。在这种情况下，我们并不希望搜索引擎过于频繁抓取网页，一般设置成每隔5—7天来访问抓取一次网页即可。
    • http-equiv 为名称/值对提供了名称，相当于http的文件头作用。
      • Duration的值为网页动态过渡的时间，单位为秒。
        Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。
        　　　　　　　0 矩形缩小　　1 矩形扩大
        　　　　　　　2 圆形缩小　　3 圆形扩大
        　　　　　　　4 下到上刷新　5 上到下刷新
        　　　　　　　6 左到右刷新　7 右到左刷新
        　　　　　　　8 竖百叶窗　　9 横百叶窗
        　　　　　　 10 错位横百叶窗 11 错位竖百叶窗
        　　　　　　 12 点扩散
        　　　　　　 13 左右到中间刷新 14 中间到左右刷新
        　　　　　　 15 中间到上下　 16 上下到中间
        　　　　　　 17 右下到左上　 18 右上到左下
        　　　　　　 19 左上到右下　 20 左下到右上
        　　　　　　 21 横条　　　　 22 竖条
        　　　　　　 23 以上22种随机选择一种
    <head>
    <!-- 页面描述：用来告诉搜索引擎你的网站主要内容 -->
    <meta name="description" content="Free Web tutorials">
    <!-- 关键词：用于搜索引擎进优化 -->
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <!-- 作者：标注网页的作者 -->
    <meta name="author" content="Hege Refsnes">
    <!-- 机器人向导：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数值有all,none,index,noindex,follow,nofollow，默认值是all。 -->
    <meta name="robots" content="/">
    <!-- 版权：标注版权 -->
    <meta name="copyright" content="本网站版权归CZL所有"/>
    <!-- 说明网站采用什么编辑器制作 -->
    <meta name="generator" content="VSCode"/>
    <!-- 重访：网站重访 -->
    <meta name="revisit-after" content="7 days"/>
    
    <!-- 用的少！！ -->
    <!-- 期限：可以用于设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。 必须使用GMT的时间格式。  -->
   ＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞
    <!--cache模式：用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 。访问者将无法脱机浏览。 -->
   ＜meta http-equiv="Pragma" content="no-cache"＞    
   <!-- 刷新：自动刷新并指向新页面，其中的2是指停留2秒钟后自动刷新到URL网址 -->
   ＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞  
   <!-- cookie设定：如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。 -->
   ＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞ 
   <!-- 显示窗口的设定：强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。-->
   ＜meta http-equiv="Window-target" content="_top"＞  
   <!-- 显示字符集的设定：设定页面使用的字符集（H5前用）。-->
   ＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞ 
   <!-- 网页RSAC等级评定：设定页面使用的字符集（H5前用）。在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。（用不到）-->
   <meta http-equiv="Pics-label" contect="">
   <!-- 设定进入或退出页面时的特殊效果（用不到）-->
   <meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=12)"> 
   <meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion= 12)"> 
    <!-- 清除缓存:再访问这个网站要重新下载-->
    <meta http-equiv="cache-control" content="no-cache">  
</head>
  • <link> 定义文档与外部资源的关系
    • href 定义被链接文档的位置。
    • rel 规定当前文档与被链接文档/资源之间的关系。常用取值如下：
      • stylesheet 表示要导入的样式表的 URL。
      • icon 导入表示该文档的图标。
    <head>
    <!-- 引入外部css文件 -->
    <link rel="stylesheet" href="./main.css">
    <!-- 浏览器标签栏图标,sizes新标签：规定被链接资源的尺寸 -->
    <link rel="icon" href="./logo.ico" sizes="16x16">
</head>

    浏览器标签栏图标格式为 .ico
    图片在线转换ICO

posted @ 2021-06-24 09:38  暗鸦08  阅读(71)  评论(0)    收藏  举报