HTML常用排版标签

2022/2/23 23:23:20

本文主要是介绍HTML常用排版标签,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

前言

一、标题标签

二、换行标签

三、水平线标签

1.width=“  ” 设置hr水平线的宽度

2.align=“  ”  改变水平线的对齐方式

3.color=“  ” 改变水平线的颜色

四、列表标签

 1.无序列表

2.有序列表

3.自定义列表

五、表现元素

1.粗体

2.斜体 

3.下划线

4.删除线

5.小号字体

6.上标

7.下标​       

 六、块状元素

七、行内元素

八、特殊符号

1.大于号和小于号

2.  空格

3. 版权©

4. &     

5. 《》

6.   <>

九、补充img标签的属性

1.width  宽度

2.height  高度



前言

上一篇帖子里有排版标签中的p 标签,这篇帖子将不再讲解,补充一下,p 标签本身是一个块元素,里面不能再嵌套块元素了,比如<h1><h1>


一、标题标签

    <h1>一级标题</h1>
	<h2>一级标题</h2>
	<h3>二级标题</h3>
	<h4>三级标题</h4>
	<h5>四级标题</h5>
	<h6>五级标题</h6>


     <h1>至<h6>标签作为标题使用,字号从1到6依次递减,文字加粗且一个标题独占一行


二、换行标签

 <br />
        常用于段落内部换行
        简单的另起一行,跟段落不一样,段落会插入一些垂直的间距


三、水平线标签

分割不同主题内容的水平线,在页面中显示一条水平线

<hr width="" align="" color="">

 

1.width=“  ” 设置hr水平线的宽度

<hr width="500" align="" color="">

 单位可以是像素或者是百分比,像素是固定值,百分比占的是浏览器的百分比


 

2.align=“  ”  改变水平线的对齐方式

left   水平居左对齐默认;center  水平居中对齐;right  水平居右对齐


3.color=“  ” 改变水平线的颜色


四、列表标签

在网页中按照行展示关联性的内容,如:新闻列表,排行榜,账单等
 特点:按照行的方式,整齐显示内容



    1.无序列表

     <ul>
         <li>列表项</li>
         <li>列表项</li>
    </ul>

 li标签, 不能单独使用,必须配合ul或 ol 使用

 无序列表的每一项默认显示圆点 


2.有序列表

 <ol>
    <li>列表项</li>
    <li>列表项</li>
</ol>

 有序列表的每一项默认显示序号标识


 3.自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

  dl标签:表示自定义列表的主题,用于包裹dt/dd标签  

dt标签:定义列表项标明一个要说明的对象

 dd标签:列表项说明,表示自定义列表的针对主题的每一项内容,dd前会显示缩进效果


五、表现元素

1.粗体

<b></b>

<strong></strong>表示强调

2.斜体 

   <i></i>
   <em></em>表示强调

3.下划线

  <u></u>
  <ins></ins>

4.删除线

<s></s>

<del></del>


5.小号字体

 <small></small>

6.上标

 <sup></sup>

7.下标

<sub></sub>


       


 六、块状元素

<div></div>

    块级元素
    总是在新行上开始,占据一整行
    高度,行高以及外边距和内边距都可控制
    宽带始终是与浏览器宽度一样,与内容无关
    它可以容纳行内(内联)元素和其他块元素  


七、行内元素

<span></span>

   和其他元素都在一行上
    高,行高及外边距和内边距部分可改变
    宽度只与内容有关
    行内元素只能容纳文本或者其他行内元素


八、特殊符号

1.大于号和小于号

“&lt;” 和“&gt;”  
 “<” 和 “>” 


2.  空格

 &nbsp; 
 &ensp;
 &emsp;

从上到下空格依次增大

 尽量不要使用多个“&nbsp;”来表示多个空格,因为多数浏览器对空格的距离的实现是不一样的。


3. 版权©

 &copy;


4. &     

 &amp; 


5. 《》

&laquo;  &raquo;


6.   <>

 &lsaquo;  &rsaquo;  


九、补充img标签的属性

1.width  宽度

<img src="" width="">

2.height  高度

<img src="" height="">

当图片中只更改高度或宽度时,另一个属性会等比例缩小或放大 




这篇关于HTML常用排版标签的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程