HTML基础之常用标签第一篇：基础标签

上一篇主要聊了一些head标签的内容，而本篇就聊body标签下的标签，而这一部分是页面呈现最重要的部分，毕竟这个标签下的内容是网页最直观的体现。现在聊一些其基本的标签。

全局属性

其实前面说的标签和属性，有些属性是某些标签特有的，特有的标签但具体聊到那个标签的时候再进行补充，还有一些属性，是全局属性，也就是其几乎所有的表情都可以拥有。

属性	意义	是否`HTML5`新添加
`accesskey`	规定激活元素的快捷键。	否
`class`	规定元素的一个或多个类名（引用样式表中的类）。	否
`dir`	规定元素中内容的文本方向，例如：`<p dir="rtl">ABCD!</p>`	否
`id`	规定元素的唯一 id。	否
`lang`	规定元素内容的语言。	否
`style`	规定元素的行内 CSS 样式。	否
`tabindex`	规定元素的 tab 键次序。	否
`title`	规定有关元素的额外信息。最常见的就是鼠标放上去会弹出一个title的值	否
`contenteditable`	规定元素内容是否可编辑。	是
`contextmenu`	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。(目前很多浏览器不支持)	是
`data-*`	用于存储页面或应用程序的私有定制数据。例如`<ul> <li data-animal-type="鸟类">喜鹊</li> </ul>`	是
`draggable`	规定元素是否可拖动。只是规定了这个可以被移动，具体移动还是需要js进行编辑的	是
`dropzone`	规定在拖动被拖动数据时是否进行复制、移动或链接。`<element dropzone="copy\|move\|link">` 目前主流浏览器无法使用	是
`hidden`	规定元素仍未或不再相关。例如：`<p hidden="hidden">这是一段隐藏的段落。</p>`页面不在显示	是
`spellcheck`	规定是否对元素进行拼写和语法检查。	是
`translate`	规定是否可以翻译目前主流浏览器无法使用	是

所以下面标签的时候，上面的属性几乎都可以用。

字符实体

有些特殊符号，在html 中不会显示，比如空客，>等。当然这个不需要什么转义字符而是有些特殊的字符串就可以表示是这个字符

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

HTML语言对大小写不是很敏感，但是字符实体对大小写很敏感的。最常用的三个记住>,<,空格。这三个记住很常用。

基本标签

H(head标签)

H标签一般有六个

<h1 style="background-color:red">这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

看效果

可以看出有其中H1的字体最大，H6字体最小,通过效果也可看出H标签的一些特征：字体加粗，以及独占一行

其拥有属性align

<h1 align="left">这是标题 1</h1>
<h2 align="center">这是标题 2</h2>
<h3 align="right">这是标题 3</h3>
<h4 align="justify">这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

但是一般不建议使用align,用样式代替。

p (Paragragh 段落标签)

标签定义段落，其具体体现如下？

<p style="background-color:darkmagenta">标签定义段落</p>
<!-- style 这个标签会在CSS中讲解，目前是为了更直观的看标签的一些特征而已-->
<!--div这个标签下面会说，目前当其是一个画了一个小的范围，文字在里面显示-->
<div style="width:200px;height:200px;border:3px solid #000"><p>在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。红衣香妃颜紫倾，竟然是这个女人，仇囚盘坐动都没有动，只是握紧剑的手，放松了下来，然后望了一下窗外，惊讶的表情变得冷漠起来：“不知道颜姑娘来此有何贵干？”</p>
</div>

这样看似乎也没有什么神奇的？但是如果包文本变成连着的英文字母看一下

<p style="background-color:darkmagenta">标签定义段落</p>
<!-- style 这个标签会在CSS中讲解，目前是为了更直观的看标签的一些特征而已-->
<div style="width:200px;height:200px;border:3px solid #000"><p>QWESDFSDFSFSFSFSFSFSDFSDFSDFSSFSFSFSFSFSHJCHJKVZVKZCVBZMNXBVMZBXBKJHSDFJKSKFASFASFSAFASFSAFSFSXCVXVXVXVXVXVXVXVXVXVXVXVXVXVXVCXVXV</p><p>In the Jianghu, a person's name may be wrong, but his nickname must not be wrong. A wisp of fragrance emitted by a woman even dissipates the musty smell. Virgins are like orchids, musk in one, and the faint fragrance of a woman is condensed but not dispersed. It's not like the smell of flowers, but it's definitely refreshing. Floating in red is also a bad idea.</p>
</div>

这个地方可以如果是英语的话，有空格它会按照段落形式呈现，但是为什么没有空格却突破了div的限制呢？

因为对于英语，标签对其一个单词的判断看其是否有空格，但是这个没有空格会被认为是一个单词，而P标签在判断所在标签下的长度与单词长度的时候，优先考虑单词的长度，多以突破； div显示的宽度。这个也解释了为什么长度为什么也会突破了DIV格式的限制。

