700字范文 > HTML基础之常用标签第一篇：基础标签

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

时间：2022-01-31 04:11:49

相关推荐

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

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

全局属性

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

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

字符实体

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

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

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

<p style="background-color:darkmagenta">标签定义段落</p><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>  在江湖上一个人的名字或许会错，但绰号一定不会错，女子散发出的一缕清香，竟然放霉味都消去几分，处子如兰，<br />  麝香于一体，凝而不散的女子幽香。不似花香浓艳扑鼻，但是绝对是沁人心脾，红衣飘飘也是令人心生歹念。</p>

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

两个标签规定粗体文本。

<strong>我说粗体<strong>标签</strong> 作为分割 <b>我说粗体<b>标签</b>

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

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

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

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

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

<i>标签显示斜体文本效果.

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

<em>我说粗体<em>标签</em> 作为分割 <i>我说粗体<i>标签</i>

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

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

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

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

这是一个<del ><delete>标签</del>的效果。      这是一个<ins><insert>标签</ins>的效果

`address`

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

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

`div`

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

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

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

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

`hr`和`br`

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

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

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

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

`img`

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

属性以及意义

<img src="/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度呀" />

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

<img src="/img/Pf.png" alt="百度呀" />

`a(anchor 锚点)`

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

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

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

<a href="">百度</a><a href="#">链接当前页面</a><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`

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

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

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

<sub>标签可定义下标文本。

<sup>标签可定义上标文本。

H<sub>2</sub>O    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>块元素可以嵌套任何元素，但是要注意一点<p>标签中一般不会嵌套<div>,已经会影响p标签的效果。

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。