HTML 标签讲解

HTML 语言结构

• Markup （标记、标签）用来容纳和描述内容

严格意义上，标签是指开始标签（例如 <p> 标签）或结束标签（例如 </p> 标签）；元素（例如 p 元素或者称为<p>元素）则包括开始标签（自然也包括标签中定义的属性）、结束标签以及中间的内容（Content）。

根元素

该元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

• HTML (Hypertext Markup Language 超文本标记语言)
• 标签含义：
  • html 它把其内部的内容描述为html代码，所有的html代码都必须放在html标签当中
    • html标签只包含 body 和 head 标签

元数据元素

该元素用来设定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

基本信息以及对该网页描述类的数据都要放在该标签中，其中包括style和link标签

该元素可以包含任何可配置的元数据信息。

<meta charset="UTF-8">
<meta auther="jeffrey">
<meta email="[email protected]">

• meta表示基本信息，中文含义：元

  meta属于单标签，单标签无法加载内容

• charset表示字符编码，中文含义：属性，charset属于meta的私有属性

  • 即：meta用来承载基本信息，交给浏览器，属性名=“属性值” key=“value”

该元素用来定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

该元素规定了外部资源与当前文档的关系。这个元素最常于链接样式表。

该元素的内部内容用来定义文档的样式风格，即层叠样式表。

• style.css文件的引用

<link rel="stylesheet" href="./css/style.css">

• rel全名relationshiop，中文：关联；表示引入的文件与当前文件的关系
• href全名hypertext reference，超文本协议

该元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

base 用于定义href的基础网站，默认的根链接

1. 若href没有网络协议，则跳转至根链接，否则反之

2. 如果没有base的，即默认base为当前服务器目录

主体根元素

该元素称为网页主体，所有的网页主体内容都在body当中,即显示在网页可视化窗口中展示的内容。

块级元素是纵向开辟空间，所以块级元素始终可以向下延展，css认为高度没有参考价值，因为可以随时可边，但宽度不能延展，块元素不能横向开辟空间，所以只有宽度可以被子元素参考。

​ body默认贴合窗口，body有margin值但不能发生穿透，body默认高度为0，它是所有元素的父级元素，任何块级元素的默认宽度都是父级元素的100%，但高度是根据自身内容而定，无法参照。

• 若想参照父元素的宽度，有三个方法：

  1. 必须给父级元素固定高度，若子元素参照父级元素的百分比，会造成溢出。

     ​ 假设父级元高为100，子元素为父元素的50%，也就是50，那么父级元素会增长到150，那么子元素的高到底是多少；

  2. 将父级元素为body元素宽高的100%，然后绝对定位，top和left都为0，绝对定位参照整个可视化页面，窗口有多大，父级元素就有多大；

  3. 将父级元素绝对定位，上下左右全为0，不能有固定宽高。

大纲元素

该元素表示这部分内容在文档中应当是独一无二的，不包含在任何一系列文档中重复的内容，用来体现网页中的主要信息。使用 <main> 元素值得注意的一点是，它在每个页面中只能使用一次。<main> 元素的另外一个规定是，它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

该元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

该元素用来描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。

该元素表示文档中的一个区域，我们使用该元素来进行页面的逻辑性分区。

该元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

该元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。是section切除后剩余的部分。

该元素表示最近一个章节内容或者主体元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

~

该元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。（该元素也可以被归类到文本元素的分类当中）

该元素代表一个段落的标题组。

元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

<p>Contact the author of this page:</p>
<address>
  <a href="mailto:[email protected]">[email protected]</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

文本内容

该元素是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如<article> 或 <nav>) 。

该元素表示文本的一个段落。全名paragraph

表示多个有序列表项，通常渲染为有带编号的列表。

• 全名order list

表示多个无序列表项，通常渲染为非编号型的列表。

• 全名unorder list

