c mvc网站做404,网页设计公司业绩介绍,门户网站模板html5,音乐网站系统怎么做Day2#xff1a;列表、表格、表单 目录 Day2#xff1a;列表、表格、表单一、列表1.无序列表2.有序列表3. 定义列表 二、表格1.基本使用2. 表格结构标签(了解)3.合并单元格 三、表单1.input 标签2.input 标签占位文本3.单选框4.上传文件5.多选框6.下拉菜单7.文本域8.label 标…Day2列表、表格、表单 目录 Day2列表、表格、表单一、列表1.无序列表2.有序列表3. 定义列表 二、表格1.基本使用2. 表格结构标签(了解)3.合并单元格 三、表单1.input 标签2.input 标签占位文本3.单选框4.上传文件5.多选框6.下拉菜单7.文本域8.label 标签9.按钮 四、语义化1.无语义的布局标签2.有语义的布局标签 五、字符实体六、综合案例1.体育新闻列表2.注册信息 一、列表 作用布局内容排列整齐的区域 分类 无序列表有序列表定义列表 1.无序列表
作用布局排列整齐的不需要规定顺序的区域。
标签ul 嵌套 liul 是无序列表li 是列表条目。
ulli第一项/lili第二项/lili第三项/li……
/ul注 ul 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 2.有序列表
作用布局排列整齐的需要规定顺序的区域。
标签ol 嵌套 liol 是有序列表li 是列表条目。
olli第一项/lili第二项/lili第三项/li……
/ol注 ol 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 3. 定义列表 标签dl 嵌套 dt 和 dddl 是定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情。 dldt列表标题/dtdd列表描述 / 详情/dd……
/dl注 dl 里面只能包含dt 和 dddt 和 dd 里面可以包含任何内容 二、表格 网页中的表格与 Excel 表格类似用来展示数据。 1.基本使用
标签table 嵌套 trtr 嵌套 td / th。 提示在网页中表格默认没有边框线使用 border 属性可以为表格添加边框线。 table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr
/table2. 表格结构标签(了解)
作用用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。 提示表格结构标签可以省略。 3.合并单元格
作用将多个单元格合并成一个单元格以合并同类信息。 合并单元格的步骤
明确合并的目标保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 rowspan跨列合并保留最左单元格添加属性 colspan 删除其他单元格
table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd rowspan2100/tdtd199/td/trtrtd李四/tdtd98/td!-- td100/td --td198/td/tr/tbodytfoottrtd总结/tdtd colspan3全市第一/td!-- td全市第一/tdtd全市第一/td --/tr/tfoot
/table注 不能跨表格结构标签合并单元格thead、tbody、tfoot合并边框线的css:border-collapse: collapse; 三、表单 作用收集用户信息 使用场景 登录页面注册页面搜索区域 1.input 标签 input 标签 type 属性值不同则功能不同。 input type... 2.input 标签占位文本 占位文本提示信息文本框和密码框都可以使用。 input type... placeholder提示信息3.单选框
常用属性 input typeradio namegender checked 男
input typeradio namegender 女提示name 属性值自定义。 4.上传文件 默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。 input typefile multiple5.多选框 多选框也叫复选框默认选中checked。 input typecheckbox checked 敲前端代码6.下拉菜单 标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option
/select默认显示第一项selected 属性实现默认选中功能。 7.文本域 作用多行输入文本的表单控件。 textarea默认提示文字/textarea注 实际开发中使用 CSS 设置 文本域的尺寸实际开发中一般禁用右下角的拖拽功能 8.label 标签 作用网页中某个标签的说明文本。 经验用 label 标签绑定文字和表单控件的关系增大表单控件的点击范围。 写法一 label 标签只包裹内容不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman男/label写法二使用 label 标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label提示支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 9.按钮
button type按钮/button!-- form 表单区域 --
!-- action 发送数据的地址 --
form action用户名input typetextbrbr密码input typepasswordbrbr!-- 如果省略 type 属性功能是 提交 --button typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton普通按钮/button
/form提示按钮需配合 form 标签表单区域才能实现对应的功能。 四、语义化
1.无语义的布局标签 作用布局网页划分网页区域摆放内容 div独占一行span不换行 divdiv 标签独占一行/div
spanspan 标签不换行/span2.有语义的布局标签 五、字符实体 六、综合案例
1.体育新闻列表 ulliimg src./images/1.jpg alth3主帅安东尼奥回西班牙休假 国青抵达海口进行隔离/h3/liliimg src./images/2.jpg alth3梅州主帅申花有强有力的教练组 球员体能水平高/h3/liliimg src./images/3.jpg alth3马德兴:00后球员将首登亚洲舞台 调整心态才务实/h3/li
/ul2.注册信息 h1注册信息/h1
form action!-- 表单控件 --!-- 个人信息 --h2个人信息/h2label姓名/labelinput typetext placeholder请输入真实姓名brbrlabel密码/labelinput typepassword placeholder请输入密码brbrlabel确认密码/labelinput typepassword placeholder请输入确认密码brbrlabel性别/labellabelinput typeradio namegender 男/labellabelinput typeradio namegender checked 女/labelbrbrlabel居住城市/labelselectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption武汉/option/select!-- 教育经历 --h2教育经历/h2label最高学历/labelselectoption博士/optionoption硕士/optionoption本科/optionoption大专/option/selectbrbrlabel学校名称/labelinput typetextbrbrlabel所学专业/labelinput typetextbrbrlabel在校时间/labelselectoption2015/optionoption2016/optionoption2017/optionoption2018/option/select--selectoption2019/optionoption2020/optionoption2021/optionoption2022/option/select!-- 工作经历 --h2工作经历/h2label公司名称/labelinput typetextbrbrlabel工作描述/labelbrtextarea/textareabrbr!-- 协议 和 按钮 --input typecheckboxlabel已阅读并同意以下协议/labelullia href#《用户服务协议》/a/lilia href#《隐私政策》/a/li/ulbrbrbutton免费注册/buttonbutton typereset重新填写/button
/form
