HTML语法

1、基础概念

（1）行级标签 vs 块级标签 vs 短语标签

行级标签，又称内联标签

行级标签不会单独占据一行，设置宽高无效，行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

常见行级标签：span、strong、em、b、i、input、a、img、textarea

块级标签

单独占据一行，可以设置宽高，块元素内部可以容纳其他块元素或行元素。

常见块级标签：p、div、ul、ol、dl、li、dd、dt、h1-h6、form、hr、br

短语标签

<code> 标签是一个短语标签，用来定义计算机代码文本。

所有短语标签：

<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

参考：

https://www.cnblogs.com/dotnet261010/p/9526726.html

https://www.runoob.com/tags/tag-code.html

（2）符号实体=转义字符=实体引用

有些符号不方便直接使用，所以需要使用转义来是实现；符号实体相当于人的外号。
表示方式：&xxx;
常见的符号实体：

>   ----- 大于号 “>”
&lt;   ----- 小于号“<”
&nbsp; ----- 空格“ ”
&copy; ----- 版权符号“©”
&reg;  ----- 注册商标的符号“®”
&amp;  ----- “&”符号
&apos; ----- “'”单引号
&quot; ----- “"”双引号

参考：
https://www.cnblogs.com/atubaibai/archive/2013/03/21/2973983.html

更多符号实体：
https://www.runoob.com/tags/html-symbols.html

2、markdown嵌套HTML时常用标签

（1）<pre>标签

定义预格式化的文本，常用来显示代码。
显示已格式化文本，保留空格和换行符，文本也会呈现为等宽字体。

特点：

(1) pre元素是[块级]元素，但是[只能包含文本或行内元素]。也就是说，任何块级元素都不能位于pre元素中。
  	eg：<h1>，<p>，<form>，<br>，<div>等都不行
  
(2) 如果希望使用<pre>标签来定义计算机源代码，比如HTML源代码，请使用**符号实体**来表示特殊字符。  
	eg： "&lt;" 代表 "<"，"&gt;" 代表 ">"
    
(3) 一般将<pre>标签与<code>标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。

参考：
https://www.runoob.com/tags/tag-pre.html

（2）<code>标签

用于指定代码范例

代码：

<code>一段电脑代码 print("Hello World")</code>    

效果如下:
一段电脑代码 print("Hello World")

参考：
https://www.runoob.com/tags/tag-code.html

（3）<blockcode?blockquote>标签

blockcode：表示程序的代码块。【错了吧？查不到这个标签】

blockquote：

<blockquote> 标签定义块引用/长的引用
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

参考：
https://www.cnblogs.com/buwuliao/p/9578918.html

https://www.w3school.com.cn/tags/tag_blockquote.asp

（4）<details>和<summary>标签

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。
<summary> 标签为<details>元素的第一个子元素，定义可见标题。当用户点击标题时会显示出详细信息。

参考：
https://www.runoob.com/tags/tag-details.html

https://www.runoob.com/tags/tag-summary.html