HTML的基本使用(适用于Java后端)

目录

注释

基本标签

双标签：

样式标签：

单标签：注意斜杠在后面

常用转移符号：转义符全部以&开头

列表

无序列表

  有序列表

定义列表:

表格

表单

语义化表单：

​编辑

HTML5新特性

表单：

视频：video

 正则校验

 音频：audio

布局标签

内联框架：iframe

 CSS

css有三种写法：

基本选择器：

复合选择器：

后代选择器：空格(具有继承性)

交集选择器：

并集选择器 : h1,h2,h3

子代选择器：上级>当前级

相邻同辈选择器：例如h4+h1。

通用同辈选择器：例如h4~h1。

伪类选择器：选中标签后带一个冒号的叫伪类选择器

盒子模型

常见css样式和标签：

圆角边框 

一些案例

列表案例1(普通列表)：

列表案例2(定义列表)：

---

 

注释

css中  /**/

html中 <!-- -->

基本标签

双标签：

标题标签：<h1>只有1-6</h6>

段落标签：<p>两个相邻的p标签会换行</p>

超链接：<a href="如果是自己写的网页，一般填相对路径"></a>

锚链接:<a href="hello.html#maodian"></a>  

            前提是在hello页面存在锚点  <a name="maodian"></a>

功能邮件:<a href="mailto:308418817@qq.com">请联系我，点击该标签会直接触发邮件功能</a>

a标签搭配样式：

target="_blank"  新开窗口

target="_self" 在当前窗口打开(默认)

text-decoration:none;去除下划线

text-decoration:line-through;横穿下划线

text-decoration:underline;下划线(默认)

text-decoration:overline;上划线

a标签的伪类选择器

如果你要同时设置以上的悬浮效果那么必须按照上面的顺序来写css，否则可能不显示，一般就用到hover。

样式标签：

文本加粗：<strong></strong>    <b></b>

文本倾斜：<em></em>

单标签：注意斜杠在后面

换行标签：<br/>

水平线标签：<hr/>

图标签：<img src="这里一般放的是相对路径，不要放绝对路径"  alt=“图片不存在时显示的替换文字”  title="悬浮提示,当图片不存在是默认显示这个悬浮提示，前提是alt不能存在"/>

常用转移符号：转义符全部以&开头

小于号:&lt;

大于号:&gt;

例如：显示<p>  ==>  &lt;p&gt;

空格符号:&nbsp;

双引号:&quot；

版权符号:&copy;

列表

无序列表:<ul><li></li></ul>    

列表样式li-style-type:disc、square、circle、none；对应实心圆、实心正方形、空心圆、无样式

  有序列表:<ol><li></li></ol>

列表样式li-style-type="1"、"a"、"A"、"I"、"i"

样式可以嵌套

ul与li可以嵌套，甚至有序和无序之间也可以嵌套

列表练习:

        <ul>
			<li>我的电脑</li>
				<ul type="circle">
					<li>本地磁盘(C:)</li>
					<ul type="square">
						<li>我的文档</li>
						<li>我的收藏</li>
					</ul>
					<li>本地磁盘(D:)</li>
					<ul type="square">
						<li>我的游戏</li>
						<li>我的电影</li>
					</ul>
				</ul>
        </ul>

定义列表:<dl> <dt></dt> <dd></dd></dl>

长这样的就是定义列表

<dl>

        <dt>标题</dt>

        <dd>内容</dd>

 </dl>

表格

表格、行、列：table、tr、td

搭配样式：

跨行：rowspan="n"

跨列：colspan="n"

水平偏移：align="left、center、right" 默认左

垂直偏移：valign="top、middle、bottom"默认中

注：上面这两个一般设置表格中的内容位置,可以作用整个表格、行、列

表单

表单：<form></form>

搭配样式:action="url" 、method="表单提交方式，默认为get一般设为post"；

           提交方式若为get，那么当你触发action的时候会把表单的信息显示到跳转的地址栏。

表单中可以提交的东西：

输入框信息、单选复选框信息、下拉列表信息、文件——都是使用input关键字

输入:<input/>

根据type值的不同他可以是

