两个名词含义：

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

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

　　注：块级标签和内联不签不是绝对的，可以通过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. HDOJ-三部曲一(搜索、数学)-1002-Children of the Candy Corn

    Children of the Candy Corn Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Jav ...

  2. 【LeetCode OJ】Best Time to Buy and Sell Stock III

    Problem Link: http://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ Linear Time Solut ...

  3. Unity C#和OC互相调用

    Unity  两种方式 一般都是组合使用 1.[DllImport("__Internal")]  C#调用oc 2.UnitySendMessage        oc调用C# ...

  4. CODEVS1533 互斥的数（哈希表）

    给定一个集合,要求一个最大子集,满足两两之间不互斥.对两个数x,y互斥的定义是,y=p*x. 先对集合中的数从小到大排序后线性扫,若一个数x可以取则取,取完之后p*x这个数不可取.由于数字较大,使用哈 ...

  5. ajax 向后台传对象

    $.ajax({ url : "accreditSurveyInfo.action", data : $("form").serialize(), dataTy ...

  6. 【Modal】

    1.Bootstrap Modal 文档里标签.属性.方法.事件都写的很清楚 2.AngularUI - Bootstrap UI Bootstrap 2.1 $scope.open = functi ...

  7. Linux 常用命令笔记

    Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...

  8. 三 JSP 技术

    一 JSP 概述 1. 本质:在 HTML 语言中混合 Java 程序代码,由服务器端 Java 语言引擎解释执行.其中,HTML 负责描述信息显示格式,JSP 负责描述处理逻辑. 2. JSP 代码 ...

  9. het smooth 组装高杂合度二倍体基因组前期数据处理

    http://sourceforge.net/projects/het-smooth/ equencing technologies, such as Illumina sequencing, pro ...

  10. 关于kinect的安装与配置工作

    一 关于kinect的安装与配置工作 首先要注意的是,使用kinect进行开发,目前有两种不同的驱动方案,经测试这两种方案的驱动是不能兼容的,所以请务必选定其中一种(最好是卸载另外一种). 方案一:使 ...