HTTP 报文

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82053564

一、标题标签（h1 – h6）

标题标签拥有六个不同的级别，<h1> 是最高级的，而 <h6> 则是最低的级别。 一个标题元素能简要描述该节的主题。

标签省略	不允许，开始标签和结束标签都不能省略

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

二、段落标签（p)

HTML <p>标签（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进.

标签省略	起始标签是必需的， 结束标签有时可以省略但不提倡

<p>
这是第一个段落。这是第一个段落。
    这是第一个段落。这是第一个段落。
</p>

<p>
这是第二个段落。这是第二个段落。
    这是第二个段落。这是第二个段落。
</p>

注意：
<p>标签中文本的格式是不会被保留下来的。
保留格式：通过<pre>标签
<p>标签中文本首尾的空格也是不会被解析的
首行缩进：通过&nbsp实体字符

三、格式化标签（pre）

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

标签省略	不允许，开始标签和结束标签都不能省略

<pre>
body {
  color:red;
}
</pre>

四、 分隔符标签（hr）

HTML <hr> 元素表示段落级元素之间的主题转换

标签省略 必须有开始标签, 不能有结束标签 可以使用<hr/>

<p>This is the first paragraph of text. This is the first paragraph of text.
  This is the first paragraph of text. This is the first paragraph of text.</p>

<hr/>

<p>This is second paragraph of text. This is second paragraph of text.
  This is second paragraph of text. This is second paragraph of text.</p>

五、 换行标签（br）

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

标签省略	必须有开始标签, 不该有结束标签 可以使用

Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA

六、块级容器div

HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组

标签省略	不允许，开始标签和结束标签都不能省略

<div>
  <p>这里可以是任何内容，比如 &lt;p&gt;, &lt;table&gt;，一切由你作主。</p>
</div>

七、 行内容器span

HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性）。
<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素 .

1、 块元素

格式：
默认情况下，块级元素会新起一行。
内容模型：
一般块级元素可以包含行内元素和其他块级元素

2、 行内元素

格式：
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
内容：
一般情况下，行内元素只能包含数据和其他行内元素。

八、 内容修饰标签

1、小号（small）
HTML 中的<small>元素將使文本的字体变小一号

标签省略	不允许，开始标签和结束标签都不能省略

<p>This <small>This whole sentence is in small letters.</small></p>

2、斜体 （i & em）
HTML标签 <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示

标签省略	不允许，开始标签和结束标签都不能省略

<p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is oftenmentioned in music, art, and literature</p>

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

标签省略	不允许，开始标签和结束标签都不能省略

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

3、 加粗（b & strong）
HTML标签（<b>）用于吸引读者的注意到该元素的内容上。大多数浏览器将标签文字显示为粗体。

标签省略	不允许，开始标签和结束标签都不能省略

<p>
  This article describes several <b>text-level</b> elements. 
  It explains their usage in an <b>HTML</b> document.   
</p>

4、上下标（sub & sup）
HTML <sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小
HTML <sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小

标签省略	不允许，开始标签和结束标签都不能省略

<p>The chemical formula of water: H<sub>2</sub>O</p>
<p>This text is <sup>superscripted</sup></p>

5、下划线（ins）
HTML <ins> 元素定义已经被插入文档中的文本

标签省略	不允许，开始标签和结束标签都不能省略

<ins>这一段文本是新插入至文档的。</ins>

6、删除线（del）
HTML的<del>标签表示一些被从文档中删除的文字内容。

标签省略	不允许，开始标签和结束标签都不能省略

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del ><p >This paragraph has been deleted.</p ></del >

九、列表标签

1、无序列表（ul & li）
HTML <ul> 标签代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。

标签省略	不允许，开始标签和结束标签都不能省略

HTML <li> 元素 (或者 HTML 列表条目元素) 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)
标签省略 起始标签是必需的，结束标签有时可以省略但不提倡

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

<ul>
  <li>first item</li>
  <li>second item     
    <ul>
      <li>second -first subitem</li>
      <li>second - second subitem</li>
      <li>second - third subitem</li>
    </ul>
  </li>         
  <li>third item</li>
