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

　　①总是在新行上开始；
　　②高度，行高以及外边距和内边距都可控制；
　　③宽度缺省是它的容器的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. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  2. iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

    上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...

  3. iOS开发之多图片无缝滚动组件封装与使用

    经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...

  4. Ubuntu杂记——Ubuntu自带拼音输入发杂乱不堪

    打开终端,用管理员权限输入ibus-daemon -drx,重启即可

  5. 基于讯飞语音API应用开发之——离线词典构建

    最近实习在做一个跟语音相关的项目,就在度娘上搜索了很多关于语音的API,顺藤摸瓜找到了科大讯飞,虽然度娘自家也有语音识别.语义理解这块,但感觉应该不是很好用,毕竟之前用过百度地图的API,有问题也找不 ...

  6. Word基础

    1.页面设置 默认大小A4,长宽比0.618 页面布局 2.字体设置 选择要设置的字体->右键->字体 3.选择性粘贴 4.段落设置 选择文字->右键->段落 5.表格 =SU ...

  7. ZOJ Problem Set - 1006 Do the Untwist

    今天在ZOJ上做了道很简单的题目是关于加密解密问题的,此题的关键点就在于求余的逆运算: 比如假设都是正整数 A=(B-C)%D 则 B - C = D*n + A 其中 A < D 移项 B = ...

  8. iOS_UIImage_毛玻璃效果

    效果图: 核心方法: // 出入UIImage 和 blur模糊成度 (0-1) - (UIImage *)blurryImage:(UIImage *)image withBlurLevel:(CG ...

  9. jQuery-1.9.1源码分析系列（二）jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  10. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...