两个名词含义：

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

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

　　注：块级标签和内联不签不是绝对的，可以通过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. 2、网页制作Dreamweaver（图片热点、frameset框架）

    图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="r ...

  2. HDU 5000

    http://acm.hdu.edu.cn/showproblem.php?pid=5000 题意:有n种属性,每种属性的数值可以是0-T[i],当一个人属性全部小于等于另一个人的属性时,小的那个人会 ...

  3. Bootstrap组件On和Off语法

    $(document).on('click.bs.carousel.data-api','td',function(e){}) $(document).off('.carousel.data-api' ...

  4. MySQL 添加列,修改列,删除列

    创建后表的修改 alter table 语句用于创建后对表的修改, 基础用法如下: 添加列 基本形式: alter table 表名 add 列名 列数据类型 [after 插入位置]; 示例: 在表 ...

  5. 微软官方好用的Office 2003、 Office 2007 或 Office 2010 卸载工具

    http://support.microsoft.com/kb/2519420/zh-cn

  6. R6010 -abort() has been called

    版权所有,转载请注明出处. R6010 -abort() has been called 环境: Windows7 旗舰版 64Bit Visual studio 2012 编译32Bit运行程序 E ...

  7. SPAdes

    用后感: 拼个小基因组还好,对于很大的基因组,文库很多的,还是不要用了.服务器768G内存,都不够用.... 主页: http://bioinf.spbau.ru/spades 说明书: http:/ ...

  8. PotPlayer播放器——最强大的播放器 - imsoft.cnblogs

    PotPlayer下载:链接 http://pan.baidu.com/s/17vgMM 密码: 8buc PotPlayer关联图标修改方法:打开安装目录替换目录下的PotIcons.dll文件即可 ...

  9. poj 1475 uva 589 - Pushing Boxes

    题目大意 人推箱子从起点到终点,要求推箱子的次数最少,并打印出来人移动的路径. 题目分析 对于箱子进行宽搜的同时,要兼顾人是否能够把箱子推到相应的位置 每一次对箱子bfs 然后对人再bfs #incl ...

  10. 输出NSRange类型的数据

    如果你想知道字符串内的某处是否包含其他字符串,使用rangeOfString: 方法 -(NSRange)rangeOfString :(NSString *)aString; NSString *n ...