1.表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- <table>...</table>整个表格 --><!-- border：边框 --><!-- cellspacing：每格的间隙宽度 --><!-- cellpadding：每隔的内边距 --><!-- 可以自定义整体宽高：width/height; --><!-- 加个属性整体居中style="text-align: center;" --><tableborder="1"cellspacing="0"cellpadding="5"width="400"style="text-align: center;"><!-- 给每列添加样式 --><colgroup><!-- 占位符 --><col /><col bgcolor="#FF00FF" /><!-- span：使样式占用多列；与合并同理可以删除后面的占位符数 --><col bgcolor="#90EE90" span="2" /><!-- <col /> --><col bgcolor="#F08080" /></colgroup><!-- 表名称 --><caption>主食</caption><!-- thead表头 --><thead><!-- 在tr里添加属性使表头单独渲染出样式 --><tr bgcolor="#D4F2E7"><!-- th自带加粗和居中属性 --><th>日期</th><th>早餐</th><th>午餐</th><th>晚餐</th><th>宵夜</th></tr></thead><!-- tbody表主体 --><tbody><tr><td>昨天</td><td>包子</td><td>汤面</td><td>烤鸡</td><!-- rowspan：合并列格 --><td rowspan="3">没吃</td></tr><tr><td>今天</td><td>肠粉</td><td>包子</td><td rowspan="2">米饭</td></tr><tr><td>明天</td><td>喝粥</td><td>汤面</td></tr><tr><td>后天</td><td>肠粉</td><!-- colspan：合并行格 --><td colspan="2">包子</td><td>烧烤</td></tr></tbody><!-- tfoot表尾 --><tfoot><tr bgcolor="#F0E68C"><td colspan="5">一天天的都吃什么？</td></tr></tfoot></table></body></html>
效果截图：
2.表单：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><h3 style="width: 280px; text-align: center;">用户注册</h3><!-- method 提交表格的方式；不局限于一种提交方式--><!-- GET用户提交的数据会以键值对的方式出现在URL地址栏中； --><!-- POST 用户提交的数据会出现在请求中 --><formstyle="width: 280px;border: 1px solid #000;padding: 10px;border-radius: 10px;"action=""method="GET"><!-- tpye：框内格式 ；type="text"：单行文本--><!-- name:对应数据库字段，可以识别大小写字母、数字、下划线 --><!-- value：默认框内变量值；框内有变量值时用户可以通过修改单行本修改，不影响默认提交数值。为空时不设置默认变量值； --><!-- placeholder：提示信息 --><!-- 绑定label与input焦点，对于变量值ID进行绑定 --><!-- required：必填项；布尔属性，它的值为true（真）/folse（假），简写方式只要属性中出现表示为true/反之为folse--><!-- autofocus:自动在页面中获取默认焦点 --><fieldset><legend>必填项</legend><div><label for="user-name">用户名：</label><inputtype="text"name="username"value="先生"placeholder="请输入用户名"id="user-name"requiredautofocus/></div><div><label for="user-tel">手机号：</label><inputtype="text"name="usertel"value=""placeholder="请输入手机号码"id="user-tel"required/></div><div><!-- 密码框格式 oassword --><label for="pwd">密码：</label><inputtype="password"name="password"value=""placeholder="请输入密码不少于6个字符"id="pwd"required/></div></fieldset><fieldset><legend>选填项</legend><div><!-- 单选项格式 radio；<label for="nv">性别：</label>使点击性别焦点指向nv--><label for="nv">性别：</label><input type="radio" name="gender" id="nan" /><label for="nan">男</label><input type="radio" name="gender" id="nv" /><label for="nv">女</label><!-- checked：默认焦点 --><input type="radio" name="gender" id="baomi" checked /><labelfor="baomi">保密</label></div><div><!-- 复选框格式 checkbox --><label for="dadoudou">爱好：</label><!-- name="hobby[]" 数组的方式 --><input type="checkbox" name="hobby[]" id="chifang" /><labelfor="chifang">吃饭</label><input type="checkbox" name="hobby[]" id="shuijiao" /><labelfor="shuijiao">睡觉</label><input type="checkbox" name="hobby[]" id="dadoudou" checked /><labelfor="dadoudou">打豆豆</label></div><div><!-- file 文件上传格式 --><label for="user-img">头像：</label><inputtype="file"name="user_img"id="user-img"style="width: 180px;"/><!-- 隐藏域，数据不需要用户提供也不需要显示在页面上 --><!-- MAX_FILE_SIZE是PHP常量根据不同编程语言变化，表示文件最大值 --><!-- value：以字节为单位 --><input type="hidden" name="MAX_FILE_SIZE" value="5242880" /><!-- --><input type="hidden" name="user_id" value="" /></div><div><!-- 预定义下拉框 --><label for="kecheng">职业：</label><!-- list于datalist里的id进行绑定 --><input type="text" id="kecheng" list="bangding" /><!-- datalist里面放option预定义内容 --><datalist id="bangding"><option value="程序员"></option><option value="医生"></option><option value="律师"></option><option value="司机"></option><option value="行政"></option><option value="会计"></option><option value="文编"></option><option value="设计师"></option><option value="策划"></option></datalist></div><div><!-- email 邮箱格式并可以限制提交邮箱的规范 --><label for="my-email">邮箱：</label><input type="email" name="email" placeholder="正确输入邮箱样式" /></div><div><!-- date 日期格式框 --><label for="">生日：</label><input type="date" name="brithday" /></div><div><!-- number 数值格式框 --><!-- min 有效最小值 --><!-- max 有效最大值 --><!-- step 当前数值上下跳动的加减数，如21 点^变成23 --><label for="">年龄：</label><inputtype="number"name="age"min="18"max="65"step="2"value="18"/></div><div><!-- color 调色板格式 --><label for="">喜欢的颜色：</label><input type="color" name="pick_color" /></div><div><!-- 下拉选择框：select --><label for="">学历：</label><select name="edu" id=""><option value="">小学</option><option value="">初中</option><option value="">高中</option><option value="" selected>专科</option><option value="">本科</option></select></div></fieldset><!-- button 按钮格式，只有样式没有效果 --><!-- submit 按钮格式，有效果 --><!-- <input type="button/submit" value="提交" /> --><!-- 如果有多个按钮时可添加调用不的脚本或用参数指定来实现：formaction="hanle,php?action=registar" --><!-- 方式用formmethod="GET",新页面返回值 formtarget="_blank" --><button style="margin: 10px 40%;">提交</button></form></body></html>
效果截图：