html之块级标签h系列,div

两个名词含义:

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

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

  注:块级标签和内联不签不是绝对的,可以通过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添加了合适的语义,又便于使用样式对其进行格式化。

 1 <body>
 2     <div class="news">
 3         <h2>This is page 2</h2>
 4         <p>正如您看到的,上面这段 HTML 模拟了新闻网站的结构</p>
 5     </div>
 6     <div class="news">
 7         <h2>this is page3</h2>
 8         <p>其中的每个 div 把每条新闻的标题和摘要组合在一起</p>
 9     </div>
10 </body>

 

  再给div加一些样式吧:

 

效果图:

 

 

  

 

posted on 2016-11-28 15:08  孔扎根  阅读(2106)  评论(0编辑  收藏  举报

导航