怎么建设国际网站首页,潍坊seo教程,crm客户管理系统哪个好,北京网站制作设计公司排名day02#xff1a;列表、表格、表单 目标#xff1a;掌握嵌套关系标签的写法#xff0c;使用列表标签布局网页 01-列表
作用#xff1a;布局内容排列整齐的区域。
列表分类#xff1a;无序列表、有序列表、定义列表。
无序列表
作用#xff1a;布局排列整齐的不需要规…day02列表、表格、表单 目标掌握嵌套关系标签的写法使用列表标签布局网页 01-列表
作用布局内容排列整齐的区域。
列表分类无序列表、有序列表、定义列表。
无序列表
作用布局排列整齐的不需要规定顺序的区域。
标签ul 嵌套 liul 是无序列表li 是列表条目。
ulli第一项/lili第二项/lili第三项/li……
/ul注意事项 ul 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 有序列表
作用布局排列整齐的需要规定顺序的区域。
标签ol 嵌套 liol 是有序列表li 是列表条目。
olli第一项/lili第二项/lili第三项/li……
/ol注意事项 ol 标签里面只能包裹 li 标签li 标签里面可以包裹任何内容 定义列表
标签dl 嵌套 dt 和 dddl 是定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情。
dldt列表标题/dtdd列表描述 / 详情/dd……
/dl[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gitPgBTm-1691943792191)(assets/1680315652403.png)] 注意事项 dl 里面只能包含dt 和 dddt 和 dd 里面可以包含任何内容 02-表格
网页中的表格与 Excel 表格类似用来展示数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kTR3hhUn-1691943792192)(assets/1680315690740.png)]
基本使用
标签table 嵌套 trtr 嵌套 td / th。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVAoebl8-1691943792193)(assets/1680315704565.png)] 提示在网页中表格默认没有边框线使用 border 属性可以为表格添加边框线。 table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr
/table表格结构标签-了解
作用用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWByV2CW-1691943792193)(assets/1680315774950.png)] 提示表格结构标签可以省略。 合并单元格
作用将多个单元格合并成一个单元格以合并同类信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQmLCUkx-1691943792194)(assets/1680315821325.png)]
合并单元格的步骤
明确合并的目标保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 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。 03-表单
作用收集用户信息。
使用场景
登录页面注册页面搜索区域
input 标签
input 标签 type 属性值不同则功能不同。
input type... [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCFLkAB3-1691943792194)(assets/1680315984539.png)]
input 标签占位文本
占位文本提示信息文本框和密码框都可以使用。
input type... placeholder提示信息单选框
常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gInBBum1-1691943792195)(assets/1680316056402.png)]
input typeradio namegender checked 男
input typeradio namegender 女提示name 属性值自定义。 上传文件
默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。
input typefile multiple多选框
多选框也叫复选框默认选中checked。
input typecheckbox checked 敲前端代码下拉菜单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFPuLpUp-1691943792195)(assets/1680316175031.png)]
标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option
/select默认显示第一项selected 属性实现默认选中功能。 文本域
作用多行输入文本的表单控件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PLhfDBex-1691943792196)(assets/1680316238194.png)]
textarea默认提示文字/textarea注意点 实际开发中使用 CSS 设置 文本域的尺寸实际开发中一般禁用右下角的拖拽功能 label 标签
作用网页中某个标签的说明文本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wb6685jK-1691943792196)(assets/1680316296894.png)]
经验用 label 标签绑定文字和表单控件的关系增大表单控件的点击范围。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-riCeZTlK-1691943792197)(assets/1680316314721.png)]
写法一 label 标签只包裹内容不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman男/label写法二使用 label 标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label提示支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 按钮
button type按钮/button[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DekiPIN7-1691943792197)(assets/1680316426088.png)]
!-- form 表单区域 --
!-- action 发送数据的地址 --
form action用户名input typetextbrbr密码input typepasswordbrbr!-- 如果省略 type 属性功能是 提交 --button typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton普通按钮/button
/form提示按钮需配合 form 标签表单区域才能实现对应的功能。 04-语义化
无语义的布局标签
作用布局网页划分网页区域摆放内容
div独占一行span不换行
divdiv 标签独占一行/div
spanspan 标签不换行/span有语义的布局标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJSCuagY-1691943792198)(assets/1680316535685.png)]
05-字符实体
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbuik9fo-1691943792198)(assets/1680316551064.png)]
06-综合案例一-体育新闻列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4VVVdsf-1691943792198)(assets/1680316581559.png)]
ulliimg src./images/1.jpg alth3主帅安东尼奥回西班牙休假 国青抵达海口进行隔离/h3/liliimg src./images/2.jpg alth3梅州主帅申花有强有力的教练组 球员体能水平高/h3/liliimg src./images/3.jpg alth3马德兴:00后球员将首登亚洲舞台 调整心态才务实/h3/li
/ul07-综合案例二-注册信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkttOKQW-1691943792199)(assets/1680316627956.png)]
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
