HTML5学习笔记 - 标签归类


HTML的基本结构




    
    标题





  • :告诉浏览器需要一个doctype来触发标准模式。
  • :指定语言种类为中文,html是根元素。
  • :头部元素的容器,其中的内容绝大部分都不会直接显示给读者。
  • :内容载体,里面的标签元素直接显示给读者。

Head包含的内容

在Head中可以引用脚本,样式,标题,元信息等等,下面这些标签可以用在head部分:

  • :元信息,一个辅助性标签,提供搜索关键字、网页内容描述、文档字符集、使用语言、自动刷新和页面重定向、页面缓冲等等,它共有两个属性:namehttp-equiv,不同的属性又有不同的参数,而content为参数对应的值。

    • name:主要用于网页描述,而它主要有以下几种参数:
      • Keywords:该网页的搜索关键字。
        
        
      • description:网站内容描述,告诉搜索引擎你的网站主要内容。
        
        
      • robots:搜索引擎索引方式。
        
        
        
      • viewport:优化移动浏览器的显示。
        
        
        
      • author:标注网页作者。
      • COPYRIGHT:标注网也版权信息。
      • generator:标注网页制作软件。
      • revisit-after:代表网站重访,7days表示7天,抓取过一次之后就要等7天再来。
    • http-equiv:头文件作用,帮助显示网页内容,它主要有以下几种参数:
      • content-Type:设定页面使用的字符集。
        
        
        
      • Content-Script-Type:设定页面中脚本类型。
        
        
      • Expires:设置网页过期时间,一旦过期就会重载,必须使用GMT格式,或者直接设置为0。
         
        
        
        
      • Refresh:自动刷新和页面重定向。
        
        
        
      • Pragma:浏览器一般会缓存页面内容,当我们设置为no-cache就不会进行缓存。
         
        
      • Cache-Control:指定请求和响应遵循缓存机制。
         
        
         
        
        
      • X-UA-Compatible:设定浏览器采取何种版本渲染当前页面。
        
        
        
      • Set-Cookie:设置cookie,如果网页过期,那么网页存在本地的cookies也会被自动删除。
        
        
  • :作为所有链接规定默认地址与默认目标,必须位于head元素内部

    
    
    
  • :定义文档与外部资源的关系,最常见的用途是链接样式表以及图标,它有以下几种属性:

    
    
    
    
    
    • href:指定需要加载的资源的地址URL。
    • media:媒体类型,设定被链接文档将显示在什么设备上。
    • rel:定义当前文档与被链接文档之间的关系,stylesheet代表css样式表,icon表示图标
    • sizes:设定被链接资源的尺寸,仅适用于rel="icon"
    • type:执行所链接文档的MIME类型,css的type一般使用"text/css"
  • :页面标题。

    大大盆子 - 
    
  • :定义HTML文档样式信息,可以统一定制body中所用到的标签样式,type属性是必须的,且唯一可能的值就是"text/css"

    
    
  • :定义客户端脚本,script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件,常见于对图像的操作、表单的验证以及动态内容更新。

    • type:规定脚本的MIME类型,对于JavaScript,MIME类型就是"text/javascript",它是必须属性。
      
      
    • src:链接外部脚本,其中的URL可以是绝对URL(指向其他站点),也可以是相对URL(指向站点内的文件)。
      
      
    • async:规定异步执行脚本,仅适用于外部脚本(src链接)。
      
      
    • defer:规定是否对脚本执行进行延迟,直到页面加载为止,比如优先加载文字,完成之后再去加载图片。
      
      

Body包含的内容

body标签中的内容直接展示给读者,标签相对较多,我对它进行了以下归类:

  • 布局标签&语义化

    • :定义块级元素,是一个通用的容器元素,可以把文档分割为独立、不同的的部分,会另起一行,通常使用classid给同一类的div统一添加额外的样式与适当的语义,同时也可以设置title:当鼠标放上去的时候显示这个title、dir:设定元素标签内容文字方向。
    • :定义行内元素,在行内定义一个区域,也就是一行可以被span划分成好几个区域,不会另起一行,也可以使用classid添加样式和语义,当应用样式时,它才会产生视觉上的变化。
    • :定义页面的头部区域,一个语义化标签,让文档结构层次更清晰,相当于
    • :定义页面的尾部区域,也是一个语义化标签,相当于
    • < section >:定义文章中的大纲或章节,通常带有标题与段落内容,不是通用容器元素,相比于div更具语义化,它强调内容上的独立性,div强调形式上的独立性,如果仅仅是用于设置样式或脚本处理则使用div。
    • < article >:定义文章,语义化更强,表示是一篇文章,里面可以嵌套其他元素,它可以有自己的头、尾、主体、等内容。
    • < aside >:定义页面内容之外的内容,通常用来设置侧边栏,同时也可以嵌套在article元素内部使用,作为主要内容的附属信息,比如参考资料,名词解析等。
    • < nav >:定义导航栏、超链接。
    • < hgroup >:标题分组,通常放在header里面。
  • 表格标签

    • :定义表格,主要有一下几个属性:
    • border
    • :定义表格头部。
    • :定义表格主体。
    • :定义表格尾部。
    • :定义表格标题。
    • :定义表格标题。
    • 列表标签


    • 未完待续......

      你可能感兴趣的:(HTML5学习笔记 - 标签归类)