HTML 中常用的排版标签

概述

HTML页面的排版可以把它当作是在写一个Word 文档,Word 中有文字和图片,可以设置图片的位置、文字的样式和段落结构等。当然,对于前端来说,并不满足于 Word 的功能,那就可以借助 CSS 来让它变成一个PPT(给图片或者段落改变位置结构或者展示样式,以及一些动画效果),那就是 CSS 的工作了,今天只谈HTML,它只是做了架子,怎么让页面展示效果更充实,那是装修工人- CSS做的事情了,本文不牵扯。

排版标签的分类

  • 偏文本类
  • 偏布局类(搭架子)

文本排版类标签

1. h1~h6 - 双标签,6个等级的标题标签

用于设置文本为标题样式;

特点是文字 字号和加粗效果,切独占一行 。

想必大家都写过毕业论文的word文档,你的标题段落设置一级标题、二级标题...等等

常用属性 align 设置文字的对齐方式,对应去值如下:
  • align="left" - 文字左对齐(默认)
  • center - 文字居中
  • right - 文字右对齐

2. span -双标签

作用:将包裹的文本独立出来,可以处理特殊的样式,默认是行内样式,在一行上从左到右排列。

3. p -双标签

作用:把文字分段展示,和标题、div标签一样,宽度默认铺满整个页面,也有 align 属性;

4. hr 和 br -单标签

把这两个放在一起其实因为它俩有点像,都是分离两段文本,并且都是单标签,且一般它俩就是光秃秃的,不加属性修饰,

  • hr 是水平分割线,独占一行,可以通过 css 设置颜色、粗细等样式;
  • br 是换行符,产生效果是它前后的文字分行展示;
5. 字体排版标签
  • b、strong - 字体加粗
  • i、 em -斜体
  • s 、 del - 删除线
  • u 、 ins - 下划线

布局排版类标签

1. div

网站的页面布局即 div + css,div 负责结构、布局、分块,CSS 负责样式 也是大家最熟悉的,这里不再详细展开。

2. a - 链接标签

给指定目标添加链接页面的打开方式

3. 表格标签 table 、tr、td等

早期的页面排版,现在大部分用于列表数据展示了

4. 列表标签 li

  • ul 无序列表,通常用于自定义列表的布局;
  • ol 有序列表,带有排序序号;-比如排行榜

5. 表单标签 - form 表单域

作用使用表单标签来实现用户信息的收集和提交

相关推荐
@大迁世界1 小时前
Firefox 本地模式:localhost 再见了 ?
前端·架构
米米商聊3 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
echome8884 小时前
Python 异常处理:try、else、finally 的正确搭配
开发语言·前端·python·异常处理·编程技巧
时间的情敌5 小时前
OpenLayers 实战|Vue3 + OpenLayers 完整工程案例(加载天地图、要素、弹窗、绘制、WFS)
前端·openlayers
陈随易5 小时前
下载神器!Motrix 停更三年后重写回归
前端·后端·程序员
前端的日常5 小时前
一个人+AI做情侣食谱小程序,0 费用的服务器
前端·后端
计算机魔术师6 小时前
谷歌搜索广告踩刹车,AI广告成为救命稻草
前端
总要学点什么6 小时前
第81篇:数据可视化-PM2.5分布——让圆点的胖瘦替每座城市报出浓度
前端·信息可视化·echarts·cesium·空间分析
IT_陈寒6 小时前
Vue的v-for里用了个临时变量,页面直接挂了
前端·人工智能·后端
hunter_0766 小时前
一次 iOS 真机签名 409 的完整排查:证书、设备、描述文件为什么总是"对不上"
前端