好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML标签图文详解(二)_html/css_WEB-ITnose

HTML标签超详细的图文演示再来一波~~~

如果还没有看过昨天的福利的,那可要抓紧喽,传送门:HTML标签----图文详解

本文主要内容

清单标签
表格标签
框架标签及内嵌框架 表单标签及语义化
多媒体标签

清单标签(列表标签)

列表标签分为三种。

1、无序列表 ,无序列表中的每一项是

英文单词:un list。
例如:

 	 默认1 	 默认2 	 默认3   

效果:

属性:

type="属性值"。属性值可以选: disc(实心原点,默认),square(实心方点),circle(空心圆)。
效果如下:

不光是 标签有type属性, 里面的 标签也有type属性(虽然说这种写法很少见)。效果如下:


2、有序列表 ,里面的每一项是

英文单词:Order List。
例如:

 		 呵呵哒1 	 呵呵哒2 	 呵呵哒3   

效果:

属性:

type="属性值"。属性值可以是:1(阿拉伯数字,默认)、a、A、i、I。结合start属性表示从几开始。

举例:

 		 呵呵 	 呵呵 	 呵呵   		 嘿嘿 	 嘿嘿 	 呵呵   		 哈哈 	 哈哈 	 哈哈   		 么么 	 么么 	 么么   

效果如下:

3、定义列表

英文单词:define list,没有属性。

:列表的标题,define title
:列表的列表项

举例:

 	 第一条 	 你若是觉得你有实力和我玩,良辰不介意奉陪到底 	 我会让你明白,我从不说空话 	 我是本地的,我有一百种方式让你呆不下去;而你,无可奈何 	 第二条 	 良辰最喜欢对那些自认能力出众的人出手 	 你可以继续我行我素,不过,你的日子不会很舒心 	 你只要记住,我叫叶良辰 	 不介意陪你玩玩 	 良辰必有重谢   

效果:

表格标签

表格标签用 表示。
一个表格 是由每行 组成的,每行是由 组成的。
所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。

例如,一行的单元格:

	 		 			  			  			  			  		 	  

上面的表格中没有加文字,所以在生成的网页中什么都看不到。
例如,3行4列的单元格:

	 		 			 生命壹号 			 23 			 男 			 黄冈 		 		 			 许嵩 			 29 			 男 			 安徽 		 		 			 邓紫棋 			 23 			 女 			 香港 		 	  

效果:

上图中的表格好像没看到边框呀,不急,接下来看看 标签的属性。

的属性:

border:边框。像素为单位。
width:宽度。像素为单位。
height:高度。像素为单位。
align: 表格 的对齐方式。属性值可以填:left right center。
注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签 进行设置)
cellpadding:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性dir="rtl",那就指的是内容到右边那条线的距离。
cellspacing:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
bgcolor="#99cc66":表格的背景颜色。
background="路径src/...":背景图片。
背景图片的优先级大于背景颜色。
bordercolorlight:表格的上、左边框,以及单元格的右、下边框的颜色
bordercolordark:表格的右、下边框,以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。
dir:公有属性,单元格内容的排列方式(direction)。 可以 取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)
既然说dir是共有属性,如果把这个属性放在任意标签中,那表明这个标签的位置可能会从右开始排列。

单元格带边框的效果:

:行

一个表格就是一行一行组成的嘛。
属性:

dir:共有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)
bgcolor:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。


:单元格

属性:

align:内容的横向对齐方式。属性值可以填:left right center。
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。
valign:内容的纵向对齐方式。属性值可以填:top middle bottom
width:绝对值或者相对值(%)
height:单元格的高度
bgcolor:设置这个单元格的背景色。
background:设置这个单元格的背景图片。


单元格的合并

如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:

colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
效果举例:(横向合并)

效果举例:(纵向合并)

:加粗的单元格。相当于 +

属性同 标签。


:表格的标题。使用时和tr标签并列

属性:align,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom
效果:

表格的 标签、 标签、 标签

这三个标签有与没有的区别:

