Web前端开发学习笔记
发布时间
阅读量：
阅读量
#HTML5学习
一、布局
- div元素布局
一个div元素通过class或id属性来指定模块的位置，并随后通过样式表（CSS）来进一步美化布局。
<!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表格进行布局。（看了一些网站的布局都没采用这种方式）
用于生成表格结构的标记语言。
在表格内部使用caption元素设置标题，在每一行使用tr元素构建内容。
每个tr元素内部包含th和td元素：th用于定义表头单元格的位置，默认居中对齐；td则用于填充具体的内容或嵌入子元素。
///table的几个属性
border属性指定表格单元格之间的边界线宽度，默认设置为$0（即无边界线）。
cellpadding表示单元格内部边缘之间的距离。
cellspacing则表示相邻单元格之间的垂直距离。
clopan用于将当前单元格与后续的指定数量列合并，
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表示从多少开始
三、表单
输入字段：支持输入
密码字段：密码
多选框：多选设置
单选框：单选组件（同一名称下只能选择一个）
按钮组件：按钮功能
提交按钮：提交操作
添加文本区域组件：创建文本框区域（指定宽度cols和高度rows）
添加选项组件：创建选择项界面
{submit中含两种提交方式，post和get}
四、框架
To be continued…
全部评论 (0)
还没有任何评论哟~