两个名词含义：

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

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

　　注：块级标签和内联不签不是绝对的，可以通过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. JQuery源码分析（八）

    jQuery的each迭代器 jQuery的each方法从使用上就要分2种情况: $.each()函数 $(selector).each() $.each()函数和$(selector).each() ...

  2. 学生信息管理系统v1.0

    昨天一个教师朋友找到我,告诉我现在学期末他工作比较忙.需要统计处理很多学生信息,想让我帮他做一个管理系统.实现的功能就是把WPS表格转化成Word文档,将每一个学生的信息都能够分开,并且要根据名字找到 ...

  3. HDU 5093

    http://acm.hdu.edu.cn/showproblem.php?pid=5093 二分图最大匹配的经典建图模型,行列分别缩点(连起来的'*' & 'o'),交集有'*'就连边 #i ...

  4. 请问用Inno_Setup打包文件夹时怎么排除其中一个文件？

    请问用Inno_Setup打包文件夹时怎么排除其中一个文件? 该文件夹下有几十个文件,多个文件夹,我要一个个加进去该累死,也容易出问题.不知道能不能实现我要的目的. http://www.jrsoft ...

  5. 【转】SQL SERVER日志满或过大的处理方法

    原文转自:http://blog.chinaunix.net/uid-7953959-id-2543262.html 事务日志文件Transaction Log File是用来记录数据库更新情况的文件 ...

  6. C++学习笔记5：如何给变量及函数命名？

    1.遵循C++规定的变量及函数命名方法: 2.原则:简单,易于理解: 以下是一些例子,可以作为参考: //bad examples: int ccount;//Nobody knows what a ...

  7. 《JavaScript Ninja》之挥舞函数

    挥舞函数 匿名函数为什么如此重要 通常使用匿名函数的情况是,创建一个供以后使用的函数.例如,将匿名函数保存在一个变量里,将其作为一个对象的方法,或者是将匿名函数作为一个回调.-->在这些情况下, ...

  8. 动态数组 - ArrayList

    前言 如果数组的大小要随时间变化,那么数组操作起来就比较麻烦. 在C++中,这种情况要用到动态向量Vector. 而Java中,提供了一种叫做ArrayList的泛型数组结构类型,提供相似的作用. 其 ...

  9. iOS平台网络类型检测

    老大新增个需求,连接服务器时要区分内外网,需求理解了,现实很骨感啊,没办法,干. #import <Foundation/Foundation.h> /* 依赖于以下Framework S ...

  10. 神奇的输入 while（cin>>....）如何在遇见换行之后进入下一层循环读入

    cin>>m>>n; ;i<=m;i++) { ; char ch=' '; ) //在遇到换行之后进入下一层循环读入. { x++; cin>>c[x]; ...