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

　　①总是在新行上开始；
　　②高度，行高以及外边距和内边距都可控制；
　　③宽度缺省是它的容器的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. Javascript刷题 》 查找数组元素位置

    找出元素 item 在给定数组 arr 中的位置 输出描述: function indexOf(arr, item) { ..... } 如果数组中存在 item,则返回元素在数组中的位置,否则返回 ...

  2. SQL Server DDL触发器运用

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

  3. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

  4. ueditor的配置和使用

    ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...

  5. Neutron Vlan Network 原理- 每天5分钟玩转 OpenStack（92）

    前面我们陆续学习了 Neutron local network,flat network 和 DHCP 服务,从本节将开始讨论 vlan network. vlan network 是带 tag 的网 ...

  6. CodeIgniter笔记-去掉index.php

    1.修改Apache 的配置文件把LoadModule rewrite_module modules/mod_rewrite.so该行前的#去掉. 2.将 AllowOverride None ,修改 ...

  7. 小菜学习Winform（七）系统托盘

    前言 有些程序在关闭或最小化的时候会隐藏在系统托盘中,双击或右击会重新显示,winform实现其功能很简单,这边就简单的介绍下. 实现 在winform实现托盘使用notifyIcon控件,如果加菜单 ...

  8. C#将一个excel工作表根据指定范围拆分为多个excel文件

    C#将一个excel工作表根据指定范围拆分为多个excel文件 微软Excel没有提供直接的方法来拆分excel文件,因此要拆分一个excel文件最简单的方法可能就是手动剪切和粘贴了,除此之外,还有其 ...

  9. android UI 仿 win 8 模块化 标题，并实现 可长按拖动交换图片位置、可点击，且伴随动画特效

    转载请声明出处,谢谢!http://www.cnblogs.com/linguanh/ 先上效果图,给大家个直观效果,后上实现代码:  ->  ->->  ok,现在简单说下我上面的 ...

  10. Ubuntu下搭建ryu环境

    RYU环境搭建总共四步: step1:首先下载相应的python套件,并且更新pip $ sudo apt-get install python-pip python-dev build-essent ...