你的位置:首页 > 网页设计

[网页设计]HTML块级标签汇总(小篇)


块级元素,简单来说,就是自己独占一行的元素。其特点:

  ①总是在新行上开始;
  ②高度,行高以及外边距和内边距都可控制;
  ③宽度缺省是它的容器的100%,除非设定一个宽度。
  ④它可以容纳内联元素和其他块元素
汇总代码如下:
 1 <!doctype html> 2 <html> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6 </head> 7 <body> 8   <!-- 块状元素 独占一行 --> 9 10   <!-- div无语义,称它为盒子 -->11   <div>盒子</div>12   13   <!-- h1-h6语义 定义标题 -->14   <h1>标题1</h1>15   <h2>标题2</h2>16   <h6>标题3</h6>17   18   <!-- p 语义 段落标签 写文字-->19   <p>文章</p>20   21   <!-- 列表多数用来存一系列的相似的数据 -->22   <!-- 有序列表 -->23   <ol>24     <li>导航1</li>25     <li>导航2</li>26     <li>导航3</li>27   </ol>28   <!-- 无序列表 -->29   <ul>30     <li>导航1</li>31     <li>导航2</li>32     <li>导航3</li>33   </ul>34   <!-- 定义列表 解释某个名词 -->35   <dl>36     <dt>名词</dt>37     <dd>解释名词的位置</dd>38   </dl>39 40   <!-- 表格 渲染性能不好 少用 -->41   <table>42     <caption>表格头部</caption>43     <!-- tr是行 -->44     <tr>45       <!-- th表头 -->46       <th>星期一</th>47       <th>星期二</th>48     </tr>49     <tr>50       <!-- td单元格 -->51       <td>上课</td>52       <td>上课</td>53     </tr>54   </table>55 </body>56 </html>