1、列与表合并使用（课程表）

<styletype=“text/css”>#class td{text-align: center;}</style><!– colspan：合并行–><!– rowspan：合并列–><tableborder=“1”width=“500px”cellspacing=“0”cellpadding=“0”><!–课程表–><caption><h2>课程表</h2></caption><thead><tr><thcolspan=“2”>时间</th><th>星期一</th><th>星期二</th><th>星期三</t源码搭建wcqh.cnh><th>星期四</th><th>星期五</th></tr></thead><tbodyid=“class”><tr><tdcolspan=“2”>早读</td><td></td><td></td><td></td><td></td><td></td></tr></tbody><!–tbody>(tr>td*7)*8–><tbodyid=“class”><tr><tdrowspan=“4”>上午</td><td>第一节</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>第二节</td><td></td><源码搭建wcqh.cntd></td><td></td><td></td><td></td></tr><tr><td>第三节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>第四节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><tdcolspan=“7”>午休</td></tr><tr><tdrowspan=“3”>下午</td><td>第五节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>第源码搭建wcqh.cn六节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>第七节</td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>

2、注册表单的标签和常用控件

### 常用标签1.`<form>`:表单控件的容器2.`<fieldset>`:表单控件分组容器3.`<label>`:控件标签名称4.`<input>`:输入控件,类型由 type 属性决定5.`<select>+<option>`:下载列表框6.`<input>+<datalist>+<op源码搭建wcqh.cntion>`:预定义列表框7.`<textarea>`:文本域(多行文本框)8.`<button>`:按钮,默认同步提交(type=“submit”)### 常用属性1.`form.id`:表单引用2.`form.action`:表单处理脚本3.`form.method`:表单提交方式(GET/POST)4.`form.enctype`:表单数据编码方式5.`form.onsubmit`:表单提交事件6.`input.type`:输入控件类型7.`input.type=”text”`:单行文本框(默认)8.`input.type=”email”`:邮箱控件9.`input.type=”pass源码搭建wcqh.cnword”`:密码控件(密文)10.`input.type=”number”`:数值控件11.`input.type=”date”`:日期控件12.`input.type=”color”`:拾色器13.`input.type=”url”`: URL 控件14.`input.type=”search”`:搜索框控件15.`input.type=”hidden”`:隐藏域控件16.`input.type=”file”`:文本域控件17.`input.type=”radio”`:单选按钮18.`input.type=”checkbox”`:复选框19.`select.name+option.value`源码搭建wcqh.cn:下拉列表框20.`input.list+datalist.id`:预定义列表框21.`textarea.cols/rows`:文本域(多行文本框)22.`button.type`:按钮(默认提交:type=“submit”)

2.1 注册表单

