1.HTML列表
HTML列表标记主要有三种:有序列表、无序列表和定义列表。下面我们来一一的学习
(1).有序列表
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 <ol>
2 <li>hadoop</li>
3 <li>linux</li>
4 <li>C</li>
5 </ol>
在有序列表中我们还能定义其他的排序方式,上面是默认的数字排序,下面我们再加上字母排序和罗马数字排序 这里就只需要添加type属性就可以了,"a"表示以小写字母来排序;"A"就是使用大写字母来排序;"i"就是以小写罗马数字来排序;"I"就是以大写罗马数字来排序。 这里还可以添加start属性,决定起始地。 下面是范例:
1 <ol start="2">
2 <li>hadoop</li>
3 <li>linux</li>
4 <li>C</li>
5 </ol>
6 <ol type="A">
7 <li>hadoop</li>
8 <li>linux</li>
9 <li>C</li>
10 </ol>
11 <ol type="i">
12 <li>hadoop</li>
13 <li>linux</li>
14 <li>C</li>
15 </ol>
16 <ol type="I">
17 <li>hadoop</li>
18 <li>linux</li>
19 <li>C</li>
20 </ol>
图如下:
(2).无序列表
说完了有序列表,下面来讲讲无序列表。无序列表在HTML中还是很常用的。 无序列表始于 < ul> 标签。每个列表项始于 < li>(有序无序是一样的)。 无需列表排序的时候就是给每个列表项加各种小符号其中分为Disc(默认)实心黑点;Cirle小圈;square方点,与有序列表的属性都是用的一样的,接下来我么就来动动手
1 <ul>
2 <li>basketball</li>
3 <li>swim</li>
4 <li>football</li>
5 </ul>
6 <ul type="circle">
7 <li>basketball</li>
8 <li>swim</li>
9 <li>football</li>
10 </ul>
11 <ul type="square">
12 <li>basketball</li>
13 <li>swim</li>
14 <li>football</li>
15 </ul>
图如下:
2.HTML块
首先 我们要知道,HTML元素被定义为块级元素或内联元素。那么什么是块级元素,什么是内联元素呢:
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;就像以前用到的 < h1>, < p>, < ul>, < table>标签。
内联元素(inline)特性: 和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;以前用到的< b>, < td>, < a>, < img>标签。
在这里我们先介绍两个标签< div>标签和< span>标签。
< div>用来定义文档中的分区或节(division/section),没有特定的含义。它是可用于组合其他 HTML 元素的容器
< span>用来组合文档中的行内元素,也没有特定的含义
3.HTML布局
大多的网页布局要配合css来完成;css用于对元素进行定位或者为页面创建背景以及色彩丰富的外观。由于这里我们涉及到HTML的基础知识,我们就用我们现有的知识来进行布局。
网页布局可以通过< table>元素,或者< div>元素实现。 先来个简单的< table>布局网页 我们在上一章中学习了表格,那么下面我们就来将一个网页的一个板块用没有边框的表格来布局(添加背景颜色和布置文本内容)
其中代码见demo6。
大家可以看出,这个网页只是一个简单的表格,所用的都是我们学过的标签我而已,橙色中的还加入了我们上面刚学习的定义性列表嵌套有序列表。
下面我们再使用< div>元素进行布局(尽量达到上面的页面效果): 一般的div元素结构就如下图(思路也是用table的思路):
具体实现见demo7.
4.HTML表单
学习表单首先我们要知道,表单标签是什么,表单标签就是用于网页中的数据提交,比如我们注册网页,在留言板中留言、评论等可以填写数据,提交处理地方都需要表单标签,form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。下面我们就赶紧来动手试一试。
我们就直接在上面的代码中修改,首先我们尝试的,当然是搜集不同类型的用户输入,这里我们就只涉及文本和密码 只需要涉及到一个input type标签就能完成
1 <form>
2 user:
3 <input type="text" name="user">
4 <br /><br/>
5 password:
6 <input type="password" name="password">
7 </form>
部分截图:
当你输入时你会发现,username是可见的,password是被点替换了的,这就是这两个类型的区别。
下面我们再增增添两种选框,一种是多选,一种是单选。 当用户从若干给定的的选择中选取其一时,就会用到单选框。
单选框:
1 <form>
2 <input type="radio" name="sex" value="male" /> Male
3 <br/>
4 <input type="radio" name="sex" value="female" /> Female
5 </form>
多选框:
1 <form>
2 <input type="checkbox" name="married" />
3 married
4 <br/>
5 <input type="checkbox" name="have a job" />
6 have a job
7 <br/>
8 <input type="checkbox" name="chinese" />
9 chinese
10 </form>
见图