文本输入框:text、密码输入框:password、提交按钮:submit、重置按钮:reset、

复选框:checkbox、单选框:radio、文件:file、隐藏域：hidden。

输入框：type=text、password

搭配样式：

placeholder="背景提示字，比如:请输入账号"

required,必填的框

size：设置框的长度

maxlength:设置输入内容的长度(单位为字符)

readonly="readonly" 不能输入，只能读。一般会给输入框设置默认值value=“默认显示”来使用

单选框、复选框：<input type="radio、checkbok"/>

这里只说一个，假如你想点击文字就选中，该功能叫表单元素的标注。比如说

厦门<input type="radio、checkbok"/>，我不管你是单选框还是复选框此时如果你要选中该选项那么你必须要点击厦门后面那个选择按钮，那我想点击厦门也能选中这个选项你就需要这样改：

<lable for="xm">厦门</lable>

<input type="radio、checkbok" id="xm"/>

下拉列表：

<select>

        <option>选项一</option>

</select> 

隐藏域：<input name="id" type="hidden"/>

这个隐藏域一般是用来配合后端使用的，它是不会显示到html页面的，比如说我注册一个用户，我后端数据库里面一般肯定是有一张用户表的，该表中有一个id，一般来说他是自增的且具有唯一性的，我们都知道一般来说自增的字段赋值时null，那么用户在注册的时候显然是无法为隐藏域赋值的，那么传递给后端到数据库中id就是null，那么好处就不言而喻了。

按钮：<input type="submit、reset"/>提交或者重置

搭配样式：

按钮禁用：disabled="disabled"

默认值：

1. 单选框和复选框在input中使用checked="checked" 设置默认值
2.  输入框在input中使用value="默认值"
3. 下拉列表默认值在option中使用selected="selected"默认值
4. input默认type为text

注意点：一般来说除了提交按钮和清空按钮别的input类型都要为其设置name值用来区分，尤其是复选框checkbox和单选框radio，比如，如果你有两组复选框比如下面的爱好和计划旅游城市，如果你不为他们设置名字那么html会认为这两组复选框checkbox是同一组，那一个是城市一个是爱好怎么可能是同一组？？？单选框就更需要name值了，比如下面的单选框性别，如果不为他们设置name值，他根本不知道男和女这两个单选框是同一组他以为你两是单独的单选框，那么他是两个都可以选的，在提交到后端的数据就肯定达不到业务需求了。

代码演示：

<form action="#" method="post">
            用户名:<input name="username" type="text"/ value="10086"></br>
            密码:<input name="username" type="password" placeholder="请输入密码"/></br>
            爱好：</br>
            唱<input name="hobby" type="checkbox" checked="checked"/>
            跳<input name="hobby" type="checkbox"/>
            rap<input name="hobby" type="checkbox"/></br>
            计划旅游城市:</br>
            大连<input name="city" type="checkbox" checked="checked"/>
            广州<input name="city" type="checkbox"/>
            北京<input name="city" type="checkbox"/></br>
            男<input name="sex" type="radio" checked="checked"/>
            女<input name="sex" type="radio"/></br>
            <input name="file1" type="file"/></br>
            <input value="注册/提交" type="submit"/>
            <input value="重置" type="reset"/>
        </form>

  当你点击注册提交会触发表单的action进行跳转，并且把表单中的输入信息发送到目标路径。

除了以上的内容，表单还可以提交一个长文本输入框：

语义化表单：

语义化表单的使用方式跟普通的表单使用方式一模一样只是外层的标签不再使用form改为fieldset就好了。

HTML5新特性

前面说的都是HTML1的东西，我们现在来说说html5，其实html5只是在原来的html1新增了一些东西罢了。

表单：

html5中表单新增了视频、音频、正则校验

视频：video

注意点：一个video只对应一个视频文件

controls：播放开关。不加的话在html中无法播放，他只能显示视频的第一幕也就是类似于一张图片。

