Web前端开发学习笔记
程序员文章站
2022-04-07 16:55:45
...
#HTML5学习
一、布局
1.div模块布局
给定div模块，给定class或者id形成模块来进行布局，之后用样式来进行修饰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
<!--对div模块改变达成布局的目的-->
body{
margin: 0px;
}
/*具体修饰，div#来声明，也可用其它方式进行改变*/
div#container{
width: 100%;
height: 950px;
background-color: aqua;
}
div#header{
width:100%;
height:10%;
background-color: blue;
}
div#meau{
width:30%;
height:80%;
background-color: blueviolet;
float: left;
}
div#content{
width:70%;
height:80%;
background-color: aquamarine;
float: right;
}
div#footer{
width:100%;
height:10%;
background-color: beige;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id="meau">内容菜单</div>
<div id="content">内容主体</div>
<div id="footer">尾部</div>
</div>
</body>
</html>
2.table表格进行布局。（看了一些网站的布局都没采用这种方式）
table标签用来创建表格
table内部用caption创建标题，用tr来创建行。
tr内部用th创建表头，用td在tr内部创建单元格。
///table的几个属性
border边框，默认为0，也就是没有边框线。
cellpadding单元格边距
cellspacing单元格间距，单元格之间空隙。
clospan合并列，rowspan合并行，用于布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
<style type="text/css">
</style>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: azure" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#8a2be2" align="center" height="10%">Header</td>
</tr>
<tr>
<td align="left" bgcolor="blue" width="30%" height="80%">MEAU</td>
<td align="left" bgcolor="aqua" width="70%" height="80%">CONTENT</td>
</tr>
<tr>
<td colspan="2" height="10%" align="center" bgcolor="#7fff00">Footer</td>
</tr>
</table>
</body>
</html>
二、列表
ol创建有序列表
ul创建无序列表
dl创建自定义列表
li创建列表项
type来修改格式
start表示从多少开始
三、表单
input输入
type修改格式
1.text:可输入
2.password:密码
3.checkbox:多选
4.radio:单选，需给定name，同一个name下才能单选。
5.button:按钮
6.submit:提交
testarea:创建文本框，cols宽度，rows高度
select:创建选项，内部包含option作选项。
{submit中含两种提交方式，post和get}
四、框架
To be continued…
上一篇： js数据类型的转换实例
下一篇： php命名空间的namespace关键字