欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

3-1

1,无序列表

ul-li是没有前后顺序的信息列表。

语法:

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

举例:

<ul>

<li>精彩少年</li>

<li>美丽突然出现</li>

<li>触动心灵的旋律</li>

</ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点

2,有序列表

语法:

<ol>

<li>信息</li>

<li>信息</li>

......

</ol>

举例:

下面是一个热点课程下载排行榜:

<ol>

<li>前端开发面试心法 </li>

<li>零基础学习html</li>

<li>JavaScript全攻略</li>

</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开

3-2

<div>容器标签

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:

<div>…</div>

确定逻辑部分:

什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器

注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

3-3

创建表格的五个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。(这个标签基本上不怎么用了)

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...<td/>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

表格还是需要添加一些标签进行优化,可以添加标题和摘要

<table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">

<caption>2012年到2013年库存记录</caption>

3-4

1,使用<a>标签,链接到别一个页面

使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:

<a href=”目标网址”>链接显示的文本</a>

例如:

<a href = "http://www.imooc.com">click here!</a>

上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。

3-5

认识<img>标签,为网页插入图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

语法:

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例:

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解:

1、src:标识图像的位置;

2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF,PNG,JPEG格式的图像文件。

史上最全的HTML、CSS知识点总结,浅显易懂。适合入门新手

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h58612.shtml