注意：为啥我前面要写三个？

 因为这个是为了迎合浏览器的兼容性，某些浏览器可能只支持某种格式的视频，那么我就把视频的格式都写上去，这样无论是你是那种浏览器都可以支持，浏览器会从第一种格式开始往下找如果找到能支持的视频格式则不再往下找，虽然我写了三种，但是实际上浏览器只会读取一种。

其实准确的格式应该这样写

就是说浏览器不会读取这个src来确定你的视频格式,你不写的话他会逐个尝试播放，但是如果你写了指定格式type="video/视频格式",浏览器就直接去匹配这个格式了，不会尝试播放，这样效率就更高。

视频主动播放：autoplay

<video controls autoplay></video>

 完整正确的写法：

<video controls>

        <source src="url.webm" type="video/webm" />

        <source src="url.mp4" type="video/mp4" />

        <source src="url.wvm" type="video/wvm" />

        该浏览器不支持此视频格式

</video>

 正则校验

 最后一个跟普通的输入框的区别是他在框里面会有一个x

也可以自定义正则表达式：

比方说我定义电话的正则表达式pattern="^1[358]\d{9}$";

 音频：audio

音频跟视频的用法一模一样，只需要把video标签换成audio即可

示例：

<audio controls>
                <source src="无名.mp3" type="audio/mpeg" />

                <source src="无名.ogg" type="audio/ogg" />

                <source src="无名.考虑浏览器兼容性这里可以放多个格式"/>

                该浏览器不支持此音频格式
 </audio>

注意：这里面mp3对应的格式为mpeg

布局标签

内联框架：iframe

内联框架指的就是在网页内部构建一个窗口，该窗口可以放网址， 一个iframe代表一个内联框架，一般来说他是搭配a标签来使用的，比如下面的效果图，我点击三个不同的超链接会把右边的内联框架切换对应的url

 CSS

css有三种写法：

1.行内样式：直接在标签里面写样式比如<h1 style="color:red; font-size:10px"></h1>

2.内部样式:在head标签里面写

        <head>

                <style type="text/css">

                </style>

        </head>

3.外部样式：建立css文件、在html文件中的head标签中用link标签引入

      <head>

                <link href="src.css" type="text/css" rel="stylesheet" />

        </head>

优先级：行内样式>外部样式>内部样式

建议先在内部写样式，写完后再把样式改成外部样式，

基本选择器：

标签选择器：比如h1、p等,使用方式直接写标签名

类选择器：就是标签的class值，使用方式(.class值)

