跳至主要內容
meta标签

meta标签

  • meta标签只能位于head元素内部。 在html中,meta标签没有结束标签。在xhtml中,meta标签必须被正确地关闭。 meta标签共有两个属性,分别是http-equiv属性和name属性。

  • 如果设置了 name 属性,<meta> 元素提供的是文档级别(document-level)的元数据,应用于整个页面。

  • 如果设置了 http-equiv 属性,<meta> 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。

  • 如果设置了 charset 属性,<meta> 元素是一个字符集声明,告诉文档使用哪种字符编码。

  • 如果设置了 itemprop 属性,<meta> 元素提供用户定义的元数据


yyshino大约 1 分钟FrontEndHTML
行内元素和块级元素

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSSdisplay属性相互转换。

行内元素

行内元素对应的CSS样式设置为display: inline;

特点

  • 元素排在一行。
  • 封闭后不会自动换行。
  • 不能指定高度与宽度。
  • 可以使用line-height来指定高度。
  • 外边距对于水平方向有效,垂直方向无效。
  • 内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响。

yyshino大约 2 分钟FrontEndHTML
HTML标签的语义化

HTML标签的语义化

  • <h1>~<h6> 定义页面的标题,<h1>-<h6>元素等级依次降低。
  • <header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
  • <nav> 提供当前文档内或其他文档的导航链接,导航部分的常见示例是菜单,目录和索引。
  • <main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
  • <article> 专注于单个主题的博客文章,报纸文章或网页文章。
  • <address> 提供了一个或多个人员或组织的联系信息。
  • <section> 定义文档中的节,表示HTML文档中包含的独立部分。
  • <aside> 表示文档的一部分,其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
  • <footer> 定义文档的底部区域,通常包含文档的作者,著作权信息,联系信息等。
  • <hgroup> 表示文档部分的多级标题,它对一组<h1>~<h6>元素进行分组。
  • <ul> 表示项目的无序列表,通常呈现为项目符号列表。
  • <ol> 表示项目的有序列表,通常呈现为编号列表。
  • <li> 表示列表中的项目。
  • <strong> 表示强调突出重点内容,浏览器通常以粗体显示内容。
  • <em> 标记强调重点的文本,可以嵌套<em>元素,嵌套的每个级别都表示强调程度更高。
  • <small> 代表旁注和小字体,例如版权和法律文本,独立于其样式表示。
  • <abbr> 表示缩写或首字母缩写词。
  • <cite> 用于描述对引用的创意作品的引用,并且必须包括该作品的标题。
  • <figure> 表示独立的内容,可能带有可选的标题,该标题使用<figcaption>元素指定。
  • <figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。
  • <blockquote> 定义块引用,可以使用<cite>元素提供文本表示
  • <mark> 表示被标记或突出显示以供参考或标记目的的文本。
  • <time> 表示特定的时间。
  • <date> 表示特定的日期。
  • <dfn> 用于表示在定义短语或句子的上下文中定义的术语。
  • <code> 计算机代码的简短片段的方式显示其内容的样式。
  • <samp> 输出的示例或引用的内联文本或样本文本。
  • <kbd> 表示文本是从键盘上键入的,它经常用在与计算机相关的文档或手册中。
  • <del> 表示已从文档中删除的文本范围。
  • <ins> 表示已添加到文档中的文本范围。
  • <menu> 表示用户可以执行或激活的一组命令,例如上下文菜单等。
  • <dialog> 表示对话框或其他交互式组件,例如检查器或子窗口。
  • <summary> 元素为<details>元素的显示框指定摘要,标题或图例。
  • <details> 描述文档或文档某个部分的细节。
  • <bdi>: 允许设置一段文本,使其脱离其父元素的文本方向设置。
  • <progress>: 定义任何类型的任务的进度。
  • <ruby>: 定义ruby注释(中文注音或字符)。
  • <rt>: 定义字符(中文注音或字符)的解释或发音。
  • <rp>: 在ruby注释中使用,定义不支持ruby元素的浏览器所显示的内容。
  • <wbr>: 规定在文本中的何处适合添加换行符。
  • <meter>: 定义度量衡,仅用于已知最大和最小值的度量。

yyshino大约 4 分钟FrontEndHTML
HTML5新增的元素

HTML5新增的元素

首先 html5 为了

  • 更好的实践 web 语义化,增加了header,footer,nav,aside,section 等语义 化标签,

  • 在表单方面:为了增强表单,为 input 增加了 color,email,data,range 等类型,

  • 在存储方面:提供了 sessionStorage,localStorage,和离线存储,通过这些存储方式,方便数据在客户端的存储和获取,

  • 在多媒体方面:规定了音频和视频元素 audio 和 video


yyshino小于 1 分钟HTMLHTML
对HTML语义化标签的理解

对HTML语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容,结构良好,便于阅读,比如 nav 表示导航条,类似的还有 article、header、footer 等等标签


yyshino小于 1 分钟浏览器HTML