两个名词含义：

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

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

　　注：块级标签和内联不签不是绝对的，可以通过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. Functions

    Small The first rule of functions is that they should be small.The second rule of functions is that ...

  2. Java 解惑：Random 种子的作用、含参与不含参构造函数区别

    Random 通常用来作为随机数生成器,它有两个构造方法: Random random = new Random(); Random random2 = new Random(50); 1.不含参构造 ...

  3. 9、网页制作Dreamweaver（jQuery基础:事件）

    事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...

  4. Request的参数信息

    Request.ServerVariables["Url"] 返回服务器地址 Request.ServerVariables["Path_Info"] 客户端提 ...

  5. Unity3D ShaderLab 自定义光照模型

    接着上一篇BasicMyDiffuse的代码来说,这次要说明的就是自定义的光照模型,Ctrl+D>BasicMyDiffuse. 1.>//#pragma surface surf Lam ...

  6. PHP date和time

    一.time()函数 time():得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒. 前一天的时间就是 time()-60*60*24. 前一年的时间就是 time()-60*60 ...

  7. 编程之美2.5：寻找最大的K个数

    编程之美2.5:寻找最大的K个数 引申:寻找第k大的数: 方法一: // 选择第k大的数(通过改进快速排序来实现) public static void SelectShort(int[] array ...

  8. 101+ Manual and Automation Software Testing Interview Questions and Answers

    101+ Manual and Automation Software Testing Interview Questions and Answers http://www.softwaretesti ...

  9. dos快速通道

    要在文件夹的右键菜单中添加“命令提示符”选项.在注册表HKEY_CLASSES_ROOT\Directory\shell分支下新建一项“CommandPrompt”,修改右侧窗格中的“默认”键值为“命 ...

  10. int除以int 得到double类型值

    double serviceability =(double)(count1+count2)/sum; 需要进行强转 除数 这样得到的值就是double类型了