大多数 HTML 元素被定义为块级元素或内联元素。

块级元素包括:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

块级元素在浏览器显示时，通常会以新行来开始（和结束）。比如:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>块级元素通常会以新行来开始（和结束）</title>
  6.  </head>
  7.  <body>
  8.    <p>块级元素通常会以新行来开始（和结束）</p>
  9.    <button>块级元素通常会以新行来开始（和结束）</button>
  10.    <hr>
  11.  </body>
  12.  </html>

浏览器打开如下:

说白了就是块级元素会独占一行！

内联元素包括:heda   meat   title  lable  span  br  a   style  em  b  i   strong

内联元素在显示时通常不会以新行开始

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>内联元素在显示时通常不会以新行开始</title>
  6.  </head>
  7.  <body>
  8.    <span>内联元素在显示时通常不会以新行开始</span>
  9.    <a>内联元素在显示时通常不会以新行开始</a>
  10.    <img src="1.jpg" width="200" height="200" alt="内联元素在显示时通常不会以新行开始">
  11.    <hr>
  12.  </body>
  13.  </html>

HTML基础 块级元素和内联元素的更多相关文章

  1. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  4. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  5. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  6. （转） html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  7. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  9. html的块级元素和内联元素

    常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...

随机推荐

  1. javaSE之运行时异常和编译时异常

    运行时异常继承自RuntimeException; package foundationEnhance; public class Person { private int age; public P ...

  2. ubuntu + JetSonNano+OpenCV3.4.8

    首先强调一点,如果要配置darknet环境,不建议安装该版本!!! 安装opencv前,建议先检测自己的系统是否已经装过其他版本, 检查方式: (1)查看是否安装opencv库: pkg-config ...

  3. Java泛型与集合笔记

    第一章 Java的泛型为了兼容性和防止代码爆炸,在编译成字节碼时会进行类型擦除,编译器自动添加代码做类型转换(用到List<Integer>的地方用Integer来做转换),自动做装箱拆箱 ...

  4. 【数据库】一篇文章搞掂：Oracle数据库

    PL/SQL的使用 1.安装使用 1.1.安装暂略 1.2.使用 添加环境变量 打开PL/SQL,不要登录,进入界面后,打开设置Preference 设置主目录和OCI库

  5. 解决Docker容器 iptables问题---docker: Error response from daemon: driver failed programming external connectivity on endpoint quizzical_thompson

    一.问题现象 最近在研究Docker容器日志管理时,启动容器出现iptables相关报错,具体问题如下 运行容器 [root@node-11 ~]# docker run -d -p 24224:24 ...

  6. Python分析《武林外传》

    我一向比较喜欢看武侠电影.小说,但是06年武林外传开播的时候并没有追剧,简单扫几眼之后发现他们都不会那种飞来飞去的打,一点也不刺激.09年在南京培训的时候,日子简单无聊透顶,大好的周末不能出门,只能窝 ...

  7. 关于web开发中路径的问题的总结

    web开发中的一个困扰web开发新人的是路径问题: 1:项目的静态资源的根路径:http://localhost:8080/sqec-monitor 即是部署在web服务器中(比如tomcat)中项目 ...

  8. gradle命令行打包不同环境的apk包

    为什么我搜这个? 因为 早上在开发那边我看到他控制不同环境就是在这个下拉框选择不同的环境的 搜索词: Gradle 入门--只此一篇 https://www.jianshu.com/p/001abe1 ...

  9. Dos.ORM（原Hxj.Data）- 目录、介绍

    引言: Dos.ORM(原Hxj.Data)于2009年发布.2015年正式开源,该组件已在数百个成熟项目中应用,是目前国内用户量最大.最活跃.最完善的国产ORM.初期开发过程中参考了NBear与My ...

  10. nmon分析工具的使用

    linux监控服务器资源 1.下载nmon_linux_more_14g.tar.gz,下载完成解压之后,我们先命令行看看自己Linux的版本,和nmon支持一下Linux发行版本 2.mkdir / ...