html5-语义化标签

html 语义化标签

语义化标签

元素分类：

• 块级元素

  • 独占一行
  • 可以设置宽高
  • 不设置宽度时，继承父元素宽度

  • 不设置高度时，就是本身内容的高度

    常用：div,p,h1...h6,ul,ol,dl,form,section,nav,aside
    转换成块级元素：display:block

• 行内块元素

  • 和其他行内元素和行内块元素在一行

  • 元素的 width，height，padding，margin 可以设置

    常用：img,input,
    转换成行内块元素：display:inline-block，float:left/right，position:absolute/fixed

• 行内元素

  • 和其他行内元素和行内块元素在一行
  • 元素的宽度就是他包含的文字和图片的宽度，不可改变。
  • 元素高度 height 设置无效，可以设置 line-height
  • margin,padding 的上下对布局无效，左右可以。
  • 内联元素只能包含文本、内联元素、行内块元素
    常用：span,a,br,em,strong
    转换成行内元素：display:inline

语义化标签使得页面的内容结构化，见名知义

标签	描述
header	定义文档的头部
footer	定义文档的尾部
nav	定义文档的导航
section	定义文档中的节
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
keygen	用于表单的密钥对生成器
output	输出

重学前端——语义化标签

• 缩写 abbr

  <abbr title="World Wide Web">WWW</abbr>

• 分隔线
  hr - 表示故事走向的转变或话题的转变
  border - 纯粹的视觉效果

• 注释
  p 标签+class=’note’

• 加粗
  strong 表示文本十分重要
  em 表示强调，可以嵌套，越多层级 表示更大程度的强调

• 引用

• blockquote 表示段落级引述内容，
• q 表示行内的引述内容
• cite 表示引述的作品名

• 时间 time

  <time datetime='2019-01-25'>25 Jan 2019</time>

• 文章中的图像
  figure 用于表示与主文章相关的图像、照片等流内容
  figcaption 照片图片的描述文字

  <figure>
      <img src='http://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs'>
      <figcaption>百度logo</figcaption>
  </figure>

• 定义 ghh
  dfn 标签

  The <dfn>Internet</dfn> is balalalal

• 固定格式

  samp 计算机输出
  pre 格式不根据浏览变化
  code 代码段

  <pre>
      <code>>
          &lt;html&gt;
              &lt;head&gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      </code>
  </pre>