<formaction=“login.php”method=“post”><fieldsetstyle=“display:inline–grid; gap:1em“><legend>用户注册</legend><divclass=“username”><!– id=”user” 与 label标签uesr绑定–><labelfor=“user”>用户：</源码搭建wcqh.cnlabel><inputtype=“text”name=“username”id=“user”placeholder=“username”requiredautofocus/></div><divclass=“my-email”><labelfor=“my_email”>邮箱：</label><inputtype=“email”name=“my-email”id=“my_email”placeholder=“username@email.com”required/></div><divclass=“psw”><labelfor=“psw”>密码：</label><inputtype=“pass源码搭建wcqh.cnword”name=“password”id=“psw”placeholder=“******”requiredonkeydown=“this.nextElementSibling.disabled=false“/><buttontype=“button”disabledonclick=“showPsw(this,this.form)“>显示</button></div><divclass=“age”><labelfor=“age”>年龄：</label><inputtype=“number”name=“age”id=“age”value=“20”min=“20”max=“70”step=“5源码搭建wcqh.cn“/></div><divclass=“birthday”><labelfor=“birthday”>生日：</label><inputtype=“date”name=“birthday”id=“birthday”value=“1990-01-01”min=“1949-10-01”max=“2003-01-01”/></div><divclass=“url”><labelfor=“blog”>博客：</label><inputtype=“url”name=“url”id=“blog”placeholder=“http://”/></div><divclass=“color”><labelfor源码搭建wcqh.cn=“color”>背景：</label><inputtype=“color”name=“bgcolor”id=“color”value=“#fff00”onchange=“setBgColor(this,this.form)“/></div><divclass=“search”><labelfor=“keywords”>搜索：</label><inputtype=“search”name=“keywords”id=“search”placeholder=“输入关键字”/></div><divclass=“upload”><labelfor=“upload”>头像：</label><inputt源码搭建wcqh.cnype=“file”name=“user_pic”id=“upload”type=“image/jpeg,image/png”/><buttontype=“button”onclick=“fileUploads(this.form)“>上传</button></div><divclass=“gender”><!–label.for与默认值的input.id绑定–><labelfor=“secret”>性别：</label><!–name值必须一致，保持唯一性–><inputtype=“radio”name=“gender”value=“male”id=“male”/><labelfor源码搭建wcqh.cn=“male”>男</label><inputtype=“radio”name=“gender”value=“female”id=“female”/><labelfor=“female”>女</label><inputtype=“radio”name=“gender”value=“secret”id=“secret”checked/><labelfor=“secret”>保密</label></div><divclass=“hobby”><labelfor=“secret”>爱好：</label><!–name:hobby[],数组形式，用于保存值–><!–input.id 与 labe源码搭建wcqh.cnl.for绑定–><inputtype=“checkbox”name=“hobby[]”id=“game”id=“game”checked/><labelfor=“game”>游戏</label><inputtype=“checkbox”name=“hobby[]”id=“trave”id=“trave”/><labelfor=“trave”>旅游</label><inputtype=“checkbox”name=“hobby[]”id=“shoot”id=“shoot”/><labelfor=“shoot”>摄影</label><inputtype=“checkbox”name=“hobb源码搭建wcqh.cny[]”id=“program”id=“program”/><labelfor=“program”>编程</label></div><divclass=“edu”><labelfor=“edu”>学历：</label><selectname=“edu”id=“edu”form=“”><optionvalue=“”selecteddisabled>–请选择–</option><optionvalue=“0”>文盲</option><!–optgroup：下拉选项分组–><optgrouplabel=“义务教育”><optionvalue=“1”>小学</option><optionval源码搭建wcqh.cnue=“2”>初中</option><optionvalue=“3”>高中</option></optgroup><optgrouplabel=“高等教育”><optionvalue=“4”>专科</option><optionvalue=“5”>本科</option><optionvalue=“6”>硕士</option><optionvalue=“7”>博士</option></optgroup></select></div><divclass=“like”><labelfor=“keyword”>语言：</label><inputtype=“search”name=“language”l源码搭建wcqh.cnist=“details”id=“keyword”><!–input.list(“details”) 与 id(“details”) 绑定–><datalistid=“details”><optionvalue=“html”>html</option><optionvalue=“css”>css</option><optionvalue=“js”>js</option><optionvalue=“php”>php</option><optionvalue=“mysql”>mysql</option><optionvalue=“vue”>vue</option></datalist></di源码搭建wcqh.cnv><div><labelfor=“comment”>备注：</label><textareaid=“comment”name=“comment”cols=“30”rows=“5”maxlength=“200”style=“resize: none;“>hello wcqh.cn</textarea></div><buttontype=“submit”>登录</button></fieldset></form><script>function showPsw(ele, form){const psw = form.passwordif(psw.type ===password){ psw.type =textel源码搭建wcqh.cne.textContent =隐藏}elseif(psw.type ===text){ psw.type =password ele.textContent =显示}else{returnfalse}}// 设置表单背景function setBgColor(ele, form){ form.firstElementChild.style.backgroundColor = ele.value}// 文件上传function fileUploads(form){ let tips =if(form.user_pic.value.length ===0){ tips +=文件不能为空}else{ tips +=上传成功} alert(源码搭建wcqh.cntips)}</script>

个人小结：

1、列与表合并使用： colspan：合并行 rowspan：合并列colspan=“2”，如果横向合并两个单元格，同一个tr里就应该减少一个td，不然会溢出一个tdrowspan=“4”，如果竖向合并4个单元格，下面4个tr里就应该各减少一个td，不然也会溢出

2、注册表单的一些属性和小技巧<labelfor=“user”>用户：</label><inputtype=“text”name=“username”id=“user”placeholder=“username”requiredautofocus/>id=”user” 与 label标签user 源码搭建wcqh.cn绑定,点击用户可以自行跳转至用户框输入；<divclass=“gender”><!–label.for与默认值的input.id绑定–><labelfor=“secret”>性别：</label><!–name值必须一致，保持唯一性–><inputtype=“radio”name=“gender”value=“male”id=“male”/><labelfor=“male”>男</label><inputtype=“radio”name=“gender”value=“female”id=“female”/><labelfor=“female”>女</label><inputtype=“源码搭建wcqh.cnradio”name=“gender”value=“secret”id=“secret”checked/><labelfor=“secret”>保密</label></div> label.for 与 默认值的input.id 绑定，点击可直接切换回默认值，而不用整个页面刷新。 <divclass=“hobby”><labelfor=“secret”>爱好：</label><!–name:hobby[],数组形式，用于保存值–><!–input.id 与 label.for绑定–><inputtype=“checkbox”name=“hobby[]”id=“game”id=“game”ch源码搭建wcqh.cnecked/><labelfor=“game”>游戏</label><inputtype=“checkbox”name=“hobby[]”id=“trave”id=“trave”/><labelfor=“trave”>旅游</label><inputtype=“checkbox”name=“hobby[]”id=“shoot”id=“shoot”/><labelfor=“shoot”>摄影</label><inputtype=“checkbox”name=“hobby[]”id=“program”id=“program”/><labelfor=“program”>编程</label></div源码搭建wcqh.cn> input.id 与 laber.for 绑定name:hobby[] 数组形式保存值