列表是什么，列表分为哪几种？

 

　　HTML列表就是显示列表使用的。列表分为无序列表，有序列表和定义列表3种

 

　　无序列表

 

　　无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

 

　　无序列表始于 <ul> 标签。每个列表项始于 <li>。

 

　　如下代码：

 

　　<ul><li>Coffee</li><li>Milk</li></ul>

 

　　页面上显示如下

 

　　Coffee

 

　　Milk

 

　　这就是有无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

　　有序列表

 

　　同样，有序列表也是一列项目，列表项目使用数字进行标记。

 

　　有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

 

　　如下代码：

 

　　<ol><li>Coffee</li><li>Milk</li></ol>

 

　　页面上显示如下

 

　　定义列表

 

　　自定义列表不仅仅是一列项目，而是项目及其注释的组合。

 

　　自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

 

　　<dl><dt>Coffee</dt><dd>Black

 

　　hot drink</dd><dt>Milk</dt><dd>White cold

 

　　drink</dd></dl>

 

　　页面上显示如下：

 

　　定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

　　列表标签

 

　　图像标签（<img>）和源属性（Src）

 

　　在 HTML 中，图像由 <img> 标签定义。

 

　　1）<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

 

　　src源属性，要在页面上显示图像需要用到这个。src 指 "source"。源属性的值是图像的 URL 地址。

 

　　定义图像的语法是：

 

　　URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于  的 images 目录中，那么其 URL 为

 

　　浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

 

　　替换文本属性（Alt）

 

　　alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

 

　　在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

 

　　<map>和<area>

 

　　<map>定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像。

 

　　<area>标签定义图像映射中的区域，即带有可点击区域的图像（注：在 HTML 中，<area> 没有结束标签；在 XHTML 中，<area>必须正确地关闭；）。

 

　　area 元素总是嵌套在 <map> 标签中。

 

　　<img

 

　　src="planets.jpg" border="0" usemap="#planetmap"alt="Planets"

 

　　/><map name="planetmap" id="planetmap"><area shape="circle"

 

　　coords="180,139,14"href="venus.html" alt="" /><area

 

　　shape="circle" coords="129,161,10"href="mercur.html" alt=""

 

　　/></map>

 

　　如需转载，请注明文章出处和来源网址：

 

　　下面给大家讲一下常用的。

 

　　这是一个简单的登录界面：

 

　　代码如下：

 

　　HTML代码：

 

　　CSS代码：

 

　　如果想再好看一些，可以通过   <img>标签添加图片，也可以在CSS中，用background属性添加背景，或者是好看的颜色。同学们可以一个一个的百度上面的标签，然后看相关的用法，再实践操作一下。其实HTML真的不难，它与C,C++,python,这些不同的是，HTML没有逻辑，只需要也不需要算法，只要你记住标签的用法就行，然后通过CSS去定位，把元素放到该放的位置。

 

　　有同学看到DW可以直接用鼠标点点点就能做网页，别想多了，这样做出的网页没人敢用，而且不利于记住代码。我之前面试过前端，面试老师当着我的面审阅了试卷，HTML和CSS部分全对，就Javascript全错，毕竟我都没怎么学JS，都是用的框架套函数进去。面试的时候可是手写代码，如果不记代码的话，经常依赖代码提示工具，很容易写错。所以平时尽量一个一个的敲。

 

　　上面这个也不能，所用到的代码和前面登录界面的相差不大。学完这些，差不多也算是入门了，像头条号的管理界面，差不多也可以写出来。

 

　　如需转载，请注明文章出处和来源网址：

 

　　align和float属性--------用于将元素相对其它内容放置

 

　　text-align和vertical-align------------控制网页内容的对齐

 

　　边距在元素之外，填充在元素之内

 

　　1.margin 样式单边距 此属性是处理元素外面的间距

 

　　可以设置边距为具体的长度（像素，点，ems）或者百分比。如是百分比，百分比是基于整个网页而不是元素大小的（margin-left=25%，表示元素的左边距将是整个页面宽度的25%）

 

　　margin属性包括margin-top;margin-right;margin-bottom;margin-left 分别是上，右，下，左边框的宽度值

 

　　2.padding 填充 在元素的矩形区域内部添加空间

 

　　3.border-width 定义四个边框的宽度：

 

　　border-width:border-top-width border-right-width border-bottom-width border-left-width; 分别是上，右，下，左边框的宽度值

 

　　4.text-align样式使其元素在其定界区域内水平对齐

 

　　5.vertical-align属性 使元素在垂直对齐。指定元素如何与其父元素对齐（在有些情况下，是与网页中元素的当前行对齐）。“当前行”指的是显示在元素内的元素所处的垂直位置，换句话说，就是内联元素。

 

　　属性取值

 

　　top:将元素的顶部与当前行对齐

 

　　middle:将元素的中心与当前行对齐

 

　　bottom:将元素的底部与当前行对齐

 

　　text-top:将元素的顶部与父元素的顶部对齐

 

　　baseline:将元素的基线与父元素的基线对齐

 

　　text-bottom:将元素的底部与父元素的底部对齐

 

　　6.float属性使元素能在设计中到处移动，从而让其他元素围绕它们。元素的浮动是水平而不是垂直方向的，只有两种可能值：right和left.使用这两个值时，浮动元素将浮动到容器元素所允许的最右或者最左。

 

　　7.clear属性清除浮动元素

 

　　取值：left,right,both,none ,inherit

 

　　8.盒子模型

 

　　边距（margin）--> 边框（border）-->填充（padding）-->内容（content）

 

　　9.position属性 定位类型

 

　　relative:相对定位，默认定位类型。理解为棋盘上棋子的排列：棋子从左往右排列，达到边缘时移到下一行。棋子排列方式是由display决定。

 

　　样式属性display的值为block的元素自动放在下一行（默认），而为inline的元素自动放在同一行，位于前一个元素后面

 

　　absolute:绝对定位，能够指定元素的矩形局域相对于父元素区域的位置

 

　　属性值：

 

　　left:左边的位置偏移

 

　　right:右边的位置偏移

 

　　top:顶部的位置偏移

 

　　bottom:底部的位置偏移

 

　　10.z-index属性 控制元素的堆叠顺序。z-index值较大的元素在z-index值较小的元素上面

 

　　11.文本流（即内容流） 控制的样式属性有如下：

 

　　float: 决定文本如何沿元素绕排 可设置为left或right 如将图像的float属性设置为left，图像将放在文本的左边

 

　　clear:禁止文本沿元素绕排

 

　　overflow:在元素太小而不能包含所有文本时控制文本的溢出方式，可设置为visible,hidden,scroll