</ul>

注意！！标签的 type属性：用于设置列表的着重号样式

circle, 空心圆
disc,  圆点
square, 正方形

2、有序列表（ol & li）
参照无序列表，将ul换为ol。
注意！！标签的 type属性：用于设置列表的着重号样式

1,   圆点
a,   正方形
A,  空心圆
I,   小写罗马数字i
I,  大写罗马数字I

3、 定义列表（dl & dt & dd）
HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表).

标签省略	不允许，开始标签和结束标签都不能省略

1) 单条术语，单挑描述

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  </dd>
 </dl>

2)单条术语，多条描述

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>
</dl>

3) 多条术语，单条描述

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>

4)多条术语，多条描述

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl>

十、图像标签（img）

HTML Image 元素（ <img> ）代表文档中的一个图像。

标签省略	必须有一个开始标签，不允许有结束标签.

<img src="yys.jpg" alt="yys">

src：图像的 URL，这个属性对 <img> 元素来说是必需的。（分清绝对路径&相对链接）
alt：这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的.
width：图像的宽度，在 HTML5 中单位是 CSS 像素， 在 HTML 4 中可以是像素也可以是百分比.
height：图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比（百分比参照于包含块）.
注意:
img图片有一个很大的特性：高宽自适应！

十一、链接标签（a）

HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

标签省略	不允许，开始标签和结束标签都不能省略

<a href="http://www.mozilla.com/">External Link</a>

href：这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段也可以是由一个hash符号（＃）开始的文本，它指定一个内部目标在当前文档中的位置。

注意：可以使用 href="#top" 或者 href="#" 链接返回到页面顶部

target
该属性指定在何处显示链接的资源。以下关键字具有特殊的意义:
_self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
title:该属性定义了悬浮在a标签上时提示文本的内容

1、锚的定义与使用：

同一个页面：

 <a href=”#锚名”>，点击这个a标签就会跳转到一个id名为锚名的元素处。
 <a href=”#锚名”> 点击这个a标签就会跳转到 <a href=”…” name=”锚名”>处

不同页面：

锚点的定义没有变 但使用锚点的规则变了：<a href=”页面位置#锚名”>

2、邮件发送

    <a href="mailto:[email protected]">Send email to nowhere</a>

3、文件下载（同源限制）

    <a href="文件位置">Send email to nowhere</a>

十二、H5语义化标签

在HTML 5出来之前，我们用div来表示页面头部，章节，页脚等。但是这些div都没有实际意义。各大浏览器厂商分析了上百万的页面，从中发现了DIV名称的通用id名称大量重复。例如，很多开发人员喜欢使用div id=”footer”来标记页脚内容，所以Html5元素引入了语义化标签（一组新的片段类元素）

https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm

https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm
<header></header>
    header 元素代表 网页 或 section 的页眉。
            <section></section>
section元素代表文档中的 节 或 段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。
<footer></footer>
footer元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

语义化的好处：
HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签。这种语义化的特性提升了网页的质量和语义。对搜索引擎更加的友好。 他们这些标签功能就是代替

功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；

十三、 H5音视频标签

1、视频（video）
HTML <video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。

标签省略	不允许，开始标签和结束标签都不能省略

src：要嵌到页面的视频的URL。
controls：显示控件
width：视频显示区域的宽度，单位是CSS像素。
height：视频展示区域的高度，单位是CSS像素。
autoplay：布尔属性；指定后，视频会马上自动开始播放
loop：布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方
muted：
布尔属性，设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。
poster：一个海报帧的URL，用于在用户播放之前展示。

2、音频（audio）
HTML <audio> 元素用于在文档中表示音频内容

标签省略	不允许，开始标签和结束标签都不能省略

src：要嵌到页面的视频的URL。
controls：显示控件
autoplay：布尔属性；指定后，音频会马上自动开始播放
loop：布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方
muted：
布尔属性，设置后，音频会初始化为静音。默认值是false