两个名词含义：

　　块级标签：内容再少也会占满整行

　　内联标签：有多少内容点多少地方

　　注：块级标签和内联不签不是绝对的，可以通过CSS作任意转换

1、h1-h6 ：块级标签

　　请仅仅把标题标签用作标题文本，如想获取粗体字请使用CSS或其它标签。

　　由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构

<body>

    <h1>This is page 1</h1>

    <h2>This is page 2</h2>

    <h3>This is page 3</h3>

    <h4>This is page 4</h4>

    <h5>This is page 5</h5>

    <h6>This is page 6</h6>

</body>

显示结果如下：

　　可选的属性：　

align: 规定标题中文本的排列

　　　　不赞成使用，请使用样式代替

    left:文字在左

    right:文字在右

    center:文字居中

<body>

    <h1>This is page 1</h1>

    <h2 align="left">This is page 2</h2>

    <h3 align="right">This is page 3</h3>

    <h4 align="center">This is page 4</h4>

    <h5 align="justify">This is page 5</h5>

    <h6>This is page 6</h6>

</body>

　　标准属性：

id, class, title, style, dir, lang, xml:lang

　事件属性：
onclick, ondblclick, onmousedown, onmouseup, onmouseover,

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

2、div标签：块级标签，最原始最干净的块级标签，没有任何样式，可用CSS装饰成各种样式，最最常用

　　建议：使用div元素来组合块级元素，这样就可以使用样式对它们进行统一格式化

　　如下：

　　　　div为文档添加了额外的结构，由于这些div属性同一类，所以用class=news来标识，既为div添加了合适的语义，又便于使用样式对其进行格式化。

 <body>

     <div class="news">

         <h2>This is page 2</h2>

         <p>正如您看到的，上面这段 HTML 模拟了新闻网站的结构</p>

     </div>

     <div class="news">

         <h2>this is page3</h2>

         <p>其中的每个 div 把每条新闻的标题和摘要组合在一起</p>

     </div>

 </body>

　　再给div加一些样式吧：

效果图：

　　

　

html之块级标签h系列,div的更多相关文章

  1. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

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

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

  3. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

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

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

  5. p标签内不能嵌套块级标签

    今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...

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

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

  7. 列表 ul ol dl 和 块级标签和行及标签之间的转换

    1. 无序列表 有序列表 自定义列表 1,无序列表 第一 你不必须有子标签  <li></li> 第二 ul天生自带内外边距 List-style的属性值 circle(空心圆 ...

  8. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

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

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

随机推荐

  1. windows 命令修改IP

    修改ip: netsh -c interface ip set address name="本地连接" source=static addr=192.168.11.100 mask ...

  2. 要学JavaScript！进来看吧，反正不花钱！~

    有一段时间没有更新自己的博客了,今天终于可以抽出时间和大家分享一下关于JavaScript了.有很多朋友在问我没有接触过会不会很难,不好理解 其实JavaScript的基本语法和Java的基本语法很相 ...

  3. css3 动画贝塞尔曲线

    http://cubic-bezier.com/#.17,.67,.83,.67 缓动函数速查表: http://www.xuanfengge.com/easeing/easeing/ Ceaser: ...

  4. HDU 4850

    http://acm.hdu.edu.cn/showproblem.php?pid=4850 西安邀请赛当时没做出来的银牌门坎题 题意:构造一个长度n的字符串,长度>=4的子串只能出现一次 题解 ...

  5. CSS 实现：两栏布局（等宽布局）

    ☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...

  6. Valid Parentheses

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  7. ML2 – Address Population

    Why do we need it, whatever it is? VM unicast, multicast and broadcast traffic flow is detailed in m ...

  8. 图像金字塔及其在 OpenCV 中的应用范例(下)

    前言 本文将主要讲解如何使用 OpenCV 实现图像分割,这也是图像金字塔在 OpenCV 中的一个重要应用. 关于图像分割 在计算机视觉领域,图像分割(Segmentation)指的是将数字图像细分 ...

  9. 触摸精灵lua脚本实现微信群加好友功能

    --此脚本针对iPhone5/5s --目前只实现一个屏幕微信群好友的添加,如果想添加更多好友, --需要划屏操作,执行划屏操作时建议循环滑动 function main() --获取屏幕的分辨率 w ...

  10. tyvj 1057 dp 变形背包

    P1057 金明的预算方案 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第二道 描述 金明今天很开心,家里购置的新房就要领钥匙了 ...