块级元素，简单来说，就是自己独占一行的元素。其特点：

　　①总是在新行上开始；
　　②高度，行高以及外边距和内边距都可控制；
　　③宽度缺省是它的容器的100%，除非设定一个宽度。
　　④它可以容纳内联元素和其他块元素
汇总代码如下：

 <!doctype html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     <!-- 块状元素 独占一行 -->

     <!-- div无语义,称它为盒子 -->
     <div>盒子</div>

     <!-- h1-h6语义 定义标题 -->
     <h1>标题1</h1>
     <h2>标题2</h2>
     <h6>标题3</h6>

     <!-- p 语义 段落标签 写文字-->
     <p>文章</p>

     <!-- 列表多数用来存一系列的相似的数据 -->
     <!-- 有序列表 -->
     <ol>
         <li>导航1</li>
         <li>导航2</li>
         <li>导航3</li>
     </ol>
     <!-- 无序列表 -->
     <ul>
         <li>导航1</li>
         <li>导航2</li>
         <li>导航3</li>
     </ul>
     <!-- 定义列表 解释某个名词 -->
     <dl>
         <dt>名词</dt>
         <dd>解释名词的位置</dd>
     </dl>

     <!-- 表格 渲染性能不好 少用 -->
     <table>
         <caption>表格头部</caption>
         <!-- tr是行 -->
         <tr>
             <!-- th表头 -->
             <th>星期一</th>
             <th>星期二</th>
         </tr>
         <tr>
             <!-- td单元格 -->
             <td>上课</td>
             <td>上课</td>
         </tr>
     </table>
 </body>
 </html>

HTML块级标签汇总（小篇）的更多相关文章

  1. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. python全栈开发day39-CSS继承性和层叠性、权重问题、盒模型和其属性、文本级标签和块级标签、浮动

    一.上次内容回顾 1.CSS的三种引入方式: 行内式 内接式 外接式 链接式 导入式 2.基础选择器和高级选择器 1)标签选择器 p{} 2)  id选择器 #nva{} 3) 类选择器 .nva{} ...

  3. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  4. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  5. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

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

    当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...

  7. HTML学习笔记——块级标签、行级标签、图片标签

    1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. html之块级标签h系列,div

    两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...

  9. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

随机推荐

  1. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  2. SQL Server DDL触发器运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) DDL运用场景(DDL Scene) ...

  3. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  4. SpringMVC那点事

    一.SpringMVC返回json数据的三种方式 1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id=" ...

  5. OracleDBA之用户管理

    再分享一下Oracle中对用户的管理,以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer20 ...

  6. T-Sql（八）字段索引和数据加密

    t-sql的基本用法讲到第八章也差不多了,最后就讲下字段索引和数据加密,这两个内容对编程人员可能用的地方不是太多,还是那句老话“防患于未然”. 下面我就简单的说下字段索引和数据加密的内容,只是简单概述 ...

  7. C# 提取Word文档中的图片

    C# 提取Word文档中的图片 图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现使 ...

  8. cordova plugin add出现CERT_UNTRUSTED错误解决方法

    介绍 目前使用ionic+cordova完成hybmid app开发,在安装geolocation插件时爆出来一个莫名的错误: Fetching from npm failed: CERT_UNTRU ...

  9. RAC 10.2.0.5，客户端登陆间断遭遇ORA-12545

    实验环境: 服务端:OEL 5.7 + Oracle 10.2.0.5 RAC  客户端:Windows 7 + Oracle 11.2.0.1 Client   1.客户端登陆间断遭遇ORA-125 ...

  10. react入门（2）

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...