表格table/table 用来创建表格tr/tr 表示行td/td 表示列 普通单元格内容th/th 和 td 的用法一样表头单元格文字默认加粗、居中HTML 表格colspan 跨列、rowspan 跨行✅colspan跨列横向左右合并✅rowspan跨行纵向上下合并1. colspan 跨列横向合并单元格含义当前单元格占据向右多少列写法td colspan数字2. rowspan 跨行纵向合并单元格含义当前单元格占据向下多少行写法td rowspan数字长表格专用标签theadtbodytfootthead/theadtbody/tbodytfoot/tfoot作用把长表格分区浏览器识别表格结构打印时换页可以重复打印表头。标签说明thead表格头部表头区域只写一份tbody表格主体大量数据可出现多次tfoot表格底部汇总、备注语法硬性规则 书写顺序必须thead → tbody → tfoot显示顺序依旧表头 → 主体 → 表尾表单form action/forminput typetexttextarea name id/textareaHTML 表单form作用收集用户输入的数据文字、选择、勾选、按钮等提交给服务器。基础结构form !-- 各种表单控件 input、select、textarea、button -- /formform 两个核心属性action提交数据的目标地址method提交方式常用get/postform actionlogin.php methodpost /form最常用控件input单标签依靠type区分类型1. 单行文本框 text姓名input typetext nameusername2. 密码框 password密码input typepassword namepwd3. 单选框 radio同一组 name 必须相同只能选一个性别 input typeradio namesex valuemale男 input typeradio namesex valuefemale女4. 复选框 checkbox可以多选name 建议加[]爱好 input typecheckbox namehobby[] valuegame游戏 input typecheckbox namehobby[] valuesport运动5. 提交按钮 submit点击发送表单数据input typesubmit value登录6. 重置按钮 reset清空所有输入内容input typereset value重填7. 普通按钮 button默认无功能配合 JS 使用input typebutton value点击在button标签中包含img标签 --- 意味着可以让按钮中的图像变成你所需要的buttonimg src alt width height 但是需要注意 --- 需要在img中为图片设置长宽高8. 文件上传 fileinput typefilepuplode your song in mp3 format:/pinput typefile nameuser-song/br/input typesubmit valueuplode/其他表单标签下拉选择框selectoption城市 select namecity option valuewh武汉/option option valuetm天门/option /selectmultiple 通过添加multiple属性来创建多选框添加multiple属性 ---- 最好是能告诉用户在选项选择的时候需要同时按下control键pwhat device do you listen to music on?/pselect namedevices size3 multiple multipleoption valueipodipod/optionoption valueradioradio/optionoption valuecomputercomputer/option/select多行文本域textarea留言br textarea rows4 cols30 namemsg/textarearows 行数cols 宽度label 标签优化点击体验点击文字也能选中输入框label input typeradio namesex 男生 /labelmaxlength 用来限制用户在文本区域输入字符数量input typehidden name value/ hidden --- 隐藏表单控件允许程序员向表单中添加用户看不到的值label标签 点击文字也能选中控件作用把文字和表单控件绑定在一起 点击文字和点击输入框 / 单选框 / 多选框效果一样两种写法方式 1for idlabel的for值 控件的idlabel forusername用户名/label input typetext idusername nameuser单选框示例input typeradio idman namesex valuemale label forman男生/label方式 2直接包裹控件不用 for、idlabel input typecheckbox namehobby 运动 /label完整多选框搭配示例form input typecheckbox idmusic namehobby valuemusic label formusic听音乐/label label input typecheckbox namehobby valuegame 打游戏 /label /formfieldset和legend表单分组标签作用fieldset给表单控件划分分组区域自带边框把一组相关选项框起来legendfieldset 的标题显示在边框线上语法规则legend必须写在fieldset内部最开头一组相关表单控件放进同一个 fieldset表单验证减少服务器的工作量required 属性HTML5 表单验证重点作用给表单控件添加required代表必填项。点击提交时如果该输入框为空浏览器阻止表单提交并弹出提示。写法两种都有效!-- 完整写法 -- input typetext nameusername requiredrequired !-- 简写推荐考试常用 -- input typetext nameusername requiredHTML 日期控件 input typedate基础语法input typedate namebirthday页面会弹出原生日期选择器用来选择年 - 月 - 日格式。相关时间系列控件typedate→ 年月日input typedatetypetime→ 时分input typetimetypedatetime-local→ 年月日 时分本地时间考试最常考input typedatetime-localtypemonth→ 年月input typemonthtypeweek→ 年份 第几周input typeweek电子邮件和url输入1、电子邮件输入框typeemail作用自带 HTML5 原生验证提交时浏览器自动检查内容是否符合邮箱格式。代码邮箱input typeemail nameemail required合法示例testqq.com非法示例testqq.com、test补充允许多个邮箱逗号分隔input typeemail multiple nameemails2、网址输入框typeurl作用原生校验要求输入完整网址必须带有http://或https://代码个人主页input typeurl namehomepage required搜索输入控件input typesearch基础语法input typesearch nameq规范习惯搜索框name通常取名qquery 查询
表格table/table 用来创建表格tr/tr 表示行td/td 表示列 普通单元格内容th/th 和 td 的用法一样表头单元格文字默认加粗、居中HTML 表格colspan 跨列、rowspan 跨行✅colspan跨列横向左右合并✅rowspan跨行纵向上下合并1. colspan 跨列横向合并单元格含义当前单元格占据向右多少列写法td colspan数字2. rowspan 跨行纵向合并单元格含义当前单元格占据向下多少行写法td rowspan数字长表格专用标签theadtbodytfootthead/theadtbody/tbodytfoot/tfoot作用把长表格分区浏览器识别表格结构打印时换页可以重复打印表头。标签说明thead表格头部表头区域只写一份tbody表格主体大量数据可出现多次tfoot表格底部汇总、备注语法硬性规则 书写顺序必须thead → tbody → tfoot显示顺序依旧表头 → 主体 → 表尾表单form action/forminput typetexttextarea name id/textareaHTML 表单form作用收集用户输入的数据文字、选择、勾选、按钮等提交给服务器。基础结构form !-- 各种表单控件 input、select、textarea、button -- /formform 两个核心属性action提交数据的目标地址method提交方式常用get/postform actionlogin.php methodpost /form最常用控件input单标签依靠type区分类型1. 单行文本框 text姓名input typetext nameusername2. 密码框 password密码input typepassword namepwd3. 单选框 radio同一组 name 必须相同只能选一个性别 input typeradio namesex valuemale男 input typeradio namesex valuefemale女4. 复选框 checkbox可以多选name 建议加[]爱好 input typecheckbox namehobby[] valuegame游戏 input typecheckbox namehobby[] valuesport运动5. 提交按钮 submit点击发送表单数据input typesubmit value登录6. 重置按钮 reset清空所有输入内容input typereset value重填7. 普通按钮 button默认无功能配合 JS 使用input typebutton value点击在button标签中包含img标签 --- 意味着可以让按钮中的图像变成你所需要的buttonimg src alt width height 但是需要注意 --- 需要在img中为图片设置长宽高8. 文件上传 fileinput typefilepuplode your song in mp3 format:/pinput typefile nameuser-song/br/input typesubmit valueuplode/其他表单标签下拉选择框selectoption城市 select namecity option valuewh武汉/option option valuetm天门/option /selectmultiple 通过添加multiple属性来创建多选框添加multiple属性 ---- 最好是能告诉用户在选项选择的时候需要同时按下control键pwhat device do you listen to music on?/pselect namedevices size3 multiple multipleoption valueipodipod/optionoption valueradioradio/optionoption valuecomputercomputer/option/select多行文本域textarea留言br textarea rows4 cols30 namemsg/textarearows 行数cols 宽度label 标签优化点击体验点击文字也能选中输入框label input typeradio namesex 男生 /labelmaxlength 用来限制用户在文本区域输入字符数量input typehidden name value/ hidden --- 隐藏表单控件允许程序员向表单中添加用户看不到的值label标签 点击文字也能选中控件作用把文字和表单控件绑定在一起 点击文字和点击输入框 / 单选框 / 多选框效果一样两种写法方式 1for idlabel的for值 控件的idlabel forusername用户名/label input typetext idusername nameuser单选框示例input typeradio idman namesex valuemale label forman男生/label方式 2直接包裹控件不用 for、idlabel input typecheckbox namehobby 运动 /label完整多选框搭配示例form input typecheckbox idmusic namehobby valuemusic label formusic听音乐/label label input typecheckbox namehobby valuegame 打游戏 /label /formfieldset和legend表单分组标签作用fieldset给表单控件划分分组区域自带边框把一组相关选项框起来legendfieldset 的标题显示在边框线上语法规则legend必须写在fieldset内部最开头一组相关表单控件放进同一个 fieldset表单验证减少服务器的工作量required 属性HTML5 表单验证重点作用给表单控件添加required代表必填项。点击提交时如果该输入框为空浏览器阻止表单提交并弹出提示。写法两种都有效!-- 完整写法 -- input typetext nameusername requiredrequired !-- 简写推荐考试常用 -- input typetext nameusername requiredHTML 日期控件 input typedate基础语法input typedate namebirthday页面会弹出原生日期选择器用来选择年 - 月 - 日格式。相关时间系列控件typedate→ 年月日input typedatetypetime→ 时分input typetimetypedatetime-local→ 年月日 时分本地时间考试最常考input typedatetime-localtypemonth→ 年月input typemonthtypeweek→ 年份 第几周input typeweek电子邮件和url输入1、电子邮件输入框typeemail作用自带 HTML5 原生验证提交时浏览器自动检查内容是否符合邮箱格式。代码邮箱input typeemail nameemail required合法示例testqq.com非法示例testqq.com、test补充允许多个邮箱逗号分隔input typeemail multiple nameemails2、网址输入框typeurl作用原生校验要求输入完整网址必须带有http://或https://代码个人主页input typeurl namehomepage required搜索输入控件input typesearch基础语法input typesearch nameq规范习惯搜索框name通常取名qquery 查询
