如何建设公司网站,网站建设教程平台,企业解决方案公司排名,专业定制网站建设团队html进阶
列表、表格、表单 目标#xff1a;掌握嵌套关系标签的写法#xff0c;使用列表标签布局网页 01-列表
作用#xff1a;布局内容排列整齐的区域。
列表分类#xff1a;无序列表、有序列表、定义列表。
无序列表
作用#xff1a;布局排列整齐的不需要规定顺序的…html进阶
列表、表格、表单 目标掌握嵌套关系标签的写法使用列表标签布局网页 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 注意事项 dl 里面只能包含dt 和 dd dt 和 dd 里面可以包含任何内容 02-表格
网页中的表格与 Excel 表格类似用来展示数据。 基本使用
标签table 嵌套 trtr 嵌套 td / th。 提示在网页中表格默认没有边框线使用 border 属性可以为表格添加边框线。 table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd199/td/trtr/td td100td李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr
/table
表格结构标签-了解
作用用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。
caption是表格的标题,双标签.使用表格时注意加上. 提示表格结构标签可以省略。 合并单元格
作用将多个单元格合并成一个单元格以合并同类信息。 合并单元格的步骤 明确合并的目标 保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 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... input 标签占位文本
占位文本提示信息文本框和密码框都可以使用。
input type... placeholder提示信息
单选框
常用属性 input typeradio namegender checked 男
input typeradio namegender 女 提示name 属性值自定义。 上传文件
默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。
input typefile multiple
多选框
多选框也叫复选框默认选中checked。
input typecheckbox checked 敲前端代码
下拉菜单 标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option
/select 默认显示第一项selected 属性实现默认选中功能。 文本域
作用多行输入文本的表单控件。 textarea默认提示文字/textarea 注意点 实际开发中使用 CSS 设置 文本域的尺寸 实际开发中一般禁用右下角的拖拽功能 label 标签
作用网页中某个标签的说明文本。 经验用 label 标签绑定文字和表单控件的关系增大表单控件的点击范围。 写法一 label 标签只包裹内容不包裹表单控件 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman男/label 写法二使用 label 标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label 提示支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 按钮
button type按钮/button !-- 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
有语义的布局标签 05-字符实体 06-综合案例一-体育新闻列表 ulliimg src./images/1.jpg alth3主帅安东尼奥回西班牙休假 国青抵达海口进行隔离/h3/liliimg src./images/2.jpg alth3梅州主帅申花有强有力的教练组 球员体能水平高/h3/liliimg src./images/3.jpg alth3马德兴:00后球员将首登亚洲舞台 调整心态才务实/h3/li
/ul
07-综合案例二-注册信息 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
