两个名词含义:

块级标签:内容再少也会占满整行

内联标签:有多少内容点多少地方

注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换

1、h1-h6 :块级标签

请仅仅把标题标签用作标题文本,如想获取粗体字请使用CSS或其它标签。

由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构

This is page 1

This is page 2

This is page 3

This is page 4

This is page 5
This is page 6

显示结果如下:

可选的属性:

align: 规定标题中文本的排列

不赞成使用,请使用样式代替

left:文字在左

right:文字在右

center:文字居中

This is page 1

This is page 2

This is page 3

This is page 4

This is page 5
This is page 6

标准属性:

id, class, title, style, dir, lang, xml:lang

事件属性:

onclick, ondblclick, onmousedown, onmouseup, onmouseover,

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

2、div标签:块级标签,最原始最干净的块级标签,没有任何样式,可用CSS装饰成各种样式,最最常用

建议:使用div元素来组合块级元素,这样就可以使用样式对它们进行统一格式化

如下:

div为文档添加了额外的结构,由于这些div属性同一类,所以用class=news来标识,既为div添加了合适的语义,又便于使用样式对其进行格式化。

This is page 2

正如您看到的,上面这段 HTML 模拟了新闻网站的结构

this is page3

其中的每个 div 把每条新闻的标题和摘要组合在一起

再给div加一些样式吧:

效果图:

css块级标签,行内标签,行内块标签的转换(2)

css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

块级标签包含行内标签底部出现3px间隔的解决办法

当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下:

&lt ...

列表 ul ol dl 和 块级标签和行及标签之间的转换

1. 无序列表 有序列表 自定义列表 1,无序列表 第一 你不必须有子标签

第二 ul天生自带内外边距 List-style的属性值 circle(空心圆 ...

html:常见行内标签,常见块级标签,常见自闭合标签

本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

随机推荐

python中main()函数写法

顶顶大名的Guido van Rossum(Python之父)推荐的main写法: #!/usr/bin/python import sys import getopt class Usage(Exc ...

IntelliJ IDEA 开发前的设置

1.IntelliJ IDEA 显示行号方法 设置方法:File->Settings->Editor->General->Appearance->Show line nu ...

C#中Json和List/DataSet相互转换

#region List 转 Json        ///         /// List 转 Json        /// & ...

Bootstrap简单Demo(2015年05月-18日)

Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...

Lucene的多线程访问原则和同步,锁机制

本文介绍lucene多线程环境下的使用原则和commit.lock与write.lock实现的锁机制. 设计之初就是服务于多线程环境,大多数情况下索引会被不至一个线程访问.索引时一个关键资源.在对这样 ...

洛谷 P3377 【模板】左偏树(可并堆)

洛谷 P3377 [模板]左偏树(可并堆) 题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或 ...

HBase详解

1.   hbase简介 1.1.  什么是hbase HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. H ...

Shell编程-12-Shell脚本规范及调试

目录 Shell脚本规范 Shell脚本调试 Shell脚本规范     良好的代码规范不仅方便阅读,也利于维护和提升开发效率.因此建议大家在编写Shell脚本时养成良好的代码习惯.今天就和大家探讨一 ...

Android progressbar条形带背景渐变进度风格进度条

效果图: 代码如下:

html div里里h标签居中,html之块级标签h系列,div相关推荐

  1. html标签的显示模式(块级标签,行内标签,行内块标签)(转)

    html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用, ...

  2. html标签的显示模式(块级标签,行内标签,行内块标签)

    今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽.高.水平居中等,其实这个属性的使用只有在块级标签上 ...

  3. 前端基础——双单标签、行内块级元素、路径、常用标签

    一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...

  4. css标签显示特性(块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例)

    HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...

  5. HTML(一):行级标签、块级标签、其他标签

    目录 0.Web前端介绍 0.1 什么是网页 0.2 网页的组成 0.3 开发前的准备 一.HTML 1.1 HTML概念 1.1.1 HTML是什么 1.1.2 HTML基本结构 1.1.3 HTM ...

  6. html块级标签转换,html标签中的块级元素详解

    今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念 块级元素是一类css样式display默认值为block的html标 ...

  7. 去除行块级标签之间的默认间距

    当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距.去除方法如下: 方法一: 将紧连的行块级都放在一行,如果行块级的内容比较少,这么做还是可以的:但内容比较多的时候,这么做 ...

  8. 我的javaweb学习之旅--html常用块级标签

    html常用块级标签 常用的有p,h1~h6,div,ul 等 1.h1~h6 <body> <h1></h1>   一级标题 ...... <h6>& ...

  9. 前端学习(142):行级标签和块级标签

    块级标签:(block) 1.独占一行,不和其他元素待在同一行,宽度自动填满父元素宽度 2.能设置weight(宽).height(高)属性 3.可以设置margin,padding属性 常见的块级标 ...

  10. p标签内不能包含块级元素

    发现一个不常用的冷知识 学html的时候,以为块级元素可以包含任意的块级元素 事实并非如此,p标签是不可以包含任何跨级元素的 有些块元素不可以包含另一些块元素  ,DTD中规定了块级元素是不能放在P里 ...

最新文章

  1. BAT携手清华、复旦、上交齐聚杭州, 和500名开发者干点啥?
  2. 重磅!教育部:不得将发论文和物质奖励挂钩,防止高额奖励论文
  3. 如何快速在GitHub上找到感兴趣的开源项目
  4. 动态的添加和丢弃关键点---32
  5. Delphi Math里的基本函数,以及浮点数比较函数(转)
  6. php 循环队列,队列和循环队列-php数组
  7. 万字长文!Unix和Linux你不知道的那些历史(详解版)
  8. Pentium 4处理器架构/微架构/流水线 (8) - NetBurst执行核详解 - 指令时延与吞吐量
  9. y=asin(wx+φ)的对称中心_y=asin(wx+φ)怎么求
  10. OneNote网页版链接用桌面应用打开报错的解决
  11. skyfire塞班_Symbian Foundation的灯光熄灭
  12. 杭州php程序员工资一般多少,杭州Android基础一期大黑马强哥,完美收官~~欧巴,卡几嘛...
  13. 基于SSM的概念可视化程序设计学习系统 毕业设计-附源码021009
  14. 数据流标准差计算方法-不用事先计算均值
  15. JSON.parse和JSON.stringify
  16. 微信支付结算费率怎么降低至0.2~0.35操作方法
  17. 第三周实验题目2——robots协议
  18. 超级计算机计算山东下雨,山东还有暴雨吗?超级计算机:急流略南调,大暴雨会出现在这里...
  19. iOS开发之Objective-C(面试篇)-李飞-专题视频课程
  20. ColdQuanta与Classiq达成合作:加速100量子比特计算机实用化

热门文章

  1. 全球四大卫星导航系统年鉴
  2. java 网段_java IP地址网段计算的示例代码
  3. Neo4j 第二篇:图形数据库
  4. uniapp动态图片加载不出来
  5. 如何通过TXT文件批量生成DataMatrix码
  6. Gos —— 文件系统
  7. 逆水寒怎么找回服务器之前的角色,逆水寒12月27日服务器合并公告 逆水寒合服问题解答一览...
  8. 高斯帕滑翔机枪matlab,高斯帕滑翔机枪的播种机这么做?
  9. 解决人人商城无法退款的问题
  10. android 源代码 毛笔,android中实现毛笔效果(View 中绘图)