html常见标签
1、body标签
网页身体标签,所有网页内容都在里面,存放各种标签
2、div盒子标签
一般划分一个个区域,构建骨架思路会用到。用于存放:文字、图片、内容等
3、p文本段落标签
为文本段落标签,可存放大段落文字
4、h1~h6 标题标签
h1到h6级别逐渐减小
书写规范,一个页面只允许出现一个h1(一级标题标签),若重复出现网页会分不清主次内容,就像一篇作文只能有一个作文题目一样。
5、b标签和strong标签(文字加粗标签)
都是用于加粗文字的。二者区别是:strong标签是为了突出重点
6、span文字包裹标签
包裹文字的标签。
p标签和span标签的区别是:p标签会自动换行,而span标签不会自动换行。一般短的语句可以用span标签包裹,长点的用p标签包裹。
7、br换行标签和hr分隔符标签
br标签和hr标签都是但标签
br标签是换行标签
hr标签是分隔符标签
8、i标签和em标签(文字斜体标签)
二者都是斜体标签,使文字呈现倾斜效果
二者区别:em标签更容易被浏览器识别到
9、del删除标签
一般用于价格删除线
10、center居中标签
使文本居中
11、sup上标和sub下标
标签的内容将会在当前字符高度的一半为基准线的下/上方,字体大小会小一点。
12、pre预格式化标签
被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。
上述标签使用方法及代码展示:
<body>
<!-- 这是身体标签 -->
<div class="div1">
<!--这是一个盒子标签-->
<p>我是段落文本p标签</p>
<h1>我是一级标题标签</h1>
<h2>我是二级标题标签</h2>
<h3>我是三级标题标签</h3>
<h4>我是四级标题标签</h4>
<h5>我是五级标题标签</h5>
<h6>我是六级标题标签</h6>
</div>
<hr>
<div class="div2">
<!--这也是一个盒子标签-->
<!-- 区别是p会自动换行,而span不会自动换行,共用一行 -->
<p>你好</p>
<p>我爱前端</p>
<p>好好学习</p>
<hr>
<!--分隔符-->
<span>你好</span>
<span>我爱前端</span>
<span>好好学习</span>
<br>
<span>我被br强制换行了</span>
</div>
<hr>
<div class="div3">
<!--这还是一个盒子标签-->
<p>我是正常的p</p>
<p><i>我是被斜体i定义后的p</i></p>
<p><em>我是被斜体em定义后的p,我更容易被浏览器识别</em></p>
</div>
<hr>
<div class="div4">
<span>现价:¥99
<del>原价:¥399</del>
<!--这是删除符-->
<center>我是居中对齐</center>
H<sub>2</sub>O
CO<sup>2</sup>
</span>
</div>
<hr>
<div class="5">
<p>
你好 我是前端小白
我爱学前端
我的空格和换行没有被p保留
</p>
<pre>
你好 我是前端小白
我爱学前端
我是被pre保留了空格和换行
</pre>
</div>
</body>