• 用于表示列表里的条目，即列表项。

  • li 全名list item，列表项
  • 该标签会继承ol \ ul标签的样式，但当两者都有相同样式时，子类会
    覆盖父类样式，编程时一般会直接采用ol样式

  元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在

   开始标签后的换行符也会被省略)

  代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。

  用来指明一个描述列表 (

  ) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 元素。

  是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

  元素 （或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为

  的子元素出现。通常在该元素后面会跟着

  元素， 然而，多个连续出现的

  元素都将由出现在它们后面的第一个

  元素定义。

  元素代表一段独立的内容, 经常与说明（caption）

  配合使用, 并且作为一个独立的引用单元。

  元素 是与其相关联的图片的说明/标题，用?于描述其父节点

  元素里的其他数据。

  ---

  元素表示段落级元素之间的主题转换。

  • break line断行

  语义化内联文本

  该元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

  例如：<a href="https://www.baidu.com" target="_blank">百度</a>

  • a的全名：alink

  • href全名hypertext reference，超文本标记语言

  • target 中文含义：目标，blank表示创建一个空白页

  • 网址
    www是默认二级域名，baidu是主域名，.com是后缀名

  该元素用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。

  该元素，在过去被用来给文本加粗，但是在 H5 当中，该元素已经被移除。

  • h5用strong标签来代替b标签

  该元素使字符按给定的方向排列。

  • dir在不同标签，有不同的作用，
  • dir=“rtl” 向左颠倒right to left ，对当前文本的方向进行颠倒，
  • 向右颠倒ltr

  <br>该元素在文本中生成一个换行（回车）符号。

  该元素表示某种事物的出处引用。它必须包含引用作品的符合简写格式的标题或者URL，它可能是一个根据添加引用元数据的约定的简写形式。

  该元素呈现一段计算机代码.。默认情况下，它以浏览器的默认等宽字体显示，中文无效

  ====斜体

  定义元素 (<dfn>) 表示术语的一个定义。

  ====斜体

  该元素标记出需要用户着重阅读的内容， 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

  元素 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

  ====标准的等宽字体

  键盘输入元素() 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。

  ====底纹

  标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词。

  ====引号

  引用标签 ()表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用

  替代.

  ====删除线

  元素 使用删除线来渲染文本。使用 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 ；为此，提倡使用 和 元素。不推荐使用，可以采用del标签。

  元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体。

  元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

  元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。 与

  元素很相似，但

  是一个 块元素 而 则是 行内元素 .

  • 下划线属性

  • 删除线text-decoration: line-through;

  • 斜体font-style:italic;

    双引号无法模仿，addr

  元素 ()表示文本十分重要，一般用粗体显示。

  ==_==上标

  元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

  ==^==下标

  元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。

  用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。

  ====下划线

  元素使文本在其内容的基线下的一行呈现下划线。将文本标记为中文文本中的专有名称(一个正确的中文标记), 或将文本标记为拼写错误。推荐使用 ins

  标签表示变量的名称，或者由用户提供的值。

  图像与多媒体

  HTML 支持各种多媒体资源，例如图像，音频和视频。

  代表文档中的一个图像。

  例如：<img src="./image/m1.jpg" alt="图片">

  • image 图片
  • source “源”文件 mate基本信息，中文含义：元
  • alt是在加载图片失败后展示给用户的内容

  元素用于在文档中表示音频内容。 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持元素的浏览器，元素也可以作为浏览器不识别的内容加入到文档中。

  ====多媒体

  用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

  编辑标识

  标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。标签的作用恰恰于此相反：表示文档中添加的内容。

  元素定义已经被插入文档中的文本。

  table表格内容

  元素表示表格数据 — 即通过二维数据表表示的信息。

  • border表示表格的边框
  • colspan跨列、rowspan跨行、capation表标题、legend当前域的标题

  元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 `` 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

  表格列组（Column Group ） 标签用来定义表中的一组列表。

  ====列

  元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于元素内。

  ====行

  ====单元格

  ====列标题

  逻辑结构，会影响样式

  • thade表头
  • tbody表格主体内容
  • tfoot表尾

  表单内容

  元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。

  元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

  -login登录 -sign注册 -sign-or-login注册或登录

  元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

  • 常用类型有：text、name输入用户名、password密文、email邮箱、button按钮、submit提交按钮
  • checkbox复选框、radio单选框、range素质范围、date日期、search搜索域

  元素表示一个控件，提供一个选项菜单：

  **元素 ** 用于定义在, 或 元素中包含的项。 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。

  标签表示计算或用户操作的结果。

  ====划分逻辑

  ====元素（标签）表示用户界面中某个元素的说明。

  表示标记 for属性填写的是当前标记是的主键id，当前标记是为哪个主键提供的。

  ====当前域的标题

  元素（也称为HTML的域说明元素（or HTML Legend Field Element））代表一个用于表示它的父元素的内容的标题。

  元素用来显示已知范围的标量值或者分数值。

  ==option==表示就算或用户操作的结果

  用于定义在select，optgroup或datalist标签中包含的项，它可以在天厨窗口或html文档中的其他项目列表中表示菜单项

  元素 会创建包含在一个 `` 元素中的一组选项

  元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

  ====文本域

  元素表示一个多行纯文本编辑控件。

  table表单

  • tabel内联样式border会使整个表格都添加边框

    但table内部样式border只会影响表单外部边框 table{}

  • 内联样式只要申明了border，就有border值

  • table-layout: atuo|fixed	布局：		有继承性
    atuo先检测内联content宽度，再去查看css有没有宽
    fixed跳过内联检测步骤
    border-collapse: collapse;	collapse与单元格间距不能并存
    
    border-spacing:2px; 	 	默认值2px 	单元格之间的间距
    cellspacing=""				单元格间距，最好采用spacing
    
    empty-cells:hide;			隐藏空单元格
    

  table分列

  <colgroup>
  	<col>
  	<col>
  </colgroup>
  

  -td不会继承table的样式

  ul{
        
        
    list-style-image:url("./1.jpg"); 图片项目符号
  }
  

  th列名，tr行，td列，cellspacing=“0” cellpadding=“0”

  <table>
      <caption>列</caption>
      <thead>
      	<tr><th>表头</th></tr>
      </thead>
      <tbody><tr><td>主体</td></tr></tbody>
      <tfoot><tr><td>脚注</td></tr></tfoot>
  </table>