HTML文档结构以及标签和标签属性是HTML最基础也是很重要的内容。
下面是HTML文档结构、标签、标签元素的使用方法及详细介绍
★HTML文档结构
●文档结构实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我的0702作业 </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
●实例代码注释
<!DOCTYPE html> 声明HTML5文档（声明当前文档是HTML5文档）
<html lang="en"> 文档根元素
<head></head> 文档头部
<meta charset="UTF-8"> 设置文档编码为UTF-8
<title>Document</title> 设置网站标题
<body></body> 文档主题内容
这些都是HTML文档中必不可少的
★HTML有序列表和无序列表的使用
<ol></ol>是有序列表标签
<ul></ul>是无序列表标签
●小结
有序列表常用来做排序，用的比较少
无需列表常用来做网站导航，平时使用是非常多的
★HTML表格
表格实例
<table border="1px" cellspacing="0" cellpadding="5"> <caption>PHP学习课程表</caption> <thead> <tr bgcolor="lightblue"> <th>日期</th> <th>课程</th> <th>老师</th> <th>课时</th> <th>阶段</th> </tr> </thead> <tbody> <tr> <td>第一天</td> <td>HTML</td> <td>朱老师</td> <td>12</td> <td rowspan="3">第一阶段</td> </tr> <tr> <td>第二天</td> <td>JavaScript</td> <td>朱老师</td> <td>15</td> </tr> <tr> <td>第三天</td> <td>JQuery</td> <td>猪哥</td> <td>20</td> </tr> <tr> <td>第四天</td> <td>PHP</td> <td>猪哥</td> <td>22</td> <td rowspan="2">第二阶段</td> </tr> <tr> <td>第五天</td> <td>小程序</td> <td>猪哥</td> <td>15</td> </tr> </tbody> <tfoot> <tr> <td colspan="1">备注</td> <td colspan="4"></td> </tr> </tfoot> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
●实例代码注释
<caption> 表格标题
<thead> 表格头部 只能有一个
<tbody> 表格主体
<tfoot> 表格底部 只能有一个
●表格属性
border 给表格添加一个边框
cellspacing 设置单元格与表格之间的间隙大小,设置0为折叠
cellpadding 设置单元格内容与单元格之间的内边距
width 设置表格的宽度
align 设置对齐方式,居中, 居左,居右
bgcolor 设置背景色
colsapn 单元格在列方向上(水平)的合并
rowspan 单元格在行的方向(垂直)合并
表格由 <table> 标签来定义。使用<thead>来设置表格头部，使用<tbody>设置表格主体，使用<tfoot>来设置表格底部。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。还可以为每个标签添加属性，来控制表格的样式
★HTML Input表单
实例
<form action="" method="post"> <h2>用户注册</h2> <p> <label for="username">帐号：</label> <input type="text" name="username" id="username" placeholder="请输入用户名" required> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入8~12字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="email@qq.com"> </p> <p> <label for="datetime">生日：</label> <input type="date" name="time" id="datetime"> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" min="12" max="99" step="1"> </p> <p> <label for="course">课程：</label> <!-- select 下拉框 --> <select name="course" id="course"> <option value="0">PHP</option> <!-- selected 设置默认项 --> <option value="1" selected>JavaScript</option> <option value="2">HTML</option> <option value="3">JQuery</option> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="" id=""><label for="">打游戏</label> <input type="checkbox" name="" id="" checked><label for="">写代码</label> <input type="checkbox" name="" id=""><label for="">看片</label> <input type="checkbox" name="" id=""><label for="">其他</label> </p> <p> <label for="">简介：</label> <textarea name="" id="" cols="30" rows="10"></textarea> </p> <button type="submit">提交注册</button> <button type="reset">重置</button> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
●实例代码注释
autofocus 自动获取焦点
required 必填项
min - max 设置取值范围
select 下拉列表,也叫下拉框,
selected 设置下拉列表的默认选项
checked 复选框默认值
button 按钮
使用Lable标签的For属性来绑定Input下的ID
