HTML入门2

接上文文章目录三、播放音频视频标签1. \audio 标签音频播放2.\video 标签视频播放四、HTML 实体字符实体字符的格式常见的HTML实体字符五、HTML表格1. 怎么实现一个表格2. \table标签的属性3. \th标签4. \caption标签5. 单元格合并6. thead tbody tfoot6.1 \thead表头分组6.2 \tbody表格主体6.3 \tfoot表尾分组7. 代码演示8.注意事项六、HTML表单1. 表单标签表单标签是\form标签\form标签的属性2.表单域2.1 \input标签2.1.1 typetext2.1.2 typepassword2.1.3 typeradio2.1.4 typecheckbox2.1.5 typefile2.1.6 typehidden2.2 \select 下拉列表2.3 \textarea 文本域3. 表单按钮3.1 typebutton3.2 typesubmit3.3 typereset3.4 \button标签4. readonly和disabled5. \label标签5.1 \label标签作用5.2 \label标签用法5.3 标签实际应用场景6.placeholder属性表单表格三、播放音频视频标签在 HTML5 中用于播放音频和视频的标签主要有以下两个1. audio 标签音频播放作用嵌入音频文件如 MP3、WAV、OGG。基本属性src音频文件路径也可用 子标签替代。controls显示播放控件播放/暂停、音量等。autoplay加载后自动播放浏览器可能限制。loop循环播放。muted静音。preload预加载auto|metadata|none。auto完全预加载metadata仅元数据比如视频的长度、尺寸、编码格式、缩略图等信息而不是内容本身。none不预加载示例audiocontrolssrcmusic.mp3您的浏览器不支持音频播放请升级浏览器。/audio或使用多格式兼容不同浏览器支持不同格式audiocontrolssourcesrcmusic.mp3typeaudio/mpegsourcesrcmusic.oggtypeaudio/ogg您的浏览器不支持音频播放。/audio2.video 标签视频播放作用嵌入视频文件如 MP4、WebM、OGG。基本属性src视频文件路径也可用 子标签。controls显示播放控件。autoplay自动播放通常需结合 muted 才能生效。loop循环播放。muted静音。poster视频封面图未播放时显示。width/height设置显示尺寸。preload预加载策略。示例videocontrolswidth600postercover.jpgsourcesrcvideo.mp4typevideo/mp4sourcesrcvideo.webmtypevideo/webm您的浏览器不支持视频播放。/video四、HTML 实体字符HTML 实体字符HTML Entities是用于在 HTML 文档中表示特殊字符的代码。实体字符的格式以 开头以 ; 结尾常见的HTML实体字符必须转义的字符常用符号空格相关数学符号箭头符号五、HTML表格1. 怎么实现一个表格表格用来组织数据的。table标签定义表格。tr标签定义表格的行。(table row)td标签定义表格的单元格。(table data)bodytabletrtd第1行-第1列/tdtd第1行-第2列/tdtd第1行-第3列/td/trtrtd第2行-第1列/tdtd第2行-第2列/tdtd第2行-第3列/td/trtrtd第3行-第1列/tdtd第3行-第2列/tdtd第3行-第3列/td/tr/table/body2. table标签的属性常用属性包括● border指定表格边框的宽度以像素为单位。例如border“1”。● cellpadding指定单元格内容与单元格边框之间的空白以像素为单位。例如cellpadding“5”。● cellspacing指定单元格之间的空白以像素为单位。例如cellspacing“0”。【设置为0时表格默认的双线边框会变成实线边框】● width指定表格的宽度以像素或百分比为单位。例如width“100%”。● align指定表格相对于周围元素的对齐方式已废弃建议使用CSS代替。可选值left、center、right。【该属性在tr和td中也能用。】3. th标签th 标签用于定义表格中的 表头单元格浏览器通常会将 th 内容加粗并居中显示4. caption标签在 HTML 中caption 标签用于为 表格table 定义一个标题通常显示在表格的顶部默认位置用于简要描述表格的内容或用途。5. 单元格合并● rowspan行合并● colspan列合并6. thead tbody tfoot这几个标签用于 结构化分组表格内容它们的主要作用是增强语义化、方便样式控制并提升可访问性。6.1 thead表头分组作用● 定义表格的 表头部分通常包含列标题th。● 浏览器会默认将 thead 内容 置顶显示。特点● 一个表格只能有一个 。● 通常包含 标签但非强制。6.2 tbody表格主体作用● 定义表格的 主体内容包含主要数据td。● 如果未显式定义 tbody浏览器会自动将所有非 thead/tfoot 的内容包裹在 tbody 中。特点● 一个表格可以有多个 tbody用于逻辑分组如按月份分块数据。● 默认情况下tbody 内容在 thead 下方、tfoot 上方显示。6.3 tfoot表尾分组作用● 定义表格的 表尾部分通常用于汇总行如合计、平均值。● 浏览器会默认将 tfoot 内容 置底显示即使它在 HTML 中写在 tbody 之前。特点● 一个表格只能有一个 。● 在 HTML 中通常写在 前但渲染时显示在底部。7. 代码演示!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title实现一个基本的表格/title/headbodytableborder2width50%aligncentercellspacing0cellpadding5caption基本表格/caption!-- 这是表头 --theadtrth姓名/thth年龄/thth性别/th/tr/thead!-- 这是表尾 --tfoottrtdcolspan3aligncenter表格的尾部/td/tr/tfoot!-- 这是表体 --tbodytrtdcolspan2王五/td!-- td28/td --tdrowspan2男/td/trtrtd李四/tdtd30/td!-- td女/td --/trtrtd张三/tdtd25/tdtd男/td/tr/tbody/table/body/html8.注意事项HTML 规范要求 tfoot 必须放在 tbody 前但渲染时显示在底部。如果表格简单可以省略 thead/tfoot仅用 tbody。六、HTML表单表单是用来收集用户信息的如下图就是一个表单一个完整的表单包含三个基本组成部分表单标签、表单域、表单按钮。1. 表单标签表单标签是form标签bodyformform elements/form/bodyHTML 表单用于收集用户输入表单使用form 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。注意form元素是块级元素独自占一行。form标签的属性2.表单域要提交数据的表单域必须加name属性。不然该表单域的数据不会提交到服务器上。HTTP协议是这样规定的表单提交数据的格式为namevaluenamevaluenamevalue…注意以上的 name 是 input 标签的 name 属性的值value 是 input 标签的 value 属性的值。2.1 input标签2.1.1 type“text”这是一个文本框。maxlength属性可以控制该文本框可以输入的最长的字符长度。程序员不需要指定value属性用户填写的内容就是value。2.1.2 type“password”这是一个密码框。程序员不需要指定value属性用户填写的内容就是value。2.1.3 type“radio”这是一个单选按钮。同一组的单选按钮才能达到单选效果怎么保证复选框是同一组只要name一致则表示同一组。添加checked会默认选中。value需要程序员显示的设置。2.1.4 type“checkbox”这是一个复选框。同一组的复选框的name也应该一致。添加checked会默认选中。value需要程序员显示的设置。2.1.5 type“file”这是一个文件上传组件 。文件上传时要求method“post”并且enctype“multipart/form-data”。添加multiple可以设置为支持多文件上传。2.1.6 type“hidden”这是一个隐藏域。当数据不需要在页面中展示但提交表单时需要提交。可以设置为隐藏域。2.2 select 下拉列表添加selected属性默认选中一项。size属性用来设置显示几个下拉列表项。multiple属性用来设置支持多选。按住ctrl。2.3 textarea 文本域cols规定文本区内的可见宽度。rows规定文本区内的可见行数。文本域可以添加placeholder属性用于设置输入字段预期值的提示信息。3. 表单按钮3.1 type“button”普通按钮默认不能提交表单除非使用JS代码。3.2 type“submit”提交表单按钮。3.3 type“reset”重置表单按钮。3.4 button标签具有更好的样式控制现代网页中推荐使用。button提交/button和button type“submit”提交/button都具有提交表单的功能。button type“button”普通按钮/button普通按钮不会提交表单。button type“reset”重置按钮/button重置按钮可以重置表单4. readonly和disabled都是只读不可修改。但readonly会提交。disabled不会提交。5. label标签5.1 label标签作用label 标签的作用是关联表单控件如 input、select 等提升用户体验和可访问性5.2 label标签用法两种关联方式方式1包裹表单控件隐式关联label用户名inputtypetextnameusername/label方式2通过for属性显式关联labelforuser-pwd密码/labelinputtypepasswordiduser-pwdnamepasswordlabel5.3 标签实际应用场景复选框/单选框扩大可点击区域无需精准点击小方块labelinputtypecheckboxnameagree我同意协议/label文件上传美化上传按钮将 input type“file” 隐藏通过 label 触发labelforfile-uploadclasscustom-button选择文件/labelinputtypefileidfile-uploadhidden6.placeholder属性placeholder 是 HTML 表单元素如 或 的一个属性用于在输入框为空时显示一段浅色的提示文本引导用户输入正确的内容。 当用户开始输入时提示文本会自动消失。inputtypetextplaceholder请输入用户名3-10个字符nameusernametextareaplaceholder请填写您的反馈.../textarea表单表格代码演示!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title表单表格/title/headbodytableborder1aligncentercellpadding10cellspacing0formactionsubmit.htmlmethodgettrtd姓名/tdtdinputtypetextnamename/td/trtrtd密码/tdtdinputtypepasswordnamepassword/td/trtrtd年龄/tdtdinputtypenumbernameage/td/trtrtdcolspan2aligncenterbuttontypesubmit提交/buttoninputtyperesetvalue重置/td/tr/form/table/body/html