一、html基本标签
html是一种网页制作语言，。其实html跟java和其他语言差不多，都有自己的语言表达形式，就是通过标签形成的。标签又有单标签和双标签两种，理解起来还是比较容易的，纯属记忆，主要要在于什么时候用，用在哪里，这样才会显示出更美观的页面。
1、html基本模式
<html> <head> <title>网页标题</title> </head> <body> <p>我的第一个网页文档</p> </body> </html>
2、常用的html标签
大纲级别标题标签<h1>文本</h1>到<h6>文本</h6>
段落标签<p></p>
字符标签：粗体<b></b> 斜体<i></i> 下划线<u></u> 上标签<sup></sup> 下标签<sub></sub> 删除线<del></del>
图像标签<img src="image/1.jpg" alt="图像标签"> （src是图片的位置，alt是鼠标放在图片上显示的文字，里面还有其他的属性，如：宽高等 详细可查 ----->网页制作完全手册）
超链接标签<a href="*.html"></a>,href可以直接输入网址。当要链接到本网页中的具体的某一位置是，想将那个位置写成例：<a name="c8"></a> 然后在设置链接处：<a href="#c8"></a>即可（书签）（重点）
<html> <head> <title>书签</title> </head> <body> <a name="top"></a> <a href="#a1"><h1>第1章</h1></a> <a href="#a2"><h1>第2章</h1></a> <a href="#a3"><h1>第3章</h1></a> <a href=""><h1>第4章</h1></a> <a href=""><h1>第5章</h1></a> <a href=""><h1>第6章</h1></a> <a href=""><h1>第7章</h1></a> <a href=""><h1>第8章</h1></a> <a href=""><h1>第9章</h1></a> <a href=""><h1>第10章</h1></a> <a href=""><h1>第11章</h1></a> <a href=""><h1>第12章</h1></a> <a href=""><h1>第13章</h1></a> <a href=""><h1>第14章</h1></a> <a href=""><h1>第15章</h1></a> <a name="a1"><h3>第1章内容</h3></a> <a name="a2"><h3>第2章内容</h3></a> <a name="a3"><h3>第3章内容</h3></a> <a name="a4"><h3>第4章内容</h3></a> <a name="a5"><h3>第5章内容</h3></a> <a name="a6"><h3>第6章内容</h3></a> <a name="a7"><h3>第7章内容</h3></a> <a name="a8"><h3>第8章内容</h3></a> <a name="a9"><h3>第9章内容</h3></a> <a name="a10"><h3>第10章内容</h3></a> <a name="a11"><h3>第11章内容</h3></a> <a name="a12"><h3>第12章内容</h3></a> <a name="a13"><h3>第13章内容</h3></a> <a name="a14"><h3>第14章内容</h3></a> <a name="a15"><h3>第15章内容</h3></a> <a href="#top">回到顶部</a> </body> </html>
元数据标签<meta/>：描述一个html网页文档的属性，例如作者、时期和时间、网页描叙、关键字、网页刷新等。应出现在<head></head>
<head> <title>CSDN - 开发者的网上家园</title> <meta name="keywords" content="CSDN,开发者,程序员,技术社区,.NET技术,软件开发,编程,博客,Developer,Programmer" /> <meta name="description" content="CSDN是面向软件开发者的高品质网络媒体和社区，CSDN……" /> </head>
水平分隔线标签<hr/>
<p>这里是文档的上半部分</p> <hr align="left" width="80%" size="2px" noshade="noshade" /> <p>这里是文档的下半部分</p>
注：1、要在网页中输入空格，如果直接按空格键的话，不管按多少个都只会显示一个，要用 ；
2、段落标签<p></p>会使段落之间产生一行空行，而换行标签<br/>不会
二、表格和列表(重点)
1、表格标签
<html>
<head>
<title>表格</title>
<style>//设置表格的样式
table{
table-layout:fixed ; }
</style>
</head>
<body>
<table border="20" cellspacing="20" cellpadding="30" >//cellspacing是每格之间的间距空隙大小(相邻单元格之间的距离)，cellpadding是格中文字与边框的空隙大小
<tr>//行
<th>排名123213213121</th>//列
<th>歌曲</th>
<th>歌手</th>
</tr>
<tr>
<td>1</td>
<td>aaaaaa</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>2</td>
<td>bbbbbb</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>3</td>
<td>cccccc</td>
<td>xxxxxx</td>
</tr>
</table>
</body>
</html>
还可以加一个表格标题标签<caption></caption>
2、单元格合并
<tr></tr>、<td></td>中colspan、rowspan属性就是控制合并行列以及合并的数量，而且还有align(水平位置)和valign(垂直位置)来控制表格中内容的位置（放在标签<td></td>中）
<table border="1" width="250px"> <tr> <td rowspan="2" valign="top">单元格</td> <td align="center">单元格</td> <td align="right">单元格</td> </tr> <tr> <td colspan="2" >单元格</td> </tr> </table>
3、列表
有序列表<ol></ol>，然后通过<li></li>创建列表项目；无序列表<ul></ul>。通俗理解为有序就是可以自动在每列前面生成一个序列号1234......而无序则是点
4、特殊字符和注释
空格
大于号 >
小于号 <
双引号 "
与符号 &
版权符号 ©
注册商标 ®
HTML注释 <!--注释内容-->
5、在html文档中插入多媒体
插入背景音乐：<bgsound src="music/xxx.mp3" loop="1"/>
插入FLASH：<embed align="center" height="400" width="500" src="flash/fish.swf" />
插入视频：<embed align="center" height="400" width="500" src="video/xxx.asx" />
三、表单与表单元素
1、表单<form></form>：用于创建表单，用于一组表单数据的容器，在网页中并不可见。个人理解：主要看你需不需要对某段数据进行提交和重置(现在也许不懂，继续往下就知道了)，需要则要用到表单，也就是对将某网页中某一部分数据看成一个整体，需要对这段数据进行重置和传递信息。（注意：form不要写成from哦）
2、表单元素
文本框、密码框、单选按钮、复选框、文件域、隐藏域、提交按钮、重置按钮、自定义命令按钮、图像按钮、多行文本域、列表框 （下拉框）
每个元素都有自己的属性，这个可以查手册
<html>
<head>
<title>表单与表单元素</title>
</head>
<body>
<center>
<form action="练习/练习.html" method="post">
文本框:<input id="" type="text" name="" value="lifan" size="50" maxlength="10" readonly/><br/>
密码框:<input id="" type="password" name="" value="123456" /><br/>
单选按钮:
男<input type="radio" name="sex" value="1" checked/>
女<input type="radio" name="sex" value="0" /><br/>
多选按钮:
吃<input type="checkbox" name="" value=""/>
喝<input type="checkbox" name="" value="" />
玩<input type="checkbox" name="" value="" checked/>
乐<input type="checkbox" name="" value="" /><br/>
文件域:<input type="file" name="" /><br/>
隐藏域:<input type="hidden" name="" /><br/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
<input type="button" value="普通按钮" onclick="alert('哈哈哈哈')"/>
<input type="image" src="练习/img/help.jpg" alt="显示文字"/><br/>
<fieldset>
<legend>其他标签</legend>
多行文本框:
<textarea wrap="physical" rows="10" cols="40" name="" id=""></textarea><br/>
下拉列表:
<select name="" id="">
<option>请选择</option>
<option value="bc">奔驰</option>
<option value="bm" selected>宝马</option>
<option value="ad">奥迪</option>
</select>
<select name="" size="4" multiple="multiple">
<option value=".NET">.NET软件工程师</option>
<option value="C++">C++工程师</option>
<option value="JAVA">JAVA工程师</option>
<option value="WebUI" selected="selected">Web前端工程师</option>
<option value="DB">数据库工程师</option>
<option value="JAVA Web">JAVA Web程序员</option>
<option value="ASP.NET" selected="selected">ASP.NET程序员</option>
<option value="TEST">软件测试工程师</option>
</select><br/>
按钮标签:
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</fieldset>
</form>
</center>
</body>
</html>
四、框架集和框架
一般网页都是由多个框架组成的，只是从效果上看似是有一个形成的。通俗的说就是讲一个网页分成多个模块，也就是多个网页组成，如上中下左右等，从而避免在多个网页之间切换的麻烦。邮箱就是一个很好的例子，点左边，可以在右边显示相关内容。
<html> <head> <title>框架集与框架示例</title> </head> <frameset cols="50%,50%">//将一个网页分成两个部分（两列），比例对半分配（也可以用*表示剩下的全部大小）如：（frameset cols=“50%，*”） <frame src="nav.html" /> <frame src="content.html" /> </frameset> </html>
1、框架集的嵌套
也就是可以多次拆分
<frameset rows="*,50"> <frameset cols="150,*"> <frame src="left.html" /> <frameset rows="80px,*"> <frame src="top.html" /> <frame src="middle.html" /> </frameset> </frameset> <frame src="bottom.html" /> </frameset>
结果：
2、通过超链接实现框架之间的跳转
先在frame中设置属性name=“a”，然后再通过超链接中设置target=“a”属性实现链接
还有就是通过<base/>标签设置默认跳转目标，也就是没有设置target属性的链接都默认链接都<base/>标签对应的目标。（注：这个标签是放在<head></head>中的）
五、css层叠样式表
样式规则一般放在网页头部<head></head>内部的<style></style>标签中
1、选择器（也就是通过什么方式设置样式）
a、html选择器：用html标签的名称作为选择器
<style type="text/css">
h1{text-align:center;font-size:18pt;}
input{border:1px solid gray;background-color:#fedcba;color:blue;}
a{text-decoration:none;}
</style>
b、类选择器：将多个应共享同一种外观的标签归为一类
<style type="text/css">
.txt{
border:1px dashed gray;
background-color:#fedcba;
color:blue;
height:20px;
}
.btn{
border:1px solid blue;
background-color:#cccccc;
color:red;
font-weight:bold;
}
</style>
c/、id选择器：为页面特定的某个标签定制外观
<style type="text/css">
td{
border:1px solid blue;
}
#mytable{
width:260px;
border-width:5px;
border-style:double;
border-color:gray;
border-collapse:collapse;
}
#mytd{
background-color:#fedcba;
text-align:center;
font-size:16px;
font-style:italic;
}
</style>
2、常用的css样式的属性
背景、边框、文本、字体......等等
六、数据库的简单操作
1、数据库建表
create table 表明(
字段名称 数据类型,
字段名称 数据类型,
.......
字段名称 数据类型,
字段名称 数据类型
)
解释:
字段名称:随便写
数据类型:
varchar字符
varchar(20) 表示可变字符串最多存储20个字符
char(10) 表示固定字符串,固定10个大小的字符
int 整形
float 浮点型
create table student(
sid int,
sname varchar(50),
sage int,
ssex char(2),
score int,
address varchar(200)
)
2、新增数据
insert into 表名 values(值,值,...值);//为表中每一列值都插入数据
insert into 表名(列名,列名,...列名) values(值,值,...值);//为表中指定列插入数据
解释
值:数字类型直接写，字符类型单引号
insert into student values(1,‘张三‘,20,‘男‘,90,‘五一路‘);
insert into student(sid,sname,ssex) values(2,‘王五‘,‘女‘);
2、修改
update 表名 set 列名=新值,列名=新值...列名=新值;//修改表中所有的数据
update 表名 set 列名=新值,列名=新值...列名=新值 where 条件;
示例:
update student set sage=25,address=‘芙蓉路‘ where sid=2
3、删除
delete 表名;//删除表中所有的数据
delete 表名 where 条件;//删除指定条件的数据
示例:
delete student where sid=2;
4、查询
select * from 表名;//查询表中所有的数据
select * from 表名 where 条件;//查询表中指定条件的数据
select 列名,列名..列名 from 表名;//查询表中指定列的数据
七、数据库的链接
见自己做的一个小网页
版权声明：本文为博主原创文章，未经博主允许不得转载。