html 块，布局

来源：互联网发布：双节棍知乎编辑：程序博客网时间：2024/06/05 20:51

块

`<div>`

全局属性

例子：

<body> <h1>NEWS WEBSITE</h1>  <p>some text. some text. some text...</p>  ... <div class="news">  <h2>News headline 1</h2>  <p>some text. some text. some text...</p> </div> <div class="news">  <h2>News headline 2</h2>  <p>some text. some text. some text...</p></div></body>

上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class=”news” 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。

注意：可以对同一个<div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标
识单独的唯一的元素。

事件属性

<div style="color:#00FF00">

布局

强调内容 ：现在html5添加了很多新的标签，如：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

在html中这些都要写成 #header{}这种形式，再使用
<div id="header">.....</div>。

表格布局

例子：

<style>table.lamp {    width:100%;    border:1px solid #d4d4d4;}table.lamp th, td {     padding:10px;}table.lamp th {    width:40px;}</style></head><body><table class="lamp"><tr>  <th>    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">  </th>  <td>    The table element was not designed to be a layout tool.  </td></tr></table></body>

0 0