HTML基本标签概述与使用说明

HTML是一个物理学家发明的 ，所以它不同于一般的编程语言。属于一种标记语言。如果了解过XML的人应该知道它属于XML的子集。

一HTML文本控制标签

1.标题标签<h>

·   标题标签意味着换行，并且总共有h1，h2，h3，h4，h5，h6对各级元素进行标记，h后面所跟数字越小标题的字号越小。

举例:<h>...</h>

2.段落标签<p>

段落都会单独显示，段落之间有间隔距离。

p元素段落会忽略你文本中的回车与空格，如真需输入回车用<br>，空格则用&npsb;代替。

文本在一个段落中会根据浏览器窗口的大小自动换行

举例<p>....</p>

3.换行标签<br>

让某些需要强制换行的文本片段换行显示

一般不使用br元素，因为CSS同样能够控制样式，所以使用br元素一般是最后的选择

举例：<br>

4.水平线标签

能够在HTML页面中显示出一条水平线

举例<hr>

5.细则标签<small>

一般用于批注一类，例如注意事项，法律限制，版权，署名之类的地方

举例<small>..</small>

6.重要文本标签<strong>

表示内容的重要性，使相关内容能够以粗体显示

举例:<strong>...</strong>

7.标记强调内容的文本<em>

 使文本以斜体显示。表示内容的强调。与<i>略有区别。

举例<em>....</em>

8.标记黄背景以突出文本<mark>

<mark>在一般浏览器中以使文本增加黄色背景为主。

举例:<mark>...</mark>

9.标记引用或参考<cite>

一般表示对某内容源的引用参考，比如图片，规范，报纸等名称。

一般浏览器以斜体显示

举例:<cite>...</cite>

10.引述标记<blockquote>,<q>

一般用于表示单独存在的引述，两者区别，<q>引述的内容较短，而且自动带引号。

默认都是文本进行缩进。

两者可以互相嵌套

两者都有cite属性用来表示文字的来源URL，但这个URL不在浏览器显示

举例:<blockquote cite="...">....</blockquote>

<q cite="...">...</q>

11.格式化文本标记<pre>

会保留其中的一切元素，与p不同，pre可以保留文本的空格，回车，一般用于网页中表示一些不得不这样的文字，比如程序的代码，相关文本。

pre默认换行，字体等宽度

举例:<pre>...</pre>

12.标记代码<code>

用于表示pre元素外的文本，与pre嵌套使用，同样是以等宽字体显示内容。

举例:<code>.....</code>

13.时间标记<time>

用于表示时间日期或时间段。

time包含一个文本内容和一个可选的datetime属性，需要遵循美式的机器可读格式。（没办法谁让这不是中国人发明的）

datetime不会单独产生效果，但可以与因特网时间同步

datetime属性格式yyyy-mm-ddThh：mm：ss，比如2018-3-14T08：24：30，如果表示时间段则为nh nm ns，n分别对应相应的小时，分钟和秒。

举例：<time datetime="....">....</time>

14.上标与下标<sup>,<sub>

其实作用不大因为有个插件叫mathjax...

用sup表示上标，sub表示下标

在某些浏览器中会造成行排版的混乱。

举例：_....

^...

15.行内内容分组标签<span>

用于对行内的内容进行分组，没有实际意义，主要可以让CSS进行控制它们的属性。

作用主要是使行内进行变换。

举例<span>...</span>

二.HTML容器标签

1.div标签<div>

div用于对块级内容的分组

与span类似没有具体的意义。

div元素可以进行嵌套。遵循浮动块的原则，具体要见CSS

举例：<div>...</div>

三.HTML图像标签

1 .img标签<img>

首先要明确图片的常用图像格式

Web上一般使用GIF,PNG,JPEG,SVG。

img标签用于显示图片，src属性值控制图片来源的路径。alt属性控制图像说明的文字。

可以使用width和height属性规定图像的大小与尺寸。

2 .给图标注。<figcaption><figure>

用于表示一张图是由页面上的文本引述出来。可以使用该元素，figure可以包含很多内容，但是figcaption，

只允许有一个，figure的标题是figcaption,后者只能出现在前者的开始或者末尾处，且后者只能与其它内容包含在前者中不能单独出现在别的位置。

<figure>

<img src="XXX.jpg" width="600" height="180" alt="sorry，cannot show！">

<figcaption>图XXXX XXXXXXXXXXXXXX</figcaption>

</figure>

四.HTML中的特殊字符表示

特殊字符	实体引用	特殊字符	实体引用
双引号(")	"	左箭头(←)	←
&号	&	上箭头↑	↑
空格	 	右箭头→	→
小于号(<)	&lt;	下箭头↓	&darr；
大于号(>)	&gt;	左右箭头	&harr;
小于等于(≤)	&le;	左下箭头	&crarr；
大于等于(≥）	&ge;	交集	&cap;
版本号	&copy;	并集	&cup;
商标符号(TM)	&trade;
注册商标	&reg;
分数(1/4)	&frac14;
分数(1/2)	&frac12;

以上只是概述了常用的标签，具体相关需要查询HTML手册或者w3c之类的权威网站。