现在又有了一个神奇的发现

<div style="width:200px;height:200px;border:3px solid #000"><p><!-- 如果我们使用多个换行和空格连续一起呢？ -->QWESDFSDFSFSFSFSFSFSDFSDFSDFSSFSFSFSFSFSHJCHJKVZVKZCVBZMNXBVMZBXBKJHSDFJKSKFASFASFSAFASFSAFSFSXCVXVXVXVXVXVXVXVXVXVXVXVXVXVXVCXVXV</p><p>在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。</p>
</div>

可见无论空格多少，以及换行线多少在标签p中都算是一个单词的分割标志而已。

也可以发现在p中的空格竟然没有显示，这个是其实这个需要字符实体。如下：

<p>&nbsp;&nbsp;在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，<br />  麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。</p>

`strong`和`b`(Bold 加粗)

两个标签规定粗体文本。

<strong>我说粗体&lt;strong&gt;标签</strong>
作为分割
<b>我说粗体&lt;b&gt;标签</b>

本质上没有区别，当然也可以看出两者都无法独占一行。（为什么一直强调不能独占一行，因为这个又涉及到一个标签的另一个分类，后面补充）

但是建议使用这个逻辑标签，而不建议使用是物理标签。

因为使用逻辑标签，更容易理解这个标签的涵义，以及其不但会让字体变粗加黑，会让浏览器明白这个标签包裹文本是需要注意的。当然这不是唯一，后面还会有相同效果的逻辑标签和物理标签

整体来说: 逻辑标签可读性强维护性强浏览器会更容易识别

`em(emphasize 强调)`和`i( italic 斜体字)`

标签显示斜体文本效果.

当然和标签的效果一样，不过是逻辑标签也是一种。标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<em>我说粗体&lt;em&gt;标签</em>
作为分割
<i>我说粗体&lt;i&gt;标签</i>

可见效果一样，同样无法独占一行。

`del (delete)`和`ins(insert)`

<del>标签：定义文档中已被删除的文本。

属性	值	描述
cite	URL	指向另外一个文档的 URL，此文档可解释文本被删除的原因。
datetime	YYYYMMDD	定义文本被删除的日期和时间。

<ins>标签：带有已删除部分和新插入部分的文本其一般和<del>标签一起用，但是为了方便演示我将其分开。

这是一个<del >&lt;delete&gt;标签</del>的效果。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
这是一个<ins>&lt;insert&gt;标签</ins>的效果

`address`

<address>:一般网页上显示地址的时候使用这个标签。

<address>2b路250号幸福小区2-213</address>

`div`

可定义文档中的分区或节（division/section）。

其实在前面聊标签的时候也用过这个标签。

<div style="width:200px;height:200px;border:3px solid #000">qweqeqeqeqeqeqeqweqewqeqeqeqeqeqeqeqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div><div style="width:200px;height:200px;border:3px solid #000">在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。
</div>

其对文字的识别和标签异曲同工之妙，所以不在具体演示更多。可以看出其也是独占一行的存在。

`hr`和`br`

<hr>:标签在 HTML 页面中创建一条水平线

 : 可插入一个简单的换行符。

 <p>
&nbsp;&nbsp;在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。
<br />
&nbsp;&nbsp;红衣香妃颜紫倾，竟然是这个女人，仇囚盘坐动都没有动，只是握紧剑的手，放松了下来，然后望了一下窗外，惊讶的表情变得冷漠起来：“不知道颜姑娘来此有何贵干？”
</p><p>
&nbsp;&nbsp;在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。
<hr />
&nbsp;&nbsp;红衣香妃颜紫倾，竟然是这个女人，仇囚盘坐动都没有动，只是握紧剑的手，放松了下来，然后望了一下窗外，惊讶的表情变得冷漠起来：“不知道颜姑娘来此有何贵干？”
</p>

不过两种标签其实在项目中都不常用，而是在测试的时候用而已。比如换行一般更习惯使用的是字符实体"

`img`

<img>:向网页中嵌入一幅图像.<img> 标签有两个必需的属性：src 属性和 alt属性。

属性以及意义

属性	值	描述
`src`	URL	规定图像的替代文本。
`alt`	text	规定图像的替代文本。
`align`	top bottom middle left right	不推荐使用。规定如何根据周围的文本来排列图像。
`border`	pixels	不推荐使用。定义图像周围的边框。
`height`	pixels%	定义图像的高度。
`hspace`	pixels	不推荐使用。定义图像左侧和右侧的空白。
`ismap`	URL	将图像定义为服务器端图像映射。
`longdesc`	URL	指向包含长的图像描述文档的 URL。
`usemap`	URL	将图像定义为客户器端图像映射。
`vspace`	pixels	不推荐使用。定义图像顶部和底部的空白。
`width`	pixels%	设置图像的宽度。

<!-- src 可以是网络资源以及 本地的资源-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt="百度呀" />