1、如果写了,那么这三个部分的 代码顺序可以任意 ,浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
2、当表格非常大内容非常多的时候,如果用thead、tbody、tfoot标签的话,那么 数据可以边获取边显示 。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。

举例:

  	 		 		 			 生命壹号 			 23 			 男 			 黄冈 		 		 		 		 			 许嵩 			 29 			 男 			 安徽 		 		 		 		 			 邓紫棋 			 23 			 女 			 香港 		 		 	    

效果:

框架标签

如果我们希望在一个网页中显示多个页面,那框架标签就派上用场了。

注意,框架标签不能放在 标签里面,因为 标签代表的只是一个页面,而框架标签代表的是多个页面。
框架的集合用 bordercolor="#00FF00":给框架的边框定义颜色。这个属性在框架集合 中同样适用。
颜色这个属性在IE浏览器中生效,但是在google浏览器中无效,不知道为啥。

frameborder="0"或frameborder="1":隐藏或显示边框。

name:给框架起一个名字。
利用name这个属性,我们可以在框架里进行超链。
举例:

效果:

内嵌框架

内嵌框架用 内嵌框架inner frame:嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持,可能有其他浏览器也支持,暂时我不清楚)。
属性:

src="subframe/the_second.html":内嵌的那个页面
width=800:宽度
height=“150:高度
scrolling="no":是否需要滚动条。默认值是true。
name="mainFrame":窗口名称。公有属性。

效果:

内嵌框架举例:(在内嵌页面中切换显示不同的压面)

   	默认显示文字页面
点击进入图片页面
点击进入表格页面

嘿嘿

效果演示:

表单标签

表单标签用

效果:

四种按钮的举例:

	 

效果:

:下拉列表标签

标签里面的每一项用 表示。

标签的属性:

multiple:可以对下拉列表中的选项进行多选。没有属性值。
size="3":如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。

标签的属性:

selected:预选中。没有属性值。

举例:

	 

效果:

标签:多行文本输入框

属性:

value:提交给服务器的值。
rows="4":指定文本区域的行数。
cols="20":指定文本区域的列数。
readonly:只读。

举例:

	 

效果:

上图的红框部分表示,我在文本区域进行了换行,所以显示的效果也出现了空白。


表单的语义化

比如,我们在注册一个网站的信息的时候,有一部分是必填信息,有一部分是选填信息,这个时候可以利用表单的语义化。
举例:

	 

效果:

标签:for属性配合id一起用形成标注。暂略。

多媒体标签

标签:播放背景音乐

属性:

src="音乐文件的路径"
loop="-1":属性值代表播放次数,-1代表循环播放。

举例:

  	     

运行效果:
打开网页后,在IE 8中播放正常,播放时网页上显示一片空白。在google浏览器中无法播放。

标签:播放多媒体文件(音频、视频等)

备注:视频格式可以支持 mp4、wav等,但不是所有视频格式都支持。

属性:

src="多媒体文件的路径"
loop="-1":属性值代表播放次数,-1代表循环播放。
autostart="false":打开网页时,禁止自动播放。默认值是true。
volume="100":设置默认的音量大小,测试发现这个值好像不起作用哦。

标签播放音频举例:

  	     

IE 8中的运行效果:

google浏览器中的运行效果:

注:在HTML5中新增了 标签播放视频。

:移动标签

如果在这个标签里设置了内容,那么,打开网页时,内容会像弹幕一样自动移动。
属性:

direction="right":移动的目标方向。属性值可以是:left(从右向左移动,默认值)、right(从左向右移动)、up(从下向上移动)、down(从上向下移动)。

behavior="slide":行为方式。属性值可以是:slide(只移动一次)、scroll(循环移动,默认值)、alternate(循环移动)、。
alternate和scroll属性值都是循环移动,区别在于:假设在direction="right"的情况下,behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···

scrollamount="30":移动的速度
loop="3": 循环多少圈。负值表示无限循环

scrolldelay="1000":移动一次休息多长时间。单位是毫秒。

举例:

	 我来了  

效果:

查看更多关于HTML标签图文详解(二)_html/css_WEB-ITnose的详细内容...

  阅读:41次