首页 > 代码库 > html入门（仅适合初学者）
html入门（仅适合初学者）
基本格式：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
设置网页背景颜色：
<body bgcolor="颜色">
</body>
设置网页背景图片：
<body background="图片.jpg">
</body>
添加网页背景音乐：
在XX目录下放入xx.mp3应用文件，创建XX.html网页
<body>
<bgsound src="http://www.mamicode.com/XX/xx.mp3" loop="播放次数"> //注：loop=-1，表示无限循环
</body>
多媒体资源设置：
<body>
<embed src="http://www.mamicode.com/Flash动画.swf" width="宽度"></embed> //注：播放Flash动画文件
<embed src="http://www.mamicode.com/视频.wmv" width="宽度" height="高度" autostart="true"></embed> //注：播放视频文件，autostart判断文件是否自动播放（用true或false表示）
</body>
换段：
<p></p>
设置字体大小：
<font size="数字"></font>
字体风格（如：宋体）：
<font face="宋体"></font>
字体颜色：
<font color="颜色"></font>
强制换行：
<br/>
不需要换行可使用：
<nobr>内容</nobr>
字体样式：
<i>内容</i> //注：斜体(方法一)
<em>内容</em> //注：斜体(方法二)
<b>内容</b> //注：粗体(方法一)
<strong>内容</strong> //注：粗体(方法二)
<u></u> //注：下划线
水平分割线：
<hr/> //画线
<hr size="数字"/> //线下有阴影
<hr noshade/> //分隔线呈现单色
自动换行：
<pre>内容</pre>
在网页中插入图片：
<img src="http://www.mamicode.com/图片.jpg" border="数字" width="数字" height="数字"/> //border设置边框的粗细
图文对齐：
<img src="" align="top、middle、bottom、left、right">
超级链接：
<html>
<head>
<title>a.html</title>
</head>
<body>
<a href="http://www.mamicode.com/b.html"></a> //链接到b.html
</body>
</html>
----------------------------------------------
<html>
<head>
<title>b.html</title>
</head>
<body>
<a name=""></a> //被链接的地方（抛锚）
</body>
</html>
无序列表(无编号)：
<ul>
<li></li>
<li></li>
</ul>
有序列表(有编号)：
<ol>
<li></li>
<li></li>
</ol>
滚动效果：
<marquee></marquee> //注：behavior滚动方式(默认scroll为循环滚动，alternate为来回滚动，slide为滚动一次，loop可设置滚动次数)
滚动方向：
<marquee direction="left、right、up、down"></marquee>
图片滚动：
<marquee><img src=""></marquee>
创建表格：
1）规则的表格：
<html>
<head>
<title></title>
</head>
<body>
<table border="1"> //设置表格边框
<caption>设置表格标题</caption>
<tr> //行
<th></th> //列，字体为粗体
<td></td> //列，不是粗体
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>
</body>
</html>
2）不规则的表格
<html>
<head>
<title></title>
</head>
<body>
<table border="1"> //设置表格边框
<caption>设置表格标题</caption>
<tr> //行
<th></th> //列，字体为粗体
<th></th> //列，不是粗体
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
设置表格间距：
<table width="" height="" align="" border="" cellspacing="" cellpadding=""> //注：cellspacing设置表格各单元之间的间隙；cellpadding设置单元格内容与单元格边界之间空白距离的大小
</table>
表格的背景颜色：
<table bgcolor="">
</table>
嵌套表格：
<html>
<head>
<title></title>
</head>
<body>
<table border="1"> //设置表格边框
<caption>设置表格标题</caption>
<tr> //行
<th></th> //列，字体为粗体
<th></th> //列，不是粗体
</tr>
<tr>
<th></th>
<th></th>
</tr>
<table border="1"> //设置表格边框
<caption>设置表格标题</caption>
<tr> //行
<th></th> //列，字体为粗体
<th></th> //列，不是粗体
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
</table>
</body>
</html>
div:
<html>
<head>
<title></title>
</head>
<body>
<div id="top" style="background-color:red">顶部 </div>
<div id="middle" style="background-color:green">中部 </div>
<div id="bottom" style="background-color:blue">底部 </div>
</body>
</html>
单行文本框：
<input type="text" name="file_name" maxlength="value" size="value" value="http://www.mamicode.com/field_value"/>
密码框：
<input type="" name="" maxlength="" size=""/>
隐藏域：
<input type="hidden" name="field_name">
文件域：
<input type="file" name="field_name"/>
单选按钮：
<input type="radio" name="field_name" checked http://www.mamicode.com/value="value"/>
复选框：
<input type="checkbox" name="field_name" checked="value"/>
不同类型的按钮：
提交按钮：<input type="submit" name="field_name" value="http://www.mamicode.com/button_text"/>
重置按钮：<input type="reset" name="field_name" value="http://www.mamicode.com/button_text">
文本域：
<textarea name="txt" cols="value" rows="value" wrap="off"></textarea> //不会自动换行
<textarea name="txt" cols="value" rows="value" wrap="physical"></textarea> //会自动换行
下拉列表框：
<select name="">
<option value="" selected>内容</option>
<option value="">内容</option>
<option value="">内容</option>
</select>
列表框：
<select name="" size="" multiple="multiple">
<option>内容</option>
<option>内容</option>
<option>内容</option>
</select>
Label标签的使用：
<lable for="testtest">点击文字相当于点击复选框</bable>
框架的基本格式：
<html>
<head>
<title></title>
</head>
<frameset>
<frame>
<frame>
</frameset>
</html>
框架窗口分割：
<html>
<head>
<title>top.html</title>
</head>
<body>
<nobr>上边</nobr>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<title>bottom.html</title>
</head>
<body>
下边
</body>
</html>
-------------------------------------------------------------------------
<html>
<head>
<title>left.html</title>
</head>
<body>
<nobr>左边</nobr>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<title>right.html</title>
</head>
<body>
右边
</body>
</html>
1)左右分割：
<html>
<head>
<title>将左右两个框架合并在一起</title>
</head>
<frameset cols="30%,70%"> //设置左右两个框架的大小
<frame src="http://www.mamicode.com/left.html">
<frame src="http://www.mamicode.com/right.html">
</frameset>
<noframes></noframes>
</html>
2)左右分割：
<html>
<head>
<title>将上下两个框架合并在一起</title>
</head>
<frameset rows="30%,70%"> //设置上下两个框架的大小
<frame src="http://www.mamicode.com/top.html">
<frame src="http://www.mamicode.com/bottom.html">
</frameset>
<noframes></noframes>
</html>
3)嵌套分割：
<html>
<head>
<title>框架合并在一起</title>
</head>
<frameset rows="30%,*,40%" frameborder="1"> //设置上下两个框架的大小
<frame src="http://www.mamicode.com/top.html" name="top.html">
<frameset rows="30%,*" frameborder="1">
<frame src="http://www.mamicode.com/left.html" name="leftfrname" noresize="noresize" scrolling="auto">
<frame src="http://www.mamicode.com/right.html" name="rightfrname">
</frameset>
<frame src="http://www.mamicode.com/bottom.html" name="bottomfrname">
<noframes></noframes>
</html>
样式：
<html>
<head>
<title></title>
<style type="text/css">
ul li{ color:red;}
li{ color:blue}
ul li.myclass{ color:#F0C}
p{ background-image:url(animals.jpg)}
</style>
</head>
<body>
<ul>无序列表
<li class="myclass">你好</li>
<li>我好</li>
<li>大家好</li>
</ul>
<ol>有序列表
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<p style=" font-weight:bold">aaaa</p>
</body>
</html>
行内样式：
<html>
<head>
<title></title>
</head>
<body>
<p style="color:red;font-size:36px; font-family:‘华文彩云‘">这是一个段落</p>
</body>
</html>
盒子模型：
<html>
<head>
<title></title>
</head>
<body style="border:1px red solid; height:500px; margin:50px">
<p style=" border:1px solid blue; padding:20px; margin:50px">段落文本</p>
</body>
</html>
背景图片：
<html>
<head>
<title></title>
</head>
<body style=" background-image:url(animals.jpg); background-repeat:no-repeat">
</body>
</html>
内嵌样式：
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
p{color:red; font-size:36px; font-family:"华文彩云"; font-style:italic}
font{color:red}
</style>
</head>
<body>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
<p>这是第四个段落</p>
<font>文本1</font>
<font>文本2</font>
</body>
</html>
虚线边框：
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
tr{vertical-align:bottom;}
td{background-color:yellow;border-right:2px dashed red}
</style>
</head>
<body>
<table width="200" cellspacing="3" cellpadding="0" style="text-align:right; height:100px;" >
<tr>
<td>手机充值</td>
<td>电子彩票</td>
</tr>
<tr>
<td>电脑硬件</td>
<td>数码相机</td>
</tr>
</table>
</body>
</html>
细边框和图片按钮：
<html>
<head>
<title></title>
</head>
<body>
普通文本框：<input type="text"/>
<br /><br />
细边框:<input type="text" style="border:1px solid red" />
<br />
<input type="button" style=" background-image:url(pointcard.gif); width:80px; height:48px; border:0px"/>
</body>
</html>
选择器：
<html>
<head>
<title></title>
<style type="text/css">
/*标签选择器*/
p{color:red; font-size:36px; font-family:"华文彩云"; font-style:italic}
/*class类选择器*/
.myclass{ color:blue; font-family:"华文细黑"}
/*ID选择器*/
#mytable{ background-color:gray;}
#mytr{ background-color:red;}
/*伪类选择器*/
a:link{ color:blue; text-decoration:underline}
a:hover{ color:yellow; text-decoration:none}
a:active{ color:green; text-decoration:underline}
a:visited{ color:red; text-decoration:none}
</style>
</head>
<body>
<!--同时用到标签选择器和类选择器有冲突的属性就以类选择器优先，没冲突的属性就都保留-->
<p class="myclass" >这是第一个段落</p>
<p>这是第二个段落</p>
<font class="myclass">文本1</font><br />
<font>文本2</font><br />
<font class="myclass">文本3</font><br />
<table width="200" border="1" cellspacing="0" cellpadding="0" id="mytable">
<tr id="mytr">
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<a href="http://www.baidu.com">百度</a>
</body>
</html>
其他选择器：
<html>
<head>
<title></title>
<style type="text/css">
ul .myli{ background-color:blue}
#links span a{color:red;}
p[title=‘abc‘]{ color:green}
</style>
</head>
<body>
<ul>
<li class="myli">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<ol>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ol>
<p id="links">
<a href="http://www.mamicode.com/#">Div+CSS教程</a>
<span><a href="http://www.mamicode.com/#">CSS布局实例</a></span>
<span><a href="http://www.mamicode.com/#">CSS2.0教程</a></span>
</p>
<p title="abc" >属性选择器</p>
</body>
</html>
div浮动：
<html>
<head>
<title></title>
</head>
<body>
<div style=" width:200px; height:100px;background-color:red; float:left">第一个div</div>
<div style=" width:500px; height:100px; background-color:green; float:left; margin-left:20px; padding-left:50px; padding-top:20px">第二个div</div>
<div style=" width:50px; height:100px; background-color:blue; clear:left; float:right">第三个div</div>
</body>
</html>
div固定定位：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
网页内容<br />
网页内容<br />
网页内容<br />
<div style=" width:200px; height:100px; background-color:red; position:fixed; left:30px; top:50px">该区域是广告</div>
</body>
</html>
div绝对定位：
<html>
<head>
<title></title>
</head>
<body>
<div style=" width:200px; height:100px; background-color:red">第一个无定位div</div>
<div style=" width:200px; height:100px; background-color:green">第二个无定位div</div>
<div style=" width:200px; height:100px; background-color:blue">第三个无定位div</div>
网页内容<br />
网页内容<br />
<!--绝对定位-->
<div style="width:100px; height:100px; position:absolute; top:50px; left:50px; background-color:yellow; z-index:100">第一个定位div</div>
<div style="width:100px; height:100px; position:absolute; top:100px; left:80px; background-color:gray; z-index:1">第二个定位div</div>
</body>
</html>
div相对定位：
<html>
<head>
<title></title>
</head>
<body>
<div style=" width:200px; height:100px; background-color:red">第一个无定位div</div>
<!--相对定位会浮起来，但是还是会占网页上的位置，绝对定位会浮起来，但是不会占网页上的位置-->
<div style=" width:100px; height:100px; background-color:green; position:relative; left:50px; top:20px">第二个相对定位div</div>
<div style=" width:200px; height:100px; background-color:blue">第三个无定位div</div>
</body>
</html>
布局实例：
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
#total{ width:700px; height:600px; margin:0 auto}
#top{ width:100%; height:100px; background-color:blue;}
#footer{ width:100%; height:100px; background-color:gray}
#left{ float:left; width:120px; height:400px; background-color:#F90}
#main{ float:left; width:450px; height:400px; background-color:#69C; margin-left:5px;}
#right{float:left; margin-left:5px; width:120px; height:400px; background-color:#666}
#layout{ width:100%; height:400px}
</style>
</head>
<body>
<div id="total">
<div id="top"></div>
<div id="layout">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
综合：
<html>
<head>
<title></title>
</head>
<body>
<div style=" width:700px; height:100px; border:1px solid gray" >top</div>
<div style="border:1px solid gray; width:700px; height:200px" >
<div style="width:300px;float:left;height:200px; border-right:1px solid gray;">left</div>
<div style="float:left; width:395px; height:200px;">right</div>
</div>
<div style=" width:700px; height:100px; border:1px solid gray" >bottom</div>
</body>
</html>
html入门（仅适合初学者）