id选择器:就是标签的id值，使用方式(#id值)

优先级:id选择器>类选择器>标签选择器

注意：id选择器对应的标签只能有一个，不能重复，也就是说两个标签不可公用一个id

复合选择器：

后代选择器：空格(具有继承性)

<body>

        <ul>

                <li></li>

        </ul>

</body>

使用方法：li是body的后代也是ul的后代，我要选中li，可以这样写ul li{}或者body li{} 

交集选择器：

连续书写用点隔开（不具有继承性，也就是说,必须是连续的两层标签即  上级层.当前层）,两者都必须选中

<body>

        <ul>

                <li></li>

                <li class="aa"></li>

        </ul>

</body>

使用方法：我要选中li，如果我要用交集选择器可以这样写li.aa{} ，第一次选中li，覆盖了

                  两个li，第二次选中.aa，我两次选中都覆盖了这个<li class="aa"></li>

                  但是不可以这样写body.li{} ,也不可能ul.aa{},因为body 和ul都没有选中

                <li class="aa"></li>，在交集选择器中这个li和body,不具有继承性。

并集选择器 : h1,h2,h3

子代选择器：上级>当前级

<body>

        <ul>

                <li></li>

                <li class="aa"></li>

        </ul>

</body>

使用方法：选中li 即 ul>li不可body>li

相邻同辈选择器：例如h4+h1。

该选择器首先判定h4的同辈层，在从同辈层中找到相邻的目标h1，但是此相邻不会选中上面的只会选中下面的第一个。

比如说：h4+h1{} 首先找到h4同辈层，所有的h1和h4都属于同辈层，在找到与h4相邻的h1，这里面有两个h4，相邻的作用域只会找h4后面的h1，不会作用到h4前面的h1，那么也就是效果如下：

通用同辈选择器：例如h4~h1。

该选择器首先判定h4的同辈层，在从同辈层中找到相邻的目标h1，但是此相邻不会选中上面的只会选中下面的所有h1。

伪类选择器：选中标签后带一个冒号的叫伪类选择器

li

选择第一个li——li:first-child{}

选择最后一个li——li:last-child{}

选择第二个li——li:nth-child(2){}  括号里面2代表第二个

<li></li>

<li></li>

<li></li>

li:first-child { ....} 匹配的是li的上一级父类的第一个子类标签如果是li则选中，如果不是则不选中

p

选择第一个p——p:first-of-type{}

选择最后一个p——p:last-of-type{}

选择第二个p——p:nth-of-type(2){}  括号里面2代表第二个

<p></p>

<p></p>

<p></p>

p:first-of-type{.....} 匹配的是只能是body的子类且第一个定义p的标签，如果还有的p标签不是body的子类，而在其他父类中那么也会一起被选中

表单

直接看例子吧

<form action="#">

        用户名<input  type="text" name="username"/>

        密码<input  type="password" name="pwd"/>

</form>

input[name]{}  选中了input标签，并且是带有name属性的input

input[name="username"]{}  选中了input标签，并且name属性值为username的input

表单还有几个正则校验(开头^   结尾$  包含*)

input[name^=user]{}  选中了input标签，其次属性name的值以user开头(随便填啥都可以u开头也可以)

input[name$=e]{}  选中了input标签，其次属性name的值以e结尾(随便填啥都可以name结尾也可以)

input[name*=na]{}  选中了input标签，其次属性name的值包含na(随便填啥都可以)

盒子模型

首先盒子模型的概念你必须要考虑平面和立体两个概念。其次你必须要知道我们其实很多html元素都是盒子，比如h1、p、div等等等

平面图关系：

立体图关系：(覆盖关系：内容覆盖背景图片，背景图片覆盖背景颜色，背景颜色覆盖盒子模型

                        即内容>背景图片>背景颜色>盒子模型)

 从B盒子到A盒子的内容，从立体的角度去看这个顺序，他的穿越顺序是：外边距>边框>背景颜色>背景图片>内容。

一个盒子由外到内可以分成四个部分：margin（外边距——两个相邻盒子之间的边框距离）、border（边框）、padding（内边距——边框与内容的距离）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

<style>
            p{
                /*先说边框样式，我用p标签作为一个盒子*/

                /*边框粗细*/
                border:solid 3px; /*边框粗细*/

                
                /*border-color:red; 边框上下左右全是红色*/
                /*border-color:red yellow; 边框上下红，左右黄*/
                /*border-color:red yellow blue; 边框上红，左右黄，下蓝*/
                border-color:red yellow blue green; /*边框上右下左对应，红黄蓝绿*/
                /*这样写也可以
                border-top-color:red;
                border-right-color:yellow;
                border-bottom-color:blue;
                border-left-color:green;
                */

  其他的内边距外边距都是大同小异的。
            }
 </style>

常见css样式和标签：

标签：

 div(块级元素)和span(内联元素)：作用都相当于一个无样式的盒子,他们的最大区别是div与相邻(包括嵌套盒子内部)的盒子之间会换行，span不会换行。例如：

<p>哈哈哈<div>哈哈哈</div>哈哈哈</p> 这三个哈哈哈会换行

<p>哈哈哈<span>哈哈哈</span>哈哈哈</p> 这三个哈哈哈不会换行

样式：

文本

color:字体颜色单位有：#16进制、单词、rgba(这里会有4个数字，最后一个范围在0-1，代表透明度)；

font-size:字体大小

字体粗细：font-weight:normal、bold、Npx;(细、粗、自定义)       

font-family:黑体,样式2；注意：字体一般在开发中会为了考虑浏览器兼容性建议写多个。

font-style:italics；字体倾斜

line-height:设置文字行高，行高的意思就是上线两条线的高度，其实就好比如单行本每一行的高度。

text-indent:2em;文本开头缩进2

text-shadow:red 10px 10px 5px; 文字阴影，具体效果自己去实践.

盒子

background-color:背景颜色

margin：0 auto;上下为0，左右自适应。效果是水平居中。

列表

无序列表：li-style-type:disc、square、circle、none；

                对应实心圆、实心正方形、空心圆、  无样式

                  li-style-image:url(path);可以放图片

有序列表样式li-style-type="1"、"a"、"A"、"I"、"i"

                 

背景图片

background-imge:url(path)；这样写如果你的图片小的话，他会重复图片平铺盒子background:url(path) no-repeat；去重图片，注意需要把imge去掉

鼠标悬浮：

标签：hover{

        这里面可以写任意的样式，比如鼠标悬浮改变字体大小、颜色、给图片加边框、改变鼠标样式等等等}

圆角边框 

首先明白一点什么标签可以充当边框，一般来说标签都可以充当边框，就是可以为他设置border就可以充当边框，比如div、span、p等等，切勿以为只有边框只有输入框。

其次，圆角边框可以设置半圆、扇形等，只需要把对应的角的弧度半径设置成边框边长即可。

标准文档流

块级元素

1.   块元素会在页面中独占一行（自上向下垂直排列）
2. 默认宽度是父元素的全部（会把父元素撑满）
3. 可以设置宽高，默认高度是被内容撑开（子元素）
4. 常用元素有：div h1~h6 p ul ol li dl dt dd，以及 table form等
5. 可以通过display：inline；转换成内联元素

内联元素

1. 行内元素不会独占页面的一行，只占自身的大小

2. 行内元素在页面中从左向右进行排列，如果一行中容纳不下。

3. 有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）

4. 不可设置宽高， 行内元素的默认宽度和高度都是被内容撑开。

5. 常见元素有：a span b i strong em del等

6. 可以通过display：block；转换成块级元素

display标签

可以通过 display 属性对元素进行类型转换：

display:none; /* 元素不显示 */
display:block; /* 元素以块级形式展示 */
display:inline; /* 元素以行内形式展示 */
display:inline-block; /* 元素以行内形式排列，以块级形式展示 ，可以设置宽高，大体上看是一行，内部元素是以块级存在，也就是把n个块级元素以行内排序。*/
 

常见样式：

vertical-align 属性设置元素的垂直对齐方式，只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。取值如下：

内层div的margin-top影响外层div——引出外边距合并Collapsing margins

 今天才算是了解边距合并。正如一位前辈所言，每一个CSS的坑，都让你学到不少知识。

<style>
			
			*{margin:0;padding:0;}
			header{
				width:100%;
				height:150px;
				background-color:gray;
				}
			.header-div{
				background-color:pink;
				width:800px;
				height:80px;
				margin:50px auto 0; 
			}
			
		</style>
	</head>
	<body>
		<header>
			<div class="header-div">
				<nav class="top-nav">
					<ul>
						<li><a href="#">旅游天地</a></li>
						<li><a href="#">美食城</a></li>
						<li><a href="#">成长体系</a></li>
						<li><a href="#">当地特色</a></li>
						<li><a href="#">重点推荐</a></li>
					</ul>
				</nav>
				<div class="top-right">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>
		</header>
	</body>

我们看效果图可以发现.header-div的css样式margin:50px auto 0;把外层的header盒子的margin-top也一同降下来了。出现原因是符合垂直边距合并的条件。顶部发生合并，也就是本文的原因。注意发生条件是：外部div没有border，没有padding，而且与第一个子div之间没有任何间隔。

1，给外面div加padding-top:1px可以解决。
对于margin-top分三种情况：
（1）两个margin-top都是正数。margin-top:1px不行，原因是合并取其大。
（2）一正一负。如margin-top:-30px;两者互相抵消。离顶部距离等于30-(40/30/20)，如果是-40之类的话，顶部一部分被隐藏了
（3）两个都是负值。
2，给外面div加border:1px solied transparent;

另外，如果在内层div的上面有内容的话，也是正常的。由于这是不可能的，所以就没有单列一条。

二、非字面解决办法

3，为父元素添加float:left可以。但是仅设置子元素float:left不行。
(No.1)Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

[4]，为父元素添加overflow：hidden；样式即可（完美）。overflow可以的原因是生成了新的块元素。
(No.2)Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

5，为父元素添加position:abosulte可以，relative不行。子元素设置position任何值都不行。
(No.3)Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

6，为子元素加display:inline-block也可以。
(No.4)Margins of inline-block boxes do not collapse (not even with their in-flow children).

疑问：float:left和position:absolute时上部有很大的空隙

底部也会发生类似的合并。
(No.7)The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

-------------------- 两个兄弟元素之间的margin合并情况 -----------------------------
(No.5)The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.（两个<div></div>其它内容<div></div>）

-------------------- 一个内部元素自身与in-flow子孙的margin合并的情况 -----------------------------
(No.8)
A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
结论：与测试事实不符。

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
简单讲：根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠

浮动

浮动的概念：先压缩目标元素，释放空间，再移动本身元素。

假设我要把第二个图片左浮动，首先他会把第一个div的宽高压缩到跟实物大小一样，然后释放右边的空间，此时右边的空间就跟第一个div没关系了，然后第二个div就会往上面填充

 浮动值就是左浮动或者右浮动。

溢出

当元素超过外层盒子范围时默认会溢出显示元素，此时可以使用overflow标签来操作。

overflow:对应的值有

hidden—— 溢出部分隐藏。

scroll——无论是否溢出，都有水平、垂直滚动条。

auto——自动识别水平和垂直是否溢出，溢出则出现滚动条，没有溢出则不出现滚动条。

 定位 

相对定位 relative

相对于自己本身，比如

{position:relative；

right：50px;在移动过后当前本身向右50到达原来本身，也就是站在原来本身的角度来看当前本身向左移动了50px;以此类推top、left、bottom也是如此。如果理解不了就记住相对定位的移动是按照相反方向移动的。

一般使用的时候前面加个负号这样就符合正向逻辑了

}

绝对定位

分两种情况：

是否存在“已经定位好且宽高设置好的父元素”？

1.不存在，则参照目标是浏览器，例如

position:absolute;

right:30px;

红色边框为浏览器，此时我设置黄色盒子为绝对定位且他没有父级盒子，那么它参照浏览器，设置了右：30px；指的是距离浏览器右边框距离30px；如上图。并且它会释放原来的空间。

2.存在：

存在父元素就是把父元素当做参照点，并且移动后回释放原来的空间，移动方式还是一样的比如说：

原图：移动后

 外边蓝色框为父元素，前提是他已经定位好，并且父元素大小也要设置好，然后我把黄色框设为绝对定位，右：100px;

也就是他距离右边蓝色框为100px;并且我们看移动后原来黄色框的位置就释放了，蓝色框就自动上移填充了。

固定定位

position:fixed;它的参照物只能是浏览器，不会随着滚动条的移动和移动

一些案例

列表案例1(普通列表)：

<html>
	<head>
		<title>导航案例</title>
		<style>
			
			*{margin:0;padding:0;}
			#game_list{
				border:solid 1px pink;
				margin:10px auto;
				width:120px;
				padding:10px 15px;
				background:url(imges/logo.png) no-repeat 1px 15px;
				
			}
			h1{font-size:20px;
				padding-left:7px;
			}
			#game_list ul{
				
			}
			#game_list ul li{
				list-style:none;
				border-top:solid 1px gray; 
				background:url(imges/choice_logo.png) no-repeat 94px 2px;
			}
			#game_list ul li a{
				text-decoration:none;
				line-height:10px;
				}
			#game_list ul li a:hover{
				color:green;
				}
		</style>
	</head>
	<body>
		<div id="game_list">
			<h1>游戏列表</h1>
			<ul>
				<li><a href="#">蜘蛛纸牌</a></li>
				<li><a href="#">坦克大战</a></li>
				<li><a href="#">星际红警</a></li>
				<li><a href="#">qq飞车</a></li>
			</ul>
		</div>
	</body>
</html>

效果图

列表案例2(定义列表)：

这种列表考虑用定义列表去做。

定义列表:

<dl>

        <dt></dt>

        <dd></dd>

</dl>