ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML常用排版标签

2022-02-23 23:02:03  阅读:166  来源: 互联网

标签:标签 元素 列表 水平线 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,对齐,标题,排版
来源: https://blog.csdn.net/weixin_45904557/article/details/123082779

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有