My-Belief
My-Belief

从零开始学HTML&&CSS&&JavaScript（二）——HTML常用元素续集

HTML学习及进阶

  • 一 HTML常用元素续集
    • 5.HTML5的列表相关元素
    • 6.HTML5的图像相关元素
    • 7.HTML5的表格相关元素
    • 8.HTML5的框架相关元素

一 HTML常用元素续集

5.HTML5的列表相关元素

列表有有序列表\、无序列表和定义列表之分分别是ol和ul和dl：下别以代码的形式看一下效果：


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>列表相关标签title>
head>	
<body>

<ul>
	<li>疯狂Java讲义li>
	<li>轻量级Java EE企业应用实战li>
	<li>疯狂Android讲义li>
ul>

<ol start="2" type="I">
	<li>疯狂Java讲义li>
	<li>轻量级Java EE企业应用实战li>
	<li>疯狂Android讲义li>
o1>

<dl>
	
	<dt>疯狂Java体系dt>
	<dd>疯狂Java讲义dd>
	<dd>轻量级Java EE企业应用实战dd>
	<dd>疯狂Android讲义dd>
	
	<dt>作者其他图书dt>
	<dd>Struts 2.1 权威指南dd>
	<dd>基于J2EE的Ajax宝典dd>
d1>
body>
html>

代码在网页上的运行效果如下：
从零开始学HTML&&CSS&&JavaScript（二）——HTML常用元素续集_第1张图片
在网页上可以很容易的看到效果，无序列表前有点作为标识利用其list-style-type：可以修改其属性一般可以用于导航栏的制作，在制作中一般list-style-type:none.在适当的修改li的宽和高。有序列表前有大写罗马数字作为标识，当然也可以用dl定义自定义列表

6.HTML5的图像相关元素

图像的相关元素有很多，下面看下一段代码和注释了解下


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<img src="img/疯狂java联盟.png" alt="疯狂java的logo"/><br />
		
		<img src="img/疯狂java联盟.png" width="300px" height="120px" alt="疯狂java的logo"/><br />
		
		<img src="img/疯狂java联盟.png" width="300px" height="120px" border="0" usemap="#test" alt="疯狂java的logo"/>
		
		
		<map name="test" id="test">
			
			<area shape="circle" coords="57,55,25" href="https://www.baidu.com" alt="baidu.com"/>
			<area shape="poly" coords="188,28,185,510,200,74,224,72,246,51" href="http://www.crazyit.org" alt="crazyit.org"/>
		map>
	body>
html>

关于img标签的简单的使用方法大家应该都知道，大家看代码的map部分会发现其中用了两个area分别指定
了两个区域下面看下在页面上的情况：

从零开始学HTML&&CSS&&JavaScript（二）——HTML常用元素续集_第2张图片
图中的小红旗部分就是第二个area的区域，当鼠标悬停在改区域时，点击该区域就可以调到相应的href链接对应的地址。

7.HTML5的表格相关元素

表格在前端页面的应用非常多，下面给大家介绍下表格的用法：


<html>
	<head>
		<meta charset="UTF-8">
		<title>表格相关元素title>
	head>
	<body>
		<table style="width:400px" border="1">
			<caption><b>疯狂Java体系图书b>caption>
			<tr>
			<th>书名th>
			<th>作者th>
			tr>
			<tr>
			<td>疯狂Java讲义td>
			<td>李刚td>
			tr>
			<tr>
			<td>轻量级Java EE 企业应用实战td>
			<td>李刚td>
			tr>
		table>
		
		<table style="width:240px" border="1">
			<tr>
			<td rowspan="2">跨2行的单元格td>
			<td>普通单元格td>
			tr>
			<tr>
			<td>普通单元格td>
			tr>
			<tr>
			<td colspan="2">跨2列的单元格td>
			tr>
			<tr>
			<td>普通单元格td>
			<td>普通单元格td>
			tr>
		table>
		
		<table border="1" style="width: 400px">
			<caption><b>疯狂Java体系图书b>caption>
			<thead>
			<tr>
			<th>书名th>
			<th>作者th>
			tr>
			thead>
			<tfoot>
			<tr>
			<td colspan="2" style="text-align:right">现总计: 2本图书td>
			tr>
			tfoot>
			<tbody>
			<tr>
			<td>疯狂Java讲义td>
			<td>李刚td>
			tr>
			<tr>
			<td>轻量级Java EE企业应用实战td>
			<td>李刚td>
			tr>
			tbody>	
		table>

		
		<table style="background-color :black;
			border -collapse : separate ; border- spacing:1px; ">
			<caption><b>疯狂Java体系图书b>caption>
			
			<colgroup style="background-color :white;">
			
			<col style="width: 160px"/>
			
			<col span="2" style="width :100px"/>
			co1group>
			<thead>
			<tr>
			<th>书名th>
			<th>作者th>
			<th>价格th>
			tr>
			thead>
			<tfoot>
			<tr>
			<td colspan="3" style="text-align:right">现总计: 2本图书td>
			tr>
			tfoot>
			<tbody>
			<tr>
			<td>疯狂Java讲义td>
			<td>李刚td>
			<td>109td>
			tr>
			<tr>
			<td>轻量级Java EE企业应用实战td>
			<td>李刚td>
			<td>89td>
			tr>
			tbody>
		table>
	body>
html>

下面是代码在页面上的运行结果:
从零开始学HTML&&CSS&&JavaScript（二）——HTML常用元素续集_第3张图片

8.HTML5的框架相关元素

框架的想更换元素比较简单,下面看一段代码:


<html>
	<head>
		

		<title>内联框架title>
	head>
	<body>