网站搭建(三)

标题和列表的用法

正确使用标题

我们已经见过了h1标题的用法,这是一级标题。标题一共有h1~h6共六种分级,十分不建议把标题作为控制字号的方式,标题的正确用法应该是逐渐递减,只有在使用过一级标题后才使用二级标题,依次类推。达到清晰的表达出文章层次的目的。在之后的文章中,我也会介绍如何通过CSS( Cascading Style Sheets  )控制字体大小。

h1标题

h2标题

h3标题

h4标题

h5标题
h6标题

如何建立列表?

你可能想知道表单是什么,就像这样

  1. 打开冰箱门
  2. 装进大象
  3. 关上冰箱门

表单分为有序表和无序表,区别也很简单,前面带数字序列的是有序表,没有的则是无序表,上面这一种属于有序表。

建立无序表

想使用无序表,需要声明<ul>标签,并在每个项目之前加上<li>

<html>
 <head>
   <title>网站搭建(三)</title>
 </head>
 <body>
   <h1>标题和表单的用法</h1>
   <ul>
     <li>标题</li>
     <li>表单</li>
   </ul>
 </body>
</html>

它们看起来是这样

网站搭建(三)

标题和列表的用法

  • 标题
  • 表单

有序表

有序表声明<ol>,还是 在每个项目上加上<li>

就是大象装冰箱的那个例子

列表类型:type 和start

type能让我们改变有序表每个项目前面的数字显示类型(比如罗马数字),也可以让无序表前面的小圆圈变成方块

<html>
 <head>
   <title>购物清单</title>
 </head>
 <body>
   <h1>购买内容</h1>
   <ul type="disc">
     <li>薯片</li>
     <li>牛奶</li>
     <li>鸡蛋</li>
     <li>可乐</li>
   </ul>
   <ul type="square">
     <li>薯片</li>
     <li>牛奶</li>
     <li>鸡蛋</li>
     <li>可乐</li>
   </ul>
 </body>
</html>

购买内容

  • 薯片
  • 牛奶
  • 鸡蛋
  • 可乐
  • 薯片
  • 牛奶
  • 鸡蛋
  • 可乐

有序表的type类型包括

  • 1: 数字
  • I: 大写罗马数字
  • i: 小写罗马数字
  • A: 大写字母
  • a: 小写字母
start的使用

start可以让你从你想要的数字开始进行有序表

 <ol type="1" start="5">
     <li>第5项</li>
     <li>第6项</li>
 </ol>
  1. 第5项
  2. 第6项

码这么多字写了好久,留个评论再走。


发表评论