H5语义化标签

H5 语义化标签

语义化标签是H5 的一个新特性,合适的标签做合适的事情。

块级元素

  • 独占一行
  • 可以设置宽高,默认宽高为父元素的100%
  • margin和padding对上下左右四个方向设置均有效。
  • address article aside audio定义声音内容 blockquote定义长的引用。 canvas caption表格标题。 dd div dl dt details元素的细节。 fieldset围绕表单元素的边框。 figcaption定义figure元素的标题。 figure定义媒介内容的分组。 footer form h1-6 header hr legend定义fieldset元素的标题。 li menu meter预定义范围内的度量 nav导航链接 noframes定义针对不支持框架的用户的替代内容。 noscript定义针对不支持客户端脚本的用户的替代内容。 ol output 定义输出的一些类型。p pre定义预格式文本。 section table tbody td tfoot 定义表格中的表注内容(脚注)。th thead time tr ul

行内块元素

  • 并排排列
  • 不能设置宽高,默认的宽度是文字的宽度
  • 水平方向上padding,margin都有边距效果,但是垂直方向上padding、margin都不会产生边距效果。
  • a abbr 定义缩写。 acronym 定义只取首字母的缩写。b bdo定义文字方向。big定义大号文本。 br button cite定义引用。code 定义计算机代码文本。command 定义命令按钮。dfn 定义项目。del 定义被删除的文本。 em 强调文本。 embed 定义外部交互内容或插件。 i img input kbd定义键盘文本。 label map 定义图像映射。 mark 定义有记号的文本。 objec定义内前对象。 progress 定义任何类型的任务的进度。
    q 定义短的引用。
    samp 定义计算机代码样本。
    select
    small 定义小号文本。
    span
    strong 定义强调文本。
    sub 定义下标文本。
    sup 定义上标文本。
    textarea 定义多行的文本输入控件。
    time 定义日期/时间。
    tt 定义打字机文本。
    var 定义文本的变量部分。
    video 定义视频。
    wbr 定义可能的换行符。

块级元素和行内块元素的互转

通过display:inline、block可以进行互转,互转之后享有块级元素或者行内块元素的特性。

脱离标准流文档

标准流里面的限制非常多,导致很多页面效果无法实现,如果我们现在就要并排,并且就要设置宽度,就会有:脱离标准流。
脱离标准流的三种方式:

  • 浮动
    所有的标签一旦设置浮动,就不区分块元素或行内块元素,都可以设置宽高。
  • 绝对定位
  • 固定定位
    当为行内元素进行定位时,position:absolute,与position:fixed。都会使原先的行内元素变为块级元素。

清除浮动

1,给父盒子设置高度。
2,clear:both;
3,伪元素清除法
4,overflow:hidden;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值