模板
<!DOCTTYPE html>
<html>
<head>
<meta charset="utf-8"/>
//此处为输入文本格式，避免乱码现象
<title>此处输入内容</title>
<style type="text/css">
//style表示将在浏览器中以怎样的形式展现出（这里为文本、css）
span{
color:pink;
}
//span，分块，在这里先定义颜色或者加粗字体等样式。可在开头直接定义样式，或随用随定义。
.button { *//前面的.代表一个样式，一个元素。*
background-color: #008CBA;
border: none; *//border为边框*
color: white; *//此处的color为该botton里面的内容的颜色*
padding: 10px 30px; //padding为边距
text-align: center;
text-decoration: none;
display: inline-block; //display规定元素生成的类型（此处的inline-block与block inline对比）
display:block
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
display:inline
1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
1.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body bgcolor="颜色" background="图片地址"
*//bgcolor为背景颜色，background为背景图片。在body里面输入需要执行的内容。
<h1 align="center"><span>输入内容<span></h1>
//此处h1为大标题，h2，h3…依序变小。此处span与上面span的应用模式相同，可根据原span所设定的改变，改变span之间的内容的样式。*
<hr color="#颜色码">
//hr为水平线
<form action="action.php" method="post" target="_blank">
//form为建立表单形式，action则让button有反应转入后台，提交表单。method则为转入方法，其类似方法还有method=“get” ，target="_blank"则表示为另开一个页面显示提交结果
<table width="600px" align="center">
//table本为表格标签，在这里可帮助表单有表格的形式，使之有整齐感。width为表格宽度。
<tr>
<td align="right">姓名：</td>
<td align="left""><input type="text" name="username" size="25" maxlength="26" placeholder="请输入姓名" style="border-radius :7px;" /></td>
</tr>
//<tr>表示行，<td>表示列。<tr>里面有多少个<td>就表示一行有多少列。input表示输入框，type，为该输入框的类型，type=“text”，定义用户可输入文本的单行输入字段。type="password"为账号密码类型。type="file"为文件类型等等。placeholder为默认提示值。name为输入的内容属性，此处为用户姓名。在多个选项中若有checked则为默认选中值。若其中有value，value 属性为 input 元素设定值。
<td align="right">性别：</td>
<td align="left">
男<input type="radio" name="sex" value="man" style="border-radius :7px;" />
女<input type="radio" name="sex" value="wowan" style="border-radius :7px;"/>
保密<input type="radio" name="sex" value="bm" checked style="border-radius :7px;"/></td>
</tr>
//radio为单选选项。border-radius为使输入框边角变圆（其7px是使输入框变圆的程度，也可以10px，12px等等）。与radio相似的是checkbox，checkbox为多选框
<select name="city" size="5" multiple style="border-radius :7px" />
<option value="xj" selected="">--请选择--</option>
<optgroup label="华北">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="hb">河北</option>
</optgroup>
<optgroup label="华东">
<option value="sh">上海</option>
<option value="xm">厦门</option>
<option value="yd">英德</option>
</optgroup>
</select>
//<select>``</select>是下拉表格，size=“数字”则为当选择时，下拉表格会显示出多少个选项。multiple是多选，同时摁住ctrl再点击选项即可多选。<option>``</option>则为选项内容。<optgroup label="">``</optgroup>则为每一个或多个选项的分类。在此，北京，天津，河北属于华北。
<tr>
<td align="right">简介:</td>
<td align="left"><textarea name="jj" rows="6"
cols="50" placeholder="请输入文字。" style="border-radius :10px;"/></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class="button" type="submit" value="注册" name="submit" style="border-radius :7px;">注册</button>
<button class="button" type="reset" value="重置" name="reset" style="border-radius :7px;"/>重置</button>
</td>
</tr>
// textarea为文本框，输入文本。rows为行数，cols列数。
colspan是跨越两行。type="submit"提交。type="reset重置。
</tr>
<tr>
<td>
<input type="hidden" name="hideen" value="这是一个作业"/>
</td>
<td></td>
</tr>
//hidden 是隐藏，不让用户所见。
</table>
</form>
</body>
</html>
成品如下：
8680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