如果把src的地址修改一个错误的

<img src="https://www.baidu.com/img/Pf.png"  alt="百度呀" />

`a(anchor 锚点)`

<a> 标签定义超链接，用于从一张页面链接到另一张页面。其最重要的属性是 href属性，它指示链接的目标。

其用也有自己的一些属性:

属性	值	描述
`charset`	char_encoding	`HTML5` 中不支持。规定被链接文档的字符集。
`coords`	coordinates	`HTML5`中不支持。规定链接的坐标。
`download`	filename	`HTML5`新增的一个属性，规定被下载的超链接目标。
`href`	URL	规定链接指向的页面的 URL。
`hreflang`	language_code	规定被链接文档的语言。
`media`	media_query	规定被链接文档是为何种媒介/设备优化的。
`name`	section_name	`HTML5`中不支持。规定锚的名称。
`rel`	text	规定当前文档与被链接文档之间的关系。
`rev`	text	`HTML5`中不支持。规定被链接文档与当前文档之间的关系。
`shape`	default rect circle poly	`HTML5`中不支持。规定链接的形状。
`target`	_blank :打开一个新的窗口打开超级链接 _parent：在父类窗口打开超级链接，如果本身就在父类窗口就等同于_self _self: 当前窗口打开超级链接 _top:将会清除所有被包含的框架并将文档载入整个浏览器窗口 framename:这个是配合frameset这个框架而实现，聊这个标签的时候就很容易明白	规定在何处打开链接文档。
`type`	MIME type	规定被链接文档的的 MIME 类型。

因为特性其作用又可以出了超级链家还可以做其它的事情：

<!--第一种：  超级链接 --><a href="www.baidu.com">百度</a>
<a href="#">链接当前页面</a>
<!--href="#" 不等于刷新页面。不过就是会将网页置顶----即在有生成滚动条的情况下，你滚动了滚动条使之不在最顶端了，然后你点了个#的链接，滚动条会跑到最顶端．网址也会多出个#但是，网页不刷新--><!--第二种  这个在手机端常用的一种方式：那就是打电话0 -->
<a href="tel:电话号">联系商家</a><!-- 第三种  发邮件 这个和打电话有些类似，就是会调用邮箱的客户端 -->
<a href="mailto:邮箱地址">发邮件给商家</a><!--第四种 锚点定位，这个在网页很长的时候使用，方便我们点击--><a name="top" href="#centre">到中间</a>
1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a  href="#top">返回顶部</a>
<a  name="centre" href="#bottom">到底部</a>
2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a  name="bottom" href="#centre">返回顶部</a>
<a href="#">使用#也可以到顶部</a>
3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><!--第五种： 协议限定符  -->
<a href="javascript:;">打开新窗口</a>
<a href="javascript:void();">打开新窗口</a>
<a href="javascript:alert("打开一个弹窗"></a>

也可以看出a标签是无法独占一行的。具体效果可以通过复制到<body>标签中体验。

`span`

 元素中的文本与其他文本不会任何视觉上的差异,也就是说和网页页面单独的写文本呈现的效果，没有区别。但是为什么又要出现这个标签呢？因为某些文字中的特数字，我们可以修改其呈现格式，如果不通过样式修改看不出变化，但是这个标签可以给样式的范围划出来。

<p>
&nbsp;&nbsp;在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，<span style="background-color: #d10000">处子如兰</span>，麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。
<hr />
&nbsp;&nbsp;红衣香妃颜紫倾，竟然是这个女人，仇囚盘坐动都没有动，只是握紧剑的手，放松了下来，然后望了一下窗外，惊讶的表情变得冷漠起来：“不知道颜姑娘来此有何贵干？”
</p>

`sub（subscripted）`和`sup（superscripted）`

标签可定义下标文本。

标签可定义上标文本。

H<sub>2</sub>O  &nbsp;&nbsp;&nbsp;
10<sup>2</sup>=100;

标签的分类

其实标签又有一个新的分类，那就是内联元素（inline element 又称行间元素或行内元素），块级元素(block element)，内联块级元素(inline-block element)

内联元素：其不独占一行，无法定义宽高。例如：select textarea strong em del sub sup ins a br b del ins u
块级元素：独占一行，可以定义宽高,宽度没有设置时，默认为100% 。例如p div address center h1-h6 hr pre ul ol dl table form marquee blockquote
内联块级元素：不独占一行，可以定义宽高。例如：img input

为什么要这样区分的呢？因为这个涉及到一些是否可套用标签的规则

内联元素可以嵌套内联元素，但是注意<a> 标签中无法嵌套<a>
块元素可以嵌套任何元素，但是要注意一点 标签中一般不会嵌套<div>,已经会影响p标签的效果。

现在只是聊了一些常用的HMTL中的基础标签，如果全部列出来，这个篇幅就太长了，所以就分成了几篇。