一、HTML文档的基本结构
1.<!DOCTYPE html>声明文档的类型为html
2.<html></html>称为根标签，所有的网页标签都在<html></html>中。
3.<head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>，<meta>等标签，内容用户不可见，供浏览器解读，主要信息为网页内容的描述及文档声明。
4. <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来供用户观看。
<HTML> <head>(头部) <title>网页显示的标题</title> </head> <body>（主体） 在这里面编写网站内容. <body> </HTML>
二，列表
1，无序列表
<ul> <li>内容</li> <li>内容</li> <li>内容</li> </ul>
2，有序列表
<ol> <li>内容</li> <li>内容</li> <li>内容</li> </ol>
3，定义列表
<dl> <dt>标题</dt> <dd>描述项</dd> </dl>
三，表格
border：表格边框属性；当使用border="1"设置边框时，会在所有td以及table上嵌套边框，当border加大时，只有table框会加粗。
cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，但边框线并不会合并。
cellpadding:单元格内边距，单元格中文字与单元格边框之间的距离。
width/height:表格的宽高
align：设置表格在父容器中的对齐方式 ，left/居左 center/居中 right/居右
bgcolor：背景色
colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。
rowspan，某单元格跨N行，则该单元格下边的N-1个td就不需要了。
<table border="1" cellpadding="5" cellspacing=0" width="500" align=left"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </thead> <tbody> <tr> <td width="100">李小萌</td> <td width="50">80</td> <td width="50" >90</td> <td width="50">170</td> </tr> <tr> <td>宋笑天</td> <td>91</td> <td>95</td> <td>186</td> </tr> <tr> <td>李明</td> <td>89</td> <td>92</td> <td>181</td> </tr> </tbody> <tfoot> </tfoot>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夏***在学习</title> </head> <body> <hr role="article"> <h1>文本</h1> <p>学习使我快乐</p> <h2>超链接</h2> <br> <a href="http://www.zzjtl.com" target="_parent" rel="nofollow"> 郑州金特莱</a> <br> <a href="http://www.zzjtl.cn" target="_blank" rel="nofollow">金特莱电子</a> <h2>图片</h2> <a href="http://www.zzjtl.cn" target="_blank" rel="nofollow"><img src="static/images/girl.jpg" alt="小姑娘" WIDTH="450" HEIGHT="300" ></a> <h3>无序列表</h3> <ul> <li>1.周一去上学</li> <li>2.周二去上班</li> <li>3.周三去游泳</li> <li>4.周四去钓鱼</li> </ul> <h3>有序列表</h3> <ol> <li>5月1日周一去上学</li> <li>5月2日周二去上班</li> <li>5月3日周三去游泳</li> <li>5月4日周四去钓鱼</li> </ol> <h3>无序列表导航栏</h3> <ul> <li><a href="http://www.zzjtl.com">5月1周一去上学</a></li> <li><a href="http://www.zzjtl.com">5月2周二去上班</a></li> <li><a href="http://www.zzjtl.com">5月3周三去游泳</a></li> <li><a href="http://www.zzjtl.com">5月4周四去钓鱼</a></li> </ul> <hr> <table border="2 " cellspacing="0" width="300" align="center"> <caption>日程表</caption> <thead> <tr bgcolor="#7fff00"> <th>编号</th> <th>日期</th> <th>星期</th> <th>去哪</th> </tr> </thead> <tbody> <tr bgcolor="#ff7f50"> <td width="100">1</td> <td width="160">5月1</td> <td width="100">周一</td> <td width="400">上学</td> </tr> <tr> <td> 2</td> <td> 5月2</td> <td> 周二</td> <td> 上班</td> </tr> <tr> <td> 3</td> <td> 5月3</td> <td> 周三</td> <td> 游泳</td> </tr> <tr> <td> 4</td> <td> 5月4</td> <td> 周四</td> <td> 钓鱼</td> </tr> </tbody> <tfoot> <tr> <td content="3"align="center">总计</td> <td>4</td> <td>4</td> <td>4</td> </tr> </tfoot> </table> <h3>用户注册</h3> <form action="" method="get" name="register"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="不超过8个字符" autofocus> </p> <p> <label for="username">密码：</label> <input type="password" id="password" name="password" placeholder="6-12个字母或者数字"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@mail.com" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="80"> </p> <p> <label for="age">年龄：</label> <input type="date" id="birthday" name="birthday" > </p> <p> <label for="love">爱好：</label> <select name="love" id="love" size="1"> <optgroup label="肉："> <option value="0">请选择</option> <option value="1">牛肉</option> <option value="2">羊肉</option> <option value="3">鱼肉</option> </optgroup> <optgroup label="水果："> <option value="0">请选择</option> <option value="1">苹果</option> <option value="2">橘子</option> <option value="3">香蕉</option> </optgroup> <optgroup label="零食："> <option value="0">请选择</option> <option value="1">巧克力</option> <option value="2">蛋糕</option> <option value="3">超级多的水薯片</option> </optgroup> </select> </p> <p> <label for="programme">喜欢的动画:</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">七龙珠</lable> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">海贼王</lable> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">火影忍者</lable> </p> <p> <label for="male">性别: </label> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">不告诉你</label> </p> <p> <label for="comment">简介:</label> <textarea name="comment" id="comment" cols="40" rows="10" maxlength="40" placeholder="不超过40字"></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="按钮"> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四，表单
表单是可以把浏览者输入的数据传送到服务器端
1，form 属性规定输入域所属的一个或多个表单，form标签用于包裹表单中的元素，并将信息通过get/post方法提交
2.表单结构p>label>input，label中for的值用于绑定input中的id，type（类型）=“username/password/email/number/date”
3，select>option（选项）下拉选择框，size="1"下拉选项显示个数
4，复选框<input type="table tennis" name="sport" id="table tennis" value="table tennis" checked><label for="table tennis">乒乓球</label>，type="checkbox"，checked默认选项
5，单选框<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
6，文本域<textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea>，cols行宽度，rows列宽，maxlength最长文本，placeholder提示内容
7，提交按钮<input type="submit" name="submit" value="提交">等价于<button type="submit">提交</button>
重置按钮<input type="reset" name="reset" value="重置">
<form> <p> <label for="username">账号：</label> <input type="username" name="username" id="username" placeholder="不超过8个字符" autofocus> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="6-12位数字或字母" autofocus> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="email@qq.com" requider> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" max="99"> </p> <p> <label for="birthday">生日：</label> <input type="date" name="birthday" id="birthday"> </p> <p> <label for="course">课程：</label> <select name="course" id="course" size="1"> <option value="0">请选择</option> <option value="1">HTML</option> <option value="2">CSS3</option> <option value="3">JAVE</option> <option value="4">PHP</option> <option value="5">MYSQL</option> <option value="6">THINKPHP</option> </select> </p> <p> <label for="sport">运动：</label> <input type="checkbox" name="sport" id="table tennis" value="table tennis" checked><label for="table tennis">乒乓球</label> <input type="checkbox" name="sport" id="Basketbal" value="Basketbal"><label for="Basketbal">蓝球</label> <input type="checkbox" name="sport" id="football" value="football"><label for="football">足球</label> </p> <p> <label for="male">性别：</label> <input type="radio" name="sex" id="male" value="male"><label for="male">男</label> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label> <input type="radio" name="sex" id="secrecy" value="secrecy"><label for="secrecy">保密</label> </p> <p> <label for="text">个人简介：</label> <textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="在这里输入内容"></textarea> </p> <p> <button type="submit">提交</button> <input type="reset" name="reset" value="重置"> </p> </form>
