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

　　①总是在新行上开始；
　　②高度，行高以及外边距和内边距都可控制；
　　③宽度缺省是它的容器的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. jQuery2.0.3源码分析系列之(29) 窗口尺寸

    .height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置 ...

  2. Gridview里添加合计行

    ShowFooter="true" ; ; ; protected void gvIncomeYG_RowDataBound(object sender, GridViewRowE ...

  3. Windows Phone 8弹窗

    新建一个UserControl,添加到相应位置 <Grid x:Name="LayoutRoot" Background="{StaticResource Phon ...

  4. 【开源】OSharp3.3框架解说系列：重新开源及3.3版本新特性

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  5. 趣味GPS

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 简介 GPS的全称是全球定位系统(the Global Positioning S ...

  6. MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入

    myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...

  7. 解决Oracle SQL Developer无法连接远程服务器的问题

    在使用Oracle SQL Developer连接远程服务器的时候,出现如下的错误 在服务器本地是可以正常连接的.这个让人想起来,跟SQL Server的一些设计有些类似,服务器估计默认只在本地监听, ...

  8. ZOJ Problem Set - 1394 Polar Explorer

    这道题目还是简单的,但是自己WA了好几次,总结下: 1.对输入的总结,加上上次ZOJ Problem Set - 1334 Basically Speaking ac代码及总结这道题目的总结 题目要求 ...

  9. Apple的LZF算法解析

    有关LZF算法的相关解析文档比较少,但是Apple对LZF的开源,可以让我们对该算法进行一个简单的解析.LZFSE 基于 Lempel-Ziv ,并使用了有限状态熵编码.LZF采用类似lz77和lzs ...

  10. Github团队开发示例（一）

    Github团队开发示例(二) 作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/6044837.html 我们可以在Github上管理自己的团队项目.团队 ...